Merge branch '14470-replace-tree-picker-in-create-collection-dialog' into 14470-repla...

refs #14470
14470

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/store/collections/collection-move-actions.ts b/src/store/collections/collection-move-actions.ts
index 8be625099fecccf1e40066106c04b70c44c70031..770eed1a7872f9f3c30ec65f5f091f4ad2a329fb 100644 (file)
--- a/src/store/collections/collection-move-actions.ts
+++ b/src/store/collections/collection-move-actions.ts
@@ -13,7 +13,7 @@ import { projectPanelActions } from '~/store/project-panel/project-panel-action'
 import { MoveToFormDialogData } from '~/store/move-to-dialog/move-to-dialog';
 import { resetPickerProjectTree } from '~/store/project-tree-picker/project-tree-picker-actions';
 import { progressIndicatorActions } from "~/store/progress-indicator/progress-indicator-actions";
-import { initProjectsTreePicker } from '../tree-picker/tree-picker-actions';
+import { initProjectsTreePicker } from '~/store/tree-picker/tree-picker-actions';
 
 export const COLLECTION_MOVE_FORM_NAME = 'collectionMoveFormName';
 

diff --git a/src/store/collections/collection-partial-copy-actions.ts b/src/store/collections/collection-partial-copy-actions.ts
index 4dac9c7d7e5ce55d4246c885dcb7a707b54e7957..b9ada5ee01fa1014bc1ef2fc5605c0c94ade9ec9 100644 (file)
--- a/src/store/collections/collection-partial-copy-actions.ts
+++ b/src/store/collections/collection-partial-copy-actions.ts
@@ -12,6 +12,7 @@ import { filterCollectionFilesBySelection } from '../collection-panel/collection
 import { snackbarActions, SnackbarKind } from '~/store/snackbar/snackbar-actions';
 import { getCommonResourceServiceError, CommonResourceServiceError } from '~/services/common-service/common-resource-service';
 import { progressIndicatorActions } from "~/store/progress-indicator/progress-indicator-actions";
+import { initProjectsTreePicker } from '~/store/tree-picker/tree-picker-actions';
 
 export const COLLECTION_PARTIAL_COPY_FORM_NAME = 'COLLECTION_PARTIAL_COPY_DIALOG';
 
@@ -32,6 +33,7 @@ export const openCollectionPartialCopyDialog = () =>
             };
             dispatch(initialize(COLLECTION_PARTIAL_COPY_FORM_NAME, initialData));
             dispatch<any>(resetPickerProjectTree());
+            dispatch<any>(initProjectsTreePicker(COLLECTION_PARTIAL_COPY_FORM_NAME));
             dispatch(dialogActions.OPEN_DIALOG({ id: COLLECTION_PARTIAL_COPY_FORM_NAME, data: {} }));
         }
     };

diff --git a/src/store/projects/project-move-actions.ts b/src/store/projects/project-move-actions.ts
index 9405597b2f2846f912d2a5fc5c235af11d517779..cacd49e68f8f8d5699d807bf1c2df286863719c6 100644 (file)
--- a/src/store/projects/project-move-actions.ts
+++ b/src/store/projects/project-move-actions.ts
@@ -10,7 +10,7 @@ import { RootState } from '~/store/store';
 import { getCommonResourceServiceError, CommonResourceServiceError } from "~/services/common-service/common-resource-service";
 import { MoveToFormDialogData } from '~/store/move-to-dialog/move-to-dialog';
 import { resetPickerProjectTree } from '~/store/project-tree-picker/project-tree-picker-actions';
-import { initProjectsTreePicker } from '../tree-picker/tree-picker-actions';
+import { initProjectsTreePicker } from '~/store/tree-picker/tree-picker-actions';
 
 export const PROJECT_MOVE_FORM_NAME = 'projectMoveFormName';
 

diff --git a/src/store/tree-picker/picker-id.tsx b/src/store/tree-picker/picker-id.tsx
index 562195455655ee98ae717f8a46475075006718d3..3907ba8e4b675d2d82ae677549702111ac0cdd05 100644 (file)
--- a/src/store/tree-picker/picker-id.tsx
+++ b/src/store/tree-picker/picker-id.tsx
@@ -4,9 +4,13 @@
 
 import * as React from 'react';
 
+export interface PickerIdProp {
+    pickerId: string;
+}
+
 export const pickerId =
     (id: string) =>
-        <P extends { pickerId: string }>(Component: React.ComponentType<P>) =>
+        <P extends PickerIdProp>(Component: React.ComponentType<P>) =>
             (props: P) =>
                 <Component {...props} pickerId={id} />;
                 
\ No newline at end of file

