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