Fix showing undefined in chips if there's no value

[arvados-workbench2.git] / src / views-components / search-bar / search-bar-advanced-properties-view.tsx

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 0384de223d083fa73379460b1ff0652f78e8f597..d4044f958d55b0d1c270232b32469c0c74fe3559 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
@@ -13,10 +13,11 @@ import {
     changeAdvanceFormProperty,
     updateAdvanceFormProperties
 } from '~/store/search-bar/search-bar-actions';
-import { PropertyValues } from '~/models/search-bar';
+import { PropertyValue } from '~/models/search-bar';
 import { ArvadosTheme } from '~/common/custom-theme';
 import { SearchBarKeyField, SearchBarValueField } from '~/views-components/form-fields/search-bar-form-fields';
 import { Chips } from '~/components/chips/chips';
+import { formatPropertyValue } from "~/common/formatters";
 
 type CssRules = 'label' | 'button';
 
@@ -35,14 +36,14 @@ interface SearchBarAdvancedPropertiesViewDataProps {
     submitting: boolean;
     invalid: boolean;
     pristine: boolean;
-    propertyValues: PropertyValues;
-    fields: PropertyValues[];
+    propertyValues: PropertyValue;
+    fields: PropertyValue[];
 }
 
 interface SearchBarAdvancedPropertiesViewActionProps {
     setProps: () => void;
-    addProp: (propertyValues: PropertyValues) => void;
-    getAllFields: (propertyValues: PropertyValues[]) => PropertyValues[] | [];
+    addProp: (propertyValues: PropertyValue) => void;
+    getAllFields: (propertyValues: PropertyValue[]) => PropertyValue[] | [];
 }
 
 type SearchBarAdvancedPropertiesViewProps = SearchBarAdvancedPropertiesViewDataProps
@@ -57,10 +58,10 @@ const mapStateToProps = (state: RootState) => {
 };
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
-    setProps: (propertyValues: PropertyValues[]) => {
+    setProps: (propertyValues: PropertyValue[]) => {
         dispatch<any>(changeAdvanceFormProperty('properties', propertyValues));
     },
-    addProp: (propertyValues: PropertyValues) => {
+    addProp: (propertyValues: PropertyValue) => {
         dispatch<any>(updateAdvanceFormProperties(propertyValues));
         dispatch<any>(changeAdvanceFormProperty('key'));
         dispatch<any>(changeAdvanceFormProperty('value'));
@@ -95,8 +96,8 @@ export const SearchBarAdvancedPropertiesView = connect(mapStateToProps, mapDispa
                     <Chips values={getAllFields(fields)}
                         deletable
                         onChange={setProps}
-                        getLabel={(field: PropertyValues) => `${field.key}: ${field.value}`} />
+                        getLabel={(field: PropertyValue) => formatPropertyValue(field)} />
                 </Grid>
             </Grid>
     )
-);
\ No newline at end of file
+);