make-a-copy-popup

Feature #13988

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>

diff --git a/src/components/make-a-copy/make-a-copy.tsx b/src/components/make-a-copy/make-a-copy.tsx
new file mode 100644 (file)
index 0000000..58fd803
--- /dev/null
+++ b/src/components/make-a-copy/make-a-copy.tsx
@@ -0,0 +1,50 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+import * as React from "react";
+import { Field, InjectedFormProps, WrappedFieldProps } from "redux-form";
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress } from "@material-ui/core";
+import { WithDialogProps } from "~/store/dialog/with-dialog";
+import { ProjectTreePicker } from "~/views-components/project-tree-picker/project-tree-picker";
+import { MAKE_A_COPY_VALIDATION, COPY_NAME_VALIDATION } from "~/validators/validators";
+import { TextField } from '~/components/text-field/text-field';
+export const MakeACopyDialog = (props: WithDialogProps<string> & InjectedFormProps<{ name: string }>) =>
+    <form>
+        <Dialog open={props.open}
+            disableBackdropClick={true}
+            disableEscapeKeyDown={true}>
+            <DialogTitle>Make a copy</DialogTitle>
+            <DialogContent>
+                <Field
+                    name="copyName"
+                    component={TextField}
+                    validate={COPY_NAME_VALIDATION}
+                    label="Enter a new name for the copy" />
+                <Field
+                    name="projectUuid"
+                    component={Picker}
+                    validate={MAKE_A_COPY_VALIDATION} />
+            </DialogContent>
+            <DialogActions>
+                <Button
+                    variant='flat'
+                    color='primary'
+                    disabled={props.submitting}
+                    onClick={props.closeDialog}>
+                    Cancel
+                    </Button>
+                <Button
+                    variant='contained'
+                    color='primary'
+                    type='submit'
+                    onClick={props.handleSubmit}
+                    disabled={props.pristine || props.invalid || props.submitting}>
+                    {props.submitting ? <CircularProgress size={20} /> : 'Copy'}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    </form>;
+const Picker = (props: WrappedFieldProps) =>
+    <div style={{ width: '400px', height: '144px', display: 'flex', flexDirection: 'column' }}>
+        <ProjectTreePicker onChange={projectUuid => props.input.onChange(projectUuid)} />
+    </div>; 
\ No newline at end of file

diff --git a/src/validators/validators.tsx b/src/validators/validators.tsx
index edd07822942ace10ac40ae68e79b9222422dbe55..f9dd354ea52f5bb9bb5dd26567be054b09211ab8 100644 (file)
--- a/src/validators/validators.tsx
+++ b/src/validators/validators.tsx
@@ -13,4 +13,7 @@ export const PROJECT_DESCRIPTION_VALIDATION = [maxLength(255)];
 
 export const COLLECTION_NAME_VALIDATION = [require, maxLength(255)];
 export const COLLECTION_DESCRIPTION_VALIDATION = [maxLength(255)];
-export const COLLECTION_PROJECT_VALIDATION = [require];
\ No newline at end of file
+export const COLLECTION_PROJECT_VALIDATION = [require];
+
+export const COPY_NAME_VALIDATION = [require, maxLength(255)];
+export const MAKE_A_COPY_VALIDATION = [require, maxLength(255)];
\ No newline at end of file

diff --git a/src/views-components/context-menu/action-sets/collection-action-set.ts b/src/views-components/context-menu/action-sets/collection-action-set.ts
index 4561f9d308879b981c8a9a72dc32c29dc701ddcc..e2b579cdef4787d3ef8e5633a7a70791582940f2 100644 (file)
--- a/src/views-components/context-menu/action-sets/collection-action-set.ts
+++ b/src/views-components/context-menu/action-sets/collection-action-set.ts
@@ -8,6 +8,7 @@ import { toggleFavorite } from "~/store/favorites/favorites-actions";
 import { RenameIcon, ShareIcon, MoveToIcon, CopyIcon, DetailsIcon, ProvenanceGraphIcon, AdvancedIcon, RemoveIcon } from "~/components/icon/icon";
 import { openUpdater } from "~/store/collections/updater/collection-updater-action";
 import { favoritePanelActions } from "~/store/favorite-panel/favorite-panel-action";