diff --git a/src/views-components/dialog-copy/dialog-collection-partial-copy.tsx b/src/views-components/dialog-copy/dialog-collection-partial-copy.tsx
index 7c335a358c9048cff8af1b136143252a009aad3b..095c2b9ca97cec2943d183094c94ffb09f61651e 100644 (file)
--- a/src/views-components/dialog-copy/dialog-collection-partial-copy.tsx
+++ b/src/views-components/dialog-copy/dialog-collection-partial-copy.tsx
@@ -3,24 +3,29 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from "react";
+import { memoize } from "lodash/fp";
 import { FormDialog } from '~/components/form-dialog/form-dialog';
 import { CollectionNameField, CollectionDescriptionField, CollectionProjectPickerField } from '~/views-components/form-fields/collection-form-fields';
 import { WithDialogProps } from '~/store/dialog/with-dialog';
 import { InjectedFormProps } from 'redux-form';
 import { CollectionPartialCopyFormData } from '~/store/collections/collection-partial-copy-actions';
+import { PickerIdProp } from "~/store/tree-picker/picker-id";
 
 type DialogCollectionPartialCopyProps = WithDialogProps<string> & InjectedFormProps<CollectionPartialCopyFormData>;
 
-export const DialogCollectionPartialCopy = (props: DialogCollectionPartialCopyProps) =>
+export const DialogCollectionPartialCopy = (props: DialogCollectionPartialCopyProps & PickerIdProp) =>
     <FormDialog
         dialogTitle='Create a collection'
-        formFields={CollectionPartialCopyFields}
+        formFields={CollectionPartialCopyFields(props.pickerId)}
         submitLabel='Create a collection'
         {...props}
     />;
 
-export const CollectionPartialCopyFields = () => <div>
-    <CollectionNameField />
-    <CollectionDescriptionField />
-    <CollectionProjectPickerField />
-</div>;
+export const CollectionPartialCopyFields = memoize(
+    (pickerId: string) =>
+        () =>
+            <div>
+                <CollectionNameField />
+                <CollectionDescriptionField />
+                <CollectionProjectPickerField {...{ pickerId }} />
+            </div>);

diff --git a/src/views-components/dialog-copy/dialog-copy.tsx b/src/views-components/dialog-copy/dialog-copy.tsx
index 24e91dae81bb6f6f38457e386ddedcce2bef26a9..de8a321cf695183ef17b435887469c183bce12f2 100644 (file)
--- a/src/views-components/dialog-copy/dialog-copy.tsx
+++ b/src/views-components/dialog-copy/dialog-copy.tsx
@@ -11,10 +11,11 @@ import { ProjectTreePickerField } from '~/views-components/project-tree-picker/p
 import { COPY_NAME_VALIDATION, COPY_FILE_VALIDATION } from '~/validators/validators';
 import { TextField } from "~/components/text-field/text-field";
 import { CopyFormDialogData } from '~/store/copy-dialog/copy-dialog';
+import { PickerIdProp } from '~/store/tree-picker/picker-id';
 
 type CopyFormDialogProps = WithDialogProps<string> & InjectedFormProps<CopyFormDialogData>;
 
-export const DialogCopy = (props: CopyFormDialogProps & { pickerId: string }) =>
+export const DialogCopy = (props: CopyFormDialogProps & PickerIdProp) =>
     <FormDialog
         dialogTitle='Make a copy'
         formFields={CopyDialogFields(props.pickerId)}

diff --git a/src/views-components/dialog-forms/partial-copy-collection-dialog.ts b/src/views-components/dialog-forms/partial-copy-collection-dialog.ts
index 16f8275e8fb57821c8ed2f4b8065c4b8c6c43eb9..37d928be1c18c0348c06a0e9133ab4b6d7d806d7 100644 (file)
--- a/src/views-components/dialog-forms/partial-copy-collection-dialog.ts
+++ b/src/views-components/dialog-forms/partial-copy-collection-dialog.ts
@@ -7,6 +7,7 @@ import { reduxForm } from 'redux-form';
 import { withDialog, } from '~/store/dialog/with-dialog';
 import { CollectionPartialCopyFormData, copyCollectionPartial, COLLECTION_PARTIAL_COPY_FORM_NAME } from '~/store/collections/collection-partial-copy-actions';
 import { DialogCollectionPartialCopy } from "~/views-components/dialog-copy/dialog-collection-partial-copy";
+import { pickerId } from "~/store/tree-picker/picker-id";
 
 
 export const PartialCopyCollectionDialog = compose(
@@ -16,4 +17,6 @@ export const PartialCopyCollectionDialog = compose(
         onSubmit: (data, dispatch) => {
             dispatch(copyCollectionPartial(data));
         }
-    }))(DialogCollectionPartialCopy);
\ No newline at end of file
+    }),
+    pickerId(COLLECTION_PARTIAL_COPY_FORM_NAME),
+)(DialogCollectionPartialCopy);
\ No newline at end of file

