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