18219: Replaces properties form on collection panel.
authorLucas Di Pentima <lucas.dipentima@curii.com>
Wed, 15 Dec 2021 19:31:32 +0000 (16:31 -0300)
committerLucas Di Pentima <lucas.dipentima@curii.com>
Fri, 17 Dec 2021 22:36:10 +0000 (19:36 -0300)
* Removes properties form subpanel from the main collection panel.
* Adds property chips to collection's info & details panel.
* Allows property editing from the details panel.
* Replaces resource-specific property form components with a generic one.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>

src/store/collection-panel/collection-panel-action.ts
src/store/details-panel/details-panel-action.ts
src/store/resources/resources-actions.ts
src/views-components/details-panel/project-details.tsx
src/views-components/project-properties-dialog/project-properties-dialog.tsx [deleted file]
src/views-components/resource-properties-dialog/resource-properties-dialog-form.tsx [moved from src/views-components/project-properties-dialog/project-properties-form.tsx with 56% similarity]
src/views-components/resource-properties-dialog/resource-properties-dialog.tsx [new file with mode: 0644]
src/views-components/resource-properties-form/resource-properties-form.tsx
src/views/collection-panel/collection-panel.tsx
src/views/collection-panel/collection-tag-form.tsx [deleted file]
src/views/workbench/workbench.tsx

