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 { matchProjectRoute } from '~/routes/routes';
  17 import { navigateToRunProcess } from '~/store/navigation/navigation-action';
  18 import { runProcessPanelActions } from '~/store/run-process-panel/run-process-panel-actions';
  19
  20 type CssRules = 'button' | 'menuItem' | 'icon';
  21
  22 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  23     button: {
  24         boxShadow: 'none',
  25         padding: '2px 10px 2px 5px',
  26         fontSize: '0.75rem'
  27     },
  28     menuItem: {
  29         fontSize: '0.875rem',
  30         color: theme.palette.grey["700"]
  31     },
  32     icon: {
  33         marginRight: theme.spacing.unit
  34     }
  35 });
  36
  37 interface SidePanelDataProps {
  38     currentItemId: string;
  39     isProjectRoute: boolean;
  40     properties: Properties;
  41 }
  42
  43 interface Properties {
  44     breadcrumbs: Array<{uuid: string, label: string}>;
  45 }
  46
  47 interface SidePanelState {
  48     anchorEl: any;
  49 }
  50
  51 type SidePanelProps = SidePanelDataProps & DispatchProp & WithStyles<CssRules>;
  52
  53 const transformOrigin: PopoverOrigin = {
  54     vertical: -50,
  55     horizontal: 0
  56 };
  57
  58 const isProjectRoute = ({ router }: RootState) => {
  59     const pathname = router.location ? router.location.pathname : '';
  60     const match = matchProjectRoute(pathname);
  61     return !!match;
  62 };
  63
  64 const isItemSharedWithMe = (properties: Properties) => {
  65     if (properties.breadcrumbs) {
  66         const isItemSharedWithMe = properties.breadcrumbs[0].label === 'Shared with me';
  67         return isItemSharedWithMe;
  68     } else {
  69         return false;
  70     }
  71 };
  72
  73 export const SidePanelButton = withStyles(styles)(
  74     connect((state: RootState) => ({
  75         currentItemId: getProperty(PROJECT_PANEL_CURRENT_UUID)(state.properties),
  76         isProjectRoute: isProjectRoute(state),
  77         properties: state.properties
  78     }))(
  79         class extends React.Component<SidePanelProps> {
  80
  81             state: SidePanelState = {
  82                 anchorEl: undefined
  83             };
  84
  85             render() {
  86                 const { classes, isProjectRoute, properties } = this.props;
  87                 const { anchorEl } = this.state;
  88                 return <Toolbar>
  89                     <Grid container>
  90                         <Grid container item xs alignItems="center" justify="flex-start">
  91                             <Button variant="contained" color="primary" size="small" className={classes.button}
  92                                 aria-owns={anchorEl ? 'aside-menu-list' : undefined}
  93                                 aria-haspopup="true"
  94                                 onClick={this.handleOpen}
  95                                 disabled={!isProjectRoute || isItemSharedWithMe(properties)}>
  96                                 <AddIcon />
  97                                 New
  98                             </Button>
  99                             <Menu
 100                                 id='aside-menu-list'
 101                                 anchorEl={anchorEl}
 102                                 open={Boolean(anchorEl)}
 103                                 onClose={this.handleClose}
 104                                 onClick={this.handleClose}
 105                                 transformOrigin={transformOrigin}>
 106                                 <MenuItem className={classes.menuItem} onClick={this.handleNewCollectionClick}>
 107                                     <CollectionIcon className={classes.icon} /> New collection
 108                                 </MenuItem>
 109                                 <MenuItem className={classes.menuItem} onClick={this.handleRunProcessClick}>
 110                                     <ProcessIcon className={classes.icon} /> Run a process
 111                                 </MenuItem>
 112                                 <MenuItem className={classes.menuItem} onClick={this.handleNewProjectClick}>
 113                                     <ProjectIcon className={classes.icon} /> New project
 114                                 </MenuItem>
 115                             </Menu>
 116                         </Grid>
 117                     </Grid>
 118                 </Toolbar>;
 119             }
 120
 121             handleNewProjectClick = () => {
 122                 this.props.dispatch<any>(openProjectCreateDialog(this.props.currentItemId));
 123             }
 124
 125             handleRunProcessClick = () => {
 126                 this.props.dispatch(runProcessPanelActions.SET_PROCESS_OWNER_UUID(this.props.currentItemId));
 127                 this.props.dispatch<any>(navigateToRunProcess);
 128             }
 129
 130             handleNewCollectionClick = () => {
 131                 this.props.dispatch<any>(openCollectionCreateDialog(this.props.currentItemId));
 132             }
 133
 134             handleClose = () => {
 135                 this.setState({ anchorEl: undefined });
 136             }
 137
 138             handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
 139                 this.setState({ anchorEl: event.currentTarget });
 140             }
 141         }
 142     )
 143 );