services/workbench2/src/views/project-panel/project-panel.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import withStyles from '@material-ui/core/styles/withStyles';
   7 import { DispatchProp, connect } from 'react-redux';
   8 import { RouteComponentProps } from 'react-router';
   9 import { StyleRulesCallback, WithStyles } from '@material-ui/core';
  10 import { RootState } from 'store/store';
  11 import { Resource } from 'models/resource';
  12 import { ResourcesState, getResource } from 'store/resources/resources';
  13 import { loadDetailsPanel } from 'store/details-panel/details-panel-action';
  14 import { openContextMenu, resourceUuidToContextMenuKind } from 'store/context-menu/context-menu-actions';
  15 import { navigateTo } from 'store/navigation/navigation-action';
  16 import { getProperty } from 'store/properties/properties';
  17 import { PROJECT_PANEL_CURRENT_UUID } from 'store/project-panel/project-panel-action';
  18 import { ArvadosTheme } from 'common/custom-theme';
  19 import { GroupContentsResource } from 'services/groups-service/groups-service';
  20 import { GroupClass, GroupResource } from 'models/group';
  21 import { CollectionResource } from 'models/collection';
  22 import { resourceIsFrozen } from 'common/frozen-resources';
  23 import { deselectAllOthers, toggleOne } from 'store/multiselect/multiselect-actions';
  24 import { DetailsCardRoot } from 'views-components/details-card/details-card-root';
  25 import { MPVContainer, MPVPanelContent, MPVPanelState } from 'components/multi-panel-view/multi-panel-view';
  26 import { ProjectPanelData } from './project-panel-data';
  27 import { ProjectPanelRun } from './project-panel-run';
  28
  29 type CssRules = 'root' | 'button' | 'mpvRoot' | 'dataExplorer';
  30
  31 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  32     root: {
  33         width: '100%',
  34         display: 'flex',
  35         flexDirection: 'column',
  36     },
  37     button: {
  38         marginLeft: theme.spacing.unit,
  39     },
  40     mpvRoot: {
  41         flexGrow: 1,
  42         display: 'flex',
  43         flexDirection: 'column',
  44         '& > div': {
  45             height: '100%',
  46         },
  47     },
  48     dataExplorer: {
  49         height: "100%",
  50     },
  51 });
  52
  53 const panelsData: MPVPanelState[] = [
  54     { name: "Data", visible: true },
  55     { name: "Workflow Runs", visible: false },
  56 ];
  57
  58 interface ProjectPanelDataProps {
  59     currentItemId: string;
  60     resources: ResourcesState;
  61     project: GroupResource;
  62     isAdmin: boolean;
  63     userUuid: string;
  64     dataExplorerItems: any;
  65     working: boolean;
  66 }
  67
  68 type ProjectPanelProps = ProjectPanelDataProps & DispatchProp & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
  69
  70 const mapStateToProps = (state: RootState) => {
  71     const currentItemId = getProperty<string>(PROJECT_PANEL_CURRENT_UUID)(state.properties);
  72     const project = getResource<GroupResource>(currentItemId || "")(state.resources);
  73     return {
  74         currentItemId,
  75         project,
  76         resources: state.resources,
  77         userUuid: state.auth.user!.uuid,
  78     };
  79 }
  80
  81 export const ProjectPanel = withStyles(styles)(
  82     connect(mapStateToProps)(
  83         class extends React.Component<ProjectPanelProps> {
  84
  85             render() {
  86                 const { classes } = this.props;
  87                 return <div data-cy='project-panel' className={classes.root}>
  88                     <DetailsCardRoot />
  89                     <MPVContainer
  90                         className={classes.mpvRoot}
  91                         spacing={8}
  92                         panelStates={panelsData}
  93                         mutuallyExclusive
  94                         justify-content="flex-start"
  95                         direction="column"
  96                         wrap="nowrap">
  97                         <MPVPanelContent
  98                             forwardProps
  99                             xs="auto"
 100                             data-cy="process-data"
 101                             className={classes.dataExplorer}>
 102                             <ProjectPanelData
 103                                 onRowClick={this.handleRowClick}
 104                                 onRowDoubleClick={this.handleRowDoubleClick}
 105                                 onContextMenu={this.handleContextMenu}
 106                             />
 107                         </MPVPanelContent>
 108                         <MPVPanelContent
 109                             forwardProps
 110                             xs="auto"
 111                             data-cy="process-run"
 112                             className={classes.dataExplorer}>
 113                             <ProjectPanelRun
 114                                 onRowClick={this.handleRowClick}
 115                                 onRowDoubleClick={this.handleRowDoubleClick}
 116                                 onContextMenu={this.handleContextMenu}
 117                             />
 118                         </MPVPanelContent>
 119                     </MPVContainer>
 120                 </div>
 121             }
 122
 123             isCurrentItemChild = (resource: Resource) => {
 124                 return resource.ownerUuid === this.props.currentItemId;
 125             };
 126
 127             handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
 128                 const { resources, isAdmin } = this.props;
 129                 const resource = getResource<GroupContentsResource>(resourceUuid)(resources);
 130                 // When viewing the contents of a filter group, all contents should be treated as read only.
 131                 let readonly = false;
 132                 const project = getResource<GroupResource>(this.props.currentItemId)(resources);
 133                 if (project && project.groupClass === GroupClass.FILTER) {
 134                     readonly = true;
 135                 }
 136
 137                 const menuKind = this.props.dispatch<any>(resourceUuidToContextMenuKind(resourceUuid, readonly));
 138                 if (menuKind && resource) {
 139                     this.props.dispatch<any>(
 140                         openContextMenu(event, {
 141                             name: resource.name,
 142                             uuid: resource.uuid,
 143                             ownerUuid: resource.ownerUuid,
 144                             isTrashed: 'isTrashed' in resource ? resource.isTrashed : false,
 145                             kind: resource.kind,
 146                             menuKind,
 147                             isAdmin,
 148                             isFrozen: resourceIsFrozen(resource, resources),
 149                             description: resource.description,
 150                             storageClassesDesired: (resource as CollectionResource).storageClassesDesired,
 151                             properties: 'properties' in resource ? resource.properties : {},
 152                         })
 153                     );
 154                 }
 155                 this.props.dispatch<any>(loadDetailsPanel(resourceUuid));
 156             };
 157
 158             handleRowDoubleClick = (uuid: string) => {
 159                 this.props.dispatch<any>(navigateTo(uuid));
 160             };
 161
 162             handleRowClick = (uuid: string) => {
 163                 this.props.dispatch<any>(toggleOne(uuid))
 164                 this.props.dispatch<any>(deselectAllOthers(uuid))
 165                 this.props.dispatch<any>(loadDetailsPanel(uuid));
 166             };
 167         }
 168     )
 169 );