1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
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';
36 type CssRules = 'root'
49 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
53 height: 'calc(100vh - 130px)', // (100% viewport height) - (top bar + breadcrumbs)
59 marginBottom: theme.spacing.unit * 2,
64 color: theme.customs.colors.yellow700
67 marginRight: theme.spacing.unit,
68 marginBottom: theme.spacing.unit
81 flexDirection: 'column',
84 textTransform: 'none',
89 color: theme.palette.primary.main,
95 marginLeft: theme.spacing.unit,
100 interface CollectionPanelDataProps {
101 item: CollectionResource;
103 isOldVersion: boolean;
104 isLoadingFiles: boolean;
105 tooManyFiles: boolean;
108 type CollectionPanelProps = CollectionPanelDataProps & DispatchProp
109 & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
111 export const CollectionPanel = withStyles(styles)(
112 connect((state: RootState, props: RouteComponentProps<{ id: string }>) => {
113 const currentUserUUID = getUserUuid(state);
114 const item = getResource<CollectionResource>(props.match.params.id)(state.resources);
115 let isWritable = false;
116 const isOldVersion = item && item.currentVersionUuid !== item.uuid;
117 if (item && !isOldVersion) {
118 if (item.ownerUuid === currentUserUUID) {
121 const itemOwner = getResource<GroupResource | UserResource>(item.ownerUuid)(state.resources);
123 isWritable = itemOwner.writableBy.indexOf(currentUserUUID || '') >= 0;
127 const loadingFilesIndicator = getProgressIndicator(COLLECTION_PANEL_LOAD_FILES)(state.progressIndicator);
128 const isLoadingFiles = loadingFilesIndicator && loadingFilesIndicator!.working || false;
129 const tooManyFiles = !state.collectionPanel.loadBigCollections && item && item.fileCount > COLLECTION_PANEL_LOAD_FILES_THRESHOLD || false;
130 return { item, isWritable, isOldVersion, isLoadingFiles, tooManyFiles };
132 class extends React.Component<CollectionPanelProps> {
134 const { classes, item, dispatch, isWritable, isOldVersion, isLoadingFiles, tooManyFiles } = this.props;
136 ? <div className={classes.root}>
137 <ExpansionPanel data-cy='collection-info-panel' defaultExpanded>
138 <ExpansionPanelSummary expandIcon={<ExpandIcon />}>
139 <Grid container justify="space-between">
140 <Grid item xs={11}><span>
141 <IconButton onClick={this.openCollectionDetails}>
143 ? <CollectionOldVersionIcon className={classes.iconHeader} />
144 : <CollectionIcon className={classes.iconHeader} />}
146 <IllegalNamingWarning name={item.name} />
150 <Tooltip title="Read-only">
151 <ReadOnlyIcon data-cy="read-only-icon" className={classes.readOnlyIcon} />
156 <Grid item xs={1} style={{ textAlign: "right" }}>
157 <Tooltip title="Actions" disableFocusListener>
159 data-cy='collection-panel-options-btn'
161 onClick={this.handleContextMenu}>
167 </ExpansionPanelSummary>
168 <ExpansionPanelDetails>
169 <Grid container justify="space-between">
171 <Typography variant="caption">
174 <CollectionDetailsAttributes item={item} classes={classes} twoCol={true} showVersionBrowser={() => dispatch<any>(openDetailsPanel(item.uuid, 1))} />
175 {(item.properties.container_request || item.properties.containerRequest) &&
176 <span onClick={() => dispatch<any>(navigateToProcess(item.properties.container_request || item.properties.containerRequest))}>
177 <DetailsAttribute classLabel={classes.link} label='Link to process' />
181 <Typography className={classes.warningLabel} variant="caption">
182 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.
187 </ExpansionPanelDetails>
190 <ExpansionPanel data-cy='collection-properties-panel' defaultExpanded>
191 <ExpansionPanelSummary expandIcon={<ExpandIcon />}>
193 </ExpansionPanelSummary>
194 <ExpansionPanelDetails>
196 {isWritable && <Grid item xs={12}>
197 <CollectionTagForm />
200 {Object.keys(item.properties).length > 0
201 ? Object.keys(item.properties).map(k =>
202 Array.isArray(item.properties[k])
203 ? item.properties[k].map((v: string) =>
207 ? this.handleDelete(k, v)
211 k, item.properties[k],
213 ? this.handleDelete(k, item.properties[k])
217 : <div className={classes.centeredLabel}>No properties set on this collection.</div>
221 </ExpansionPanelDetails>
223 <div className={classes.filesCard}>
224 <CollectionPanelFiles
225 isWritable={isWritable}
226 isLoading={isLoadingFiles}
227 tooManyFiles={tooManyFiles}
228 loadFilesFunc={() => {
229 dispatch(collectionPanelActions.LOAD_BIG_COLLECTIONS(true));
230 dispatch<any>(loadCollectionFiles(this.props.item.uuid));
238 handleContextMenu = (event: React.MouseEvent<any>) => {
239 const { uuid, ownerUuid, name, description, kind } = this.props.item;
240 const menuKind = this.props.dispatch<any>(resourceUuidToContextMenuKind(uuid));
249 // Avoid expanding/collapsing the panel
250 event.stopPropagation();
251 this.props.dispatch<any>(openContextMenu(event, resource));
254 onCopy = (message: string) =>
255 this.props.dispatch(snackbarActions.OPEN_SNACKBAR({
258 kind: SnackbarKind.SUCCESS
261 handleDelete = (key: string, value: string) => () => {
262 this.props.dispatch<any>(deleteCollectionTag(key, value));
265 openCollectionDetails = (e: React.MouseEvent<HTMLElement>) => {
266 const { item } = this.props;
269 this.props.dispatch<any>(openDetailsPanel(item.uuid));
274 onClick: this.openCollectionDetails
281 export const CollectionDetailsAttributes = (props: { item: CollectionResource, twoCol: boolean, classes?: Record<CssRules, string>, showVersionBrowser?: () => void }) => {
282 const item = props.item;
283 const classes = props.classes || { label: '', value: '', button: '' };
284 const isOldVersion = item && item.currentVersionUuid !== item.uuid;
285 const mdSize = props.twoCol ? 6 : 12;
286 const showVersionBrowser = props.showVersionBrowser;
287 return <Grid container>
288 <Grid item xs={12} md={mdSize}>
289 <DetailsAttribute classLabel={classes.label} classValue={classes.value}
290 label={isOldVersion ? "This version's UUID" : "Collection UUID"}
291 linkToUuid={item.uuid} />
293 <Grid item xs={12} md={mdSize}>
294 <DetailsAttribute classLabel={classes.label} classValue={classes.value}
295 label={isOldVersion ? "This version's PDH" : "Portable data hash"}
296 linkToUuid={item.portableDataHash} />
298 <Grid item xs={12} md={mdSize}>
299 <DetailsAttribute classLabel={classes.label} classValue={classes.value}
300 label='Owner' linkToUuid={item.ownerUuid} />
302 <Grid item xs={12} md={mdSize}>
303 <DetailsAttribute classLabel={classes.label} classValue={classes.value}
305 value={isOldVersion ? undefined : 'this one'}
306 linkToUuid={isOldVersion ? item.currentVersionUuid : undefined} />
308 <Grid item xs={12} md={mdSize}>
310 classLabel={classes.label} classValue={classes.value}
311 label='Version number'
312 value={ showVersionBrowser !== undefined
313 ? <Tooltip title="Open version browser"><ButtonLink underline='none' className={classes.button} onClick={() => showVersionBrowser()}>
314 {<span data-cy='collection-version-number'>{item.version}</span>}
315 </ButtonLink></Tooltip>
320 <Grid item xs={12} md={mdSize}>
321 <DetailsAttribute label='Created at' value={formatDate(item.createdAt)} />
323 <Grid item xs={12} md={mdSize}>
324 <DetailsAttribute label='Last modified' value={formatDate(item.modifiedAt)} />
326 <Grid item xs={12} md={mdSize}>
327 <DetailsAttribute classLabel={classes.label} classValue={classes.value}
328 label='Number of files' value={item.fileCount} />
330 <Grid item xs={12} md={mdSize}>
331 <DetailsAttribute classLabel={classes.label} classValue={classes.value}
332 label='Content size' value={formatFileSize(item.fileSizeTotal)} />