From: Janicki Artur <artur.janicki@contractors.roche.com>
Date: Wed, 12 Sep 2018 07:59:26 +0000 (+0200)
Subject: add 'New' button with 3 options and clean code
X-Git-Tag: 1.3.0~98^2~5
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/89efe3a344e0850cf7e401142d2a838cbc825ffb

add 'New' button with 3 options and clean code

Feature #14137

Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki@contractors.roche.com>
---

diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index afc0fed1..c0668b82 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -4,6 +4,7 @@
 
 import * as React from 'react';
 import AccessTime from '@material-ui/icons/AccessTime';
+import Add from '@material-ui/icons/Add';
 import ArrowBack from '@material-ui/icons/ArrowBack';
 import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
 import BubbleChart from '@material-ui/icons/BubbleChart';
@@ -48,6 +49,7 @@ import HelpOutline from '@material-ui/icons/HelpOutline';
 
 export type IconType = React.SFC<{ className?: string }>;
 
+export const AddIcon: IconType = (props) => <Add {...props} />;
 export const AddFavoriteIcon: IconType = (props) => <StarBorder {...props} />;
 export const AdvancedIcon: IconType = (props) => <SettingsApplications {...props} />;
 export const BackIcon: IconType = (props) => <ArrowBack {...props} />;
diff --git a/src/views-components/side-panel-button/side-panel-button.tsx b/src/views-components/side-panel-button/side-panel-button.tsx
new file mode 100644
index 00000000..28e6891a
--- /dev/null
+++ b/src/views-components/side-panel-button/side-panel-button.tsx
@@ -0,0 +1,111 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { connect, DispatchProp } from 'react-redux';
+import { RootState } from '~/store/store';
+import { getProperty } from '~/store/properties/properties';
+import { PROJECT_PANEL_CURRENT_UUID } from '~/store/project-panel/project-panel-action';
+import { ArvadosTheme } from '~/common/custom-theme';
+import { PopoverOrigin } from '@material-ui/core/Popover';
+import { StyleRulesCallback, WithStyles, withStyles, Toolbar, Grid, Button, MenuItem, Menu } from '@material-ui/core';
+import { AddIcon, CollectionIcon, ProcessIcon, ProjectIcon } from '~/components/icon/icon';
+import { openProjectCreateDialog } from '~/store/projects/project-create-actions';
+import { openCollectionCreateDialog } from '~/store/collections/collection-create-actions';
+
+type CssRules = 'button' | 'menuItem' | 'icon';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    button: {
+        boxShadow: 'none',
+        padding: '2px 10px 2px 5px',
+        fontSize: '0.75rem'
+    },
+    menuItem: {
+        fontSize: '0.875rem',
+        color: theme.palette.grey["700"]
+    },
+    icon: {
+        marginRight: theme.spacing.unit
+    }
+});
+
+interface SidePanelDataProps {
+    currentItemId: string;
+}
+
+interface SidePanelState {
+    anchorEl: any;
+}
+
+type SidePanelProps = SidePanelDataProps & DispatchProp & WithStyles<CssRules>;
+
+export const SidePanelButton = withStyles(styles)(
+    connect((state: RootState) => ({
+        currentItemId: getProperty(PROJECT_PANEL_CURRENT_UUID)(state.properties)
+    }))(
+        class extends React.Component<SidePanelProps> {
+
+            state: SidePanelState = {
+                anchorEl: undefined
+            };
+
+            transformOrigin: PopoverOrigin = {
+                vertical: -50,
+                horizontal: 25
+            };
+
+            render() {
+                const { classes } = this.props;
+                const { anchorEl } = this.state;
+                return <Toolbar>
+                    <Grid container>
+                        <Grid container item xs alignItems="center" justify="center">
+                            <Button variant="contained" color="primary" size="small" className={classes.button}
+                                aria-owns={anchorEl ? 'aside-menu-list' : undefined}
+                                aria-haspopup="true"
+                                onClick={this.handleOpen}>
+                                <AddIcon />
+                                New
+                            </Button>
+                            <Menu
+                                id='aside-menu-list'
+                                anchorEl={anchorEl}
+                                open={Boolean(anchorEl)}
+                                onClose={this.handleClose}
+                                onClick={this.handleClose}
+                                transformOrigin={this.transformOrigin}>
+                                <MenuItem className={classes.menuItem} onClick={this.handleNewCollectionClick}>
+                                    <CollectionIcon className={classes.icon} /> New collection
+                                </MenuItem>
+                                <MenuItem className={classes.menuItem}>
+                                    <ProcessIcon className={classes.icon} /> Run a process
+                                </MenuItem>
+                                <MenuItem className={classes.menuItem} onClick={this.handleNewProjectClick}>
+                                    <ProjectIcon className={classes.icon} /> New project
+                                </MenuItem>
+                            </Menu>
+                        </Grid>
+                    </Grid>
+                </Toolbar>;
+            }
+
+            handleNewProjectClick = () => {
+                this.props.dispatch<any>(openProjectCreateDialog(this.props.currentItemId));
+            }
+
+            handleNewCollectionClick = () => {
+                this.props.dispatch<any>(openCollectionCreateDialog(this.props.currentItemId));
+            }
+
+            handleClose = () => {
+                this.setState({ anchorEl: undefined });
+            }
+
+            handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
+                this.setState({ anchorEl: event.currentTarget });
+            }
+        }
+    )
+);
\ No newline at end of file
diff --git a/src/views-components/side-panel/side-panel.tsx b/src/views-components/side-panel/side-panel.tsx
index 70bc92b7..fffe3344 100644
--- a/src/views-components/side-panel/side-panel.tsx
+++ b/src/views-components/side-panel/side-panel.tsx
@@ -4,12 +4,13 @@
 
 import * as React from 'react';
 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
