15781: Renders multi-value properties as multiple chips.

Also, adds support for single-value property deletion.

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

diff --git a/src/store/collection-panel/collection-panel-action.ts b/src/store/collection-panel/collection-panel-action.ts
index 540b8c6a011b6ab80b2163b52000db20a050b6af..122fc5e393b164974cb8f6698b9f3e13003ffae1 100644 (file)
--- a/src/store/collection-panel/collection-panel-action.ts
+++ b/src/store/collection-panel/collection-panel-action.ts
@@ -75,13 +75,23 @@ 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) {
-                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}

diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index b92557f9de35b59557318ea6a4ba8b69f5f3c588..cc918808b515f3476c7501b0a5ee04702d602e0d 100644 (file)
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -128,10 +128,10 @@ export const CollectionPanel = withStyles(styles)(
                                     </Grid>
                                     <Grid item xs={12}>
                                         {Object.keys(item.properties).map(k =>
-                                            <PropertyChipComponent
-                                                key={k} className={classes.tag}
-                                                onDelete={this.handleDelete(k)}
-                                                propKey={k} propValue={item.properties[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)
                                         )}
                                     </Grid>
                                 </Grid>
@@ -166,8 +166,8 @@ export const CollectionPanel = withStyles(styles)(
                     kind: SnackbarKind.SUCCESS
                 }))
 
-            handleDelete = (key: string) => () => {
-                this.props.dispatch<any>(deleteCollectionTag(key));
+            handleDelete = (key: string, value: string) => () => {
+                this.props.dispatch<any>(deleteCollectionTag(key, value));
             }
 
             openCollectionDetails = () => {
@@ -184,3 +184,10 @@ 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} />;
+