Merge branch '14603-add-controlled-vocabulary-to-advanced-search'

[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 01fc6a1ad91e3931ead66b9f87114849fb12d547..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
@@ -8,15 +8,16 @@ import { connect } from 'react-redux';
 import { InjectedFormProps, formValueSelector } from 'redux-form';
 import { Grid, withStyles, StyleRulesCallback, WithStyles, Button } from '@material-ui/core';
 import { RootState } from '~/store/store';
-import { 
-    SEARCH_BAR_ADVANCE_FORM_NAME, 
-    changeAdvanceFormProperty, 
-    updateAdvanceFormProperties 
+import {
+    SEARCH_BAR_ADVANCE_FORM_NAME,
+    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,18 +36,18 @@ 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 
-    & SearchBarAdvancedPropertiesViewActionProps 
+type SearchBarAdvancedPropertiesViewProps = SearchBarAdvancedPropertiesViewDataProps
+    & SearchBarAdvancedPropertiesViewActionProps
     & InjectedFormProps & WithStyles<CssRules>;
 
 const selector = formValueSelector(SEARCH_BAR_ADVANCE_FORM_NAME);
@@ -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'));
@@ -85,17 +86,18 @@ export const SearchBarAdvancedPropertiesView = connect(mapStateToProps, mapDispa
                     <Button className={classes.button} onClick={() => addProp(propertyValues)}
                         color="primary"
                         size='small'
-                        variant="contained">
+                        variant="contained"
+                        disabled={!Boolean(propertyValues.key && propertyValues.value)}>
                         Add
                     </Button>
                 </Grid>
                 <Grid item xs={2} />
                 <Grid container item xs={10} spacing={8}>
-                    <Chips values={getAllFields(fields)} 
+                    <Chips values={getAllFields(fields)}
                         deletable
-                        onChange={setProps} 
-                        getLabel={(field: PropertyValues) => `${field.key}: ${field.value}`} />
+                        onChange={setProps}
+                        getLabel={(field: PropertyValue) => formatPropertyValue(field)} />
                 </Grid>
             </Grid>
     )
-);
\ No newline at end of file
+);