index ee476524256512c9fd5f24a48e5238cb558759cf..c50ff6a888253469df4a0929018bce7f14d7a435 100644 (file)
@@ -9,15 +9,12 @@ import {
 import { CollectionResource } from 'models/collection';
 import { RootState } from "store/store";
 import { ServiceRepository } from "services/services";
-import { TagProperty } from "models/tag";
 import { snackbarActions } from "../snackbar/snackbar-actions";
 import { resourcesActions } from "store/resources/resources-actions";
 import { unionize, ofType, UnionOf } from 'common/unionize';
 import { SnackbarKind } from 'store/snackbar/snackbar-actions';
 import { navigateTo } from 'store/navigation/navigation-action';
 import { loadDetailsPanel } from 'store/details-panel/details-panel-action';
-import { addProperty, deleteProperty } from "lib/resource-properties";
-import { getResource } from "store/resources/resources";
 
 export const collectionPanelActions = unionize({
     SET_COLLECTION: ofType<CollectionResource>(),
@@ -27,8 +24,6 @@ export const collectionPanelActions = unionize({
 
 export type CollectionPanelAction = UnionOf<typeof collectionPanelActions>;
 
-export const COLLECTION_TAG_FORM_NAME = 'collectionTagForm';
-
 export const loadCollectionPanel = (uuid: string, forceReload = false) =>
     async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
         const { collectionPanel: { item } } = getState();
@@ -44,37 +39,6 @@ export const loadCollectionPanel = (uuid: string, forceReload = false) =>
         return collection;
     };
 
-export const createCollectionTag = (data: TagProperty) =>
-    (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
-        const item = getState().collectionPanel.item;
-        if (!item) { return; }
-
-        const properties = Object.assign({}, item.properties);
-        const key = data.keyID || data.key;
-        const value = data.valueID || data.value;
-        const cachedCollection = getResource<CollectionResource>(item.uuid)(getState().resources);
-        services.collectionService.update(
-            item.uuid, {
-                properties: addProperty(properties, key, value)
-            }
-        ).then(updatedCollection => {
-            updatedCollection = {...cachedCollection, ...updatedCollection};
-            dispatch(collectionPanelActions.SET_COLLECTION(updatedCollection));
-            dispatch(resourcesActions.SET_RESOURCES([updatedCollection]));
-            dispatch(snackbarActions.OPEN_SNACKBAR({
-                message: "Property has been successfully added.",
-                hideDuration: 2000,
-                kind: SnackbarKind.SUCCESS }));
-            dispatch<any>(loadDetailsPanel(updatedCollection.uuid));
-            return updatedCollection;
-        }).catch (e =>
-            dispatch(snackbarActions.OPEN_SNACKBAR({
-                message: e.errors[0],
-                hideDuration: 2000,
-                kind: SnackbarKind.ERROR }))
-        );
-    };
-
 export const navigateToProcess = (uuid: string) =>
     async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
         try {
@@ -84,29 +48,3 @@ export const navigateToProcess = (uuid: string) =>
             dispatch(snackbarActions.OPEN_SNACKBAR({ message: 'This process does not exist!', hideDuration: 2000, kind: SnackbarKind.ERROR }));
         }
     };
-
-export const deleteCollectionTag = (key: string, value: string) =>
-    (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
-        const item = getState().collectionPanel.item;
-        if (!item) { return; }
-
-        const properties = Object.assign({}, item.properties);
-        const cachedCollection = getResource<CollectionResource>(item.uuid)(getState().resources);
-        services.collectionService.update(
-            item.uuid, {
-                properties: deleteProperty(properties, key, value)
-            }
-        ).then(updatedCollection => {
-            updatedCollection = {...cachedCollection, ...updatedCollection};
-            dispatch(collectionPanelActions.SET_COLLECTION(updatedCollection));
-            dispatch(resourcesActions.SET_RESOURCES([updatedCollection]));
-            dispatch(snackbarActions.OPEN_SNACKBAR({ message: "Tag has been successfully deleted.", hideDuration: 2000, kind: SnackbarKind.SUCCESS }));
-            dispatch<any>(loadDetailsPanel(updatedCollection.uuid));
-            return updatedCollection;
-        }).catch (e => {
-            dispatch(snackbarActions.OPEN_SNACKBAR({
-                message: e.errors[0],
-                hideDuration: 2000,
-                kind: SnackbarKind.ERROR }));
-        });
-    };
index bda35441a83fda894d80338dbabe48dd33fd5943..90ca0f4f0a6d71a212386532fe46e36c19992d00 100644 (file)
@@ -7,13 +7,9 @@ import { RootState } from 'store/store';
 import { Dispatch } from 'redux';
 import { dialogActions } from 'store/dialog/dialog-actions';
 import { getResource } from 'store/resources/resources';
-import { ProjectResource } from "models/project";
 import { ServiceRepository } from 'services/services';
-import { TagProperty } from 'models/tag';
-import { startSubmit, stopSubmit } from 'redux-form';
 import { resourcesActions } from 'store/resources/resources-actions';
 import {snackbarActions, SnackbarKind} from 'store/snackbar/snackbar-actions';
-import { addProperty, deleteProperty } from 'lib/resource-properties';
 import { FilterBuilder } from 'services/api/filter-builder';
 import { OrderBuilder } from 'services/api/order-builder';
 import { CollectionResource } from 'models/collection';
@@ -29,8 +25,8 @@ export const detailsPanelActions = unionize({
 
 export type DetailsPanelAction = UnionOf<typeof detailsPanelActions>;
 
-export const PROJECT_PROPERTIES_FORM_NAME = 'projectPropertiesFormName';
-export const PROJECT_PROPERTIES_DIALOG_NAME = 'projectPropertiesDialogName';
+export const RESOURCE_PROPERTIES_FORM_NAME = 'resourcePropertiesFormName';
+export const RESOURCE_PROPERTIES_DIALOG_NAME = 'resourcePropertiesDialogName';
 
 export const loadDetailsPanel = (uuid: string) =>
     (dispatch: Dispatch, getState: () => RootState) => {
@@ -55,9 +51,9 @@ export const openDetailsPanel = (uuid?: string, tabNr: number = 0) =>
         }
     };
 
-export const openProjectPropertiesDialog = () =>
+export const openResourcePropertiesDialog = () =>
     (dispatch: Dispatch) => {
-        dispatch<any>(dialogActions.OPEN_DIALOG({ id: PROJECT_PROPERTIES_DIALOG_NAME, data: { } }));
+        dispatch<any>(dialogActions.OPEN_DIALOG({ id: RESOURCE_PROPERTIES_DIALOG_NAME, data: { } }));
     };
 
 export const refreshCollectionVersionsList = (uuid: string) =>
@@ -76,49 +72,6 @@ export const refreshCollectionVersionsList = (uuid: string) =>
         );
     };
 
-export const deleteProjectProperty = (key: string, value: string) =>
-    async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
-        const { detailsPanel, resources } = getState();
-        const project = getResource(detailsPanel.resourceUuid)(resources) as ProjectResource;
-        if (!project) { return; }
-
-        const properties = Object.assign({}, project.properties);
-
-        try {
-            const updatedProject = await services.projectService.update(
-                project.uuid, {
-                    properties: deleteProperty(properties, key, value),
-                });
-            dispatch(resourcesActions.SET_RESOURCES([updatedProject]));
-            dispatch(snackbarActions.OPEN_SNACKBAR({ message: "Property has been successfully deleted.", hideDuration: 2000, kind: SnackbarKind.SUCCESS }));
-        } catch (e) {
-            dispatch(snackbarActions.OPEN_SNACKBAR({ message: e.errors[0], hideDuration: 2000, kind: SnackbarKind.ERROR }));
-        }
-    };
-
-export const createProjectProperty = (data: TagProperty) =>
-    async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
-        const { detailsPanel, resources } = getState();
-        const project = getResource(detailsPanel.resourceUuid)(resources) as ProjectResource;
-        if (!project) { return; }
-
-        dispatch(startSubmit(PROJECT_PROPERTIES_FORM_NAME));
-        try {
-            const key = data.keyID || data.key;
-            const value = data.valueID || data.value;
-            const properties = Object.assign({}, project.properties);
-            const updatedProject = await services.projectService.update(
-                project.uuid, {
-                    properties: addProperty(properties, key, value),
-                }
-            );
-            dispatch(resourcesActions.SET_RESOURCES([updatedProject]));
-            dispatch(snackbarActions.OPEN_SNACKBAR({ message: "Property has been successfully added.", hideDuration: 2000, kind: SnackbarKind.SUCCESS }));
-            dispatch(stopSubmit(PROJECT_PROPERTIES_FORM_NAME));
-        } catch (e) {
-            dispatch(snackbarActions.OPEN_SNACKBAR({ message: e.errors[0], hideDuration: 2000, kind: SnackbarKind.ERROR }));
-        }
-    };
 export const toggleDetailsPanel = () => (dispatch: Dispatch, getState: () => RootState) => {
     // because of material-ui issue resizing details panel breaks tabs.
     // triggering window resize event fixes that.
index 6c05da32f6cbdcee6b558683385d9cce87dcabe5..8e6d16f928aed6d54e2f807861a81c6bfb732c1d 100644 (file)
@@ -3,11 +3,15 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import { unionize, ofType, UnionOf } from 'common/unionize';
-import { extractUuidKind, Resource } from 'models/resource';
+import { extractUuidKind, Resource, ResourceWithProperties } from 'models/resource';
 import { Dispatch } from 'redux';
 import { RootState } from 'store/store';
 import { ServiceRepository } from 'services/services';
 import { getResourceService } from 'services/services';
+import { addProperty, deleteProperty } from 'lib/resource-properties';
+import { snackbarActions, SnackbarKind } from 'store/snackbar/snackbar-actions';
+import { getResource } from './resources';
+import { TagProperty } from 'models/tag';
 
 export const resourcesActions = unionize({
     SET_RESOURCES: ofType<Resource[]>(),
@@ -33,3 +37,59 @@ export const loadResource = (uuid: string, showErrors?: boolean) =>
         } catch {}
         return undefined;
     };
+
+export const deleteResourceProperty = (uuid: string, key: string, value: string) =>
+    async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
+        const { resources } = getState();
+
+        const rsc = getResource(uuid)(resources) as ResourceWithProperties;
+        if (!rsc) { return; }
+
+        const kind = extractUuidKind(uuid);
+        const service = getResourceService(kind)(services);
+        if (!service) { return; }
+
+        const properties = Object.assign({}, rsc.properties);
+
+        try {
+            let updatedRsc = await service.update(
+                uuid, {
+                    properties: deleteProperty(properties, key, value),
+                });
+            updatedRsc = {...rsc, ...updatedRsc};
+            dispatch<any>(updateResources([updatedRsc]));
+            dispatch(snackbarActions.OPEN_SNACKBAR({ message: "Property has been successfully deleted.", hideDuration: 2000, kind: SnackbarKind.SUCCESS }));
+        } catch (e) {
+            dispatch(snackbarActions.OPEN_SNACKBAR({ message: e.errors[0], hideDuration: 2000, kind: SnackbarKind.ERROR }));
+        }
+    };
+
+export const createResourceProperty = (data: TagProperty) =>
+    async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
+        const { uuid } = data;
+        const { resources } = getState();
+
+        const rsc = getResource(uuid)(resources) as ResourceWithProperties;
+        if (!rsc) { return; }
+
+        const kind = extractUuidKind(uuid);
+        const service = getResourceService(kind)(services);
+        if (!service) { return; }
+
+        try {
+            const key = data.keyID || data.key;
+            const value = data.valueID || data.value;
+            const properties = Object.assign({}, rsc.properties);
+            let updatedRsc = await service.update(
+                rsc.uuid, {
+                    properties: addProperty(properties, key, value),
+                }
+            );
+            updatedRsc = {...rsc, ...updatedRsc};
+            dispatch<any>(updateResources([updatedRsc]));
+            dispatch(snackbarActions.OPEN_SNACKBAR({ message: "Property has been successfully added.", hideDuration: 2000, kind: SnackbarKind.SUCCESS }));
+        } catch (e) {
+            const errorMsg = e.errors && e.errors.length > 0 ? e.errors[0] : "Error while adding property";
+            dispatch(snackbarActions.OPEN_SNACKBAR({ message: errorMsg, hideDuration: 2000, kind: SnackbarKind.ERROR }));
+        }
+    };
index 41ba6f00f154f2a5f3b9bf1f4fb2a8eb28b9f7e4..82e3e7546546e56880932f1ba82e3ea91ca26db8 100644 (file)
@@ -4,7 +4,7 @@
 
 import React from 'react';
 import { connect } from 'react-redux';
