15781: Renders multi-value properties as multiple chips.

[arvados-workbench2.git] / src / store / collection-panel / collection-panel-action.ts

diff --git a/src/store/collection-panel/collection-panel-action.ts b/src/store/collection-panel/collection-panel-action.ts
index cb28fcea8ad6aa768b49e7b21cc42f83f1faaf1b..122fc5e393b164974cb8f6698b9f3e13003ffae1 100644 (file)
--- a/src/store/collection-panel/collection-panel-action.ts
+++ b/src/store/collection-panel/collection-panel-action.ts
@@ -45,12 +45,15 @@ export const createCollectionTag = (data: TagProperty) =>
         const uuid = item ? item.uuid : '';
         try {
             if (item) {
-                const d: Partial<CollectionResource> = {
-                    properties: JSON.parse(JSON.stringify(item.properties))
-                };
-                d.properties[data.key] = data.value;
-                const updatedCollection = await services.collectionService.update(uuid, d);
-                item.properties[data.key] = data.value;
+                const updatedCollection = await services.collectionService.update(
+                    uuid, {
+                        properties: {
+                            ...JSON.parse(JSON.stringify(item.properties)),
+                            [data.keyID || data.key]: data.valueID || data.value
+                        }
+                    }
+                );
+                item.properties = updatedCollection.properties;
                 dispatch(resourcesActions.SET_RESOURCES([updatedCollection]));
                 dispatch(snackbarActions.OPEN_SNACKBAR({ message: "Tag has been successfully added.", hideDuration: 2000, kind: SnackbarKind.SUCCESS }));
                 return updatedCollection;
@@ -72,18 +75,28 @@ export const navigateToProcess = (uuid: string) =>
         }
     };
 
-export const deleteCollectionTag = (key: string) =>
+export const deleteCollectionTag = (key: string, value: string) =>
     async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
         const item = getState().collectionPanel.item;
         const uuid = item ? item.uuid : '';
         try {
             if (item) {
-                const data: Partial<CollectionResource> = {
-                    properties: JSON.parse(JSON.stringify(item.properties))
-                };
-                delete data.properties[key];
-                const updatedCollection = await services.collectionService.update(uuid, data);
-                delete item.properties[key];
+                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];
+                }
+
+                const updatedCollection = await services.collectionService.update(
+                    uuid, {
+                        properties: {...item.properties}
+                    }
+                );
                 dispatch(resourcesActions.SET_RESOURCES([updatedCollection]));
                 dispatch(snackbarActions.OPEN_SNACKBAR({ message: "Tag has been successfully deleted.", hideDuration: 2000, kind: SnackbarKind.SUCCESS }));
                 return updatedCollection;