+import { openMakeACopyDialog } from "~/views-components/make-a-copy-dialog/make-a-copy-dialog";
 
 export const collectionActionSet: ContextMenuActionSet = [[
     {
@@ -42,9 +43,7 @@ export const collectionActionSet: ContextMenuActionSet = [[
     {
         icon: CopyIcon,
         name: "Copy to project",
-        execute: (dispatch, resource) => {
-            // add code
-        }
+        execute: dispatch => dispatch<any>(openMakeACopyDialog())
     },
     {
         icon: DetailsIcon,

diff --git a/src/views-components/context-menu/action-sets/collection-resource-action-set.ts b/src/views-components/context-menu/action-sets/collection-resource-action-set.ts
index 7d8364bd70ea22b4c29bb69c5c11b95699f6765b..846e3c92f4089bbe2e1687fb1b783ef861d285cb 100644 (file)
--- a/src/views-components/context-menu/action-sets/collection-resource-action-set.ts
+++ b/src/views-components/context-menu/action-sets/collection-resource-action-set.ts
@@ -8,6 +8,7 @@ import { toggleFavorite } from "~/store/favorites/favorites-actions";
 import { RenameIcon, ShareIcon, MoveToIcon, CopyIcon, DetailsIcon, RemoveIcon } from "~/components/icon/icon";
 import { openUpdater } from "~/store/collections/updater/collection-updater-action";
 import { favoritePanelActions } from "~/store/favorite-panel/favorite-panel-action";
+import { openMakeACopyDialog } from "~/views-components/make-a-copy-dialog/make-a-copy-dialog";
 
 export const collectionResourceActionSet: ContextMenuActionSet = [[
     {
@@ -42,9 +43,7 @@ export const collectionResourceActionSet: ContextMenuActionSet = [[
     {
         icon: CopyIcon,
         name: "Copy to project",
-        execute: (dispatch, resource) => {
-            // add code
-        }
+        execute: dispatch => dispatch<any>(openMakeACopyDialog())
     },
     {
         icon: DetailsIcon,

diff --git a/src/views-components/context-menu/action-sets/project-action-set.ts b/src/views-components/context-menu/action-sets/project-action-set.ts
index 1b000c88fcee77ec2c39a844d3476001fca725a7..5903d87fb80e3e05993e4cb58a0992d052d0d276 100644 (file)
--- a/src/views-components/context-menu/action-sets/project-action-set.ts
+++ b/src/views-components/context-menu/action-sets/project-action-set.ts
@@ -6,11 +6,12 @@ import { reset, initialize } from "redux-form";
 
 import { ContextMenuActionSet } from "../context-menu-action-set";
 import { projectActions, PROJECT_FORM_NAME } from "~/store/project/project-action";
-import { NewProjectIcon, RenameIcon } from "~/components/icon/icon";
+import { NewProjectIcon, RenameIcon, CopyIcon } from "~/components/icon/icon";
 import { ToggleFavoriteAction } from "../actions/favorite-action";
 import { toggleFavorite } from "~/store/favorites/favorites-actions";
 import { favoritePanelActions } from "~/store/favorite-panel/favorite-panel-action";
 import { PROJECT_CREATE_DIALOG } from "../../dialog-create/dialog-project-create";
+import { openMakeACopyDialog } from "~/views-components/make-a-copy-dialog/make-a-copy-dialog";
 
 export const projectActionSet: ContextMenuActionSet = [[
     {
@@ -36,5 +37,10 @@ export const projectActionSet: ContextMenuActionSet = [[
                 dispatch<any>(favoritePanelActions.REQUEST_ITEMS());
             });
         }
-    }
+    },
+    {
+        icon: CopyIcon,
+        name: "Copy to project",
+        execute: dispatch => dispatch<any>(openMakeACopyDialog())
+    },
 ]];

diff --git a/src/views-components/make-a-copy-dialog/make-a-copy-dialog.tsx b/src/views-components/make-a-copy-dialog/make-a-copy-dialog.tsx
new file mode 100644 (file)
index 0000000..9861173
--- /dev/null
+++ b/src/views-components/make-a-copy-dialog/make-a-copy-dialog.tsx
@@ -0,0 +1,24 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+import { Dispatch, compose } from "redux";
+import { withDialog } from "../../store/dialog/with-dialog";
+import { dialogActions } from "../../store/dialog/dialog-actions";
+import { MakeACopyDialog } from "../../components/make-a-copy/make-a-copy";
+import { reduxForm, startSubmit, stopSubmit } from "redux-form";
+
+ export const MAKE_A_COPY_DIALOG = 'makeACopyDialog';
+ export const openMakeACopyDialog = () =>
+    (dispatch: Dispatch) => {
+        dispatch(dialogActions.OPEN_DIALOG({ id: MAKE_A_COPY_DIALOG, data: {} }));
+    };
+ export const MakeACopyToProjectDialog = compose(
+    withDialog(MAKE_A_COPY_DIALOG),
+    reduxForm({
+        form: MAKE_A_COPY_DIALOG,
+        onSubmit: (data, dispatch) => {
+            dispatch(startSubmit(MAKE_A_COPY_DIALOG));
+            setTimeout(() => dispatch(stopSubmit(MAKE_A_COPY_DIALOG, { name: 'Invalid path' })), 2000);
+        }
+    })
+)(MakeACopyDialog);
\ No newline at end of file

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index f23a9784ad4846ea647cb3350d0b149f0c3f2756..b16d4b255931467e14c2ab3076ad4db8b889c494 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -50,6 +50,7 @@ import { DialogCollectionCreateWithSelectedFile } from '~/views-components/creat
 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 { MakeACopyToProjectDialog } from '~/views-components/make-a-copy-dialog/make-a-copy-dialog';
 
 const DRAWER_WITDH = 240;
 const APP_BAR_HEIGHT = 100;
@@ -245,6 +246,7 @@ export const Workbench = withStyles(styles)(
                         <RenameFileDialog />
                         <DialogCollectionCreateWithSelectedFile />
                         <FileRemoveDialog />
+                        <MakeACopyToProjectDialog />
                         <MultipleFilesRemoveDialog />
                         <UpdateCollectionDialog />
                         <UploadCollectionFilesDialog />