-import Drawer from '@material-ui/core/Drawer';
 import { ArvadosTheme } from '~/common/custom-theme';
 import { SidePanelTree, SidePanelTreeProps } from '~/views-components/side-panel-tree/side-panel-tree';
 import { compose, Dispatch } from 'redux';
 import { connect } from 'react-redux';
 import { navigateFromSidePanel } from '../../store/side-panel/side-panel-action';
+import { Grid } from '@material-ui/core';
+import { SidePanelButton } from '~/views-components/side-panel-button/side-panel-button';
 
 const DRAWER_WITDH = 240;
 
@@ -35,6 +36,7 @@ export const SidePanel = compose(
     withStyles(styles),
     connect(undefined, mapDispatchToProps)
 )(({ classes, ...props }: WithStyles<CssRules> & SidePanelTreeProps) =>
-    <div className={classes.root}>
+    <Grid item xs>
+        <SidePanelButton />
         <SidePanelTree {...props} />
-    </div>);
+    </Grid>);
\ 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 63aedadd..2c962ef8 100644
--- a/src/views/project-panel/project-panel.tsx
+++ b/src/views/project-panel/project-panel.tsx
@@ -31,7 +31,7 @@ import { filterResources } from '~/store/resources/resources';
 import { PanelDefaultView } from '~/components/panel-default-view/panel-default-view';
 import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
 
-type CssRules = 'root' | "toolbar" | "button";
+type CssRules = 'root' | "button";
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
@@ -39,10 +39,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         width: '100%',
         height: '100%'
     },
-    toolbar: {
-        paddingBottom: theme.spacing.unit * 3,
-        textAlign: "right"
-    },
     button: {
         marginLeft: theme.spacing.unit
     },
@@ -143,17 +139,6 @@ export const ProjectPanel = withStyles(styles)(
             render() {
                 const { classes } = this.props;
                 return <div className={classes.root}>
-                    <div className={classes.toolbar}>
-                        <Button color="primary" onClick={this.handleNewCollectionClick} variant="raised" className={classes.button}>
-                            New collection
-                        </Button>
-                        <Button color="primary" variant="raised" className={classes.button}>
-                            Run a process
-                        </Button>
-                        <Button color="primary" onClick={this.handleNewProjectClick} variant="raised" className={classes.button}>
-                            New project
-                        </Button>
-                    </div>
                     {this.hasAnyItems()
                         ? <DataExplorer
                             id={PROJECT_PANEL_ID}
@@ -179,14 +164,6 @@ export const ProjectPanel = withStyles(styles)(
                 return resource.ownerUuid === this.props.currentItemId;
             }
 
-            handleNewProjectClick = () => {
-                this.props.dispatch<any>(openProjectCreateDialog(this.props.currentItemId));
-            }
-
-            handleNewCollectionClick = () => {
-                this.props.dispatch<any>(openCollectionCreateDialog(this.props.currentItemId));
-            }
-
             handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
                 const menuKind = resourceKindToContextMenuKind(resourceUuid);
                 const resource = getResource<ProjectResource>(resourceUuid)(this.props.resources);
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 56fabeba..3f61c521 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -43,7 +43,7 @@ import { TrashPanel } from "~/views/trash-panel/trash-panel";
 import { MainContentBar } from '../../views-components/main-content-bar/main-content-bar';
 import { Grid } from '@material-ui/core';
 
-type CssRules = 'root' | 'contentWrapper' | 'content' | 'appBar';
+type CssRules = 'root' | 'asidePanel' | 'contentWrapper' | 'content' | 'appBar';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
@@ -51,6 +51,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         width: '100vw',
         height: '100vh'
     },
+    asidePanel: {
+        maxWidth: '240px',
+        background: theme.palette.background.default
+    },
     contentWrapper: {
         background: theme.palette.background.default,
         minWidth: 0,
@@ -93,14 +97,11 @@ export const Workbench = withStyles(styles)(
             state = {
                 searchText: "",
             };
-
             render() {
+                const { classes } = this.props;
                 return <>
-                    <Grid
-                        container
-                        direction="column"
-                        className={this.props.classes.root}>
-                        <Grid className={this.props.classes.appBar}>
+                    <Grid container direction="column" className={classes.root}>
+                        <Grid className={classes.appBar}>
                             <MainAppBar
                                 searchText={this.state.searchText}
                                 user={this.props.user}
@@ -108,26 +109,15 @@ export const Workbench = withStyles(styles)(
                                 buildInfo={this.props.buildInfo} />
                         </Grid>
                         {this.props.user &&
-                            <Grid
-                                container
-                                item
-                                xs
-                                alignItems="stretch"
-                                wrap="nowrap">
-                                <Grid item>
+                            <Grid container item xs alignItems="stretch" wrap="nowrap">
+                                <Grid container item xs component='aside' direction='column' className={classes.asidePanel}>
                                     <SidePanel />
                                 </Grid>
-                                <Grid
-                                    container
-                                    item
-                                    xs
-                                    component="main"
-                                    direction="column"
-                                    className={this.props.classes.contentWrapper}>
+                                <Grid container item xs component="main" direction="column" className={classes.contentWrapper}>
                                     <Grid item>
                                         <MainContentBar />
                                     </Grid>
-                                    <Grid item xs className={this.props.classes.content}>
+                                    <Grid item xs className={classes.content}>
                                         <Switch>
                                             <Route path={Routes.PROJECTS} component={ProjectPanel} />
                                             <Route path={Routes.COLLECTIONS} component={CollectionPanel} />