1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { connect, DispatchProp } from 'react-redux';
7 import { RootState } from '~/store/store';
8 import { ArvadosTheme } from '~/common/custom-theme';
9 import { PopoverOrigin } from '@material-ui/core/Popover';
10 import { StyleRulesCallback, WithStyles, withStyles, Toolbar, Grid, Button, MenuItem, Menu } from '@material-ui/core';
11 import { AddIcon, CollectionIcon, ProcessIcon, ProjectIcon } from '~/components/icon/icon';
12 import { openProjectCreateDialog } from '~/store/projects/project-create-actions';
13 import { openCollectionCreateDialog } from '~/store/collections/collection-create-actions';
14 import { navigateToRunProcess } from '~/store/navigation/navigation-action';
15 import { runProcessPanelActions } from '~/store/run-process-panel/run-process-panel-actions';
16 import { getUserUuid } from '~/common/getuser';
17 import { matchProjectRoute } from '~/routes/routes';
18 import { GroupResource } from '~/models/group';
19 import { ResourcesState, getResource } from '~/store/resources/resources';
20 import { extractUuidKind, ResourceKind } from '~/models/resource';
22 type CssRules = 'button' | 'menuItem' | 'icon';
24 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
27 padding: '2px 10px 2px 5px',
32 color: theme.palette.grey["700"]
35 marginRight: theme.spacing.unit
39 interface SidePanelDataProps {
41 currentItemId: string;
42 resources: ResourcesState;
43 currentUserUUID: string | undefined;
46 interface SidePanelState {
50 type SidePanelProps = SidePanelDataProps & DispatchProp & WithStyles<CssRules>;
52 const transformOrigin: PopoverOrigin = {
57 export const isProjectTrashed = (proj: GroupResource, resources: ResourcesState): boolean => {
58 if (proj === undefined) { return false; }
59 if (proj.isTrashed) { return true; }
60 if (extractUuidKind(proj.ownerUuid) === ResourceKind.USER) { return false; }
61 const parentProj = getResource<GroupResource>(proj.ownerUuid)(resources);
63 return isProjectTrashed(parentProj!, resources);
66 export const SidePanelButton = withStyles(styles)(
67 connect((state: RootState) => ({
68 currentItemId: state.router.location
69 ? state.router.location.pathname.split('/').slice(-1)[0]
71 location: state.router.location,
72 resources: state.resources,
73 currentUserUUID: getUserUuid(state),
75 class extends React.Component<SidePanelProps> {
77 state: SidePanelState = {
82 const { classes, location, resources, currentUserUUID, currentItemId } = this.props;
83 const { anchorEl } = this.state;
85 if (currentItemId === currentUserUUID) {
87 } else if (matchProjectRoute(location ? location.pathname : '')) {
88 const currentProject = getResource<GroupResource>(currentItemId)(resources);
90 currentProject.writableBy.indexOf(currentUserUUID || '') >= 0 &&
91 !isProjectTrashed(currentProject, resources)) {
97 <Grid container item xs alignItems="center" justify="flex-start">
98 <Button data-cy="side-panel-button" variant="contained" disabled={!enabled}
99 color="primary" size="small" className={classes.button}
100 aria-owns={anchorEl ? 'aside-menu-list' : undefined}
102 onClick={this.handleOpen}>
109 open={Boolean(anchorEl)}
110 onClose={this.handleClose}
111 onClick={this.handleClose}
112 transformOrigin={transformOrigin}>
113 <MenuItem data-cy='side-panel-new-collection' className={classes.menuItem} onClick={this.handleNewCollectionClick}>
114 <CollectionIcon className={classes.icon} /> New collection
116 <MenuItem data-cy='side-panel-run-process' className={classes.menuItem} onClick={this.handleRunProcessClick}>
117 <ProcessIcon className={classes.icon} /> Run a process
119 <MenuItem data-cy='side-panel-new-project' className={classes.menuItem} onClick={this.handleNewProjectClick}>
120 <ProjectIcon className={classes.icon} /> New project
128 handleNewProjectClick = () => {
129 this.props.dispatch<any>(openProjectCreateDialog(this.props.currentItemId));
132 handleRunProcessClick = () => {
133 const location = this.props.location;
134 this.props.dispatch(runProcessPanelActions.RESET_RUN_PROCESS_PANEL());
135 this.props.dispatch(runProcessPanelActions.SET_PROCESS_PATHNAME(location.pathname));
136 this.props.dispatch(runProcessPanelActions.SET_PROCESS_OWNER_UUID(this.props.currentItemId));
138 this.props.dispatch<any>(navigateToRunProcess);
141 handleNewCollectionClick = () => {
142 this.props.dispatch<any>(openCollectionCreateDialog(this.props.currentItemId));
145 handleClose = () => {
146 this.setState({ anchorEl: undefined });
149 handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
150 this.setState({ anchorEl: event.currentTarget });