[ARVADOS-WORKBENCH2] created: 1.1.4-180-gd116e49
Git user
git at public.curoverse.com
Fri Jul 6 04:08:30 EDT 2018
at d116e491ef904d97dcece5ab1632bef08906ec87 (commit)
commit d116e491ef904d97dcece5ab1632bef08906ec87
Author: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
Date: Fri Jul 6 10:07:59 2018 +0200
Project-creation-on-button
Feature #13694
Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
diff --git a/src/components/dialog-create/dialog-create.js b/src/components/dialog-create/dialog-create.js
deleted file mode 100644
index 5361a2d..0000000
--- a/src/components/dialog-create/dialog-create.js
+++ /dev/null
@@ -1,62 +0,0 @@
-// 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/components/dialog-create/dialog-project-create.tsx b/src/components/dialog-create/dialog-project-create.tsx
new file mode 100644
index 0000000..dd8c7d1
--- /dev/null
+++ b/src/components/dialog-create/dialog-project-create.tsx
@@ -0,0 +1,69 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// 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 { Button, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
+
+interface ProjectCreateProps {
+ open: boolean;
+ handleClose: () => void;
+}
+
+const DialogProjectCreate: React.SFC<ProjectCreateProps & WithStyles<CssRules>> = ({ classes, open, handleClose }) => {
+ return (
+ <Dialog
+ open={open}
+ onClose={handleClose}>
+ <div className={classes.dialog}>
+ <DialogTitle id="form-dialog-title">Create a project</DialogTitle>
+ <DialogContent className={classes.dialogContent}>
+ <TextField
+ margin="dense"
+ className={classes.textField}
+ id="name"
+ label="Project name"
+ fullWidth />
+ <TextField
+ margin="dense"
+ id="description"
+ label="Description - optional"
+ fullWidth />
+ </DialogContent>
+ <DialogActions>
+ <Button onClick={handleClose} className={classes.button} color="primary">CANCEL</Button>
+ <Button onClick={handleClose} className={classes.lastButton} color="primary" variant="raised">CREATE A PROJECT</Button>
+ </DialogActions>
+ </div>
+ </Dialog>
+ );
+};
+
+type CssRules = "button" | "lastButton" | "dialogContent" | "textField" | "dialog";
+
+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"
+ }
+});
+
+export default withStyles(styles)(DialogProjectCreate);
\ No newline at end of file
diff --git a/src/components/side-panel/side-panel.tsx b/src/components/side-panel/side-panel.tsx
index ac20730..23ee904 100644
--- a/src/components/side-panel/side-panel.tsx
+++ b/src/components/side-panel/side-panel.tsx
@@ -27,6 +27,8 @@ interface SidePanelProps {
toggleOpen: (id: string) => void;
toggleActive: (id: string) => void;
sidePanelItems: SidePanelItem[];
+ handleCreationDialogOpen: () => void;
+ handleCreationDialogClose: () => void;
}
class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
diff --git a/src/views-components/project-tree/project-tree.tsx b/src/views-components/project-tree/project-tree.tsx
index f51b65e..d94d3bf 100644
--- a/src/views-components/project-tree/project-tree.tsx
+++ b/src/views-components/project-tree/project-tree.tsx
@@ -16,6 +16,8 @@ export interface ProjectTreeProps {
projects: Array<TreeItem<Project>>;
toggleOpen: (id: string, status: TreeItemStatus) => void;
toggleActive: (id: string, status: TreeItemStatus) => void;
+ handleCreationDialogOpen: () => void;
+ handleCreationDialogClose: () => void;
}
class ProjectTree<T> extends React.Component<ProjectTreeProps & WithStyles<CssRules>> {
diff --git a/src/views/project-panel/project-panel.tsx b/src/views/project-panel/project-panel.tsx
index 4522f16..3d7d894 100644
--- a/src/views/project-panel/project-panel.tsx
+++ b/src/views/project-panel/project-panel.tsx
@@ -3,11 +3,6 @@
// 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';
@@ -21,13 +16,17 @@ import { DataColumns } from '../../components/data-table/data-table';
import { ResourceKind } from "../../models/resource";
import { RouteComponentProps } from 'react-router';
import { RootState } from '../../store/store';
+import DialogProjectCreate from '../../components/dialog-create/dialog-project-create';
export const PROJECT_PANEL_ID = "projectPanel";
type ProjectPanelProps = {
currentItemId: string,
onItemClick: (item: ProjectPanelItem) => void,
- onItemRouteChange: (itemId: string) => void
+ onItemRouteChange: (itemId: string) => void,
+ handleCreationDialogOpen: () => void;
+ handleCreationDialogClose: () => void;
+ isCreationDialogOpen: boolean;
}
& DispatchProp
& WithStyles<CssRules>
@@ -37,14 +36,6 @@ class ProjectPanel extends React.Component<ProjectPanelProps> {
open: false,
};
- handleClickOpen = () => {
- this.setState({ open: true });
- }
-
- handleClose = () => {
- this.setState({ open: false });
- }
-
render() {
return <div>
<div className={this.props.classes.toolbar}>
@@ -54,33 +45,10 @@ class ProjectPanel extends React.Component<ProjectPanelProps> {
<Button color="primary" variant="raised" className={this.props.classes.button}>
Run a process
</Button>
- <Button color="primary" onClick={this.handleClickOpen} variant="raised" className={this.props.classes.button}>
+ <Button color="primary" onClick={this.props.handleCreationDialogOpen} 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>
+ <DialogProjectCreate open={this.props.isCreationDialogOpen} handleClose={this.props.handleCreationDialogClose}/>
</div>
<DataExplorer
id={PROJECT_PANEL_ID}
@@ -136,7 +104,7 @@ class ProjectPanel extends React.Component<ProjectPanelProps> {
}
-type CssRules = "toolbar" | "button" | "lastButton" | "dialogContent" | "textField" | "dialog";
+type CssRules = "toolbar" | "button";
const styles: StyleRulesCallback<CssRules> = theme => ({
toolbar: {
@@ -146,20 +114,6 @@ 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"
- }
});
const renderName = (item: ProjectPanelItem) =>
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index b8baead..ea8fce8 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -92,6 +92,7 @@ interface NavMenuItem extends MainAppBarMenuItem {
}
interface WorkbenchState {
+ isCreationDialogOpen: boolean;
anchorEl: any;
searchText: string;
menuItems: {
@@ -103,6 +104,7 @@ interface WorkbenchState {
class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
state = {
+ isCreationDialogOpen: false,
anchorEl: null,
searchText: "",
breadcrumbs: [],
@@ -152,6 +154,14 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
this.props.dispatch(projectActions.RESET_PROJECT_TREE_ACTIVITY(itemId));
}
+ handleCreationDialogOpen = () => {
+ this.setState({ isCreationDialogOpen: true });
+ }
+
+ handleCreationDialogClose = () => {
+ this.setState({ isCreationDialogOpen: false });
+ }
+
render() {
const path = getTreePath(this.props.projects, this.props.currentProjectId);
const breadcrumbs = path.map(item => ({
@@ -182,11 +192,15 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
<SidePanel
toggleOpen={this.toggleSidePanelOpen}
toggleActive={this.toggleSidePanelActive}
- sidePanelItems={this.props.sidePanelItems}>
+ sidePanelItems={this.props.sidePanelItems}
+ handleCreationDialogOpen={this.handleCreationDialogOpen}
+ handleCreationDialogClose={this.handleCreationDialogClose}>
<ProjectTree
projects={this.props.projects}
toggleOpen={itemId => this.props.dispatch<any>(setProjectItem(itemId, ItemMode.OPEN))}
toggleActive={itemId => this.props.dispatch<any>(setProjectItem(itemId, ItemMode.ACTIVE))}
+ handleCreationDialogOpen={this.handleCreationDialogOpen}
+ handleCreationDialogClose={this.handleCreationDialogClose}
/>
</SidePanel>
</Drawer>}
@@ -204,8 +218,11 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
renderProjectPanel = (props: RouteComponentProps<{ id: string }>) => <ProjectPanel
onItemRouteChange={itemId => this.props.dispatch<any>(setProjectItem(itemId, ItemMode.ACTIVE))}
onItemClick={item => this.props.dispatch<any>(setProjectItem(item.uuid, ItemMode.ACTIVE))}
+ handleCreationDialogOpen={this.handleCreationDialogOpen}
+ handleCreationDialogClose={this.handleCreationDialogClose}
+ isCreationDialogOpen={this.state.isCreationDialogOpen}
{...props} />
-
+
}
export default connect<WorkbenchDataProps>(
commit 606ab6d3dab1f166c52e471052652460c915f00f
Author: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
Date: Wed Jul 4 12:55:08 2018 +0200
Project-creation-modal-first-step
Feature #13694
Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk at 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
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 6bfa61e..4522f16 100644
--- 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"
}
});
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list