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 from '@material-ui/core/Drawer';
7 import IconButton from "@material-ui/core/IconButton";
8 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
9 import { ArvadosTheme } from '../../common/custom-theme';
10 import Attribute from '../../components/attribute/attribute';
11 import Tabs from '@material-ui/core/Tabs';
12 import Tab from '@material-ui/core/Tab';
13 import Typography from '@material-ui/core/Typography';
14 import Grid from '@material-ui/core/Grid';
15 import * as classnames from "classnames";
16 import { connect, Dispatch } from 'react-redux';
17 import EmptyState from '../../components/empty-state/empty-state';
18 import { RootState } from '../../store/store';
19 import actions from "../../store/details-panel/details-panel-action";
20 import { Resource } from '../../common/api/common-resource-service';
21 import { ResourceKind } from '../../models/kinds';
22 import { ProjectResource } from '../../models/project';
23 import { CollectionResource } from '../../models/collection';
24 import IconBase, { IconTypes } from '../../components/icon/icon';
26 export interface DetailsPanelDataProps {
27 onCloseDrawer: () => void;
29 header: React.ReactElement<any>;
30 renderDetails?: React.ComponentType<{}>;
31 renderActivity?: React.ComponentType<{}>;
34 type DetailsPanelProps = DetailsPanelDataProps & WithStyles<CssRules>;
36 class DetailsPanel extends React.Component<DetailsPanelProps, {}> {
41 handleChange = (event: any, value: boolean) => {
42 this.setState({ tabsValue: value });
45 renderTabContainer = (children: React.ReactElement<any>) =>
46 <Typography className={this.props.classes.tabContainer} component="div">
51 const { classes, onCloseDrawer, isOpened, header, renderDetails, renderActivity } = this.props;
52 const { tabsValue } = this.state;
54 <Typography component="div" className={classnames([classes.container, { [classes.opened]: isOpened }])}>
55 <Drawer variant="permanent" anchor="right" classes={{ paper: classes.drawerPaper }}>
56 <Typography component="div" className={classes.headerContainer}>
57 <Grid container alignItems='center' justify='space-around'>
59 <IconButton color="inherit" onClick={onCloseDrawer}>
60 <IconBase icon={IconTypes.CLOSE} />
64 <Tabs value={tabsValue} onChange={this.handleChange}>
65 <Tab disableRipple label="Details" />
66 <Tab disableRipple label="Activity" />
68 {tabsValue === 0 && this.renderTabContainer(
69 <Grid container direction="column">
71 <EmptyState icon={IconTypes.ANNOUNCEMENT}
72 message='Select a file or folder to view its details.' />
73 <Attribute label='Type' value='Process' />
74 <Attribute label='Size' value='---' />
75 <Attribute label="Location">
76 <IconBase icon={IconTypes.FOLDER} />
79 <Attribute label='Outputs' link='http://www.google.pl' value='New output as link' />
80 <Attribute label='Owner' value='me' />
83 {tabsValue === 1 && this.renderTabContainer(
84 <Grid container direction="column">
86 <EmptyState icon={IconTypes.ANNOUNCEMENT} message='Select a file or folder to view its details.' />
96 type CssRules = 'drawerPaper' | 'container' | 'opened' | 'headerContainer' | 'tabContainer';
98 const drawerWidth = 320;
99 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
102 position: 'relative',
104 transition: 'width 0.5s ease',
111 position: 'relative',
115 color: theme.palette.grey["600"],
116 margin: `${theme.spacing.unit}px 0`,
119 color: theme.customs.colors.green700
123 padding: theme.spacing.unit * 3
127 const renderCollectionHeader = (collection: CollectionResource) =>
129 <IconBase icon={IconTypes.COLLECTION} />
130 <Typography variant="title">
135 const renderProjectHeader = (project: ProjectResource) =>
137 <IconBase icon={IconTypes.FOLDER} />
138 <Typography variant="title">
143 const renderHeader = (resource: Resource) => {
144 switch(resource.kind) {
145 case ResourceKind.Project:
146 return renderProjectHeader(resource as ProjectResource);
147 case ResourceKind.Collection:
148 return renderCollectionHeader(resource as CollectionResource);
154 const mapStateToProps = ({detailsPanel}: RootState) => ({
155 isOpened: detailsPanel.isOpened,
156 header: detailsPanel.item ? renderHeader(detailsPanel.item) : null
159 const mapDispatchToProps = (dispatch: Dispatch) => ({
160 onCloseDrawer: () => {
161 dispatch(actions.TOGGLE_DETAILS_PANEL());
165 const DetailsPanelContainer = connect(mapStateToProps, mapDispatchToProps)(DetailsPanel);
167 export default withStyles(styles)(DetailsPanelContainer);