-import { openProjectPropertiesDialog } from 'store/details-panel/details-panel-action';
+import { openResourcePropertiesDialog } from 'store/details-panel/details-panel-action';
 import { ProjectIcon, RenameIcon, FilterGroupIcon } from 'components/icon/icon';
 import { ProjectResource } from 'models/project';
 import { formatDate } from 'common/formatters';
@@ -55,7 +55,7 @@ interface ProjectDetailsComponentActionProps {
 }
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
-    onClick: () => dispatch<any>(openProjectPropertiesDialog()),
+    onClick: () => dispatch<any>(openResourcePropertiesDialog()),
 });
 
 type ProjectDetailsComponentProps = ProjectDetailsComponentDataProps & ProjectDetailsComponentActionProps & WithStyles<CssRules>;
diff --git a/src/views-components/project-properties-dialog/project-properties-dialog.tsx b/src/views-components/project-properties-dialog/project-properties-dialog.tsx
deleted file mode 100644 (file)
index 19d3bb5..0000000
+++ /dev/null
@@ -1,81 +0,0 @@
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import React from "react";
-import { Dispatch } from "redux";
-import { connect } from "react-redux";
-import { RootState } from 'store/store';
-import { withDialog, WithDialogProps } from "store/dialog/with-dialog";
-import { ProjectResource } from 'models/project';
-import { PROJECT_PROPERTIES_DIALOG_NAME, deleteProjectProperty } from 'store/details-panel/details-panel-action';
-import { Dialog, DialogTitle, DialogContent, DialogActions, Button, withStyles, StyleRulesCallback, WithStyles } from '@material-ui/core';
-import { ArvadosTheme } from 'common/custom-theme';
-import { ProjectPropertiesForm } from 'views-components/project-properties-dialog/project-properties-form';
-import { getResource } from 'store/resources/resources';
-import { getPropertyChip } from "../resource-properties-form/property-chip";
-
-type CssRules = 'tag';
-
-const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
-    tag: {
-        marginRight: theme.spacing.unit,
-        marginBottom: theme.spacing.unit
-    }
-});
-
-interface ProjectPropertiesDialogDataProps {
-    project: ProjectResource;
-}
-
-interface ProjectPropertiesDialogActionProps {
-    handleDelete: (key: string, value: string) => void;
-}
-
-const mapStateToProps = ({ detailsPanel, resources, properties }: RootState): ProjectPropertiesDialogDataProps => ({
-    project: getResource(detailsPanel.resourceUuid)(resources) as ProjectResource,
-});
-
-const mapDispatchToProps = (dispatch: Dispatch): ProjectPropertiesDialogActionProps => ({
-    handleDelete: (key: string, value: string) => () => dispatch<any>(deleteProjectProperty(key, value)),
-});
-
-type ProjectPropertiesDialogProps = ProjectPropertiesDialogDataProps & ProjectPropertiesDialogActionProps & WithDialogProps<{}> & WithStyles<CssRules>;
-
-export const ProjectPropertiesDialog = connect(mapStateToProps, mapDispatchToProps)(
-    withStyles(styles)(
-        withDialog(PROJECT_PROPERTIES_DIALOG_NAME)(
-            ({ classes, open, closeDialog, handleDelete, project }: ProjectPropertiesDialogProps) =>
-                <Dialog open={open}
-                    onClose={closeDialog}
-                    fullWidth
-                    maxWidth='sm'>
-                    <DialogTitle>Properties</DialogTitle>
-                    <DialogContent>
-                        <ProjectPropertiesForm />
-                        {project && project.properties &&
-                            Object.keys(project.properties).map(k =>
-                                Array.isArray(project.properties[k])
-                                    ? project.properties[k].map((v: string) =>
-                                        getPropertyChip(
-                                            k, v,
-                                            handleDelete(k, v),
-                                            classes.tag))
-                                    : getPropertyChip(
-                                        k, project.properties[k],
-                                        handleDelete(k, project.properties[k]),
-                                        classes.tag)
-                            )
-                        }
-                    </DialogContent>
-                    <DialogActions>
-                        <Button
-                            variant='text'
-                            color='primary'
-                            onClick={closeDialog}>
-                            Close
-                    </Button>
-                    </DialogActions>
-                </Dialog>
-        )
-    ));
similarity index 56%
rename from src/views-components/project-properties-dialog/project-properties-form.tsx
rename to src/views-components/resource-properties-dialog/resource-properties-dialog-form.tsx
index f36bacf4aeb3007dfe706a7db5dced57961ef0b2..cfb999cc77b4e1bdaf0f1ac42c1fedbf30026933 100644 (file)
@@ -3,17 +3,18 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import { reduxForm, reset } from 'redux-form';
-import { PROJECT_PROPERTIES_FORM_NAME, createProjectProperty } from 'store/details-panel/details-panel-action';
+import { RESOURCE_PROPERTIES_FORM_NAME } from 'store/details-panel/details-panel-action';
 import { ResourcePropertiesForm, ResourcePropertiesFormData } from 'views-components/resource-properties-form/resource-properties-form';
 import { withStyles } from '@material-ui/core';
 import { Dispatch } from 'redux';
