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 * as 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 * as 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 { ResourceData } from "~/store/resources-data/resources-data-reducer";
  25 import { getResourceData } from "~/store/resources-data/resources-data";
  26 import { toggleDetailsPanel, SLIDE_TIMEOUT } 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 * 3,
  60     },
  61 });
  62
  63 const EMPTY_RESOURCE: EmptyResource = { kind: undefined, name: 'Projects' };
  64
  65 const getItem = (res: DetailsResource, resourceData?: ResourceData, numberOfCollectionsByPDH?: number): 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, resourceData, numberOfCollectionsByPDH);
  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 = ({ detailsPanel, resources, resourcesData, collectionPanelFiles, collectionPanel }: RootState) => {
  83     const resource = getResource(detailsPanel.resourceUuid)(resources) as DetailsResource | undefined;
  84     const file = getNode(detailsPanel.resourceUuid)(collectionPanelFiles);
  85     const resourceData = getResourceData(detailsPanel.resourceUuid)(resourcesData);
  86     const numberOfCollectionsByPDH = collectionPanel.numberOfCollectionsWithSamePDH;
  87     return {
  88         isOpened: detailsPanel.isOpened,
  89         item: getItem(resource || (file && file.value) || EMPTY_RESOURCE, resourceData, numberOfCollectionsByPDH),
  90     };
  91 };
  92
  93 const mapDispatchToProps = (dispatch: Dispatch) => ({
  94     onCloseDrawer: () => {
  95         dispatch<any>(toggleDetailsPanel());
  96     }
  97 });
  98
  99 export interface DetailsPanelDataProps {
 100     onCloseDrawer: () => void;
 101     isOpened: boolean;
 102     item: DetailsData;
 103 }
 104
 105 type DetailsPanelProps = DetailsPanelDataProps & WithStyles<CssRules>;
 106
 107 export const DetailsPanel = withStyles(styles)(
 108     connect(mapStateToProps, mapDispatchToProps)(
 109         class extends React.Component<DetailsPanelProps> {
 110             state = {
 111                 tabsValue: 0
 112             };
 113
 114             handleChange = (event: any, value: boolean) => {
 115                 this.setState({ tabsValue: value });
 116             }
 117
 118             render() {
 119                 const { classes, isOpened } = this.props;
 120                 return (
 121                     <Grid
 122                         container
 123                         direction="column"
 124                         className={classnames([classes.root, { [classes.opened]: isOpened }])}>
 125                         <Transition
 126                             in={isOpened}
 127                             timeout={SLIDE_TIMEOUT}
 128                             unmountOnExit>
 129                             {this.renderContent()}
 130                         </Transition>
 131                     </Grid>
 132                 );
 133             }
 134
 135             renderContent() {
 136                 const { classes, onCloseDrawer, item } = this.props;
 137                 const { tabsValue } = this.state;
 138                 return <Grid
 139                     container
 140                     direction="column"
 141                     item
 142                     xs
 143                     className={classes.container} >
 144                     <Grid
 145                         item
 146                         className={classes.headerContainer}
 147                         container
 148                         alignItems='center'
 149                         justify='space-around'
 150                         wrap="nowrap">
 151                         <Grid item xs={2}>
 152                             {item.getIcon(classes.headerIcon)}
 153                         </Grid>
 154                         <Grid item xs={8}>
 155                             <Tooltip title={item.getTitle()}>
 156                                 <Typography variant='h6' noWrap>
 157                                     {item.getTitle()}
 158                                 </Typography>
 159                             </Tooltip>
 160                         </Grid>
 161                         <Grid item>
 162                             <IconButton color="inherit" onClick={onCloseDrawer}>
 163                                 <CloseIcon />
 164                             </IconButton>
 165                         </Grid>
 166                     </Grid>
 167                     <Grid item>
 168                         <Tabs value={tabsValue} onChange={this.handleChange}>
 169                             <Tab disableRipple label="Details" />
 170                             <Tab disableRipple label="Activity" disabled />
 171                         </Tabs>
 172                     </Grid>
 173                     <Grid item xs className={this.props.classes.tabContainer} >
 174                         {tabsValue === 0
 175                             ? item.getDetails()
 176                             : null}
 177                     </Grid>
 178                 </Grid >;
 179             }
 180         }
 181     )
 182 );