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