18315: Adds file upload test proving that the UI is correctly updated.

[arvados-workbench2.git] / src / views / collection-panel / collection-panel.tsx

diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index 17fe099229c15dc1e3030e054714c22fd35e677c..dce8ef8f68cde0083a14703aee13e05f966f339e 100644 (file)
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -11,7 +11,7 @@ import {
     Grid,
     Tooltip,
     Typography,
-    Card, CardHeader, CardContent,
+    Card
 } from '@material-ui/core';
 import { connect, DispatchProp } from "react-redux";
 import { RouteComponentProps } from 'react-router';
@@ -21,8 +21,7 @@ import { MoreOptionsIcon, CollectionIcon, ReadOnlyIcon, CollectionOldVersionIcon
 import { DetailsAttribute } from 'components/details-attribute/details-attribute';
 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 { navigateToProcess, collectionPanelActions } from 'store/collection-panel/collection-panel-action';
 import { getResource } from 'store/resources/resources';
 import { openContextMenu, resourceUuidToContextMenuKind } from 'store/context-menu/context-menu-actions';
 import { formatDate, formatFileSize } from "common/formatters";
@@ -78,8 +77,8 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         color: theme.customs.colors.yellow700
     },
     tag: {
-        marginRight: theme.spacing.unit,
-        marginBottom: theme.spacing.unit
+        marginRight: theme.spacing.unit / 2,
+        marginBottom: theme.spacing.unit / 2
     },
     label: {
         fontSize: '0.875rem'
@@ -148,7 +147,6 @@ export const CollectionPanel = withStyles(styles)(
                 const { classes, item, dispatch, isWritable, isOldVersion, isLoadingFiles, tooManyFiles } = this.props;
                 const panelsData: MPVPanelState[] = [
                     {name: "Details"},
-                    {name: "Properties", visible: false},
                     {name: "Files"},
                 ];
                 return item
@@ -203,37 +201,6 @@ export const CollectionPanel = withStyles(styles)(
                                 </Grid>
                             </Card>
                         </MPVPanelContent>
-                        <MPVPanelContent xs="auto" data-cy='collection-properties-panel'>
-                            <Card className={classes.propertiesCard}>
-                                <CardHeader title="Properties" />
-                                <CardContent><Grid container>
-                                    {isWritable && <Grid item xs={12}>
-                                        <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, v)
-                                                                : 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></CardContent>
-                            </Card>
-                        </MPVPanelContent>
                         <MPVPanelContent xs>
                             <Card className={classes.filesCard}>
                                 <CollectionPanelFiles
@@ -252,7 +219,8 @@ export const CollectionPanel = withStyles(styles)(
             }
 
             handleContextMenu = (event: React.MouseEvent<any>) => {
-                const { uuid, ownerUuid, name, description, kind, storageClassesDesired } = this.props.item;
+                const { uuid, ownerUuid, name, description,
+                    kind, storageClassesDesired, properties } = this.props.item;
                 const menuKind = this.props.dispatch<any>(resourceUuidToContextMenuKind(uuid));
                 const resource = {
                     uuid,
@@ -262,6 +230,7 @@ export const CollectionPanel = withStyles(styles)(
                     storageClassesDesired,
                     kind,
                     menuKind,
+                    properties,
                 };
                 // Avoid expanding/collapsing the panel
                 event.stopPropagation();
@@ -275,10 +244,6 @@ export const CollectionPanel = withStyles(styles)(
                     kind: SnackbarKind.SUCCESS
                 }))
 
-            handleDelete = (key: string, value: string) => () => {
-                this.props.dispatch<any>(deleteCollectionTag(key, value));
-            }
-
             openCollectionDetails = (e: React.MouseEvent<HTMLElement>) => {
                 const { item } = this.props;
                 if (item) {
@@ -295,9 +260,16 @@ export const CollectionPanel = withStyles(styles)(
     )
 );
 
-export const CollectionDetailsAttributes = (props: { item: CollectionResource, twoCol: boolean, classes?: Record<CssRules, string>, showVersionBrowser?: () => void }) => {
+interface CollectionDetailsProps {
+    item: CollectionResource;
+    classes?: any;
+    twoCol?: boolean;
+    showVersionBrowser?: () => void;
+}
+
+export const CollectionDetailsAttributes = (props: CollectionDetailsProps) => {
     const item = props.item;
-    const classes = props.classes || { label: '', value: '', button: '' };
+    const classes = props.classes || { label: '', value: '', button: '', tag: '' };
     const isOldVersion = item && item.currentVersionUuid !== item.uuid;
     const mdSize = props.twoCol ? 6 : 12;
     const showVersionBrowser = props.showVersionBrowser;
@@ -351,7 +323,7 @@ export const CollectionDetailsAttributes = (props: { item: CollectionResource, t
         </Grid>
         <Grid item xs={12} md={mdSize}>
             <DetailsAttribute classLabel={classes.label} classValue={classes.value}
-                label='Number of files' value={item.fileCount} />
+                label='Number of files' value={<span data-cy='collection-file-count'>{item.fileCount}</span>} />
         </Grid>
         <Grid item xs={12} md={mdSize}>
             <DetailsAttribute classLabel={classes.label} classValue={classes.value}
@@ -361,5 +333,21 @@ export const CollectionDetailsAttributes = (props: { item: CollectionResource, t
             <DetailsAttribute classLabel={classes.label} classValue={classes.value}
                 label='Storage classes' value={item.storageClassesDesired.join(', ')} />
         </Grid>
+
+        {/*
+            NOTE: The property list should be kept at the bottom, because it spans
+            the entire available width, without regards of the twoCol prop.
+        */}
+        <Grid item xs={12} md={12}>
+            <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+                label='Properties' />
+            { 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, undefined, classes.tag))
+                        : getPropertyChip(k, item.properties[k], undefined, classes.tag))
+                : <div className={classes.value}>No properties</div> }
+        </Grid>
     </Grid>;
 };