Merge branch '14318-new-button-missing-in-several-places'

[arvados-workbench2.git] / src / views-components / side-panel-button / side-panel-button.tsx

diff --git a/src/views-components/side-panel-button/side-panel-button.tsx b/src/views-components/side-panel-button/side-panel-button.tsx
index 2781d4790ec81f8a970d81a9f2e9f8bf211ad6c7..61e72d08fc48ae2bf7d6aa8d0810d61f6677db8c 100644 (file)
--- a/src/views-components/side-panel-button/side-panel-button.tsx
+++ b/src/views-components/side-panel-button/side-panel-button.tsx
@@ -13,6 +13,8 @@ import { StyleRulesCallback, WithStyles, withStyles, Toolbar, Grid, Button, Menu
 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';
+import { navigateToRunProcess } from '~/store/navigation/navigation-action';
+import { runProcessPanelActions } from '~/store/run-process-panel/run-process-panel-actions';
 
 type CssRules = 'button' | 'menuItem' | 'icon';
 
@@ -41,6 +43,11 @@ interface SidePanelState {
 
 type SidePanelProps = SidePanelDataProps & DispatchProp & WithStyles<CssRules>;
 
+const transformOrigin: PopoverOrigin = {
+    vertical: -50,
+    horizontal: 0
+};
+
 export const SidePanelButton = withStyles(styles)(
     connect((state: RootState) => ({
         currentItemId: getProperty(PROJECT_PANEL_CURRENT_UUID)(state.properties)
@@ -51,17 +58,12 @@ export const SidePanelButton = withStyles(styles)(
                 anchorEl: undefined
             };
 
-            transformOrigin: PopoverOrigin = {
-                vertical: -50,
-                horizontal: 45
-            };
-
             render() {
                 const { classes } = this.props;
                 const { anchorEl } = this.state;
                 return <Toolbar>
                     <Grid container>
-                        <Grid container item xs alignItems="center" justify="center">
+                        <Grid container item xs alignItems="center" justify="flex-start">
                             <Button variant="contained" color="primary" size="small" className={classes.button}
                                 aria-owns={anchorEl ? 'aside-menu-list' : undefined}
                                 aria-haspopup="true"
@@ -75,11 +77,11 @@ export const SidePanelButton = withStyles(styles)(
                                 open={Boolean(anchorEl)}
                                 onClose={this.handleClose}
                                 onClick={this.handleClose}
-                                transformOrigin={this.transformOrigin}>
+                                transformOrigin={transformOrigin}>
                                 <MenuItem className={classes.menuItem} onClick={this.handleNewCollectionClick}>
                                     <CollectionIcon className={classes.icon} /> New collection
                                 </MenuItem>
-                                <MenuItem className={classes.menuItem}>
+                                <MenuItem className={classes.menuItem} onClick={this.handleRunProcessClick}>
                                     <ProcessIcon className={classes.icon} /> Run a process
                                 </MenuItem>
                                 <MenuItem className={classes.menuItem} onClick={this.handleNewProjectClick}>
@@ -95,6 +97,11 @@ export const SidePanelButton = withStyles(styles)(
                 this.props.dispatch<any>(openProjectCreateDialog(this.props.currentItemId));
             }
 
+            handleRunProcessClick = () => {
+                this.props.dispatch(runProcessPanelActions.SET_PROCESS_OWNER_UUID(this.props.currentItemId));
+                this.props.dispatch<any>(navigateToRunProcess);
+            }
+
             handleNewCollectionClick = () => {
                 this.props.dispatch<any>(openCollectionCreateDialog(this.props.currentItemId));
             }