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
  26 type CssRules = 'root' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'headerTitle' | 'tabContainer';
  27
  28 const DRAWER_WIDTH = 320;
  29 const SLIDE_TIMEOUT = 500;
  30 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  31     root: {
  32         width: 0,
  33         overflow: 'hidden',
  34         transition: `width ${SLIDE_TIMEOUT}ms ease`,
  35         background: theme.palette.background.paper,
  36         borderLeft: `1px solid ${theme.palette.divider}`,
  37         height: '100%',
  38     },
  39     opened: {
  40         width: DRAWER_WIDTH,
  41     },
  42     container: {
  43         width: DRAWER_WIDTH,
  44     },
  45     drawerPaper: {
  46         position: 'relative',
  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     headerTitle: {
  58         overflowWrap: 'break-word',
  59         wordWrap: 'break-word'
  60     },
  61     tabContainer: {
  62         padding: theme.spacing.unit * 3,
  63         overflow: 'auto',
  64     }
  65 });
  66
  67 const getItem = (resource: DetailsResource): DetailsData => {
  68     const res = resource || { kind: undefined, name: 'Projects' };
  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         default:
  77             return new EmptyDetails(res as EmptyResource);
  78     }
  79 };
  80
  81 const mapStateToProps = ({ detailsPanel, resources }: RootState) => {
  82     const resource = getResource(detailsPanel.resourceUuid)(resources) as DetailsResource;
  83     return {
  84         isOpened: detailsPanel.isOpened,
  85         item: getItem(resource)
  86     };
  87 };
  88
  89 const mapDispatchToProps = (dispatch: Dispatch) => ({
  90     onCloseDrawer: () => {
  91         dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL());
  92     }
  93 });
  94
  95 export interface DetailsPanelDataProps {
  96     onCloseDrawer: () => void;
  97     isOpened: boolean;
  98     item: DetailsData;
  99 }
 100
 101 type DetailsPanelProps = DetailsPanelDataProps & WithStyles<CssRules>;
 102
 103 export const DetailsPanel = withStyles(styles)(
 104     connect(mapStateToProps, mapDispatchToProps)(
 105         class extends React.Component<DetailsPanelProps> {
 106             state = {
 107                 tabsValue: 0
 108             };
 109
 110             handleChange = (event: any, value: boolean) => {
 111                 this.setState({ tabsValue: value });
 112             }
 113
 114             render() {
 115                 const { classes, isOpened } = this.props;
 116                 return (
 117                     <Grid
 118                         container
 119                         direction="column"
 120                         className={classnames([classes.root, { [classes.opened]: isOpened }])}>
 121                         <Transition
 122                             in={isOpened}
 123                             timeout={SLIDE_TIMEOUT}
 124                             unmountOnExit>
 125                             {this.renderContent()}
 126                         </Transition>
 127                     </Grid>
 128                 );
 129             }
 130
 131             renderContent() {
 132                 const { classes, onCloseDrawer, item } = this.props;
 133                 const { tabsValue } = this.state;
 134                 return <Grid container direction="column" item xs className={classes.container} >
 135                     <Grid item className={classes.headerContainer}>
 136                         <Grid container alignItems='center' justify='space-around' wrap="nowrap">
 137                             <Grid item xs={2}>
 138                                 {item.getIcon(classes.headerIcon)}
 139                             </Grid>
 140                             <Grid item xs={8}>
 141                                 <Tooltip title={item.getTitle()}>
 142                                     <Typography variant="title" noWrap className={classes.headerTitle}>
 143                                         {item.getTitle()}
 144                                     </Typography>
 145                                 </Tooltip>
 146                             </Grid>
 147                             <Grid item>
 148                                 <IconButton color="inherit" onClick={onCloseDrawer}>
 149                                     {<CloseIcon />}
 150                                 </IconButton>
 151                             </Grid>
 152                         </Grid>
 153                     </Grid>
 154                     <Grid item>
 155                         <Tabs value={tabsValue} onChange={this.handleChange}>
 156                             <Tab disableRipple label="Details" />
 157                             <Tab disableRipple label="Activity" disabled />
 158                         </Tabs>
 159                     </Grid>
 160                     <Grid item xs className={this.props.classes.tabContainer} >
 161                         <Grid container direction="column">
 162                             {tabsValue === 0
 163                                 ? item.getDetails()
 164                                 : null}
 165                         </Grid>
 166                     </Grid>
 167                 </Grid >;
 168             }
 169         }
 170     )
 171 );