18219: Updates cypress tests.

[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 794e093f3d8d2129c5be959f97a4c6239b7b701a..adc3e9959418926500276f2ba99f8d5290dabe6f 100644 (file)
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -3,6 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import React from 'react';
+import { Dispatch } from 'redux';
 import {
     StyleRulesCallback,
     WithStyles,
@@ -11,22 +12,21 @@ import {
     Grid,
     Tooltip,
     Typography,
-    Card, CardHeader, CardContent,
+    Card
 } from '@material-ui/core';
 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 } from 'components/icon/icon';
+import { MoreOptionsIcon, CollectionIcon, ReadOnlyIcon, CollectionOldVersionIcon, RenameIcon } 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';
-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";
-import { openDetailsPanel } from 'store/details-panel/details-panel-action';
+import { openDetailsPanel, openResourcePropertiesDialog } 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';
@@ -148,7 +148,6 @@ export const CollectionPanel = withStyles(styles)(
                 const { classes, item, dispatch, isWritable, isOldVersion, isLoadingFiles, tooManyFiles } = this.props;
                 const panelsData: MPVPanelState[] = [
                     {name: "Details"},
-                    {name: "Properties"},
                     {name: "Files"},
                 ];
                 return item
@@ -203,37 +202,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
@@ -275,10 +243,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 +259,25 @@ export const CollectionPanel = withStyles(styles)(
     )
 );
 
-export const CollectionDetailsAttributes = (props: { item: CollectionResource, twoCol: boolean, classes?: Record<CssRules, string>, showVersionBrowser?: () => void }) => {
+interface CollectionDetailsActionProps {
+    onClick: () => void;
+}
+
+interface CollectionDetailsProps {
+    item: CollectionResource;
+    classes?: any;
+    twoCol?: boolean;
+    showVersionBrowser?: () => void;
+}
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+    onClick: () => dispatch<any>(openResourcePropertiesDialog()),
+});
+
+export const CollectionDetailsAttributes = connect(null, mapDispatchToProps)(
+(props: CollectionDetailsProps & CollectionDetailsActionProps) => {
     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;
@@ -361,5 +341,22 @@ export const CollectionDetailsAttributes = (props: { item: CollectionResource, t
             <DetailsAttribute classLabel={classes.label} classValue={classes.value}
                 label='Storage classes' value={item.storageClassesDesired.join(', ')} />
         </Grid>
+        <Grid item xs={12} md={mdSize}>
+            <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+                label='Properties'>
+                { !props.twoCol
+                    ? <div data-cy='property-editor-btn' onClick={props.onClick}>
+                        <RenameIcon className={classes.editIcon} />
+                    </div>
+                    : '' }
+            </DetailsAttribute>
+            { 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>;
-};
+});