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