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