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