services/workbench2/src/views-components/details-panel/details-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 { IconButton, Tabs, Tab, Typography, Grid, Tooltip } from '@mui/material';
   7 import { CustomStyleRulesCallback } from 'common/custom-theme';
   8 import { WithStyles } from '@mui/styles';
   9 import withStyles from '@mui/styles/withStyles';
  10 import { Transition } from 'react-transition-group';
  11 import { ArvadosTheme } from 'common/custom-theme';
  12 import classnames from "classnames";
  13 import { connect } from 'react-redux';
  14 import { RootState } from 'store/store';
  15 import { CloseIcon } from 'components/icon/icon';
  16 import { EmptyResource } from 'models/empty';
  17 import { Dispatch } from "redux";
  18 import { ResourceKind } from "models/resource";
  19 import { ProjectDetails } from "./project-details";
  20 import { RootProjectDetails } from './root-project-details';
  21 import { CollectionDetails } from "./collection-details";
  22 import { ProcessDetails } from "./process-details";
  23 import { EmptyDetails } from "./empty-details";
  24 import { WorkflowDetails } from "./workflow-details";
  25 import { DetailsData } from "./details-data";
  26 import { DetailsResource } from "models/details";
  27 import { Config } from 'common/config';
  28 import { isInlineFileUrlSafe } from "../context-menu/actions/helpers";
  29 import { getResource } from 'store/resources/resources';
  30 import { toggleDetailsPanel, SLIDE_TIMEOUT, openDetailsPanel } from 'store/details-panel/details-panel-action';
  31 import { FileDetails } from 'views-components/details-panel/file-details';
  32 import { getNode } from 'models/tree';
  33 import { resourceIsFrozen } from 'common/frozen-resources';
  34 import { CLOSE_DRAWER } from 'store/details-panel/details-panel-action';
  35
  36 type CssRules = 'root' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'tabContainer';
  37
  38 const DRAWER_WIDTH = 320;
  39 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  40     root: {
  41         background: theme.palette.background.paper,
  42         borderLeft: `1px solid ${theme.palette.divider}`,
  43         height: '100%',
  44         overflow: 'hidden',
  45         transition: `width ${SLIDE_TIMEOUT}ms ease`,
  46         width: 0,
  47     },
  48     opened: {
  49         width: DRAWER_WIDTH,
  50     },
  51     container: {
  52         maxWidth: 'none',
  53         width: DRAWER_WIDTH,
  54     },
  55     headerContainer: {
  56         color: theme.palette.grey["600"],
  57         margin: `${theme.spacing(1)} 0`,
  58         textAlign: 'center',
  59     },
  60     headerIcon: {
  61         fontSize: '2.125rem',
  62     },
  63     tabContainer: {
  64         overflow: 'auto',
  65         padding: theme.spacing(1),
  66     },
  67 });
  68
  69 const EMPTY_RESOURCE: EmptyResource = { kind: undefined, name: 'Projects' };
  70
  71 const getItem = (res: DetailsResource, pathName: string): DetailsData => {
  72     if ('kind' in res) {
  73         switch (res.kind) {
  74             case ResourceKind.PROJECT:
  75                 return new ProjectDetails(res);
  76             case ResourceKind.COLLECTION:
  77                 return new CollectionDetails(res);
  78             case ResourceKind.PROCESS:
  79                 return new ProcessDetails(res);
  80             case ResourceKind.WORKFLOW:
  81                 return new WorkflowDetails(res);
  82             case ResourceKind.USER:
  83                 if(pathName.includes('projects')) {
  84                     return new RootProjectDetails(res);
  85                 }
  86                 return new EmptyDetails(EMPTY_RESOURCE);
  87             default:
  88                 return new EmptyDetails(res as EmptyResource);
  89         }
  90     } else {
  91         return new FileDetails(res);
  92     }
  93 };
  94
  95 const mapStateToProps = ({ auth, detailsPanel, resources, collectionPanelFiles, selectedResourceUuid, properties, router }: RootState) => {
  96     const resource = getResource(selectedResourceUuid ?? properties.currentRouteUuid)(resources) as DetailsResource | undefined;
  97     const file = resource
  98         ? undefined
  99         : getNode(detailsPanel.resourceUuid)(collectionPanelFiles);
 100
 101     let isFrozen = false;
 102     if (resource) {
 103         isFrozen = resourceIsFrozen(resource, resources);
 104     }
 105
 106     return {
 107         isFrozen,
 108         authConfig: auth.config,
 109         isOpened: detailsPanel.isOpened,
 110         tabNr: detailsPanel.tabNr,
 111         res: resource || (file && file.value) || EMPTY_RESOURCE,
 112         pathname: router.location ? router.location.pathname : "",
 113     };
 114 };
 115
 116 const mapDispatchToProps = (dispatch: Dispatch) => ({
 117     onCloseDrawer: (currentItemId) => {
 118         dispatch<any>(toggleDetailsPanel(currentItemId));
 119     },
 120     setActiveTab: (tabNr: number) => {
 121         dispatch<any>(openDetailsPanel(undefined, tabNr));
 122     },
 123 });
 124
 125 export interface DetailsPanelDataProps {
 126     onCloseDrawer: (currentItemId) => void;
 127     setActiveTab: (tabNr: number) => void;
 128     authConfig: Config;
 129     isOpened: boolean;
 130     tabNr: number;
 131     res: DetailsResource;
 132     isFrozen: boolean;
 133     pathname: string;
 134 }
 135
 136 type DetailsPanelProps = DetailsPanelDataProps & WithStyles<CssRules>;
 137
 138 export const DetailsPanel = withStyles(styles)(
 139     connect(mapStateToProps, mapDispatchToProps)(
 140         class extends React.Component<DetailsPanelProps> {
 141             shouldComponentUpdate(nextProps: DetailsPanelProps) {
 142                 if ('etag' in nextProps.res && 'etag' in this.props.res &&
 143                     nextProps.res.etag === this.props.res.etag &&
 144                     nextProps.isOpened === this.props.isOpened &&
 145                     nextProps.tabNr === this.props.tabNr) {
 146                     return false;
 147                 }
 148                 return true;
 149             }
 150
 151             handleChange = (event: any, value: number) => {
 152                 this.props.setActiveTab(value);
 153             }
 154
 155             render() {
 156                 const { classes, isOpened } = this.props;
 157                 return (
 158                     <Grid
 159                         container
 160                         direction="column"
 161                         className={classnames([classes.root, { [classes.opened]: isOpened }])}>
 162                         <Transition
 163                             in={isOpened}
 164                             timeout={SLIDE_TIMEOUT}
 165                             unmountOnExit>
 166                             {isOpened ? this.renderContent() : <div />}
 167                         </Transition>
 168                     </Grid>
 169                 );
 170             }
 171
 172             renderContent() {
 173                 const { classes, onCloseDrawer, res, tabNr, authConfig, pathname } = this.props;
 174                 let shouldShowInlinePreview = false;
 175                 if (!('kind' in res)) {
 176                     shouldShowInlinePreview = isInlineFileUrlSafe(
 177                         res ? res.url : "",
 178                         authConfig.keepWebServiceUrl,
 179                         authConfig.keepWebInlineServiceUrl
 180                     ) || authConfig.clusterConfig.Collections.TrustAllContent;
 181                 }
 182
 183                 const item = getItem(res, pathname);
 184                 return (
 185                     <Grid
 186                         data-cy='details-panel'
 187                         container
 188                         direction="column"
 189                         item
 190                         xs
 191                         className={classes.container} >
 192                         <Grid
 193                             item
 194                             className={classes.headerContainer}
 195                             container
 196                             alignItems='center'
 197                             justifyContent='space-around'
 198                             wrap="nowrap">
 199                             <Grid item xs={2}>
 200                                 {item.getIcon(classes.headerIcon)}
 201                             </Grid>
 202                             <Grid item xs={8}>
 203                                 <Tooltip title={item.getTitle()}>
 204                                     <Typography variant='h6' noWrap>
 205                                         {item.getTitle()}
 206                                     </Typography>
 207                                 </Tooltip>
 208                             </Grid>
 209                             <Grid item>
 210                                 <IconButton data-cy="close-details-btn" color="inherit" onClick={()=>onCloseDrawer(CLOSE_DRAWER)} size="large">
 211                                     <CloseIcon />
 212                                 </IconButton>
 213                             </Grid>
 214                         </Grid>
 215                         <Grid item>
 216                             <Tabs onChange={this.handleChange}
 217                                 value={(item.getTabLabels().length >= tabNr + 1) ? tabNr : 0}>
 218                                 {item.getTabLabels().map((tabLabel, idx) =>
 219                                     <Tab key={`tab-label-${idx}`} disableRipple label={tabLabel} />)
 220                                 }
 221                             </Tabs>
 222                         </Grid>
 223                         <Grid item xs className={this.props.classes.tabContainer} >
 224                             {item.getDetails({ tabNr, showPreview: shouldShowInlinePreview })}
 225                         </Grid>
 226                     </Grid >
 227                 );
 228             }
 229         }
 230     )
 231 );