From: Lucas Di Pentima <lucas@di-pentima.com.ar>
Date: Wed, 14 Oct 2020 20:17:59 +0000 (-0300)
Subject: 16719: Fixes collection panel when showing an old version.
X-Git-Tag: 2.1.1~7^2~12
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/7710b036f9a53ad87273b8b760ced5ee98a304fe

16719: Fixes collection panel when showing an old version.

* Collection icon is different.
* UI is in read-only mode.
* There's a note below the collection's name indicating what to do in certain
cases.
* Shows the current version's UUID.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas@di-pentima.com.ar>
---

diff --git a/src/components/file-tree/file-tree-item.tsx b/src/components/file-tree/file-tree-item.tsx
index 23273dac..6f5ab83d 100644
--- a/src/components/file-tree/file-tree-item.tsx
+++ b/src/components/file-tree/file-tree-item.tsx
@@ -4,7 +4,7 @@
 
 import * as React from "react";
 import { TreeItem } from "../tree/tree";
-import { ProjectIcon, MoreOptionsIcon, DefaultIcon, CollectionIcon } from "../icon/icon";
+import { DirectoryIcon, MoreOptionsIcon, DefaultIcon, FileIcon } from "../icon/icon";
 import { Typography, IconButton, StyleRulesCallback, withStyles, WithStyles, Tooltip } from '@material-ui/core';
 import { formatFileSize } from "~/common/formatters";
 import { ListItemTextIcon } from "../list-item-text-icon/list-item-text-icon";
@@ -71,9 +71,9 @@ export const FileTreeItem = withStyles(fileTreeItemStyle)(
 export const getIcon = (type: string) => {
     switch (type) {
         case 'directory':
-            return ProjectIcon;
+            return DirectoryIcon;
         case 'file':
-            return CollectionIcon;
+            return FileIcon;
         default:
             return DefaultIcon;
     }
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index b3f44824..18adb5ab 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -3,6 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
+import { Badge, Tooltip } from '@material-ui/core';
 import Add from '@material-ui/icons/Add';
 import ArrowBack from '@material-ui/icons/ArrowBack';
 import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
@@ -27,6 +28,7 @@ import Folder from '@material-ui/icons/Folder';
 import GetApp from '@material-ui/icons/GetApp';
 import Help from '@material-ui/icons/Help';
 import HelpOutline from '@material-ui/icons/HelpOutline';
+import History from '@material-ui/icons/History';
 import Inbox from '@material-ui/icons/Inbox';
 import Info from '@material-ui/icons/Info';
 import Input from '@material-ui/icons/Input';
@@ -72,6 +74,13 @@ export const ReadOnlyIcon = (props:any) =>
         </div>
     </span>;
 
+export const CollectionOldVersionIcon = (props: any) =>
+    <Tooltip title='Old version'>
+        <Badge badgeContent={<History fontSize='small' />}>
+            <CollectionIcon {...props} />
+        </Badge>
+    </Tooltip>;
+
 export type IconType = React.SFC<{ className?: string, style?: object }>;
 
 export const AddIcon: IconType = (props) => <Add {...props} />;
@@ -88,11 +97,13 @@ export const CloseIcon: IconType = (props) => <Close {...props} />;
 export const CloudUploadIcon: IconType = (props) => <CloudUpload {...props} />;
 export const DefaultIcon: IconType = (props) => <RateReview {...props} />;
 export const DetailsIcon: IconType = (props) => <Info {...props} />;
+export const DirectoryIcon: IconType = (props) => <Folder {...props} />;
 export const DownloadIcon: IconType = (props) => <GetApp {...props} />;
 export const EditSavedQueryIcon: IconType = (props) => <Create {...props} />;
 export const ExpandIcon: IconType = (props) => <ExpandMoreIcon {...props} />;
 export const ErrorIcon: IconType = (props) => <ErrorRoundedIcon style={{color: '#ff0000'}} {...props} />;
 export const FavoriteIcon: IconType = (props) => <Star {...props} />;
+export const FileIcon: IconType = (props) => <LibraryBooks {...props} />;
 export const HelpIcon: IconType = (props) => <Help {...props} />;
 export const HelpOutlineIcon: IconType = (props) => <HelpOutline {...props} />;
 export const ImportContactsIcon: IconType = (props) => <ImportContacts {...props} />;
diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index 953e5b4c..a21d70ed 100644
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -12,7 +12,7 @@ import { connect, DispatchProp } from "react-redux";
 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 { CollectionPanelFiles } from '~/views-components/collection-panel-files/collection-panel-files';
@@ -40,6 +40,8 @@ type CssRules = 'root'
     | 'value'
     | 'link'
     | 'centeredLabel'
+    | 'warningLabel'
+    | 'collectionName'
     | 'readOnlyIcon';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
@@ -67,6 +69,13 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         fontSize: '0.875rem',
         textAlign: 'center'
     },
+    warningLabel: {
+        fontStyle: 'italic',
+        fontWeight: 'bold'
+    },
+    collectionName: {
+        flexDirection: 'column',
+    },
     value: {
         textTransform: 'none',
         fontSize: '0.875rem'
@@ -87,6 +96,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 interface CollectionPanelDataProps {
     item: CollectionResource;
     isWritable: boolean;
+    isOldVersion: boolean;
     isLoadingFiles: boolean;
     tooManyFiles: boolean;
 }
@@ -99,37 +109,49 @@ export const CollectionPanel = withStyles(styles)(
         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} />
+                                        { isOldVersion
+                                        ? <CollectionOldVersionIcon className={classes.iconHeader} />
+                                        : <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>
+                                        {item.name}
+                                        {isWritable ||
+                                        <Tooltip title="Read-only">
+                                            <ReadOnlyIcon data-cy="read-only-icon" className={classes.readOnlyIcon} />
+                                        </Tooltip>
+                                        }
+                                        {isOldVersion &&
+                                        <Typography className={classes.warningLabel} variant="caption">
+                                            This is an old version. Copy it as a new one if you need to make changes. Go to the current version if you need to share it.
+                                        </Typography>
+                                        }
+                                    </span>
                                 </span>
                             </ExpansionPanelSummary>
                             <ExpansionPanelDetails>
@@ -144,6 +166,11 @@ export const CollectionPanel = withStyles(styles)(
                                         <DetailsAttribute classLabel={classes.label} classValue={classes.value}
                                             label='Portable data hash'
                                             linkToUuid={item.portableDataHash} />
+                                        {isOldVersion &&
+                                        <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+                                            label='Current Version UUID'
+                                            linkToUuid={item.currentVersionUuid} />
+                                        }
                                         <DetailsAttribute classLabel={classes.label} classValue={classes.value}
                                             label='Number of files' value={item.fileCount} />
                                         <DetailsAttribute classLabel={classes.label} classValue={classes.value}