Merge branch '18215-collection-update-without-manifest' into main.
[arvados.git] / src / views / collection-panel / collection-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 {
7     StyleRulesCallback, WithStyles, withStyles,
8     IconButton, Grid, Tooltip, Typography, ExpansionPanel,
9     ExpansionPanelSummary, ExpansionPanelDetails
10 } from '@material-ui/core';
11 import { connect, DispatchProp } from "react-redux";
12 import { RouteComponentProps } from 'react-router';
13 import { ArvadosTheme } from 'common/custom-theme';
14 import { RootState } from 'store/store';
15 import { MoreOptionsIcon, CollectionIcon, ReadOnlyIcon, ExpandIcon, CollectionOldVersionIcon } from 'components/icon/icon';
16 import { DetailsAttribute } from 'components/details-attribute/details-attribute';
17 import { CollectionResource, getCollectionUrl } from 'models/collection';
18 import { CollectionPanelFiles } from 'views-components/collection-panel-files/collection-panel-files';
19 import { CollectionTagForm } from './collection-tag-form';
20 import { deleteCollectionTag, navigateToProcess, collectionPanelActions } from 'store/collection-panel/collection-panel-action';
21 import { getResource } from 'store/resources/resources';
22 import { openContextMenu, resourceUuidToContextMenuKind } from 'store/context-menu/context-menu-actions';
23 import { formatDate, formatFileSize } from "common/formatters";
24 import { openDetailsPanel } from 'store/details-panel/details-panel-action';
25 import { snackbarActions, SnackbarKind } from 'store/snackbar/snackbar-actions';
26 import { getPropertyChip } from 'views-components/resource-properties-form/property-chip';
27 import { IllegalNamingWarning } from 'components/warning/warning';
28 import { GroupResource } from 'models/group';
29 import { UserResource } from 'models/user';
30 import { getUserUuid } from 'common/getuser';
31 import { getProgressIndicator } from 'store/progress-indicator/progress-indicator-reducer';
32 import { COLLECTION_PANEL_LOAD_FILES, loadCollectionFiles, COLLECTION_PANEL_LOAD_FILES_THRESHOLD } from 'store/collection-panel/collection-panel-files/collection-panel-files-actions';
33 import { Link } from 'react-router-dom';
34 import { Link as ButtonLink } from '@material-ui/core';
35 import { ResourceOwnerWithName, ResponsiblePerson } from 'views-components/data-explorer/renderers';
36
37 type CssRules = 'root'
38     | 'button'
39     | 'filesCard'
40     | 'iconHeader'
41     | 'tag'
42     | 'label'
43     | 'value'
44     | 'link'
45     | 'centeredLabel'
46     | 'warningLabel'
47     | 'collectionName'
48     | 'readOnlyIcon';
49
50 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
51     root: {
52         display: 'flex',
53         flexFlow: 'column',
54         height: 'calc(100vh - 130px)', // (100% viewport height) - (top bar + breadcrumbs)
55     },
56     button: {
57         cursor: 'pointer'
58     },
59     filesCard: {
60         marginBottom: theme.spacing.unit * 2,
61         flex: 1,
62     },
63     iconHeader: {
64         fontSize: '1.875rem',
65         color: theme.customs.colors.yellow700
66     },
67     tag: {
68         marginRight: theme.spacing.unit,
69         marginBottom: theme.spacing.unit
70     },
71     label: {
72         fontSize: '0.875rem'
73     },
74     centeredLabel: {
75         fontSize: '0.875rem',
76         textAlign: 'center'
77     },
78     warningLabel: {
79         fontStyle: 'italic'
80     },
81     collectionName: {
82         flexDirection: 'column',
83     },
84     value: {
85         textTransform: 'none',
86         fontSize: '0.875rem'
87     },
88     link: {
89         fontSize: '0.875rem',
90         color: theme.palette.primary.main,
91         '&:hover': {
92             cursor: 'pointer'
93         }
94     },
95     readOnlyIcon: {
96         marginLeft: theme.spacing.unit,
97         fontSize: 'small',
98     }
99 });
100
101 interface CollectionPanelDataProps {
102     item: CollectionResource;
103     isWritable: boolean;
104     isOldVersion: boolean;
105     isLoadingFiles: boolean;
106     tooManyFiles: boolean;
107 }
108
109 type CollectionPanelProps = CollectionPanelDataProps & DispatchProp
110     & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
111
112 export const CollectionPanel = withStyles(styles)(
113     connect((state: RootState, props: RouteComponentProps<{ id: string }>) => {
114         const currentUserUUID = getUserUuid(state);
115         const item = getResource<CollectionResource>(props.match.params.id)(state.resources);
116         let isWritable = false;
117         const isOldVersion = item && item.currentVersionUuid !== item.uuid;
118         if (item && !isOldVersion) {
119             if (item.ownerUuid === currentUserUUID) {
120                 isWritable = true;
121             } else {
122                 const itemOwner = getResource<GroupResource | UserResource>(item.ownerUuid)(state.resources);
123                 if (itemOwner && itemOwner.writableBy) {
124                     isWritable = itemOwner.writableBy.indexOf(currentUserUUID || '') >= 0;
125                 }
126             }
127         }
128         const loadingFilesIndicator = getProgressIndicator(COLLECTION_PANEL_LOAD_FILES)(state.progressIndicator);
129         const isLoadingFiles = (loadingFilesIndicator && loadingFilesIndicator!.working) || false;
130         const tooManyFiles = (!state.collectionPanel.loadBigCollections && item && item.fileCount > COLLECTION_PANEL_LOAD_FILES_THRESHOLD) || false;
131         return { item, isWritable, isOldVersion, isLoadingFiles, tooManyFiles };
132     })(
133         class extends React.Component<CollectionPanelProps> {
134             render() {
135                 const { classes, item, dispatch, isWritable, isOldVersion, isLoadingFiles, tooManyFiles } = this.props;
136                 return item
137                     ? <div className={classes.root}>
138                         <ExpansionPanel data-cy='collection-info-panel' defaultExpanded>
139                             <ExpansionPanelSummary expandIcon={<ExpandIcon />}>
140                                 <Grid container justify="space-between">
141                                     <Grid item xs={11}><span>
142                                         <IconButton onClick={this.openCollectionDetails}>
143                                             {isOldVersion
144                                                 ? <CollectionOldVersionIcon className={classes.iconHeader} />
145                                                 : <CollectionIcon className={classes.iconHeader} />}
146                                         </IconButton>
147                                         <IllegalNamingWarning name={item.name} />
148                                         <span>
149                                             {item.name}
150                                             {isWritable ||
151                                                 <Tooltip title="Read-only">
152                                                     <ReadOnlyIcon data-cy="read-only-icon" className={classes.readOnlyIcon} />
153                                                 </Tooltip>
154                                             }
155                                         </span>
156                                     </span></Grid>
157                                     <Grid item xs={1} style={{ textAlign: "right" }}>
158                                         <Tooltip title="Actions" disableFocusListener>
159                                             <IconButton
160                                                 data-cy='collection-panel-options-btn'
161                                                 aria-label="Actions"
162                                                 onClick={this.handleContextMenu}>
163                                                 <MoreOptionsIcon />
164                                             </IconButton>
165                                         </Tooltip>
166                                     </Grid>
167                                 </Grid>
168                             </ExpansionPanelSummary>
169                             <ExpansionPanelDetails>
170                                 <Grid container justify="space-between">
171                                     <Grid item xs={12}>
172                                         <Typography variant="caption">
173                                             {item.description}
174                                         </Typography>
175                                         <CollectionDetailsAttributes item={item} classes={classes} twoCol={true} showVersionBrowser={() => dispatch<any>(openDetailsPanel(item.uuid, 1))} />
176                                         {(item.properties.container_request || item.properties.containerRequest) &&
177                                             <span onClick={() => dispatch<any>(navigateToProcess(item.properties.container_request || item.properties.containerRequest))}>
178                                                 <DetailsAttribute classLabel={classes.link} label='Link to process' />
179                                             </span>
180                                         }
181                                         {isOldVersion &&
182                                             <Typography className={classes.warningLabel} variant="caption">
183                                                 This is an old version. Make a copy to make changes. Go to the <Link to={getCollectionUrl(item.currentVersionUuid)}>head version</Link> for sharing options.
184                                           </Typography>
185                                         }
186                                     </Grid>
187                                 </Grid>
188                             </ExpansionPanelDetails>
189                         </ExpansionPanel>
190
191                         <ExpansionPanel data-cy='collection-properties-panel' defaultExpanded>
192                             <ExpansionPanelSummary expandIcon={<ExpandIcon />}>
193                                 {"Properties"}
194                             </ExpansionPanelSummary>
195                             <ExpansionPanelDetails>
196                                 <Grid container>
197                                     {isWritable && <Grid item xs={12}>
198                                         <CollectionTagForm />
199                                     </Grid>}
200                                     <Grid item xs={12}>
201                                         {Object.keys(item.properties).length > 0
202                                             ? Object.keys(item.properties).map(k =>
203                                                 Array.isArray(item.properties[k])
204                                                     ? item.properties[k].map((v: string) =>
205                                                         getPropertyChip(
206                                                             k, v,
207                                                             isWritable
208                                                                 ? this.handleDelete(k, v)
209                                                                 : undefined,
210                                                             classes.tag))
211                                                     : getPropertyChip(
212                                                         k, item.properties[k],
213                                                         isWritable
214                                                             ? this.handleDelete(k, item.properties[k])
215                                                             : undefined,
216                                                         classes.tag)
217                                             )
218                                             : <div className={classes.centeredLabel}>No properties set on this collection.</div>
219                                         }
220                                     </Grid>
221                                 </Grid>
222                             </ExpansionPanelDetails>
223                         </ExpansionPanel>
224                         <div className={classes.filesCard}>
225                             <CollectionPanelFiles
226                                 isWritable={isWritable}
227                                 isLoading={isLoadingFiles}
228                                 tooManyFiles={tooManyFiles}
229                                 loadFilesFunc={() => {
230                                     dispatch(collectionPanelActions.LOAD_BIG_COLLECTIONS(true));
231                                     dispatch<any>(loadCollectionFiles(this.props.item.uuid));
232                                 }
233                                 } />
234                         </div>
235                     </div>
236                     : null;
237             }
238
239             handleContextMenu = (event: React.MouseEvent<any>) => {
240                 const { uuid, ownerUuid, name, description, kind, storageClassesDesired } = this.props.item;
241                 const menuKind = this.props.dispatch<any>(resourceUuidToContextMenuKind(uuid));
242                 const resource = {
243                     uuid,
244                     ownerUuid,
245                     name,
246                     description,
247                     storageClassesDesired,
248                     kind,
249                     menuKind,
250                 };
251                 // Avoid expanding/collapsing the panel
252                 event.stopPropagation();
253                 this.props.dispatch<any>(openContextMenu(event, resource));
254             }
255
256             onCopy = (message: string) =>
257                 this.props.dispatch(snackbarActions.OPEN_SNACKBAR({
258                     message,
259                     hideDuration: 2000,
260                     kind: SnackbarKind.SUCCESS
261                 }))
262
263             handleDelete = (key: string, value: string) => () => {
264                 this.props.dispatch<any>(deleteCollectionTag(key, value));
265             }
266
267             openCollectionDetails = (e: React.MouseEvent<HTMLElement>) => {
268                 const { item } = this.props;
269                 if (item) {
270                     e.stopPropagation();
271                     this.props.dispatch<any>(openDetailsPanel(item.uuid));
272                 }
273             }
274
275             titleProps = {
276                 onClick: this.openCollectionDetails
277             };
278
279         }
280     )
281 );
282
283 export const CollectionDetailsAttributes = (props: { item: CollectionResource, twoCol: boolean, classes?: Record<CssRules, string>, showVersionBrowser?: () => void }) => {
284     const item = props.item;
285     const classes = props.classes || { label: '', value: '', button: '' };
286     const isOldVersion = item && item.currentVersionUuid !== item.uuid;
287     const mdSize = props.twoCol ? 6 : 12;
288     const showVersionBrowser = props.showVersionBrowser;
289     const responsiblePersonRef = React.useRef(null);
290     return <Grid container>
291         <Grid item xs={12} md={mdSize}>
292             <DetailsAttribute classLabel={classes.label} classValue={classes.value}
293                 label={isOldVersion ? "This version's UUID" : "Collection UUID"}
294                 linkToUuid={item.uuid} />
295         </Grid>
296         <Grid item xs={12} md={mdSize}>
297             <DetailsAttribute classLabel={classes.label} classValue={classes.value}
298                 label={isOldVersion ? "This version's PDH" : "Portable data hash"}
299                 linkToUuid={item.portableDataHash} />
300         </Grid>
301         <Grid item xs={12} md={mdSize}>
302             <DetailsAttribute classLabel={classes.label} classValue={classes.value}
303                 label='Owner' linkToUuid={item.ownerUuid}
304                 uuidEnhancer={(uuid: string) => <ResourceOwnerWithName uuid={uuid} />} />
305         </Grid>
306         <div data-cy="responsible-person-wrapper" ref={responsiblePersonRef}>
307             <Grid item xs={12} md={12}>
308                 <DetailsAttribute classLabel={classes.label} classValue={classes.value}
309                     label='Responsible person' linkToUuid={item.ownerUuid}
310                     uuidEnhancer={(uuid: string) => <ResponsiblePerson uuid={item.uuid} parentRef={responsiblePersonRef.current} />} />
311             </Grid>
312         </div>
313         <Grid item xs={12} md={mdSize}>
314             <DetailsAttribute classLabel={classes.label} classValue={classes.value}
315                 label='Head version'
316                 value={isOldVersion ? undefined : 'this one'}
317                 linkToUuid={isOldVersion ? item.currentVersionUuid : undefined} />
318         </Grid>
319         <Grid item xs={12} md={mdSize}>
320             <DetailsAttribute
321                 classLabel={classes.label} classValue={classes.value}
322                 label='Version number'
323                 value={showVersionBrowser !== undefined
324                     ? <Tooltip title="Open version browser"><ButtonLink underline='none' className={classes.button} onClick={() => showVersionBrowser()}>
325                         {<span data-cy='collection-version-number'>{item.version}</span>}
326                     </ButtonLink></Tooltip>
327                     : item.version
328                 }
329             />
330         </Grid>
331         <Grid item xs={12} md={mdSize}>
332             <DetailsAttribute label='Created at' value={formatDate(item.createdAt)} />
333         </Grid>
334         <Grid item xs={12} md={mdSize}>
335             <DetailsAttribute label='Last modified' value={formatDate(item.modifiedAt)} />
336         </Grid>
337         <Grid item xs={12} md={mdSize}>
338             <DetailsAttribute classLabel={classes.label} classValue={classes.value}
339                 label='Number of files' value={item.fileCount} />
340         </Grid>
341         <Grid item xs={12} md={mdSize}>
342             <DetailsAttribute classLabel={classes.label} classValue={classes.value}
343                 label='Content size' value={formatFileSize(item.fileSizeTotal)} />
344         </Grid>
345         <Grid item xs={12} md={mdSize}>
346             <DetailsAttribute classLabel={classes.label} classValue={classes.value}
347                 label='Storage classes' value={item.storageClassesDesired.join(', ')} />
348         </Grid>
349     </Grid>;
350 };