Project-creation-modal-first-step

Feature #13694

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

diff --git a/src/components/dialog-create/dialog-create.js b/src/components/dialog-create/dialog-create.js
new file mode 100644 (file)
index 0000000..5361a2d
--- /dev/null
+++ b/src/components/dialog-create/dialog-create.js
@@ -0,0 +1,62 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import React from 'react';
+import Button from '@material-ui/core/Button';
+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 DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+
+export default class FormDialog extends React.Component {
+  state = {
+    open: false,
+  };
+
+  handleClickOpen = () => {
+    this.setState({ open: true });
+  };
+
+  handleClose = () => {
+    this.setState({ open: false });
+  };
+
+  render() {
+    return (
+      <div>
+        <Button onClick={this.handleClickOpen}>Open form dialog</Button>
+        <Dialog
+          open={this.state.open}
+          onClose={this.handleClose}
+        >
+          <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
+          <DialogContent>
+            <DialogContentText>
+              To subscribe to this website, please enter your email address here. We will send
+              updates occasionally.
+            </DialogContentText>
+            <TextField
+              autoFocus
+              margin="dense"
+              id="name"
+              label="Project name"
+              type="email"
+              fullWidth
+            />
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={this.handleClose} color="primary">
+              CANCEL
+            </Button>
+            <Button onClick={this.handleClose} color="primary">
+              CREATE A PROJECT
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </div>
+    );
+  }
+}
\ No newline at end of file

diff --git a/src/views/project-panel/project-panel.tsx b/src/views/project-panel/project-panel.tsx
index 6bfa61e0322de57f6040207448a5c8855759ad19..4522f163cb3c56bb78194f3eec5d8dc679091651 100644 (file)
--- a/src/views/project-panel/project-panel.tsx
+++ b/src/views/project-panel/project-panel.tsx
@@ -3,6 +3,11 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
+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 { ProjectPanelItem } from './project-panel-item';
 import { Grid, Typography, Button, Toolbar, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
 import { formatDate, formatFileSize } from '../../common/formatters';
@@ -28,6 +33,18 @@ type ProjectPanelProps = {
     & WithStyles<CssRules>
     & RouteComponentProps<{ id: string }>;
 class ProjectPanel extends React.Component<ProjectPanelProps> {
+    state = {
+        open: false,
+    };
+
+    handleClickOpen = () => {
+        this.setState({ open: true });
+    }
+
+    handleClose = () => {
+        this.setState({ open: false });
+    }
+
     render() {
         return <div>
             <div className={this.props.classes.toolbar}>
@@ -37,9 +54,33 @@ class ProjectPanel extends React.Component<ProjectPanelProps> {
                 <Button color="primary" variant="raised" className={this.props.classes.button}>
                     Run a process
                 </Button>
-                <Button color="primary" variant="raised" className={this.props.classes.button}>
+                <Button color="primary" onClick={this.handleClickOpen} variant="raised" className={this.props.classes.button}>
                     Create a project
                 </Button>
+                <Dialog
+                    open={this.state.open}
+                    onClose={this.handleClose}>
+                    <div className={this.props.classes.dialog}>
+                    <DialogTitle id="form-dialog-title">Create a project</DialogTitle>
+                    <DialogContent className={this.props.classes.dialogContent}>
+                        <TextField
+                            margin="dense"
+                            className={this.props.classes.textField}
+                            id="name"
+                            label="Project name"
+                            fullWidth  />
+                        <TextField
+                            margin="dense"
+                            id="description"
+                            label="Description - optional"
+                            fullWidth />
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={this.handleClose} className={this.props.classes.button} color="primary">CANCEL</Button>
+                        <Button onClick={this.handleClose} className={this.props.classes.lastButton} color="primary" variant="raised">CREATE A PROJECT</Button>
+                    </DialogActions>
+                    </div>
+                </Dialog>
             </div>
             <DataExplorer
                 id={PROJECT_PANEL_ID}
@@ -95,7 +136,7 @@ class ProjectPanel extends React.Component<ProjectPanelProps> {
 
 }
 
-type CssRules = "toolbar" | "button";
+type CssRules = "toolbar" | "button" | "lastButton" | "dialogContent" | "textField" | "dialog";
 
 const styles: StyleRulesCallback<CssRules> = theme => ({
     toolbar: {
@@ -104,6 +145,20 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
     },
     button: {
         marginLeft: theme.spacing.unit
+    },
+    lastButton: {
+        marginLeft: theme.spacing.unit,
+        marginRight: "20px",
+    },
+    dialogContent: {
+        marginTop: "20px",
+    },
+    textField: {
+        marginBottom: "32px",
+    },
+    dialog: {
+        minWidth: "550px",
+        minHeight: "320px"
     }
 });