+import { createResourceProperty } from 'store/resources/resources-actions';
 
 const Form = withStyles(({ spacing }) => ({ container: { marginBottom: spacing.unit * 2 } }))(ResourcePropertiesForm);
 
-export const ProjectPropertiesForm = reduxForm<ResourcePropertiesFormData>({
-    form: PROJECT_PROPERTIES_FORM_NAME,
+export const ResourcePropertiesDialogForm = reduxForm<ResourcePropertiesFormData, {uuid: string}>({
+    form: RESOURCE_PROPERTIES_FORM_NAME,
     onSubmit: (data, dispatch: Dispatch) => {
-        dispatch<any>(createProjectProperty(data));
-        dispatch(reset(PROJECT_PROPERTIES_FORM_NAME));
+        dispatch<any>(createResourceProperty(data));
+        dispatch(reset(RESOURCE_PROPERTIES_FORM_NAME));
     }
 })(Form);
diff --git a/src/views-components/resource-properties-dialog/resource-properties-dialog.tsx b/src/views-components/resource-properties-dialog/resource-properties-dialog.tsx
new file mode 100644 (file)
index 0000000..b634715
--- /dev/null
@@ -0,0 +1,91 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import React from "react";
+import { Dispatch } from "redux";
+import { connect } from "react-redux";
+import { RootState } from 'store/store';
+import { withDialog, WithDialogProps } from "store/dialog/with-dialog";
+import { RESOURCE_PROPERTIES_DIALOG_NAME } from 'store/details-panel/details-panel-action';
+import {
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Button,
+    withStyles,
+    StyleRulesCallback,
+    WithStyles
+} from '@material-ui/core';
+import { ArvadosTheme } from 'common/custom-theme';
+import { ResourcePropertiesDialogForm } from 'views-components/resource-properties-dialog/resource-properties-dialog-form';
+import { getResource } from 'store/resources/resources';
+import { getPropertyChip } from "../resource-properties-form/property-chip";
+import { deleteResourceProperty } from "store/resources/resources-actions";
+import { ResourceWithProperties } from "models/resource";
+
+type CssRules = 'tag';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    tag: {
+        marginRight: theme.spacing.unit,
+        marginBottom: theme.spacing.unit
+    }
+});
+
+interface ResourcePropertiesDialogDataProps {
+    resource: ResourceWithProperties;
+}
+
+interface ResourcePropertiesDialogActionProps {
+    handleDelete: (uuid: string, key: string, value: string) => void;
+}
+
+const mapStateToProps = ({ detailsPanel, resources, properties }: RootState): ResourcePropertiesDialogDataProps => ({
+    resource: getResource(detailsPanel.resourceUuid)(resources) as ResourceWithProperties,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch): ResourcePropertiesDialogActionProps => ({
+    handleDelete: (uuid: string, key: string, value: string) => () => dispatch<any>(deleteResourceProperty(uuid, key, value)),
+});
+
+type ResourcePropertiesDialogProps = ResourcePropertiesDialogDataProps & ResourcePropertiesDialogActionProps & WithDialogProps<{}> & WithStyles<CssRules>;
+
+export const ResourcePropertiesDialog = connect(mapStateToProps, mapDispatchToProps)(
+    withStyles(styles)(
+        withDialog(RESOURCE_PROPERTIES_DIALOG_NAME)(
+            ({ classes, open, closeDialog, handleDelete, resource }: ResourcePropertiesDialogProps) =>
+                <Dialog open={open}
+                    onClose={closeDialog}
+                    fullWidth
+                    maxWidth='sm'>
+                    <DialogTitle>Edit properties</DialogTitle>
+                    <DialogContent>
+                        <ResourcePropertiesDialogForm uuid={resource ? resource.uuid : ''} />
+                        {resource && resource.properties &&
+                            Object.keys(resource.properties).map(k =>
+                                Array.isArray(resource.properties[k])
+                                    ? resource.properties[k].map((v: string) =>
+                                        getPropertyChip(
+                                            k, v,
+                                            handleDelete(resource.uuid, k, v),
+                                            classes.tag))
+                                    : getPropertyChip(
+                                        k, resource.properties[k],
+                                        handleDelete(resource.uuid, k, resource.properties[k]),
+                                        classes.tag)
+                            )
+                        }
+                    </DialogContent>
+                    <DialogActions>
+                        <Button
+                            variant='text'
+                            color='primary'
+                            onClick={closeDialog}>
+                            Close
+                    </Button>
+                    </DialogActions>
+                </Dialog>
+            )
+    ));
index 38d76e46f50804473929115c75ac329d4e1c227c..94a3c95517caa1f534aa715d1f1fa8508448078d 100644 (file)
@@ -11,16 +11,18 @@ import { ProgressButton } from 'components/progress-button/progress-button';
 import { GridClassKey } from '@material-ui/core/Grid';
 
 export interface ResourcePropertiesFormData {
+    uuid: string;
     [PROPERTY_KEY_FIELD_NAME]: string;
     [PROPERTY_KEY_FIELD_ID]: string;
     [PROPERTY_VALUE_FIELD_NAME]: string;
     [PROPERTY_VALUE_FIELD_ID]: string;
 }
 
-export type ResourcePropertiesFormProps = InjectedFormProps<ResourcePropertiesFormData> & WithStyles<GridClassKey>;
+export type ResourcePropertiesFormProps = {uuid: string; } & InjectedFormProps<ResourcePropertiesFormData, {uuid: string; }> & WithStyles<GridClassKey>;
 
-export const ResourcePropertiesForm = ({ handleSubmit, submitting, invalid, classes }: ResourcePropertiesFormProps ) =>
-    <form data-cy='resource-properties-form' onSubmit={handleSubmit}>
+export const ResourcePropertiesForm = ({ handleSubmit, change, submitting, invalid, classes, uuid }: ResourcePropertiesFormProps ) => {
+    change('uuid', uuid); // Sets the uuid field to the uuid of the resource.
+    return <form data-cy='resource-properties-form' onSubmit={handleSubmit}>
         <Grid container spacing={16} classes={classes}>
             <Grid item xs>
                 <PropertyKeyField />
@@ -40,7 +42,7 @@ export const ResourcePropertiesForm = ({ handleSubmit, submitting, invalid, clas
                 </Button>
             </Grid>
         </Grid>
-    </form>;
+    </form>};
 
 export const Button = withStyles(theme => ({
     root: { marginTop: theme.spacing.unit }
index 794e093f3d8d2129c5be959f97a4c6239b7b701a..5aeaef184724d3ac90fc5ede3ff296aa979152fa 100644 (file)
@@ -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 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>;
-};
+});
diff --git a/src/views/collection-panel/collection-tag-form.tsx b/src/views/collection-panel/collection-tag-form.tsx
deleted file mode 100644 (file)
index 6d9cbd5..0000000
+++ /dev/null
@@ -1,19 +0,0 @@
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import { reduxForm, reset } from 'redux-form';
-import { createCollectionTag, COLLECTION_TAG_FORM_NAME } from 'store/collection-panel/collection-panel-action';
-import { ResourcePropertiesForm, ResourcePropertiesFormData } from 'views-components/resource-properties-form/resource-properties-form';
-import { withStyles } from '@material-ui/core';
-import { Dispatch } from 'redux';
-
-const Form = withStyles(({ spacing }) => ({ container: { marginBottom: spacing.unit * 2 } }))(ResourcePropertiesForm);
-
-export const CollectionTagForm = reduxForm<ResourcePropertiesFormData>({
-    form: COLLECTION_TAG_FORM_NAME,
-    onSubmit: (data, dispatch: Dispatch) => {
-        dispatch<any>(createCollectionTag(data));
-        dispatch(reset(COLLECTION_TAG_FORM_NAME));
-    }
-})(Form);
index 25d70776e2f9c97ee779cf7594d577bf23f3844f..ea24c87229ef24374bafd7ef3e003f5a1cd7d9b7 100644 (file)
@@ -54,7 +54,7 @@ import { AdvancedTabDialog } from 'views-components/advanced-tab-dialog/advanced
 import { ProcessInputDialog } from 'views-components/process-input-dialog/process-input-dialog';
 import { VirtualMachineUserPanel } from 'views/virtual-machine-panel/virtual-machine-user-panel';
 import { VirtualMachineAdminPanel } from 'views/virtual-machine-panel/virtual-machine-admin-panel';
-import { ProjectPropertiesDialog } from 'views-components/project-properties-dialog/project-properties-dialog';
+import { ResourcePropertiesDialog } from 'views-components/resource-properties-dialog/resource-properties-dialog';
 import { RepositoriesPanel } from 'views/repositories-panel/repositories-panel';
 import { KeepServicePanel } from 'views/keep-service-panel/keep-service-panel';
 import { ApiClientAuthorizationPanel } from 'views/api-client-authorization-panel/api-client-authorization-panel';
@@ -242,7 +242,7 @@ export const WorkbenchPanel =
             <PartialCopyToCollectionDialog />
             <ProcessCommandDialog />
             <ProcessInputDialog />
-            <ProjectPropertiesDialog />
+            <ResourcePropertiesDialog />
             <RestoreCollectionVersionDialog />
             <RemoveApiClientAuthorizationDialog />
             <RemoveGroupDialog />