X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/f79c7407429a38dfe3c274e886983d8e3ea0fdaa..84a608e65b0f130cf57938c7c60a2c354bc14431:/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 f0543b4c..2e8433a9 100644
--- a/src/views-components/side-panel-button/side-panel-button.tsx
+++ b/src/views-components/side-panel-button/side-panel-button.tsx
@@ -14,6 +14,7 @@ import { AddIcon, CollectionIcon, ProcessIcon, ProjectIcon } from '~/components/
 import { openProjectCreateDialog } from '~/store/projects/project-create-actions';
 import { openCollectionCreateDialog } from '~/store/collections/collection-create-actions';
 import { matchProjectRoute } from '~/routes/routes';
+import { navigateToRunProcess } from '~/store/navigation/navigation-action';
 
 type CssRules = 'button' | 'menuItem' | 'icon';
 
@@ -34,7 +35,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 
 interface SidePanelDataProps {
     currentItemId: string;
-    showButton: boolean;
+    buttonVisible: boolean;
 }
 
 interface SidePanelState {
@@ -45,10 +46,10 @@ type SidePanelProps = SidePanelDataProps & DispatchProp & WithStyles<CssRules>;
 
 const transformOrigin: PopoverOrigin = {
     vertical: -50,
-    horizontal: 45
+    horizontal: 0
 };
 
-const checkButtonVisibility = ({ router }: RootState) => {
+const isButtonVisible = ({ router }: RootState) => {
     const pathname = router.location ? router.location.pathname : '';
     const match = matchProjectRoute(pathname);
     return !!match;
@@ -57,7 +58,7 @@ const checkButtonVisibility = ({ router }: RootState) => {
 export const SidePanelButton = withStyles(styles)(
     connect((state: RootState) => ({
         currentItemId: getProperty(PROJECT_PANEL_CURRENT_UUID)(state.properties),
-        showButton: checkButtonVisibility(state)
+        buttonVisible: isButtonVisible(state)
     }))(
         class extends React.Component<SidePanelProps> {
 
@@ -66,11 +67,11 @@ export const SidePanelButton = withStyles(styles)(
             };
 
             render() {
-                const { classes, showButton } = this.props;
+                const { classes, buttonVisible  } = this.props;
                 const { anchorEl } = this.state;
                 return <Toolbar>
-                    {showButton && <Grid container>
-                        <Grid container item xs alignItems="center" justify="center">
+                    {buttonVisible  && <Grid container>
+                        <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"
@@ -88,7 +89,7 @@ export const SidePanelButton = withStyles(styles)(
                                 <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}>
@@ -104,6 +105,10 @@ export const SidePanelButton = withStyles(styles)(
                 this.props.dispatch<any>(openProjectCreateDialog(this.props.currentItemId));
             }
 
+            handleRunProcessClick = () => {
+                this.props.dispatch<any>(navigateToRunProcess);
+            }
+
             handleNewCollectionClick = () => {
                 this.props.dispatch<any>(openCollectionCreateDialog(this.props.currentItemId));
             }