Merge branch '14422_item_sorting_in_copy_to_project_modal'

[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 5e2acb7584930726408343daadda68daf0427dd0..0384de223d083fa73379460b1ff0652f78e8f597 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,22 +8,19 @@ 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 { ArvadosTheme } from '~/common/custom-theme';
 import { SearchBarKeyField, SearchBarValueField } from '~/views-components/form-fields/search-bar-form-fields';
 import { Chips } from '~/components/chips/chips';
 
-type CssRules = 'root' | 'label' | 'button';
+type CssRules = 'label' | 'button';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
-    root: {
-
-    },
     label: {
         color: theme.palette.grey["500"],
         fontSize: '0.8125rem',
@@ -48,14 +45,14 @@ interface SearchBarAdvancedPropertiesViewActionProps {
     getAllFields: (propertyValues: PropertyValues[]) => PropertyValues[] | [];
 }
 
-type SearchBarAdvancedPropertiesViewProps = SearchBarAdvancedPropertiesViewDataProps 
-    & SearchBarAdvancedPropertiesViewActionProps 
+type SearchBarAdvancedPropertiesViewProps = SearchBarAdvancedPropertiesViewDataProps
+    & SearchBarAdvancedPropertiesViewActionProps
     & InjectedFormProps & WithStyles<CssRules>;
 
 const selector = formValueSelector(SEARCH_BAR_ADVANCE_FORM_NAME);
 const mapStateToProps = (state: RootState) => {
     return {
-        propertyValues: selector(state, 'propertyKey', 'propertyValue')
+        propertyValues: selector(state, 'key', 'value')
     };
 };
 
@@ -65,18 +62,16 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
     },
     addProp: (propertyValues: PropertyValues) => {
         dispatch<any>(updateAdvanceFormProperties(propertyValues));
-        dispatch<any>(changeAdvanceFormProperty('propertyKey'));
-        dispatch<any>(changeAdvanceFormProperty('propertyValue'));
+        dispatch<any>(changeAdvanceFormProperty('key'));
+        dispatch<any>(changeAdvanceFormProperty('value'));
     },
     getAllFields: (fields: any) => {
         return fields.getAll() || [];
     }
 });
 
-export const SearchBarAdvancedPropertiesView = 
-    connect(mapStateToProps, mapDispatchToProps)
-
-    (withStyles(styles)(
+export const SearchBarAdvancedPropertiesView = connect(mapStateToProps, mapDispatchToProps)(
+    withStyles(styles)(
         ({ classes, fields, propertyValues, setProps, addProp, getAllFields }: SearchBarAdvancedPropertiesViewProps) =>
             <Grid container item xs={12} spacing={16}>
                 <Grid item xs={2} className={classes.label}>Properties</Grid>
@@ -90,16 +85,17 @@ export const SearchBarAdvancedPropertiesView =
                     <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.propertyKey}: ${field.propertyValue}`} />
+                        onChange={setProps}
+                        getLabel={(field: PropertyValues) => `${field.key}: ${field.value}`} />
                 </Grid>
             </Grid>
     )