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