1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import 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 { WorkflowDetails } from "./workflow-details";
22 import { DetailsData } from "./details-data";
23 import { DetailsResource } from "models/details";
24 import { Config } from 'common/config';
25 import { isInlineFileUrlSafe } from "../context-menu/actions/helpers";
26 import { getResource } from 'store/resources/resources';
27 import { toggleDetailsPanel, SLIDE_TIMEOUT, openDetailsPanel } from 'store/details-panel/details-panel-action';
28 import { FileDetails } from 'views-components/details-panel/file-details';
29 import { getNode } from 'models/tree';
30 import { resourceIsFrozen } from 'common/frozen-resources';
32 type CssRules = 'root' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'tabContainer';
34 const DRAWER_WIDTH = 320;
35 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
37 background: theme.palette.background.paper,
38 borderLeft: `1px solid ${theme.palette.divider}`,
41 transition: `width ${SLIDE_TIMEOUT}ms ease`,
52 color: theme.palette.grey["600"],
53 margin: `${theme.spacing.unit}px 0`,
61 padding: theme.spacing.unit * 1,
65 const EMPTY_RESOURCE: EmptyResource = { kind: undefined, name: 'Projects' };
67 const getItem = (res: DetailsResource): DetailsData => {
70 case ResourceKind.PROJECT:
71 return new ProjectDetails(res);
72 case ResourceKind.COLLECTION:
73 return new CollectionDetails(res);
74 case ResourceKind.PROCESS:
75 return new ProcessDetails(res);
76 case ResourceKind.WORKFLOW:
77 return new WorkflowDetails(res);
79 return new EmptyDetails(res);
82 return new FileDetails(res);
86 const mapStateToProps = ({ auth, detailsPanel, resources, collectionPanelFiles, multiselect, router }: RootState) => {
87 const isDetailsResourceChecked = multiselect.checkedList[detailsPanel.resourceUuid]
88 const currentRoute = router.location ? router.location.pathname : "";
89 const currentItemUuid = isDetailsResourceChecked || currentRoute.includes('collections') ? detailsPanel.resourceUuid : multiselect.selectedUuid ? multiselect.selectedUuid : currentRoute.split('/')[2];
90 const resource = getResource(currentItemUuid)(resources) as DetailsResource | undefined;
93 : getNode(detailsPanel.resourceUuid)(collectionPanelFiles);
97 isFrozen = resourceIsFrozen(resource, resources);
102 authConfig: auth.config,
103 isOpened: detailsPanel.isOpened,
104 tabNr: detailsPanel.tabNr,
105 res: resource || (file && file.value) || EMPTY_RESOURCE,
109 const mapDispatchToProps = (dispatch: Dispatch) => ({
110 onCloseDrawer: () => {
111 dispatch<any>(toggleDetailsPanel());
113 setActiveTab: (tabNr: number) => {
114 dispatch<any>(openDetailsPanel(undefined, tabNr));
118 export interface DetailsPanelDataProps {
119 onCloseDrawer: () => void;
120 setActiveTab: (tabNr: number) => void;
124 res: DetailsResource;
128 type DetailsPanelProps = DetailsPanelDataProps & WithStyles<CssRules>;
130 export const DetailsPanel = withStyles(styles)(
131 connect(mapStateToProps, mapDispatchToProps)(
132 class extends React.Component<DetailsPanelProps> {
133 shouldComponentUpdate(nextProps: DetailsPanelProps) {
134 if ('etag' in nextProps.res && 'etag' in this.props.res &&
135 nextProps.res.etag === this.props.res.etag &&
136 nextProps.isOpened === this.props.isOpened &&
137 nextProps.tabNr === this.props.tabNr) {
143 handleChange = (event: any, value: number) => {
144 this.props.setActiveTab(value);
148 const { classes, isOpened } = this.props;
153 className={classnames([classes.root, { [classes.opened]: isOpened }])}>
156 timeout={SLIDE_TIMEOUT}
158 {isOpened ? this.renderContent() : <div />}
165 const { classes, onCloseDrawer, res, tabNr, authConfig } = this.props;
167 let shouldShowInlinePreview = false;
168 if (!('kind' in res)) {
169 shouldShowInlinePreview = isInlineFileUrlSafe(
171 authConfig.keepWebServiceUrl,
172 authConfig.keepWebInlineServiceUrl
173 ) || authConfig.clusterConfig.Collections.TrustAllContent;
176 const item = getItem(res);
178 data-cy='details-panel'
183 className={classes.container} >
186 className={classes.headerContainer}
189 justify='space-around'
192 {item.getIcon(classes.headerIcon)}
195 <Tooltip title={item.getTitle()}>
196 <Typography variant='h6' noWrap>
202 <IconButton color="inherit" onClick={onCloseDrawer}>
208 <Tabs onChange={this.handleChange}
209 value={(item.getTabLabels().length >= tabNr + 1) ? tabNr : 0}>
210 {item.getTabLabels().map((tabLabel, idx) =>
211 <Tab key={`tab-label-${idx}`} disableRipple label={tabLabel} />)
215 <Grid item xs className={this.props.classes.tabContainer} >
216 {item.getDetails({ tabNr, showPreview: shouldShowInlinePreview })}