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     },
  43     dataExplorer: {
  44         height: "100%",
  45     },
  46 });
  47
  48 const panelsData: MPVPanelState[] = [
  49     { name: "Data", visible: true },
  50     { name: "Workflow Runs", visible: false },
  51 ];
  52
  53 interface ProjectPanelDataProps {
  54     currentItemId: string;
  55     resources: ResourcesState;
  56     project: GroupResource;
  57     isAdmin: boolean;
  58     userUuid: string;
  59     dataExplorerItems: any;
  60     working: boolean;
  61 }
  62
  63 type ProjectPanelProps = ProjectPanelDataProps & DispatchProp & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
  64
  65 const mapStateToProps = (state: RootState) => {
  66     const currentItemId = getProperty<string>(PROJECT_PANEL_CURRENT_UUID)(state.properties);
  67     const project = getResource<GroupResource>(currentItemId || "")(state.resources);
  68     return {
  69         currentItemId,
  70         project,
  71         resources: state.resources,
  72         userUuid: state.auth.user!.uuid,
  73     };
  74 }
  75
  76 export const ProjectPanel = withStyles(styles)(
  77     connect(mapStateToProps)(
  78         class extends React.Component<ProjectPanelProps> {
  79
  80             render() {
  81                 const { classes } = this.props;
  82                 return <div data-cy='project-panel' className={classes.root}>
  83                     <DetailsCardRoot />
  84                     <MPVContainer
  85                         className={classes.mpvRoot}
  86                         spacing={8}
  87                         panelStates={panelsData}
  88                         mutuallyExclusive
  89                         justify-content="flex-start"
  90                         direction="column"
  91                         wrap="nowrap">
  92                         <MPVPanelContent
  93                             forwardProps
  94                             xs="auto"
  95                             data-cy="process-details"
  96                             className={classes.dataExplorer}>
  97                             <ProjectPanelData />
  98                         </MPVPanelContent>
  99                         <MPVPanelContent
 100                             forwardProps
 101                             xs="auto"
 102                             data-cy="process-details"
 103                             className={classes.dataExplorer}>
 104                             <ProjectPanelRun />
 105                         </MPVPanelContent>
 106                     </MPVContainer>
 107                 </div>
 108             }
 109
 110             isCurrentItemChild = (resource: Resource) => {
 111                 return resource.ownerUuid === this.props.currentItemId;
 112             };
 113
 114             handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
 115                 const { resources, isAdmin } = this.props;
 116                 const resource = getResource<GroupContentsResource>(resourceUuid)(resources);
 117                 // When viewing the contents of a filter group, all contents should be treated as read only.
 118                 let readonly = false;
 119                 const project = getResource<GroupResource>(this.props.currentItemId)(resources);
 120                 if (project && project.groupClass === GroupClass.FILTER) {
 121                     readonly = true;
 122                 }
 123
 124                 const menuKind = this.props.dispatch<any>(resourceUuidToContextMenuKind(resourceUuid, readonly));
 125                 if (menuKind && resource) {
 126                     this.props.dispatch<any>(
 127                         openContextMenu(event, {
 128                             name: resource.name,
 129                             uuid: resource.uuid,
 130                             ownerUuid: resource.ownerUuid,
 131                             isTrashed: 'isTrashed' in resource ? resource.isTrashed : false,
 132                             kind: resource.kind,
 133                             menuKind,
 134                             isAdmin,
 135                             isFrozen: resourceIsFrozen(resource, resources),
 136                             description: resource.description,
 137                             storageClassesDesired: (resource as CollectionResource).storageClassesDesired,
 138                             properties: 'properties' in resource ? resource.properties : {},
 139                         })
 140                     );
 141                 }
 142                 this.props.dispatch<any>(loadDetailsPanel(resourceUuid));
 143             };
 144
 145             handleRowDoubleClick = (uuid: string) => {
 146                 this.props.dispatch<any>(navigateTo(uuid));
 147             };
 148
 149             handleRowClick = (uuid: string) => {
 150                 this.props.dispatch<any>(toggleOne(uuid))
 151                 this.props.dispatch<any>(deselectAllOthers(uuid))
 152                 this.props.dispatch<any>(loadDetailsPanel(uuid));
 153             };
 154         }
 155     )
 156 );