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