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 { CLOSE_DRAWER } from 'store/details-panel/details-panel-action';
  32
  33 type CssRules = 'root' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'tabContainer';
  34
  35 const DRAWER_WIDTH = 320;
  36 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  37     root: {
  38         background: theme.palette.background.paper,
  39         borderLeft: `1px solid ${theme.palette.divider}`,
  40         height: '100%',
  41         overflow: 'hidden',
  42         transition: `width ${SLIDE_TIMEOUT}ms ease`,
  43         width: 0,
  44     },
  45     opened: {
  46         width: DRAWER_WIDTH,
  47     },
  48     container: {
  49         maxWidth: 'none',
  50         width: DRAWER_WIDTH,
  51     },
  52     headerContainer: {
  53         color: theme.palette.grey["600"],
  54         margin: `${theme.spacing.unit}px 0`,
  55         textAlign: 'center',
  56     },
  57     headerIcon: {
  58         fontSize: '2.125rem',
  59     },
  60     tabContainer: {
  61         overflow: 'auto',
  62         padding: theme.spacing.unit * 1,
  63     },
  64 });
  65
  66 const EMPTY_RESOURCE: EmptyResource = { kind: undefined, name: 'Projects' };
  67
  68 const getItem = (res: DetailsResource): DetailsData => {
  69     if ('kind' in res) {
  70         switch (res.kind) {
  71             case ResourceKind.PROJECT:
  72                 return new ProjectDetails(res);
  73             case ResourceKind.COLLECTION:
  74                 return new CollectionDetails(res);
  75             case ResourceKind.PROCESS:
  76                 return new ProcessDetails(res);
  77             case ResourceKind.WORKFLOW:
  78                 return new WorkflowDetails(res);
  79             default:
  80                 return new EmptyDetails(res);
  81         }
  82     } else {
  83         return new FileDetails(res);
  84     }
  85 };
  86
  87 const mapStateToProps = ({ auth, detailsPanel, resources, collectionPanelFiles, selectedResourceUuid: selectedResource }: RootState) => {
  88     const currentItemUuid = selectedResource;
  89     const resource = getResource(currentItemUuid)(resources) as DetailsResource | undefined;
  90     const file = resource
  91         ? undefined
  92         : getNode(detailsPanel.resourceUuid)(collectionPanelFiles);
  93
  94     let isFrozen = false;
  95     if (resource) {
  96         isFrozen = resourceIsFrozen(resource, resources);
  97     }
  98
  99     return {
 100         isFrozen,
 101         authConfig: auth.config,
 102         isOpened: detailsPanel.isOpened,
 103         tabNr: detailsPanel.tabNr,
 104         res: resource || (file && file.value) || EMPTY_RESOURCE,
 105         currentItemUuid
 106     };
 107 };
 108
 109 const mapDispatchToProps = (dispatch: Dispatch) => ({
 110     onCloseDrawer: (currentItemId) => {
 111         dispatch<any>(toggleDetailsPanel(currentItemId));
 112     },
 113     setActiveTab: (tabNr: number) => {
 114         dispatch<any>(openDetailsPanel(undefined, tabNr));
 115     },
 116 });
 117
 118 export interface DetailsPanelDataProps {
 119     onCloseDrawer: (currentItemId) => void;
 120     setActiveTab: (tabNr: number) => void;
 121     authConfig: Config;
 122     isOpened: boolean;
 123     tabNr: number;
 124     res: DetailsResource;
 125     isFrozen: boolean;
 126 }
 127
 128 type DetailsPanelProps = DetailsPanelDataProps & WithStyles<CssRules>;
 129
 130 export const DetailsPanel = withStyles(styles)(
 131     connect(mapStateToProps, mapDispatchToProps)(
 132         class extends React.Component<DetailsPanelProps> {
 133             shouldComponentUpdate(nextProps: DetailsPanelProps) {
 134                 if ('etag' in nextProps.res && 'etag' in this.props.res &&
 135                     nextProps.res.etag === this.props.res.etag &&
 136                     nextProps.isOpened === this.props.isOpened &&
 137                     nextProps.tabNr === this.props.tabNr) {
 138                     return false;
 139                 }
 140                 return true;
 141             }
 142
 143             handleChange = (event: any, value: number) => {
 144                 this.props.setActiveTab(value);
 145             }
 146
 147             render() {
 148                 const { classes, isOpened } = this.props;
 149                 return (
 150                     <Grid
 151                         container
 152                         direction="column"
 153                         className={classnames([classes.root, { [classes.opened]: isOpened }])}>
 154                         <Transition
 155                             in={isOpened}
 156                             timeout={SLIDE_TIMEOUT}
 157                             unmountOnExit>
 158                             {isOpened ? this.renderContent() : <div />}
 159                         </Transition>
 160                     </Grid>
 161                 );
 162             }
 163
 164             renderContent() {
 165                 const { classes, onCloseDrawer, res, tabNr, authConfig } = this.props;
 166
 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 );