From: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>
Date: Tue, 7 Aug 2018 11:19:19 +0000 (+0200)
Subject: collection-create-with-selected-dialog
X-Git-Tag: 1.2.0~10^2~3^2
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/3b76fca64bbbcbce0fae0b1acaa5813b782dc2cb?hp=050a1314bfc30f07c2f871204ca8acd61bb892f9

collection-create-with-selected-dialog

Feature #13952

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

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 9b7bddf7..91fa2b00 100644
--- 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
@@ -5,6 +5,7 @@
 import { ContextMenuActionSet } from "../context-menu-action-set";
 import { collectionPanelFilesAction } from "../../../store/collection-panel/collection-panel-files/collection-panel-files-actions";
 import { openMultipleFilesRemoveDialog } from "../../file-remove-dialog/multiple-files-remove-dialog";
+import { createCollectionWithSelected } from "../../create-collection-dialog-with-selected/create-collection-dialog-with-selected";
 
 
 export const collectionFilesActionSet: ContextMenuActionSet = [[{
@@ -29,7 +30,7 @@ export const collectionFilesActionSet: ContextMenuActionSet = [[{
     }
 }, {
     name: "Create a new collection with selected",
-    execute: (dispatch, resource) => {
-        return;
+    execute: (dispatch) => {
+        dispatch<any>(createCollectionWithSelected());
     }
 }]];
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
new file mode 100644
index 00000000..ece06395
--- /dev/null
+++ b/src/views-components/create-collection-dialog-with-selected/create-collection-dialog-with-selected.tsx
@@ -0,0 +1,27 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { Dispatch } 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";
+
+export const DIALOG_COLLECTION_CREATE_WITH_SELECTED = 'dialogCollectionCreateWithSelected';
+
+export const createCollectionWithSelected = () =>
+    (dispatch: Dispatch) => {
+        dispatch(reset(DIALOG_COLLECTION_CREATE_WITH_SELECTED));
+        dispatch(dialogActions.OPEN_DIALOG({ id: DIALOG_COLLECTION_CREATE_WITH_SELECTED, data: {} }));
+    };
+
+export const [DialogCollectionCreateWithSelectedFile] = [DialogCollectionCreateWithSelected]
+    .map(withDialog(DIALOG_COLLECTION_CREATE_WITH_SELECTED))
+    .map(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);
+        }
+    }));
diff --git a/src/views-components/dialog-create/dialog-collection-create-selected.tsx b/src/views-components/dialog-create/dialog-collection-create-selected.tsx
new file mode 100644
index 00000000..591dd2cf
--- /dev/null
+++ b/src/views-components/dialog-create/dialog-collection-create-selected.tsx
@@ -0,0 +1,53 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import { InjectedFormProps, Field } from "redux-form";
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress } from "@material-ui/core";
+import { WithDialogProps } from "../../store/dialog/with-dialog";
+import { TextField } from "../../components/text-field/text-field";
+import { COLLECTION_NAME_VALIDATION, COLLECTION_DESCRIPTION_VALIDATION } from "../../validators/create-project/create-project-validator";
+
+export const DialogCollectionCreateWithSelected = (props: WithDialogProps<string> & InjectedFormProps<{ name: string }>) =>
+    <form>
+        <Dialog open={props.open}
+            disableBackdropClick={true}
+            disableEscapeKeyDown={true}>
+            <DialogTitle>Create a collection</DialogTitle>
+            <DialogContent 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" />
+                </div>
+                <div style={{ overflowY: 'auto' }}>TREE</div>
+            </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} />
+                        : 'Create a collection'}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    </form>;
\ No newline at end of file
diff --git a/src/views-components/dialog-create/dialog-collection-create.tsx b/src/views-components/dialog-create/dialog-collection-create.tsx
index 3e3b74aa..c599b22d 100644
--- a/src/views-components/dialog-create/dialog-collection-create.tsx
+++ b/src/views-components/dialog-create/dialog-collection-create.tsx
@@ -5,11 +5,8 @@
 import * as React from 'react';
 import { reduxForm, Field } from 'redux-form';
 import { compose } from 'redux';
-import TextField from '@material-ui/core/TextField';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import { TextField } from '../../components/text-field/text-field';
+import { Dialog, DialogActions, DialogContent, DialogTitle } from '@material-ui/core/';
 import { Button, StyleRulesCallback, WithStyles, withStyles, CircularProgress } from '@material-ui/core';
 
 import { COLLECTION_NAME_VALIDATION, COLLECTION_DESCRIPTION_VALIDATION } from '../../validators/create-project/create-project-validator';
@@ -50,74 +47,52 @@ interface DialogCollectionCreateProps {
     pristine: boolean;
 }
 
