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