+++ /dev/null
-// 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
--- /dev/null
+// 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
toggleOpen: (id: string) => void;
toggleActive: (id: string) => void;
sidePanelItems: SidePanelItem[];
+ handleCreationDialogOpen: () => void;
+ handleCreationDialogClose: () => void;
}
class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
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>> {
// 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';
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>
open: false,
};
- handleClickOpen = () => {
- this.setState({ open: true });
- }
-
- handleClose = () => {
- this.setState({ open: false });
- }
-
render() {
return <div>
<div className={this.props.classes.toolbar}>
<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}
}
-type CssRules = "toolbar" | "button" | "lastButton" | "dialogContent" | "textField" | "dialog";
+type CssRules = "toolbar" | "button";
const styles: StyleRulesCallback<CssRules> = theme => ({
toolbar: {
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) =>
}
interface WorkbenchState {
+ isCreationDialogOpen: boolean;
anchorEl: any;
searchText: string;
menuItems: {
class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
state = {
+ isCreationDialogOpen: false,
anchorEl: null,
searchText: "",
breadcrumbs: [],
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 => ({
<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>}
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>(
projects / arvados-workbench2.git / commitdiff