-interface TextFieldProps {
-    label: string;
-    floatinglabeltext: string;
-    className?: string;
-    input?: string;
-    meta?: any;
-}
-
 export const DialogCollectionCreate = compose(
     reduxForm({ form: 'collectionCreateDialog' }),
     withStyles(styles))(
-    class DialogCollectionCreate extends React.Component<DialogCollectionCreateProps & WithStyles<CssRules>> {
-        render() {
-            const { classes, open, handleClose, handleSubmit, onSubmit, submitting, invalid, pristine } = this.props;
+        class DialogCollectionCreate extends React.Component<DialogCollectionCreateProps & WithStyles<CssRules>> {
+            render() {
+                const { classes, open, handleClose, handleSubmit, onSubmit, submitting, invalid, pristine } = this.props;
 
-            return (
-                <Dialog
-                    open={open}
-                    onClose={handleClose}
-                    fullWidth={true}
-                    maxWidth='sm'
-                    disableBackdropClick={true}
-                    disableEscapeKeyDown={true}>
-                    <form onSubmit={handleSubmit((data: any) => onSubmit(data))}>
-                        <DialogTitle id="form-dialog-title">Create a collection</DialogTitle>
-                        <DialogContent className={classes.formContainer}>
-                            <Field name="name"
+                return (
+                    <Dialog
+                        open={open}
+                        onClose={handleClose}
+                        fullWidth={true}
+                        maxWidth='sm'
+                        disableBackdropClick={true}
+                        disableEscapeKeyDown={true}>
+                        <form onSubmit={handleSubmit((data: any) => onSubmit(data))}>
+                            <DialogTitle id="form-dialog-title">Create a collection</DialogTitle>
+                            <DialogContent className={classes.formContainer}>
+                                <Field name="name"
                                     disabled={submitting}
-                                    component={this.renderTextField}
-                                    floatinglabeltext="Collection Name"
+                                    component={TextField}
                                     validate={COLLECTION_NAME_VALIDATION}
                                     className={classes.textField}
-                                    label="Collection Name"/>
-                            <Field name="description"
+                                    label="Collection Name" />
+                                <Field name="description"
                                     disabled={submitting}
-                                    component={this.renderTextField}
-                                    floatinglabeltext="Description - optional"
+                                    component={TextField}
                                     validate={COLLECTION_DESCRIPTION_VALIDATION}
                                     className={classes.textField}
-                                    label="Description - optional"/>
-                        </DialogContent>
-                        <DialogActions className={classes.dialogActions}>
-                            <Button onClick={handleClose} className={classes.button} color="primary"
+                                    label="Description - optional" />
+                            </DialogContent>
+                            <DialogActions className={classes.dialogActions}>
+                                <Button onClick={handleClose} className={classes.button} color="primary"
                                     disabled={submitting}>CANCEL</Button>
-                            <Button type="submit"
+                                <Button type="submit"
                                     className={classes.lastButton}
                                     color="primary"
                                     disabled={invalid || submitting || pristine}
                                     variant="contained">
-                                CREATE A COLLECTION
+                                    CREATE A COLLECTION
                             </Button>
-                            {submitting && <CircularProgress size={20} className={classes.createProgress}/>}
-                        </DialogActions>
-                    </form>
-                </Dialog>
-            );
+                                {submitting && <CircularProgress size={20} className={classes.createProgress} />}
+                            </DialogActions>
+                        </form>
+                    </Dialog>
+                );
+            }
         }
-
-        renderTextField = ({ input, label, meta: { touched, error }, ...custom }: TextFieldProps) => (
-            <TextField
-                helperText={touched && error}
-                label={label}
-                className={this.props.classes.textField}
-                error={touched && !!error}
-                autoComplete='off'
-                {...input}
-                {...custom}
-            />
-        )
-    }
-);
+    );
diff --git a/src/views-components/dialog-create/dialog-project-create.tsx b/src/views-components/dialog-create/dialog-project-create.tsx
index acfe3973..35fdca9f 100644
--- a/src/views-components/dialog-create/dialog-project-create.tsx
+++ b/src/views-components/dialog-create/dialog-project-create.tsx
@@ -5,11 +5,8 @@
 import * as React from 'react';
 import { reduxForm, Field } from 'redux-form';
 import { compose } from 'redux';
-import TextField from '@material-ui/core/TextField';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import { TextField } from '../../components/text-field/text-field';
+import { Dialog, DialogActions, DialogContent, DialogTitle } from '@material-ui/core/';
 import { Button, StyleRulesCallback, WithStyles, withStyles, CircularProgress } from '@material-ui/core';
 
 import { PROJECT_NAME_VALIDATION, PROJECT_DESCRIPTION_VALIDATION } from '../../validators/create-project/create-project-validator';
@@ -58,14 +55,6 @@ interface DialogProjectProps {
     pristine: boolean;
 }
 
-interface TextFieldProps {
-    label: string;
-    floatinglabeltext: string;
-    className?: string;
-    input?: string;
-    meta?: any;
-}
-
 export const DialogProjectCreate = compose(
     reduxForm({ form: 'projectCreateDialog' }),
     withStyles(styles))(
@@ -85,14 +74,12 @@ export const DialogProjectCreate = compose(
                                 project</DialogTitle>
                             <DialogContent className={classes.formContainer}>
                                 <Field name="name"
-                                       component={this.renderTextField}
-                                       floatinglabeltext="Project Name"
+                                       component={TextField}
                                        validate={PROJECT_NAME_VALIDATION}
                                        className={classes.textField}
                                        label="Project Name"/>
                                 <Field name="description"
-                                       component={this.renderTextField}
-                                       floatinglabeltext="Description - optional"
+                                       component={TextField}
                                        validate={PROJECT_DESCRIPTION_VALIDATION}
                                        className={classes.textField}
                                        label="Description - optional"/>
@@ -114,17 +101,5 @@ export const DialogProjectCreate = compose(
                 </Dialog>
             );
         }
-
-        renderTextField = ({ input, label, meta: { touched, error }, ...custom }: TextFieldProps) => (
-            <TextField
-                helperText={touched && error}
-                label={label}
-                className={this.props.classes.textField}
-                error={touched && !!error}
-                autoComplete='off'
-                {...input}
-                {...custom}
-            />
-        )
     }
 );
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 7f6a8c62..147c0a8a 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -45,6 +45,7 @@ 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';
 
 const DRAWER_WITDH = 240;
 const APP_BAR_HEIGHT = 100;
@@ -235,6 +236,7 @@ export const Workbench = withStyles(styles)(
                         <CreateProjectDialog />
                         <CreateCollectionDialog />
                         <RenameFileDialog />
+                        <DialogCollectionCreateWithSelectedFile />
                         <FileRemoveDialog />
                         <MultipleFilesRemoveDialog />
                         <UpdateCollectionDialog />