Extract collection form components

Feature #14014

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

diff --git a/src/store/collections/creator/collection-creator-action.ts b/src/store/collections/creator/collection-creator-action.ts
index 5243a610a28c381980b79e78a64a3c0ed8944e13..8c35ffa8336bd30a5eae76815ec305835c352171 100644 (file)
--- a/src/store/collections/creator/collection-creator-action.ts
+++ b/src/store/collections/creator/collection-creator-action.ts
@@ -21,6 +21,8 @@ export const collectionCreateActions = unionize({
         value: 'payload'
     });
 
+export type CollectionCreateAction = UnionOf<typeof collectionCreateActions>;
+
 export const createCollection = (collection: Partial<CollectionResource>, files: File[]) =>
     async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
         const { ownerUuid } = getState().collections.creator;
@@ -33,4 +35,3 @@ export const createCollection = (collection: Partial<CollectionResource>, files:
         return newCollection;
     };
 
-export type CollectionCreateAction = UnionOf<typeof collectionCreateActions>;

diff --git a/src/views-components/collection-partial-copy-dialog/collection-partial-copy-dialog.tsx b/src/views-components/collection-partial-copy-dialog/collection-partial-copy-dialog.tsx
new file mode 100644 (file)
index 0000000..0105ad2
--- /dev/null
+++ b/src/views-components/collection-partial-copy-dialog/collection-partial-copy-dialog.tsx
@@ -0,0 +1,30 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { Dispatch, compose } from "redux";
+import { reduxForm, reset, startSubmit, stopSubmit } from "redux-form";
+import { withDialog } from "~/store/dialog/with-dialog";
+import { dialogActions } from "~/store/dialog/dialog-actions";
+import { loadProjectTreePickerProjects } from "../project-tree-picker/project-tree-picker";
+import { CollectionPartialCopyFormDialog } from "~/views-components/form-dialog/collection-form-dialog";
+
+export const COLLECTION_PARTIAL_COPY = 'COLLECTION_PARTIAL_COPY';
+
+export const openCollectionPartialCopyDialog = () =>
+    (dispatch: Dispatch) => {
+        dispatch(reset(COLLECTION_PARTIAL_COPY));
+        dispatch<any>(loadProjectTreePickerProjects(''));
+        dispatch(dialogActions.OPEN_DIALOG({ id: COLLECTION_PARTIAL_COPY, data: {} }));
+    };
+
+
+export const CollectionPartialCopyDialog = compose(
+    withDialog(COLLECTION_PARTIAL_COPY),
+    reduxForm({
+        form: COLLECTION_PARTIAL_COPY,
+        onSubmit: (data, dispatch) => {
+            dispatch(startSubmit(COLLECTION_PARTIAL_COPY));
+            setTimeout(() => dispatch(stopSubmit(COLLECTION_PARTIAL_COPY, { name: 'Invalid name' })), 2000);
+        }
+    }))(CollectionPartialCopyFormDialog);

diff --git a/src/views-components/context-menu/action-sets/collection-files-action-set.ts b/src/views-components/context-menu/action-sets/collection-files-action-set.ts
index 653da011f7ed03153cfd3a360c192bf0b36d146c..69815efd79058f4ca658f56561ab8e48246a289e 100644 (file)
--- a/src/views-components/context-menu/action-sets/collection-files-action-set.ts
+++ b/src/views-components/context-menu/action-sets/collection-files-action-set.ts
@@ -4,7 +4,7 @@
 
 import { ContextMenuActionSet } from "../context-menu-action-set";
 import { collectionPanelFilesAction, openMultipleFilesRemoveDialog } from "~/store/collection-panel/collection-panel-files/collection-panel-files-actions";
