15781: Adds multi-value property support for projects.

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

diff --git a/src/lib/resource-properties.ts b/src/lib/resource-properties.ts
new file mode 100644 (file)
index 0000000..02f13b6
--- /dev/null
+++ b/src/lib/resource-properties.ts
@@ -0,0 +1,35 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+export const deleteProperty = (properties: any, key: string, value: string) => {
+    if (Array.isArray(properties[key])) {
+        properties[key] = properties[key].filter((v: string) => v !== value);
+        if (properties[key].length === 1) {
+            properties[key] = properties[key][0];
+        } else if (properties[key].length === 0) {
+            delete properties[key];
+        }
+    } else if (properties[key] === value) {
+        delete properties[key];
+    }
+    return properties;
+}
+
+export const addProperty = (properties: any, key: string, value: string) => {
+    if (properties[key]) {
+        if (Array.isArray(properties[key])) {
+            properties[key] = [...properties[key], value];
+        } else {
+            properties[key] = [properties[key], value];
+        }
+        // Remove potential duplicate and save as single value if needed
+        properties[key] = Array.from(new Set(properties[key]));
+        if (properties[key].length === 1) {
+            properties[key] = properties[key][0];
+        }
+    } else {
+        properties[key] = value;
+    }
+    return properties;
+}
\ No newline at end of file

