1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
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 import { ResourceData } from "~/store/resources-data/resources-data-reducer";
26 import { getResourceData } from "~/store/resources-data/resources-data";
27 import { toggleDetailsPanel } from '~/store/details-panel/details-panel-action';
29 type CssRules = 'root' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'tabContainer';
31 const DRAWER_WIDTH = 320;
32 const SLIDE_TIMEOUT = 500;
33 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
35 background: theme.palette.background.paper,
36 borderLeft: `1px solid ${theme.palette.divider}`,
39 transition: `width ${SLIDE_TIMEOUT}ms ease`,
50 color: theme.palette.grey["600"],
51 margin: `${theme.spacing.unit}px 0`,
59 padding: theme.spacing.unit * 3,
63 const getItem = (resource: DetailsResource, resourceData?: ResourceData): DetailsData => {
64 const res = resource || { kind: undefined, name: 'Projects' };
66 case ResourceKind.PROJECT:
67 return new ProjectDetails(res);
68 case ResourceKind.COLLECTION:
69 return new CollectionDetails(res, resourceData);
70 case ResourceKind.PROCESS:
71 return new ProcessDetails(res);
73 return new EmptyDetails(res as EmptyResource);
77 const mapStateToProps = ({ detailsPanel, resources, resourcesData }: RootState) => {
78 const resource = getResource(detailsPanel.resourceUuid)(resources) as DetailsResource;
79 const resourceData = getResourceData(detailsPanel.resourceUuid)(resourcesData);
81 isOpened: detailsPanel.isOpened,
82 item: getItem(resource, resourceData)
86 const mapDispatchToProps = (dispatch: Dispatch) => ({
87 onCloseDrawer: () => {
88 dispatch<any>(toggleDetailsPanel());
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 });
112 const { classes, isOpened } = this.props;
117 className={classnames([classes.root, { [classes.opened]: isOpened }])}>
120 timeout={SLIDE_TIMEOUT}
122 {this.renderContent()}
129 const { classes, onCloseDrawer, item } = this.props;
130 const { tabsValue } = this.state;
136 className={classes.container} >
139 className={classes.headerContainer}
142 justify='space-around'
145 {item.getIcon(classes.headerIcon)}
148 <Tooltip title={item.getTitle()}>
149 <Typography variant="title" noWrap>
155 <IconButton color="inherit" onClick={onCloseDrawer}>
161 <Tabs value={tabsValue} onChange={this.handleChange}>
162 <Tab disableRipple label="Details" />
163 <Tab disableRipple label="Activity" disabled />
166 <Grid item xs className={this.props.classes.tabContainer} >