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 classnames from "classnames";
11 import { connect } from 'react-redux';
12 import { RootState } from '~/store/store';
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 import { toggleDetailsPanel, SLIDE_TIMEOUT, openDetailsPanel } from '~/store/details-panel/details-panel-action';
25 import { FileDetails } from '~/views-components/details-panel/file-details';
26 import { getNode } from '~/models/tree';
28 type CssRules = 'root' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'tabContainer';
30 const DRAWER_WIDTH = 320;
31 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
33 background: theme.palette.background.paper,
34 borderLeft: `1px solid ${theme.palette.divider}`,
37 transition: `width ${SLIDE_TIMEOUT}ms ease`,
48 color: theme.palette.grey["600"],
49 margin: `${theme.spacing.unit}px 0`,
57 padding: theme.spacing.unit * 1,
61 const EMPTY_RESOURCE: EmptyResource = { kind: undefined, name: 'Projects' };
63 const getItem = (res: DetailsResource): DetailsData => {
66 case ResourceKind.PROJECT:
67 return new ProjectDetails(res);
68 case ResourceKind.COLLECTION:
69 return new CollectionDetails(res);
70 case ResourceKind.PROCESS:
71 return new ProcessDetails(res);
73 return new EmptyDetails(res);
76 return new FileDetails(res);
80 const mapStateToProps = ({ detailsPanel, resources, collectionPanelFiles }: RootState) => {
81 const resource = getResource(detailsPanel.resourceUuid)(resources) as DetailsResource | undefined;
82 const file = getNode(detailsPanel.resourceUuid)(collectionPanelFiles);
84 isOpened: detailsPanel.isOpened,
85 tabNr: detailsPanel.tabNr,
86 item: getItem(resource || (file && file.value) || EMPTY_RESOURCE),
90 const mapDispatchToProps = (dispatch: Dispatch) => ({
91 onCloseDrawer: () => {
92 dispatch<any>(toggleDetailsPanel());
94 setActiveTab: (tabNr: number) => {
95 dispatch<any>(openDetailsPanel(undefined, tabNr));
99 export interface DetailsPanelDataProps {
100 onCloseDrawer: () => void;
101 setActiveTab: (tabNr: number) => void;
107 type DetailsPanelProps = DetailsPanelDataProps & WithStyles<CssRules>;
109 export const DetailsPanel = withStyles(styles)(
110 connect(mapStateToProps, mapDispatchToProps)(
111 class extends React.Component<DetailsPanelProps> {
112 handleChange = (event: any, value: number) => {
113 this.props.setActiveTab(value);
117 const { classes, isOpened } = this.props;
122 className={classnames([classes.root, { [classes.opened]: isOpened }])}>
125 timeout={SLIDE_TIMEOUT}
127 {this.renderContent()}
134 const { classes, onCloseDrawer, item, tabNr } = this.props;
140 className={classes.container} >
143 className={classes.headerContainer}
146 justify='space-around'
149 {item.getIcon(classes.headerIcon)}
152 <Tooltip title={item.getTitle()}>
153 <Typography variant='h6' noWrap>
159 <IconButton color="inherit" onClick={onCloseDrawer}>
165 <Tabs onChange={this.handleChange}
166 value={(item.getTabLabels().length >= tabNr+1) ? tabNr : 0}>
167 { item.getTabLabels().map((tabLabel, idx) =>
168 <Tab key={`tab-label-${idx}`} disableRipple label={tabLabel} />)
172 <Grid item xs className={this.props.classes.tabContainer} >
173 {item.getDetails(tabNr)}