animation-for-creating-project

Feature #13781

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

diff --git a/src/store/project/project-reducer.ts b/src/store/project/project-reducer.ts
index c008370d9a28e91b8a470b8b3c0fa9bf911d6b11..10d272c23a35c5614847eba1e17562c2ae23b320 100644 (file)
--- a/src/store/project/project-reducer.ts
+++ b/src/store/project/project-reducer.ts
@@ -115,8 +115,8 @@ const projectsReducer = (state: ProjectState = initialState, action: ProjectActi
     return actions.match(action, {
         OPEN_PROJECT_CREATOR: ({ ownerUuid }) => updateCreator(state, { ownerUuid, opened: true, pending: false }),
         CLOSE_PROJECT_CREATOR: () => updateCreator(state, { opened: false }),
-        CREATE_PROJECT: () => updateCreator(state, { opened: false, pending: true }),
-        CREATE_PROJECT_SUCCESS: () => updateCreator(state, { ownerUuid: "", pending: false }),
+        CREATE_PROJECT: () => updateCreator(state, { pending: true }),
+        CREATE_PROJECT_SUCCESS: () => updateCreator(state, { opened: false, ownerUuid: "", pending: false }),
         CREATE_PROJECT_ERROR: () => updateCreator(state, { ownerUuid: "", pending: false }),
         REMOVE_PROJECT: () => state,
         PROJECTS_REQUEST: itemId => {

diff --git a/src/views-components/create-project-dialog/create-project-dialog.tsx b/src/views-components/create-project-dialog/create-project-dialog.tsx
index 701ceee107d3e2fcf8d5e22a8f1861126d732ada..eb69837626d5a2150ad2a59bd28f8df4f96feb74 100644 (file)
--- a/src/views-components/create-project-dialog/create-project-dialog.tsx
+++ b/src/views-components/create-project-dialog/create-project-dialog.tsx
@@ -11,7 +11,8 @@ import dataExplorerActions from "../../store/data-explorer/data-explorer-action"
 import { PROJECT_PANEL_ID } from "../../views/project-panel/project-panel";
 
 const mapStateToProps = (state: RootState) => ({
-    open: state.projects.creator.opened
+    open: state.projects.creator.opened,
+    pending: state.projects.creator.pending,
 });
 
 const submit = (data: { name: string, description: string }) =>

diff --git a/src/views-components/dialog-create/dialog-project-create.tsx b/src/views-components/dialog-create/dialog-project-create.tsx
index ef07ea2f4a7d8608bbd2aa523018dca88c8033d8..91e23bebbf6ce2c243afda7d9d7a6253e8b34599 100644 (file)
--- a/src/views-components/dialog-create/dialog-project-create.tsx
+++ b/src/views-components/dialog-create/dialog-project-create.tsx
@@ -8,12 +8,13 @@ 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 { Button, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
+import { Button, StyleRulesCallback, WithStyles, withStyles, CircularProgress } from '@material-ui/core';
 
 import Validator from '../../utils/dialog-validator';
 
 interface ProjectCreateProps {
   open: boolean;
+  pending: boolean;
   handleClose: () => void;
   onSubmit: (data: { name: string, description: string }) => void;
 }
@@ -34,8 +35,8 @@ class DialogProjectCreate extends React.Component<ProjectCreateProps & WithStyle
   };
 
   render() {
-    const { name, description } = this.state;
-    const { classes, open, handleClose } = this.props;
+    const { name, description, isNameValid, isDescriptionValid } = this.state;
+    const { classes, open, handleClose, pending } = this.props;
 
     return (
       <Dialog
@@ -73,7 +74,14 @@ class DialogProjectCreate extends React.Component<ProjectCreateProps & WithStyle
           </DialogContent>
           <DialogActions>
             <Button onClick={handleClose} className={classes.button} color="primary">CANCEL</Button>
-            <Button onClick={this.handleSubmit} className={classes.lastButton} color="primary" disabled={!this.state.isNameValid || (!this.state.isDescriptionValid && description.length > 0)} variant="raised">CREATE A PROJECT</Button>
+            <Button onClick={this.handleSubmit} 
+              className={classes.lastButton} 
+              color="primary" 
+              disabled={!isNameValid || (!isDescriptionValid && description.length > 0) || pending} 
+              variant="contained">
+              CREATE A PROJECT
+              </Button>
+              {pending && <CircularProgress size={20} className={classes.createProgress} />}
           </DialogActions>
         </div>
       </Dialog>
@@ -112,7 +120,7 @@ class DialogProjectCreate extends React.Component<ProjectCreateProps & WithStyle
   }
 }
 
-type CssRules = "button" | "lastButton" | "dialogContent" | "textField" | "dialog" | "dialogTitle";
+type CssRules = "button" | "lastButton" | "dialogContent" | "textField" | "dialog" | "dialogTitle" | "createProgress";
 
 const styles: StyleRulesCallback<CssRules> = theme => ({
   button: {
@@ -134,6 +142,11 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
   dialog: {
     minWidth: "600px",
     minHeight: "320px"
+  },
+  createProgress: {
+    position: "absolute",
+    minWidth: "20px",
+    right: "95px"
   }
 });