src/views-components/side-panel-button/side-panel-button.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { connect, DispatchProp } from 'react-redux';
   7 import { RootState } from '~/store/store';
   8 import { getProperty } from '~/store/properties/properties';
   9 import { PROJECT_PANEL_CURRENT_UUID } from '~/store/project-panel/project-panel-action';
  10 import { ArvadosTheme } from '~/common/custom-theme';
  11 import { PopoverOrigin } from '@material-ui/core/Popover';
  12 import { StyleRulesCallback, WithStyles, withStyles, Toolbar, Grid, Button, MenuItem, Menu } from '@material-ui/core';
  13 import { AddIcon, CollectionIcon, ProcessIcon, ProjectIcon } from '~/components/icon/icon';
  14 import { openProjectCreateDialog } from '~/store/projects/project-create-actions';
  15 import { openCollectionCreateDialog } from '~/store/collections/collection-create-actions';
  16 import { navigateToRunProcess } from '~/store/navigation/navigation-action';
  17 import { runProcessPanelActions } from '~/store/run-process-panel/run-process-panel-actions';
  18
  19 type CssRules = 'button' | 'menuItem' | 'icon';
  20
  21 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  22     button: {
  23         boxShadow: 'none',
  24         padding: '2px 10px 2px 5px',
  25         fontSize: '0.75rem'
  26     },
  27     menuItem: {
  28         fontSize: '0.875rem',
  29         color: theme.palette.grey["700"]
  30     },
  31     icon: {
  32         marginRight: theme.spacing.unit
  33     }
  34 });
  35
  36 interface SidePanelDataProps {
  37     location: any;
  38     currentItemId: string;
  39 }
  40
  41 interface SidePanelState {
  42     anchorEl: any;
  43 }
  44
  45 type SidePanelProps = SidePanelDataProps & DispatchProp & WithStyles<CssRules>;
  46
  47 const transformOrigin: PopoverOrigin = {
  48     vertical: -50,
  49     horizontal: 0
  50 };
  51
  52 export const SidePanelButton = withStyles(styles)(
  53     connect((state: RootState) => ({
  54         currentItemId: getProperty(PROJECT_PANEL_CURRENT_UUID)(state.properties),
  55         location: state.router.location
  56     }))(
  57         class extends React.Component<SidePanelProps> {
  58
  59             state: SidePanelState = {
  60                 anchorEl: undefined
  61             };
  62
  63             render() {
  64                 const { classes } = this.props;
  65                 const { anchorEl } = this.state;
  66                 return <Toolbar>
  67                     <Grid container>
  68                         <Grid container item xs alignItems="center" justify="flex-start">
  69                             <Button variant="contained" color="primary" size="small" className={classes.button}
  70                                 aria-owns={anchorEl ? 'aside-menu-list' : undefined}
  71                                 aria-haspopup="true"
  72                                 onClick={this.handleOpen}>
  73                                 <AddIcon />
  74                                 New
  75                             </Button>
  76                             <Menu
  77                                 id='aside-menu-list'
  78                                 anchorEl={anchorEl}
  79                                 open={Boolean(anchorEl)}
  80                                 onClose={this.handleClose}
  81                                 onClick={this.handleClose}
  82                                 transformOrigin={transformOrigin}>
  83                                 <MenuItem className={classes.menuItem} onClick={this.handleNewCollectionClick}>
  84                                     <CollectionIcon className={classes.icon} /> New collection
  85                                 </MenuItem>
  86                                 <MenuItem className={classes.menuItem} onClick={this.handleRunProcessClick}>
  87                                     <ProcessIcon className={classes.icon} /> Run a process
  88                                 </MenuItem>
  89                                 <MenuItem className={classes.menuItem} onClick={this.handleNewProjectClick}>
  90                                     <ProjectIcon className={classes.icon} /> New project
  91                                 </MenuItem>
  92                             </Menu>
  93                         </Grid>
  94                     </Grid>
  95                 </Toolbar>;
  96             }
  97
  98             handleNewProjectClick = () => {
  99                 this.props.dispatch<any>(openProjectCreateDialog(this.props.currentItemId));
 100             }
 101
 102             handleRunProcessClick = () => {
 103                 const location = this.props.location;
 104                 this.props.dispatch(runProcessPanelActions.RESET_RUN_PROCESS_PANEL());
 105                 this.props.dispatch(runProcessPanelActions.SET_PROCESS_PATHNAME(location.pathname));
 106                 this.props.dispatch(runProcessPanelActions.SET_PROCESS_OWNER_UUID(this.props.currentItemId));
 107
 108                 this.props.dispatch<any>(navigateToRunProcess);
 109             }
 110
 111             handleNewCollectionClick = () => {
 112                 this.props.dispatch<any>(openCollectionCreateDialog(this.props.currentItemId));
 113             }
 114
 115             handleClose = () => {
 116                 this.setState({ anchorEl: undefined });
 117             }
 118
 119             handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
 120                 this.setState({ anchorEl: event.currentTarget });
 121             }
 122         }
 123     )
 124 );