1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
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';
25 type CssRules = 'root' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'headerTitle' | 'tabContainer';
27 const drawerWidth = 320;
28 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
32 transition: 'width 0.5s ease',
33 background: theme.palette.background.paper,
34 borderLeft: `1px solid ${theme.palette.divider}`,
48 color: theme.palette.grey["600"],
49 margin: `${theme.spacing.unit}px 0`,
56 overflowWrap: 'break-word',
57 wordWrap: 'break-word'
60 padding: theme.spacing.unit * 3
64 const getItem = (resource: DetailsResource): DetailsData => {
65 const res = resource || { kind: undefined, name: 'Projects' };
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);
74 return new EmptyDetails(res as EmptyResource);
78 const mapStateToProps = ({ detailsPanel, resources }: RootState) => {
79 const resource = getResource(detailsPanel.resourceUuid)(resources) as DetailsResource;
81 isOpened: detailsPanel.isOpened,
82 item: getItem(resource)
86 const mapDispatchToProps = (dispatch: Dispatch) => ({
87 onCloseDrawer: () => {
88 dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL());
92 export interface DetailsPanelDataProps {
93 onCloseDrawer: () => void;
98 type DetailsPanelProps = DetailsPanelDataProps & WithStyles<CssRules>;
100 export const DetailsPanel = withStyles(styles)(
101 connect(mapStateToProps, mapDispatchToProps)(
102 class extends React.Component<DetailsPanelProps> {
107 handleChange = (event: any, value: boolean) => {
108 this.setState({ tabsValue: value });
111 renderTabContainer = (children: React.ReactElement<any>) =>
112 <Typography className={this.props.classes.tabContainer} component="div">
117 const { classes, onCloseDrawer, isOpened, item } = this.props;
118 const { tabsValue } = this.state;
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'>
125 {item.getIcon(classes.headerIcon)}
128 <Typography variant="title" className={classes.headerTitle}>
133 <IconButton color="inherit" onClick={onCloseDrawer}>
139 <Tabs value={tabsValue} onChange={this.handleChange}>
140 <Tab disableRipple label="Details" />
141 <Tab disableRipple label="Activity" disabled />
143 {tabsValue === 0 && this.renderTabContainer(
144 <Grid container direction="column">
148 {tabsValue === 1 && this.renderTabContainer(
149 <Grid container direction="column" />