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, pathName: string): 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                 if(pathName.includes('projects')) {
  82                     return new RootProjectDetails(res);
  83                 }
  84                 return new EmptyDetails(EMPTY_RESOURCE);
  85             default:
  86                 return new EmptyDetails(res as EmptyResource);
  87         }
  88     } else {
  89         return new FileDetails(res);
  90     }
  91 };
  92
  93 const mapStateToProps = ({ auth, detailsPanel, resources, collectionPanelFiles, selectedResourceUuid, properties, router }: RootState) => {
  94     const resource = getResource(selectedResourceUuid ?? properties.currentRouteUuid)(resources) as DetailsResource | undefined;
  95     const file = resource
  96         ? undefined
  97         : getNode(detailsPanel.resourceUuid)(collectionPanelFiles);
  98
  99     let isFrozen = false;
 100     if (resource) {
 101         isFrozen = resourceIsFrozen(resource, resources);
 102     }
 103
 104     return {
 105         isFrozen,
 106         authConfig: auth.config,
 107         isOpened: detailsPanel.isOpened,
 108         tabNr: detailsPanel.tabNr,
 109         res: resource || (file && file.value) || EMPTY_RESOURCE,
 110         pathname: router.location ? router.location.pathname : "",
 111     };
 112 };
 113
 114 const mapDispatchToProps = (dispatch: Dispatch) => ({
 115     onCloseDrawer: (currentItemId) => {
 116         dispatch<any>(toggleDetailsPanel(currentItemId));
 117     },
 118     setActiveTab: (tabNr: number) => {
 119         dispatch<any>(openDetailsPanel(undefined, tabNr));
 120     },
 121 });
 122
 123 export interface DetailsPanelDataProps {
 124     onCloseDrawer: (currentItemId) => void;
 125     setActiveTab: (tabNr: number) => void;
 126     authConfig: Config;
 127     isOpened: boolean;
 128     tabNr: number;
 129     res: DetailsResource;
 130     isFrozen: boolean;
 131     pathname: string;
 132 }
 133
 134 type DetailsPanelProps = DetailsPanelDataProps & WithStyles<CssRules>;
 135
 136 export const DetailsPanel = withStyles(styles)(
 137     connect(mapStateToProps, mapDispatchToProps)(
 138         class extends React.Component<DetailsPanelProps> {
 139             shouldComponentUpdate(nextProps: DetailsPanelProps) {
 140                 if ('etag' in nextProps.res && 'etag' in this.props.res &&
 141                     nextProps.res.etag === this.props.res.etag &&
 142                     nextProps.isOpened === this.props.isOpened &&
 143                     nextProps.tabNr === this.props.tabNr) {
 144                     return false;
 145                 }
 146                 return true;
 147             }
 148
 149             handleChange = (event: any, value: number) => {
 150                 this.props.setActiveTab(value);
 151             }
 152
 153             render() {
 154                 const { classes, isOpened } = this.props;
 155                 return (
 156                     <Grid
 157                         container
 158                         direction="column"
 159                         className={classnames([classes.root, { [classes.opened]: isOpened }])}>
 160                         <Transition
 161                             in={isOpened}
 162                             timeout={SLIDE_TIMEOUT}
 163                             unmountOnExit>
 164                             {isOpened ? this.renderContent() : <div />}
 165                         </Transition>
 166                     </Grid>
 167                 );
 168             }
 169
 170             renderContent() {
 171                 const { classes, onCloseDrawer, res, tabNr, authConfig, pathname } = this.props;
 172                 let shouldShowInlinePreview = false;
 173                 if (!('kind' in res)) {
 174                     shouldShowInlinePreview = isInlineFileUrlSafe(
 175                         res ? res.url : "",
 176                         authConfig.keepWebServiceUrl,
 177                         authConfig.keepWebInlineServiceUrl
 178                     ) || authConfig.clusterConfig.Collections.TrustAllContent;
 179                 }
 180
 181                 const item = getItem(res, pathname);
 182                 return <Grid
 183                     data-cy='details-panel'
 184                     container
 185                     direction="column"
 186                     item
 187                     xs
 188                     className={classes.container} >
 189                     <Grid
 190                         item
 191                         className={classes.headerContainer}
 192                         container
 193                         alignItems='center'
 194                         justify='space-around'
 195                         wrap="nowrap">
 196                         <Grid item xs={2}>
 197                             {item.getIcon(classes.headerIcon)}
 198                         </Grid>
 199                         <Grid item xs={8}>
 200                             <Tooltip title={item.getTitle()}>
 201                                 <Typography variant='h6' noWrap>
 202                                     {item.getTitle()}
 203                                 </Typography>
 204                             </Tooltip>
 205                         </Grid>
 206                         <Grid item>
 207                             <IconButton data-cy="close-details-btn" color="inherit" onClick={()=>onCloseDrawer(CLOSE_DRAWER)}>
 208                                 <CloseIcon />
 209                             </IconButton>
 210                         </Grid>
 211                     </Grid>
 212                     <Grid item>
 213                         <Tabs onChange={this.handleChange}
 214                             value={(item.getTabLabels().length >= tabNr + 1) ? tabNr : 0}>
 215                             {item.getTabLabels().map((tabLabel, idx) =>
 216                                 <Tab key={`tab-label-${idx}`} disableRipple label={tabLabel} />)
 217                             }
 218                         </Tabs>
 219                     </Grid>
 220                     <Grid item xs className={this.props.classes.tabContainer} >
 221                         {item.getDetails({ tabNr, showPreview: shouldShowInlinePreview })}
 222                     </Grid>
 223                 </Grid >;
 224             }
 225         }
 226     )
 227 );