diff --git a/src/views-components/dialog-move/dialog-move-to.tsx b/src/views-components/dialog-move/dialog-move-to.tsx
index 129c59ff33c692b23cbc772fc3a5c58eed0c80ba..c962522f3cf8292853bd743d08cfe92f55c18d7d 100644 (file)
--- a/src/views-components/dialog-move/dialog-move-to.tsx
+++ b/src/views-components/dialog-move/dialog-move-to.tsx
@@ -10,8 +10,9 @@ import { FormDialog } from '~/components/form-dialog/form-dialog';
 import { ProjectTreePickerField } from '~/views-components/project-tree-picker/project-tree-picker';
 import { MOVE_TO_VALIDATION } from '~/validators/validators';
 import { MoveToFormDialogData } from '~/store/move-to-dialog/move-to-dialog';
+import { PickerIdProp } from "~/store/tree-picker/picker-id";
 
-export const DialogMoveTo = (props: WithDialogProps<string> & InjectedFormProps<MoveToFormDialogData> & { pickerId: string }) =>
+export const DialogMoveTo = (props: WithDialogProps<string> & InjectedFormProps<MoveToFormDialogData> & PickerIdProp) =>
     <FormDialog
         dialogTitle='Move to'
         formFields={MoveToDialogFields(props.pickerId)}

diff --git a/src/views-components/form-fields/collection-form-fields.tsx b/src/views-components/form-fields/collection-form-fields.tsx
index be5f93df6a52b401177f0fa12f27594e46abe2c4..2d2a7c80880b0fef31e428c46150fd504d506f95 100644 (file)
--- a/src/views-components/form-fields/collection-form-fields.tsx
+++ b/src/views-components/form-fields/collection-form-fields.tsx
@@ -6,7 +6,8 @@ import * as React from "react";
 import { Field, WrappedFieldProps } from "redux-form";
 import { TextField } from "~/components/text-field/text-field";
 import { COLLECTION_NAME_VALIDATION, COLLECTION_DESCRIPTION_VALIDATION, COLLECTION_PROJECT_VALIDATION } from "~/validators/validators";
-import { ProjectTreePicker } from "~/views-components/project-tree-picker/project-tree-picker";
+import { ProjectTreePicker, ProjectTreePickerField } from "~/views-components/project-tree-picker/project-tree-picker";
+import { PickerIdProp } from '../../store/tree-picker/picker-id';
 
 export const CollectionNameField = () =>
     <Field
@@ -23,13 +24,9 @@ export const CollectionDescriptionField = () =>
         validate={COLLECTION_DESCRIPTION_VALIDATION}
         label="Description - optional" />;
 
-export const CollectionProjectPickerField = () =>
+export const CollectionProjectPickerField = (props: PickerIdProp) =>
     <Field
         name="projectUuid"
-        component={ProjectPicker}
+        pickerId={props.pickerId}
+        component={ProjectTreePickerField}
         validate={COLLECTION_PROJECT_VALIDATION} />;
-
-const ProjectPicker = (props: WrappedFieldProps) =>
-    <div style={{ height: '144px', display: 'flex', flexDirection: 'column' }}>
-        <ProjectTreePicker onChange={projectUuid => props.input.onChange(projectUuid)} />
-    </div>;

diff --git a/src/views-components/project-tree-picker/project-tree-picker.tsx b/src/views-components/project-tree-picker/project-tree-picker.tsx
index 101fca08d1b87a652587f97463c82c6b772e0f98..bae5d59f07dd10a699e9aaaf51f21817202f8106 100644 (file)
--- a/src/views-components/project-tree-picker/project-tree-picker.tsx
+++ b/src/views-components/project-tree-picker/project-tree-picker.tsx
@@ -18,6 +18,7 @@ import { WrappedFieldProps } from 'redux-form';
 import { TreePickerId } from '~/models/tree';
 import { ProjectsTreePicker } from '~/views-components/projects-tree-picker/projects-tree-picker';
 import { ProjectsTreePickerItem } from '~/views-components/projects-tree-picker/generic-projects-tree-picker';
+import { PickerIdProp } from '~/store/tree-picker/picker-id';
 
 type ProjectTreePickerProps = Pick<TreePickerProps<ProjectResource>, 'onContextMenu' | 'toggleItemActive' | 'toggleItemOpen' | 'toggleItemSelection'>;
 
@@ -89,7 +90,7 @@ const renderTreeItem = (item: TreeItem<ProjectResource>) =>
         isActive={item.active}
         hasMargin={true} />;
 
-export const ProjectTreePickerField = (props: WrappedFieldProps & { pickerId: string }) =>
+export const ProjectTreePickerField = (props: WrappedFieldProps & PickerIdProp) =>
     <div style={{ height: '200px', display: 'flex', flexDirection: 'column' }}>
         <ProjectsTreePicker
             pickerId={props.pickerId}
@@ -102,6 +103,4 @@ export const ProjectTreePickerField = (props: WrappedFieldProps & { pickerId: st
 
 const handleChange = (props: WrappedFieldProps) =>
     (_: any, { id }: TreeItem<ProjectsTreePickerItem>) =>
-        props.input.value === id
-            ? props.input.onChange('')
-            : props.input.onChange(id);
+        props.input.onChange(id);