diff --git a/src/store/collection-panel/collection-panel-action.ts b/src/store/collection-panel/collection-panel-action.ts
index f4244389fdf22ab2a2b0f5f7546dda687636bd9c..fee5bcd6b11c097f1c6e08220084db7aa4f7b5a9 100644 (file)
--- a/src/store/collection-panel/collection-panel-action.ts
+++ b/src/store/collection-panel/collection-panel-action.ts
@@ -16,6 +16,7 @@ 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 { deleteProperty, addProperty } from "~/lib/resource-properties";
 
 export const collectionPanelActions = unionize({
     SET_COLLECTION: ofType<CollectionResource>(),
@@ -47,20 +48,10 @@ export const createCollectionTag = (data: TagProperty) =>
             if (item) {
                 const key = data.keyID || data.key;
                 const value = data.valueID || data.value;
-                if (item.properties[key]) {
-                    if (Array.isArray(item.properties[key])) {
-                        item.properties[key] = [...item.properties[key], value];
-                        // Remove potential duplicates
-                        item.properties[key] = Array.from(new Set(item.properties[key]));
-                    } else {
-                        item.properties[key] = [item.properties[key], value];
-                    }
-                } else {
-                    item.properties[key] = value;
-                }
+                item.properties = addProperty(item.properties, key, value);
                 const updatedCollection = await services.collectionService.update(
                     uuid, {
-                        properties: {...JSON.parse(JSON.stringify(item.properties))}
+                        properties: {...item.properties}
                     }
                 );
                 item.properties = updatedCollection.properties;
@@ -91,16 +82,7 @@ export const deleteCollectionTag = (key: string, value: string) =>
         const uuid = item ? item.uuid : '';
         try {
             if (item) {
-                if (Array.isArray(item.properties[key])) {
-                    item.properties[key] = item.properties[key].filter((v: string) => v !== value);
-                    if (item.properties[key].length === 1) {
-                        item.properties[key] = item.properties[key][0];
-                    } else if (item.properties[key].length === 0) {
-                        delete item.properties[key];
-                    }
-                } else if (item.properties[key] === value) {
-                    delete item.properties[key];
-                }
+                item.properties = deleteProperty(item.properties, key, value);
 
                 const updatedCollection = await services.collectionService.update(
                     uuid, {

diff --git a/src/store/details-panel/details-panel-action.ts b/src/store/details-panel/details-panel-action.ts
index 6874671432ff8b31bd8bdf77092e753262b000b3..e0d720177d0aee2619f07a474dababbc374b488a 100644 (file)
--- a/src/store/details-panel/details-panel-action.ts
+++ b/src/store/details-panel/details-panel-action.ts
@@ -13,6 +13,7 @@ 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';
 
 export const SLIDE_TIMEOUT = 500;
 
@@ -36,13 +37,13 @@ export const openProjectPropertiesDialog = () =>
         dispatch<any>(dialogActions.OPEN_DIALOG({ id: PROJECT_PROPERTIES_DIALOG_NAME, data: { } }));
     };
 
-export const deleteProjectProperty = (key: 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;
         try {
             if (project) {
-                delete project.properties[key];
+                project.properties = deleteProperty(project.properties, key, value);
                 const updatedProject = await services.projectService.update(project.uuid, { properties: project.properties });
                 dispatch(resourcesActions.SET_RESOURCES([updatedProject]));
                 dispatch(snackbarActions.OPEN_SNACKBAR({ message: "Property has been successfully deleted.", hideDuration: 2000, kind: SnackbarKind.SUCCESS }));
@@ -60,12 +61,12 @@ export const createProjectProperty = (data: TagProperty) =>
         dispatch(startSubmit(PROJECT_PROPERTIES_FORM_NAME));
         try {
             if (project) {
+                const key = data.keyID || data.key;
+                const value = data.valueID || data.value;
+                project.properties = addProperty(project.properties, key, value);
                 const updatedProject = await services.projectService.update(
                     project.uuid, {
-                        properties: {
-                            ...JSON.parse(JSON.stringify(project.properties)),
-                            [data.keyID || data.key]: data.valueID || data.value
-                        }
+                        properties: {...project.properties}
                     }
                 );
                 dispatch(resourcesActions.SET_RESOURCES([updatedProject]));

diff --git a/src/views-components/details-panel/project-details.tsx b/src/views-components/details-panel/project-details.tsx
index 59035da115574b075a4d58eb0ab5d610302046be..1be04b00ee8d31e31a94530cb12754df2aee2084 100644 (file)
--- a/src/views-components/details-panel/project-details.tsx
+++ b/src/views-components/details-panel/project-details.tsx
@@ -16,7 +16,7 @@ import { RichTextEditorLink } from '~/components/rich-text-editor-link/rich-text
 import { withStyles, StyleRulesCallback, WithStyles } from '@material-ui/core';
 import { ArvadosTheme } from '~/common/custom-theme';
 import { Dispatch } from 'redux';
-import { PropertyChipComponent } from '../resource-properties-form/property-chip';
+import { getPropertyChip } from '../resource-properties-form/property-chip';
 
 export class ProjectDetails extends DetailsData<ProjectResource> {
     getIcon(className?: string) {
@@ -83,9 +83,10 @@ const ProjectDetailsComponent = connect(null, mapDispatchToProps)(
             </DetailsAttribute>
             {
                 Object.keys(project.properties).map(k =>
-                    <PropertyChipComponent key={k}
-                        propKey={k} propValue={project.properties[k]}
-                        className={classes.tag} />
+                    Array.isArray(project.properties[k])
+                    ? project.properties[k].map((v: string) =>
+                        getPropertyChip(k, v, undefined, classes.tag))
+                    : getPropertyChip(k, project.properties[k], undefined, classes.tag)
                 )
             }
         </div>

diff --git a/src/views-components/project-properties-dialog/project-properties-dialog.tsx b/src/views-components/project-properties-dialog/project-properties-dialog.tsx
index 7a4cfba6c56e5d133c2a61a94101f33c2d01cd3f..e1874d9548fe557f91bb7253a4efca839f6c064f 100644 (file)
--- a/src/views-components/project-properties-dialog/project-properties-dialog.tsx
+++ b/src/views-components/project-properties-dialog/project-properties-dialog.tsx
@@ -13,7 +13,7 @@ import { Dialog, DialogTitle, DialogContent, DialogActions, Button, withStyles,
 import { ArvadosTheme } from '~/common/custom-theme';
 import { ProjectPropertiesForm } from '~/views-components/project-properties-dialog/project-properties-form';
 import { getResource } from '~/store/resources/resources';
-import { PropertyChipComponent } from "../resource-properties-form/property-chip";
+import { getPropertyChip } from "../resource-properties-form/property-chip";
 
 type CssRules = 'tag';
 
@@ -29,7 +29,7 @@ interface ProjectPropertiesDialogDataProps {
 }
 
 interface ProjectPropertiesDialogActionProps {
-    handleDelete: (key: string) => void;
+    handleDelete: (key: string, value: string) => void;
 }
 
 const mapStateToProps = ({ detailsPanel, resources, properties }: RootState): ProjectPropertiesDialogDataProps => ({
@@ -37,7 +37,7 @@ const mapStateToProps = ({ detailsPanel, resources, properties }: RootState): Pr
 });
 
 const mapDispatchToProps = (dispatch: Dispatch): ProjectPropertiesDialogActionProps => ({
-    handleDelete: (key: string) => dispatch<any>(deleteProjectProperty(key)),
+    handleDelete: (key: string, value: string) => () => dispatch<any>(deleteProjectProperty(key, value)),
 });
 
 type ProjectPropertiesDialogProps =  ProjectPropertiesDialogDataProps & ProjectPropertiesDialogActionProps & WithDialogProps<{}> & WithStyles<CssRules>;
@@ -55,10 +55,17 @@ export const ProjectPropertiesDialog = connect(mapStateToProps, mapDispatchToPro
                     <ProjectPropertiesForm />
                     {project && project.properties &&
                         Object.keys(project.properties).map(k =>
-                            <PropertyChipComponent
-                                onDelete={() => handleDelete(k)}
-                                key={k} className={classes.tag}
-                                propKey={k} propValue={project.properties[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>

diff --git a/src/views-components/resource-properties-form/property-chip.tsx b/src/views-components/resource-properties-form/property-chip.tsx
index c51a8d8e0cfb5cfc3d736aa8435c21b9d75e96d4..f25deb70ebd34222f49042adcab322433ffd7eb7 100644 (file)
--- a/src/views-components/resource-properties-form/property-chip.tsx
+++ b/src/views-components/resource-properties-form/property-chip.tsx
@@ -50,3 +50,9 @@ export const PropertyChipComponent = connect(mapStateToProps, mapDispatchToProps
         );
     }
 );
+
+export const getPropertyChip = (k:string, v:string, handleDelete:any, className:string) =>
+    <PropertyChipComponent
+        key={k} className={className}
+        onDelete={handleDelete}
+        propKey={k} propValue={v} />;

diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index cc918808b515f3476c7501b0a5ee04702d602e0d..c4221937e74bd4079fb5ad252a63d3b5e8d25641 100644 (file)
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -23,7 +23,7 @@ import { ContextMenuKind } from '~/views-components/context-menu/context-menu';
 import { formatFileSize } from "~/common/formatters";
 import { openDetailsPanel } from '~/store/details-panel/details-panel-action';
 import { snackbarActions, SnackbarKind } from '~/store/snackbar/snackbar-actions';
-import { PropertyChipComponent } from '~/views-components/resource-properties-form/property-chip';
+import { getPropertyChip } from '~/views-components/resource-properties-form/property-chip';
 import { IllegalNamingWarning } from '~/components/warning/warning';
 
 type CssRules = 'card' | 'iconHeader' | 'tag' | 'label' | 'value' | 'link';
@@ -130,8 +130,14 @@ export const CollectionPanel = withStyles(styles)(
                                         {Object.keys(item.properties).map(k =>
                                             Array.isArray(item.properties[k])
                                             ? item.properties[k].map((v: string) =>
-                                                getPropertyChip(k, v, this.handleDelete, classes.tag))
-                                            : getPropertyChip(k, item.properties[k], this.handleDelete, classes.tag)
+                                                getPropertyChip(
+                                                    k, v,
+                                                    this.handleDelete(k, v),
+                                                    classes.tag))
+                                            : getPropertyChip(
+                                                k, item.properties[k],
+                                                this.handleDelete(k, item.properties[k]),
+                                                classes.tag)
                                         )}
                                     </Grid>
                                 </Grid>
@@ -184,10 +190,3 @@ export const CollectionPanel = withStyles(styles)(
         }
     )
 );
-
-const getPropertyChip = (k:string, v:string, handleDelete:any, className:string) =>
-    <PropertyChipComponent
-        key={k} className={className}
-        onDelete={handleDelete(k, v)}
-        propKey={k} propValue={v} />;
-