Fix showing undefined in chips if there's no value

Feature #14280

Arvados-DCO-1.1-Signed-off-by: Daniel Kos <daniel.kos@contractors.roche.com>

diff --git a/src/common/formatters.ts b/src/common/formatters.ts
index e2097878a9f98276ffe1d78cf49ac6ca4468d894..5383c66e949f59ee1b2d1258f0d2d1402f485bdb 100644 (file)
--- a/src/common/formatters.ts
+++ b/src/common/formatters.ts
@@ -2,6 +2,8 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
+import { PropertyValue } from "~/models/search-bar";
+
 export const formatDate = (isoDate?: string) => {
     if (isoDate) {
         const date = new Date(isoDate);
@@ -67,3 +69,12 @@ const FILE_SIZES = [
         unit: "B"
     }
 ];
+
+export const formatPropertyValue = (pv: PropertyValue) => {
+    if (pv.key) {
+        return pv.value
+            ? `${pv.key}: ${pv.value}`
+            : pv.key;
+    }
+    return "";
+};

diff --git a/src/models/search-bar.ts b/src/models/search-bar.ts
index abc4b72b8721ba05acd1408473246d8aa2e65664..798f9c8f27bd84d1aeb6fbb06aaa244771ff840b 100644 (file)
--- a/src/models/search-bar.ts
+++ b/src/models/search-bar.ts
@@ -14,10 +14,10 @@ export type SearchBarAdvanceFormData = {
     saveQuery: boolean;
     queryName: string;
     searchValue: string;
-    properties: PropertyValues[];
+    properties: PropertyValue[];
 };
 
-export interface PropertyValues {
+export interface PropertyValue {
     key: string;
     value: string;
 }

diff --git a/src/store/search-bar/search-bar-actions.ts b/src/store/search-bar/search-bar-actions.ts
index 16cad431a51012bd298f71f8774655e755bf7aa9..9d1c6ace21021e3f7c587970a8d75900db0d14f3 100644 (file)
--- a/src/store/search-bar/search-bar-actions.ts
+++ b/src/store/search-bar/search-bar-actions.ts
@@ -15,7 +15,7 @@ import { GroupClass } from '~/models/group';
 import { SearchView } from '~/store/search-bar/search-bar-reducer';
 import { navigateTo, navigateToSearchResults } from '~/store/navigation/navigation-action';
 import { snackbarActions, SnackbarKind } from '~/store/snackbar/snackbar-actions';
-import { ClusterObjectType, PropertyValues, SearchBarAdvanceFormData } from '~/models/search-bar';
+import { ClusterObjectType, PropertyValue, SearchBarAdvanceFormData } from '~/models/search-bar';
 import { debounce } from 'debounce';
 import * as _ from "lodash";
 import { getModifiedKeysValues } from "~/common/objects";
@@ -353,7 +353,7 @@ export const parseSearchQuery: (query: string) => ParseSearchQuery = (searchValu
 
 const getFirstProp = (sq: ParseSearchQuery, name: string) => sq.properties[name] && sq.properties[name][0];
 const getPropValue = (sq: ParseSearchQuery, name: string, value: string) => sq.properties[name] && sq.properties[name].find((v: string) => v === value);
-const getProperties = (sq: ParseSearchQuery): PropertyValues[] => {
+const getProperties = (sq: ParseSearchQuery): PropertyValue[] => {
     if (sq.properties.has) {
         return sq.properties.has.map((value: string) => {
             const v = value.split(':');
@@ -466,12 +466,12 @@ export const initAdvanceFormProjectsTree = () =>
         dispatch<any>(initUserProject(SEARCH_BAR_ADVANCE_FORM_PICKER_ID));
     };
 
-export const changeAdvanceFormProperty = (property: string, value: PropertyValues[] | string = '') =>
+export const changeAdvanceFormProperty = (property: string, value: PropertyValue[] | string = '') =>
     (dispatch: Dispatch) => {
         dispatch(change(SEARCH_BAR_ADVANCE_FORM_NAME, property, value));
     };
 
-export const updateAdvanceFormProperties = (propertyValues: PropertyValues) =>
+export const updateAdvanceFormProperties = (propertyValues: PropertyValue) =>
     (dispatch: Dispatch) => {
         dispatch(arrayPush(SEARCH_BAR_ADVANCE_FORM_NAME, 'properties', propertyValues));
     };

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
+);