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