import { RouteComponentProps } from 'react-router';
import { ArvadosTheme } from '~/common/custom-theme';
import { RootState } from '~/store/store';
-import { MoreOptionsIcon, CollectionIcon, ReadOnlyIcon, ExpandIcon } from '~/components/icon/icon';
+import { MoreOptionsIcon, CollectionIcon, ReadOnlyIcon, ExpandIcon, CollectionOldVersionIcon } from '~/components/icon/icon';
import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
-import { CollectionResource } from '~/models/collection';
+import { CollectionResource, getCollectionUrl } from '~/models/collection';
import { CollectionPanelFiles } from '~/views-components/collection-panel-files/collection-panel-files';
import { CollectionTagForm } from './collection-tag-form';
import { deleteCollectionTag, navigateToProcess, collectionPanelActions } from '~/store/collection-panel/collection-panel-action';
import { getResource } from '~/store/resources/resources';
import { openContextMenu } from '~/store/context-menu/context-menu-actions';
import { ContextMenuKind } from '~/views-components/context-menu/context-menu';
-import { formatFileSize } from "~/common/formatters";
+import { formatDate, formatFileSize } from "~/common/formatters";
import { openDetailsPanel } from '~/store/details-panel/details-panel-action';
import { snackbarActions, SnackbarKind } from '~/store/snackbar/snackbar-actions';
import { getPropertyChip } from '~/views-components/resource-properties-form/property-chip';
import { getUserUuid } from '~/common/getuser';
import { getProgressIndicator } from '~/store/progress-indicator/progress-indicator-reducer';
import { COLLECTION_PANEL_LOAD_FILES, loadCollectionFiles, COLLECTION_PANEL_LOAD_FILES_THRESHOLD } from '~/store/collection-panel/collection-panel-files/collection-panel-files-actions';
+import { Link } from 'react-router-dom';
type CssRules = 'root'
| 'filesCard'
| 'value'
| 'link'
| 'centeredLabel'
+ | 'warningLabel'
+ | 'collectionName'
| 'readOnlyIcon';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
fontSize: '0.875rem',
textAlign: 'center'
},
+ warningLabel: {
+ fontStyle: 'italic'
+ },
+ collectionName: {
+ flexDirection: 'column',
+ },
value: {
textTransform: 'none',
fontSize: '0.875rem'
interface CollectionPanelDataProps {
item: CollectionResource;
isWritable: boolean;
+ isOldVersion: boolean;
isLoadingFiles: boolean;
tooManyFiles: boolean;
}
const currentUserUUID = getUserUuid(state);
const item = getResource<CollectionResource>(props.match.params.id)(state.resources);
let isWritable = false;
- if (item && item.ownerUuid === currentUserUUID) {
- isWritable = true;
- } else if (item) {
- const itemOwner = getResource<GroupResource|UserResource>(item.ownerUuid)(state.resources);
- if (itemOwner) {
- isWritable = itemOwner.writableBy.indexOf(currentUserUUID || '') >= 0;
+ const isOldVersion = item && item.currentVersionUuid !== item.uuid;
+ if (item && !isOldVersion) {
+ if (item.ownerUuid === currentUserUUID) {
+ isWritable = true;
+ } else {
+ const itemOwner = getResource<GroupResource | UserResource>(item.ownerUuid)(state.resources);
+ if (itemOwner) {
+ isWritable = itemOwner.writableBy.indexOf(currentUserUUID || '') >= 0;
+ }
}
}
const loadingFilesIndicator = getProgressIndicator(COLLECTION_PANEL_LOAD_FILES)(state.progressIndicator);
const isLoadingFiles = loadingFilesIndicator && loadingFilesIndicator!.working || false;
const tooManyFiles = !state.collectionPanel.loadBigCollections && item && item.fileCount > COLLECTION_PANEL_LOAD_FILES_THRESHOLD || false;
- return { item, isWritable, isLoadingFiles, tooManyFiles };
+ return { item, isWritable, isOldVersion, isLoadingFiles, tooManyFiles };
})(
class extends React.Component<CollectionPanelProps> {
render() {
- const { classes, item, dispatch, isWritable, isLoadingFiles, tooManyFiles } = this.props;
+ const { classes, item, dispatch, isWritable, isOldVersion, isLoadingFiles, tooManyFiles } = this.props;
return item
? <div className={classes.root}>
<ExpansionPanel data-cy='collection-info-panel' defaultExpanded>
<ExpansionPanelSummary expandIcon={<ExpandIcon />}>
- <span>
- <IconButton onClick={this.openCollectionDetails}>
- <CollectionIcon className={classes.iconHeader} />
- </IconButton>
- <IllegalNamingWarning name={item.name}/>
- {item.name}
- {isWritable ||
- <Tooltip title="Read-only">
- <ReadOnlyIcon data-cy="read-only-icon" className={classes.readOnlyIcon} />
- </Tooltip>
- }
- </span>
+ <Grid container justify="space-between">
+ <Grid item xs={11}><span>
+ <IconButton onClick={this.openCollectionDetails}>
+ {isOldVersion
+ ? <CollectionOldVersionIcon className={classes.iconHeader} />
+ : <CollectionIcon className={classes.iconHeader} />}
+ </IconButton>
+ <IllegalNamingWarning name={item.name} />
+ <span>
+ {item.name}
+ {isWritable ||
+ <Tooltip title="Read-only">
+ <ReadOnlyIcon data-cy="read-only-icon" className={classes.readOnlyIcon} />
+ </Tooltip>
+ }
+ </span>
+ </span></Grid>
+ <Grid item xs={1} style={{ textAlign: "right" }}>
+ <Tooltip title="Actions" disableFocusListener>
+ <IconButton
+ data-cy='collection-panel-options-btn'
+ aria-label="Actions"
+ onClick={this.handleContextMenu}>
+ <MoreOptionsIcon />
+ </IconButton>
+ </Tooltip>
+ </Grid>
+ </Grid>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container justify="space-between">
- <Grid item xs={11}>
+ <Grid item xs={12}>
<Typography variant="caption">
{item.description}
</Typography>
- <DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='Collection UUID'
- linkToUuid={item.uuid} />
- <DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='Portable data hash'
- linkToUuid={item.portableDataHash} />
- <DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='Number of files' value={item.fileCount} />
- <DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='Content size' value={formatFileSize(item.fileSizeTotal)} />
- <DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='Owner' linkToUuid={item.ownerUuid} />
+ <CollectionDetailsAttributes item={item} classes={classes} twoCol={true} />
{(item.properties.container_request || item.properties.containerRequest) &&
<span onClick={() => dispatch<any>(navigateToProcess(item.properties.container_request || item.properties.containerRequest))}>
<DetailsAttribute classLabel={classes.link} label='Link to process' />
</span>
}
- </Grid>
- <Grid item xs={1} style={{textAlign: "right"}}>
- <Tooltip title="More options" disableFocusListener>
- <IconButton
- data-cy='collection-panel-options-btn'
- aria-label="More options"
- onClick={this.handleContextMenu}>
- <MoreOptionsIcon />
- </IconButton>
- </Tooltip>
+ {isOldVersion &&
+ <Typography className={classes.warningLabel} variant="caption">
+ 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.
+ </Typography>
+ }
</Grid>
</Grid>
</ExpansionPanelDetails>
<CollectionTagForm />
</Grid>}
<Grid item xs={12}>
- { Object.keys(item.properties).length > 0
- ? Object.keys(item.properties).map(k =>
- Array.isArray(item.properties[k])
- ? item.properties[k].map((v: string) =>
- getPropertyChip(
- k, v,
- isWritable
- ? this.handleDelete(k, item.properties[k])
- : undefined,
- classes.tag))
- : getPropertyChip(
- k, item.properties[k],
- isWritable
- ? this.handleDelete(k, item.properties[k])
- : undefined,
- classes.tag)
- )
- : <div className={classes.centeredLabel}>No properties set on this collection.</div>
- }
+ {Object.keys(item.properties).length > 0
+ ? Object.keys(item.properties).map(k =>
+ Array.isArray(item.properties[k])
+ ? item.properties[k].map((v: string) =>
+ getPropertyChip(
+ k, v,
+ isWritable
+ ? this.handleDelete(k, item.properties[k])
+ : undefined,
+ classes.tag))
+ : getPropertyChip(
+ k, item.properties[k],
+ isWritable
+ ? this.handleDelete(k, item.properties[k])
+ : undefined,
+ classes.tag)
+ )
+
: <div className={classes.centeredLabel}>No properties set on this collection.</div>
+ }
</Grid>
</Grid>
</ExpansionPanelDetails>
dispatch(collectionPanelActions.LOAD_BIG_COLLECTIONS(true));
dispatch<any>(loadCollectionFiles(this.props.item.uuid));
}
- } />
+ } />
</div>
</div>
: null;
: ContextMenuKind.COLLECTION
: ContextMenuKind.READONLY_COLLECTION
};
+ // Avoid expanding/collapsing the panel
+ event.stopPropagation();
this.props.dispatch<any>(openContextMenu(event, resource));
}
}
)
);
+
+export const CollectionDetailsAttributes = (props: { item: CollectionResource, twoCol: boolean, classes?: Record<CssRules, string> }) => {
+ const item = props.item;
+ const classes = props.classes || { label: '', value: '' };
+ const isOldVersion = item && item.currentVersionUuid !== item.uuid;
+ const mdSize = props.twoCol ? 6 : 12;
+ return <Grid container>
+ <Grid item xs={12} md={mdSize}>
+ <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+ label={isOldVersion ? "This version's UUID" : "Collection UUID"}
+ linkToUuid={item.uuid} />
+ </Grid>
+ <Grid item xs={12} md={mdSize}>
+ <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+ label={isOldVersion ? "This version's PDH" : "Portable data hash"}
+ linkToUuid={item.portableDataHash} />
+ </Grid>
+ <Grid item xs={12} md={mdSize}>
+ <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+ label='Owner' linkToUuid={item.ownerUuid} />
+ </Grid>
+
+ {isOldVersion &&
+ <Grid item xs={12} md={mdSize}>
+ <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+ label='Head version'
+ linkToUuid={item.currentVersionUuid} />
+ </Grid>
+ }
+ <Grid item xs={12} md={mdSize}>
+ <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+ label='Version number' value={item.version} />
+ </Grid>
+ <Grid item xs={12} md={mdSize}>
+ <DetailsAttribute label='Created at' value={formatDate(item.createdAt)} />
+ </Grid>
+ <Grid item xs={12} md={mdSize}>
+ <DetailsAttribute label='Last modified' value={formatDate(item.modifiedAt)} />
+ </Grid>
+ <Grid item xs={12} md={mdSize}>
+ <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+ label='Number of files' value={item.fileCount} />
+ </Grid>
+ <Grid item xs={12} md={mdSize}>
+ <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+ label='Content size' value={formatFileSize(item.fileSizeTotal)} />
+ </Grid>
+ </Grid>;
+};
projects / arvados-workbench2.git / blobdiff