-import { createCollectionWithSelected } from "~/views-components/create-collection-dialog-with-selected/create-collection-dialog-with-selected";
+import { openCollectionPartialCopyDialog } from "~/views-components/collection-partial-copy-dialog/collection-partial-copy-dialog";
 
 
 export const collectionFilesActionSet: ContextMenuActionSet = [[{
@@ -30,6 +30,6 @@ export const collectionFilesActionSet: ContextMenuActionSet = [[{
 }, {
     name: "Create a new collection with selected",
     execute: (dispatch) => {
-        dispatch<any>(createCollectionWithSelected());
+        dispatch<any>(openCollectionPartialCopyDialog());
     }
 }]];

diff --git a/src/views-components/create-collection-dialog-with-selected/create-collection-dialog-with-selected.tsx b/src/views-components/create-collection-dialog-with-selected/create-collection-dialog-with-selected.tsx
deleted file mode 100644 (file)
index 5346402..0000000
--- a/src/views-components/create-collection-dialog-with-selected/create-collection-dialog-with-selected.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import { Dispatch, compose } from "redux";
-import { reduxForm, reset, startSubmit, stopSubmit } from "redux-form";
-import { withDialog } from "~/store/dialog/with-dialog";
-import { dialogActions } from "~/store/dialog/dialog-actions";
-import { DialogCollectionCreateWithSelected } from "../dialog-create/dialog-collection-create-selected";
-import { loadProjectTreePickerProjects } from "../project-tree-picker/project-tree-picker";
-
-export const DIALOG_COLLECTION_CREATE_WITH_SELECTED = 'dialogCollectionCreateWithSelected';
-
-export const createCollectionWithSelected = () =>
-    (dispatch: Dispatch) => {
-        dispatch(reset(DIALOG_COLLECTION_CREATE_WITH_SELECTED));
-        dispatch<any>(loadProjectTreePickerProjects(''));
-        dispatch(dialogActions.OPEN_DIALOG({ id: DIALOG_COLLECTION_CREATE_WITH_SELECTED, data: {} }));
-    };
-
-
-export const DialogCollectionCreateWithSelectedFile = compose(
-    withDialog(DIALOG_COLLECTION_CREATE_WITH_SELECTED),
-    reduxForm({
-        form: DIALOG_COLLECTION_CREATE_WITH_SELECTED,
-        onSubmit: (data, dispatch) => {
-            dispatch(startSubmit(DIALOG_COLLECTION_CREATE_WITH_SELECTED));
-            setTimeout(() => dispatch(stopSubmit(DIALOG_COLLECTION_CREATE_WITH_SELECTED, { name: 'Invalid name' })), 2000);
-        }
-    }))(DialogCollectionCreateWithSelected);

diff --git a/src/views-components/dialog-create/dialog-collection-create-selected.tsx b/src/views-components/form-dialog/collection-form-dialog.tsx
similarity index 51%
rename from src/views-components/dialog-create/dialog-collection-create-selected.tsx
rename to src/views-components/form-dialog/collection-form-dialog.tsx
index 70837471ffc6e23d8b52789df98b21bcd3a3795f..937558cc9ae2e88188b5385058418b06f73bb61e 100644 (file)
--- a/src/views-components/dialog-create/dialog-collection-create-selected.tsx
+++ b/src/views-components/form-dialog/collection-form-dialog.tsx
@@ -10,34 +10,43 @@ import { COLLECTION_NAME_VALIDATION, COLLECTION_DESCRIPTION_VALIDATION, COLLECTI
 import { ProjectTreePicker } from "../project-tree-picker/project-tree-picker";
 import { FormDialog } from '../../components/form-dialog/form-dialog';
 
-export const DialogCollectionCreateWithSelected = (props: WithDialogProps<string> & InjectedFormProps<{ name: string }>) =>
+export const CollectionPartialCopyFormDialog = (props: WithDialogProps<string> & InjectedFormProps<{ name: string }>) =>
     <FormDialog
         dialogTitle='Create a collection'
-        formFields={FormFields}
+        formFields={CollectionPartialCopyFields}
         submitLabel='Create a collection'
         {...props}
     />;
 
-const FormFields = () => <div style={{ display: 'flex' }}>
+export const CollectionPartialCopyFields = () => <div style={{ display: 'flex' }}>
     <div>
-        <Field
-            name='name'
-            component={TextField}
-            validate={COLLECTION_NAME_VALIDATION}
-            label="Collection Name" />
-        <Field
-            name='description'
-            component={TextField}
-            validate={COLLECTION_DESCRIPTION_VALIDATION}
-            label="Description - optional" />
+        <CollectionNameField />
+        <CollectionDescriptionField />
     </div>
+    <CollectionProjectPickerField />
+</div>;
+
+export const CollectionNameField = () =>
+    <Field
+        name='name'
+        component={TextField}
+        validate={COLLECTION_NAME_VALIDATION}
+        label="Collection Name" />;
+
+export const CollectionDescriptionField = () =>
+    <Field
+        name='description'
+        component={TextField}
+        validate={COLLECTION_DESCRIPTION_VALIDATION}
+        label="Description - optional" />;
+
+export const CollectionProjectPickerField = () =>
     <Field
         name="projectUuid"
-        component={Picker}
-        validate={COLLECTION_PROJECT_VALIDATION} />
-</div>;
+        component={ProjectPicker}
+        validate={COLLECTION_PROJECT_VALIDATION} />;
 
-const Picker = (props: WrappedFieldProps) =>
+const ProjectPicker = (props: WrappedFieldProps) =>
     <div style={{ width: '400px', height: '144px', display: 'flex', flexDirection: 'column' }}>
         <ProjectTreePicker onChange={projectUuid => props.input.onChange(projectUuid)} />
     </div>;

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 01a92ab4da840004a39c4dbef847a557c743a143..71e5a03b7bfd2231c18492e227b041b52d951012 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -47,10 +47,10 @@ import { AuthService } from "~/services/auth-service/auth-service";
 import { RenameFileDialog } from '~/views-components/rename-file-dialog/rename-file-dialog';
 import { FileRemoveDialog } from '~/views-components/file-remove-dialog/file-remove-dialog';
 import { MultipleFilesRemoveDialog } from '~/views-components/file-remove-dialog/multiple-files-remove-dialog';
-import { DialogCollectionCreateWithSelectedFile } from '~/views-components/create-collection-dialog-with-selected/create-collection-dialog-with-selected';
 import { COLLECTION_CREATE_DIALOG } from '~/views-components/dialog-create/dialog-collection-create';
 import { PROJECT_CREATE_DIALOG } from '~/views-components/dialog-create/dialog-project-create';
 import { UploadCollectionFilesDialog } from '~/views-components/upload-collection-files-dialog/upload-collection-files-dialog';
+import { CollectionPartialCopyDialog } from '../../views-components/collection-partial-copy-dialog/collection-partial-copy-dialog';
 
 const DRAWER_WITDH = 240;
 const APP_BAR_HEIGHT = 100;
@@ -243,7 +243,7 @@ export const Workbench = withStyles(styles)(
                         <CreateProjectDialog />
                         <CreateCollectionDialog />
                         <RenameFileDialog />
-                        <DialogCollectionCreateWithSelectedFile />
+                        <CollectionPartialCopyDialog />
                         <FileRemoveDialog />
                         <MultipleFilesRemoveDialog />
                         <UpdateCollectionDialog />