15069: Fixes bug on advanced search UI disallowing duplicate tags.

When the user added properties with the same key as a search criteria, the
UI used to list them all, because the form saves them as a FieldArray and
they were being pushed to the array when clicking on the Add button.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <ldipentima@veritasgenetics.com>

diff --git a/src/store/search-bar/search-bar-actions.ts b/src/store/search-bar/search-bar-actions.ts
index 8e9e755d5e85520ead2344fa85756847360542c7..4b745a4dcc35c8356be0cb48915cffee9442b632 100644 (file)
--- a/src/store/search-bar/search-bar-actions.ts
+++ b/src/store/search-bar/search-bar-actions.ts
@@ -388,11 +388,6 @@ export const resetAdvancedFormProperty = (propertyField: string) =>
         dispatch(untouch(SEARCH_BAR_ADVANCED_FORM_NAME, propertyField));
     };
 
-export const updateAdvancedFormProperties = (propertyValue: PropertyValue) =>
-    (dispatch: Dispatch) => {
-        dispatch(arrayPush(SEARCH_BAR_ADVANCED_FORM_NAME, 'properties', propertyValue));
-    };
-
 export const moveUp = () =>
     (dispatch: Dispatch) => {
         dispatch(searchBarActions.MOVE_UP());

diff --git a/src/views-components/search-bar/search-bar-advanced-properties-view.tsx b/src/views-components/search-bar/search-bar-advanced-properties-view.tsx
index 0d7972f822f0cc20e41cd6a4c98d298aa0e1e8e1..eb049b7625262dfe5caee013d21681f8df3bc0ae 100644 (file)
--- a/src/views-components/search-bar/search-bar-advanced-properties-view.tsx
+++ b/src/views-components/search-bar/search-bar-advanced-properties-view.tsx
@@ -11,8 +11,7 @@ import { RootState } from '~/store/store';
 import {
     SEARCH_BAR_ADVANCED_FORM_NAME,
     changeAdvancedFormProperty,
-    resetAdvancedFormProperty,
-    updateAdvancedFormProperties
+    resetAdvancedFormProperty
 } from '~/store/search-bar/search-bar-actions';
 import { PropertyValue } from '~/models/search-bar';
 import { ArvadosTheme } from '~/common/custom-theme';
@@ -46,7 +45,7 @@ interface SearchBarAdvancedPropertiesViewDataProps {
 
 interface SearchBarAdvancedPropertiesViewActionProps {
     setProps: () => void;
-    addProp: (propertyValues: PropertyValue) => void;
+    setProp: (propertyValues: PropertyValue, properties: PropertyValue[]) => void;
     getAllFields: (propertyValues: PropertyValue[]) => PropertyValue[] | [];
 }
 
@@ -65,8 +64,11 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
     setProps: (propertyValues: PropertyValue[]) => {
         dispatch<any>(changeAdvancedFormProperty('properties', propertyValues));
     },
-    addProp: (propertyValue: PropertyValue) => {
-        dispatch<any>(updateAdvancedFormProperties(propertyValue));
+    setProp: (propertyValue: PropertyValue, properties: PropertyValue[]) => {
+        dispatch<any>(changeAdvancedFormProperty(
+            'properties',
+            [...properties.filter(e => e.keyID! !== propertyValue.keyID!), propertyValue]
+        ));
         dispatch<any>(resetAdvancedFormProperty('key'));
         dispatch<any>(resetAdvancedFormProperty('value'));
         dispatch<any>(resetAdvancedFormProperty('keyID'));
@@ -81,7 +83,7 @@ export const SearchBarAdvancedPropertiesView = compose(
     connectVocabulary,
     connect(mapStateToProps, mapDispatchToProps))(
     withStyles(styles)(
-        ({ classes, fields, propertyValues, setProps, addProp, getAllFields, vocabulary }: SearchBarAdvancedPropertiesViewProps) =>
+        ({ classes, fields, propertyValues, setProps, setProp, getAllFields, vocabulary }: SearchBarAdvancedPropertiesViewProps) =>
             <Grid container item xs={12} spacing={16}>
                 <Grid item xs={2} className={classes.label}>Properties</Grid>
                 <Grid item xs={4}>
@@ -91,7 +93,7 @@ export const SearchBarAdvancedPropertiesView = compose(
                     <SearchBarValueField />
                 </Grid>
                 <Grid container item xs={2} justify='flex-end' alignItems="center">
-                    <Button className={classes.button} onClick={() => addProp(propertyValues)}
+                    <Button className={classes.button} onClick={() => setProp(propertyValues, getAllFields(fields))}
                         color="primary"
                         size='small'
                         variant="contained"