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