21702: Merge branch 'main' into 21702-keep-web-replace_files
[arvados.git] / services / workbench2 / src / views-components / details-panel / details-panel.tsx
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
5 import React from 'react';
6 import { IconButton, Tabs, Tab, Typography, Grid, Tooltip } from '@mui/material';
7 import { CustomStyleRulesCallback } from 'common/custom-theme';
8 import { WithStyles } from '@mui/styles';
9 import withStyles from '@mui/styles/withStyles';
10 import { Transition } from 'react-transition-group';
11 import { ArvadosTheme } from 'common/custom-theme';
12 import classnames from "classnames";
13 import { connect } from 'react-redux';
14 import { RootState } from 'store/store';
15 import { CloseIcon } from 'components/icon/icon';
16 import { EmptyResource } from 'models/empty';
17 import { Dispatch } from "redux";
18 import { ResourceKind } from "models/resource";
19 import { ProjectDetails } from "./project-details";
20 import { RootProjectDetails } from './root-project-details';
21 import { CollectionDetails } from "./collection-details";
22 import { ProcessDetails } from "./process-details";
23 import { EmptyDetails } from "./empty-details";
24 import { WorkflowDetails } from "./workflow-details";
25 import { DetailsData } from "./details-data";
26 import { DetailsResource } from "models/details";
27 import { Config } from 'common/config';
28 import { isInlineFileUrlSafe } from "../context-menu/actions/helpers";
29 import { getResource } from 'store/resources/resources';
30 import { toggleDetailsPanel, SLIDE_TIMEOUT, openDetailsPanel } from 'store/details-panel/details-panel-action';
31 import { FileDetails } from 'views-components/details-panel/file-details';
32 import { getNode } from 'models/tree';
33 import { resourceIsFrozen } from 'common/frozen-resources';
34 import { CLOSE_DRAWER } from 'store/details-panel/details-panel-action';
35
36 type CssRules = 'root' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'tabContainer';
37
38 const DRAWER_WIDTH = 320;
39 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
40     root: {
41         background: theme.palette.background.paper,
42         borderLeft: `1px solid ${theme.palette.divider}`,
43         height: '100%',
44         overflow: 'hidden',
45         transition: `width ${SLIDE_TIMEOUT}ms ease`,
46         width: 0,
47     },
48     opened: {
49         width: DRAWER_WIDTH,
50     },
51     container: {
52         maxWidth: 'none',
53         width: DRAWER_WIDTH,
54     },
55     headerContainer: {
56         color: theme.palette.grey["600"],
57         margin: `${theme.spacing(1)} 0`,
58         textAlign: 'center',
59     },
60     headerIcon: {
61         fontSize: '2.125rem',
62     },
63     tabContainer: {
64         overflow: 'auto',
65         padding: theme.spacing(1),
66     },
67 });
68
69 const EMPTY_RESOURCE: EmptyResource = { kind: undefined, name: 'Projects' };
70
71 const getItem = (res: DetailsResource, pathName: string): DetailsData => {
72     if ('kind' in res) {
73         switch (res.kind) {
74             case ResourceKind.PROJECT:
75                 return new ProjectDetails(res);
76             case ResourceKind.COLLECTION:
77                 return new CollectionDetails(res);
78             case ResourceKind.PROCESS:
79                 return new ProcessDetails(res);
80             case ResourceKind.WORKFLOW:
81                 return new WorkflowDetails(res);
82             case ResourceKind.USER:
83                 if(pathName.includes('projects')) {
84                     return new RootProjectDetails(res);
85                 }
86                 return new EmptyDetails(EMPTY_RESOURCE);
87             default:
88                 return new EmptyDetails(res as EmptyResource);
89         }
90     } else {
91         return new FileDetails(res);
92     }
93 };
94
95 const mapStateToProps = ({ auth, detailsPanel, resources, collectionPanelFiles, selectedResourceUuid, properties, router }: RootState) => {
96     const resource = getResource(selectedResourceUuid ?? properties.currentRouteUuid)(resources) as DetailsResource | undefined;
97     const file = resource
98         ? undefined
99         : getNode(detailsPanel.resourceUuid)(collectionPanelFiles);
100
101     let isFrozen = false;
102     if (resource) {
103         isFrozen = resourceIsFrozen(resource, resources);
104     }
105
106     return {
107         isFrozen,
108         authConfig: auth.config,
109         isOpened: detailsPanel.isOpened,
110         tabNr: detailsPanel.tabNr,
111         res: resource || (file && file.value) || EMPTY_RESOURCE,
112         pathname: router.location ? router.location.pathname : "",
113     };
114 };
115
116 const mapDispatchToProps = (dispatch: Dispatch) => ({
117     onCloseDrawer: (currentItemId) => {
118         dispatch<any>(toggleDetailsPanel(currentItemId));
119     },
120     setActiveTab: (tabNr: number) => {
121         dispatch<any>(openDetailsPanel(undefined, tabNr));
122     },
123 });
124
125 export interface DetailsPanelDataProps {
126     onCloseDrawer: (currentItemId) => void;
127     setActiveTab: (tabNr: number) => void;
128     authConfig: Config;
129     isOpened: boolean;
130     tabNr: number;
131     res: DetailsResource;
132     isFrozen: boolean;
133     pathname: string;
134 }
135
136 type DetailsPanelProps = DetailsPanelDataProps & WithStyles<CssRules>;
137
138 export const DetailsPanel = withStyles(styles)(
139     connect(mapStateToProps, mapDispatchToProps)(
140         class extends React.Component<DetailsPanelProps> {
141             shouldComponentUpdate(nextProps: DetailsPanelProps) {
142                 if ('etag' in nextProps.res && 'etag' in this.props.res &&
143                     nextProps.res.etag === this.props.res.etag &&
144                     nextProps.isOpened === this.props.isOpened &&
145                     nextProps.tabNr === this.props.tabNr) {
146                     return false;
147                 }
148                 return true;
149             }
150
151             handleChange = (event: any, value: number) => {
152                 this.props.setActiveTab(value);
153             }
154
155             render() {
156                 const { classes, isOpened } = this.props;
157                 return (
158                     <Grid
159                         container
160                         direction="column"
161                         className={classnames([classes.root, { [classes.opened]: isOpened }])}>
162                         <Transition
163                             in={isOpened}
164                             timeout={SLIDE_TIMEOUT}
165                             unmountOnExit>
166                             {isOpened ? this.renderContent() : <div />}
167                         </Transition>
168                     </Grid>
169                 );
170             }
171
172             renderContent() {
173                 const { classes, onCloseDrawer, res, tabNr, authConfig, pathname } = this.props;
174                 let shouldShowInlinePreview = false;
175                 if (!('kind' in res)) {
176                     shouldShowInlinePreview = isInlineFileUrlSafe(
177                         res ? res.url : "",
178                         authConfig.keepWebServiceUrl,
179                         authConfig.keepWebInlineServiceUrl
180                     ) || authConfig.clusterConfig.Collections.TrustAllContent;
181                 }
182
183                 const item = getItem(res, pathname);
184                 return (
185                     <Grid
186                         data-cy='details-panel'
187                         container
188                         direction="column"
189                         item
190                         xs
191                         className={classes.container} >
192                         <Grid
193                             item
194                             className={classes.headerContainer}
195                             container
196                             alignItems='center'
197                             justifyContent='space-around'
198                             wrap="nowrap">
199                             <Grid item xs={2}>
200                                 {item.getIcon(classes.headerIcon)}
201                             </Grid>
202                             <Grid item xs={8}>
203                                 <Tooltip title={item.getTitle()}>
204                                     <Typography variant='h6' noWrap>
205                                         {item.getTitle()}
206                                     </Typography>
207                                 </Tooltip>
208                             </Grid>
209                             <Grid item>
210                                 <IconButton data-cy="close-details-btn" color="inherit" onClick={()=>onCloseDrawer(CLOSE_DRAWER)} size="large">
211                                     <CloseIcon />
212                                 </IconButton>
213                             </Grid>
214                         </Grid>
215                         <Grid item>
216                             <Tabs onChange={this.handleChange}
217                                 value={(item.getTabLabels().length >= tabNr + 1) ? tabNr : 0}>
218                                 {item.getTabLabels().map((tabLabel, idx) =>
219                                     <Tab key={`tab-label-${idx}`} disableRipple label={tabLabel} />)
220                                 }
221                             </Tabs>
222                         </Grid>
223                         <Grid item xs className={this.props.classes.tabContainer} >
224                             {item.getDetails({ tabNr, showPreview: shouldShowInlinePreview })}
225                         </Grid>
226                     </Grid >
227                 );
228             }
229         }
230     )
231 );