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 5aeaef184724d3ac90fc5ede3ff296aa979152fa..dce8ef8f68cde0083a14703aee13e05f966f339e 100644 (file)
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -3,7 +3,6 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import React from 'react';
-import { Dispatch } from 'redux';
 import {
     StyleRulesCallback,
     WithStyles,
@@ -18,7 +17,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, CollectionOldVersionIcon, RenameIcon } from 'components/icon/icon';
+import { MoreOptionsIcon, CollectionIcon, ReadOnlyIcon, CollectionOldVersionIcon } from 'components/icon/icon';
 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';
@@ -26,7 +25,7 @@ import { navigateToProcess, collectionPanelActions } from 'store/collection-pane
 import { getResource } from 'store/resources/resources';
 import { openContextMenu, resourceUuidToContextMenuKind } from 'store/context-menu/context-menu-actions';
 import { formatDate, formatFileSize } from "common/formatters";
-import { openDetailsPanel, openResourcePropertiesDialog } from 'store/details-panel/details-panel-action';
+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 { IllegalNamingWarning } from 'components/warning/warning';
@@ -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'
@@ -220,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,
@@ -230,6 +230,7 @@ export const CollectionPanel = withStyles(styles)(
                     storageClassesDesired,
                     kind,
                     menuKind,
+                    properties,
                 };
                 // Avoid expanding/collapsing the panel
                 event.stopPropagation();
@@ -259,10 +260,6 @@ export const CollectionPanel = withStyles(styles)(
     )
 );
 
-interface CollectionDetailsActionProps {
-    onClick: () => void;
-}
-
 interface CollectionDetailsProps {
     item: CollectionResource;
     classes?: any;
@@ -270,12 +267,7 @@ interface CollectionDetailsProps {
     showVersionBrowser?: () => void;
 }
 
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-    onClick: () => dispatch<any>(openResourcePropertiesDialog()),
-});
-
-export const CollectionDetailsAttributes = connect(null, mapDispatchToProps)(
-(props: CollectionDetailsProps & CollectionDetailsActionProps) => {
+export const CollectionDetailsAttributes = (props: CollectionDetailsProps) => {
     const item = props.item;
     const classes = props.classes || { label: '', value: '', button: '', tag: '' };
     const isOldVersion = item && item.currentVersionUuid !== item.uuid;
@@ -331,7 +323,7 @@ export const CollectionDetailsAttributes = connect(null, mapDispatchToProps)(
         </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}
@@ -341,15 +333,14 @@ export const CollectionDetailsAttributes = connect(null, mapDispatchToProps)(
             <DetailsAttribute classLabel={classes.label} classValue={classes.value}
                 label='Storage classes' value={item.storageClassesDesired.join(', ')} />
         </Grid>
-        <Grid item xs={12} md={mdSize}>
+
+        {/*
+            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'>
-                { !props.twoCol
-                    ? <div onClick={props.onClick}>
-                        <RenameIcon className={classes.editIcon} />
-                    </div>
-                    : '' }
-            </DetailsAttribute>
+                label='Properties' />
             { Object.keys(item.properties).length > 0
                 ? Object.keys(item.properties).map(k =>
                         Array.isArray(item.properties[k])
@@ -359,4 +350,4 @@ export const CollectionDetailsAttributes = connect(null, mapDispatchToProps)(
                 : <div className={classes.value}>No properties</div> }
         </Grid>
     </Grid>;
-});
+};