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 { Drawer, IconButton, Tabs, Tab, Typography, Grid } from '@material-ui/core';
   7 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
   8 import { ArvadosTheme } from '~/common/custom-theme';
   9 import * as classnames from "classnames";
  10 import { connect } from 'react-redux';
  11 import { RootState } from '~/store/store';
  12 import { detailsPanelActions } from "~/store/details-panel/details-panel-action";
  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
  25 type CssRules = 'root' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'headerTitle' | 'tabContainer';
  26
  27 const drawerWidth = 320;
  28 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  29     root: {
  30         width: 0,
  31         overflowX: 'hidden',
  32         transition: 'width 0.5s ease',
  33         background: theme.palette.background.paper,
  34         borderLeft: `1px solid ${theme.palette.divider}`,
  35         height: '100%',
  36     },
  37     opened: {
  38         width: drawerWidth,
  39     },
  40     container: {
  41         width: drawerWidth,
  42     },
  43     drawerPaper: {
  44         position: 'relative',
  45         width: drawerWidth
  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     headerTitle: {
  56         overflowWrap: 'break-word',
  57         wordWrap: 'break-word'
  58     },
  59     tabContainer: {
  60         padding: theme.spacing.unit * 3
  61     }
  62 });
  63
  64 const getItem = (resource: DetailsResource): DetailsData => {
  65     const res = resource || { kind: undefined, name: 'Projects' };
  66     switch (res.kind) {
  67         case ResourceKind.PROJECT:
  68             return new ProjectDetails(res);
  69         case ResourceKind.COLLECTION:
  70             return new CollectionDetails(res);
  71         case ResourceKind.PROCESS:
  72             return new ProcessDetails(res);
  73         default:
  74             return new EmptyDetails(res as EmptyResource);
  75     }
  76 };
  77
  78 const mapStateToProps = ({ detailsPanel, resources }: RootState) => {
  79     const resource = getResource(detailsPanel.resourceUuid)(resources) as DetailsResource;
  80     return {
  81         isOpened: detailsPanel.isOpened,
  82         item: getItem(resource)
  83     };
  84 };
  85
  86 const mapDispatchToProps = (dispatch: Dispatch) => ({
  87     onCloseDrawer: () => {
  88         dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL());
  89     }
  90 });
  91
  92 export interface DetailsPanelDataProps {
  93     onCloseDrawer: () => void;
  94     isOpened: boolean;
  95     item: DetailsData;
  96 }
  97
  98 type DetailsPanelProps = DetailsPanelDataProps & WithStyles<CssRules>;
  99
 100 export const DetailsPanel = withStyles(styles)(
 101     connect(mapStateToProps, mapDispatchToProps)(
 102         class extends React.Component<DetailsPanelProps> {
 103             state = {
 104                 tabsValue: 0
 105             };
 106
 107             handleChange = (event: any, value: boolean) => {
 108                 this.setState({ tabsValue: value });
 109             }
 110
 111             renderTabContainer = (children: React.ReactElement<any>) =>
 112                 <Typography className={this.props.classes.tabContainer} component="div">
 113                     {children}
 114                 </Typography>
 115
 116             render() {
 117                 const { classes, onCloseDrawer, isOpened, item } = this.props;
 118                 const { tabsValue } = this.state;
 119                 return (
 120                     <div className={classnames([classes.root, { [classes.opened]: isOpened }])}>
 121                         <div className={classes.container}>
 122                             <div className={classes.headerContainer}>
 123                                 <Grid container alignItems='center' justify='space-around'>
 124                                     <Grid item xs={2}>
 125                                         {item.getIcon(classes.headerIcon)}
 126                                     </Grid>
 127                                     <Grid item xs={8}>
 128                                         <Typography variant="title" className={classes.headerTitle}>
 129                                             {item.getTitle()}
 130                                         </Typography>
 131                                     </Grid>
 132                                     <Grid item>
 133                                         <IconButton color="inherit" onClick={onCloseDrawer}>
 134                                             {<CloseIcon />}
 135                                         </IconButton>
 136                                     </Grid>
 137                                 </Grid>
 138                             </div>
 139                             <Tabs value={tabsValue} onChange={this.handleChange}>
 140                                 <Tab disableRipple label="Details" />
 141                                 <Tab disableRipple label="Activity" disabled />
 142                             </Tabs>
 143                             {tabsValue === 0 && this.renderTabContainer(
 144                                 <Grid container direction="column">
 145                                     {item.getDetails()}
 146                                 </Grid>
 147                             )}
 148                             {tabsValue === 1 && this.renderTabContainer(
 149                                 <Grid container direction="column" />
 150                             )}
 151                         </div>
 152                     </div>
 153                 );
 154             }
 155         }
 156     )
 157 );