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