Merge branch 'master' into 14277-search-view-editing-saved-queries

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

diff --git a/src/views-components/search-bar/search-bar-advanced-view.tsx b/src/views-components/search-bar/search-bar-advanced-view.tsx
index 93bd0a69ecfaf2638c96bc79f7275bcc35227e01..1a836a0fea9a8146dc2fdda876f44401b019620f 100644 (file)
--- a/src/views-components/search-bar/search-bar-advanced-view.tsx
+++ b/src/views-components/search-bar/search-bar-advanced-view.tsx
@@ -3,27 +3,27 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { reduxForm, reset, InjectedFormProps } from 'redux-form';
+import { reduxForm, reset, InjectedFormProps, FieldArray } from 'redux-form';
 import { compose, Dispatch } from 'redux';
 import { Paper, StyleRulesCallback, withStyles, WithStyles, Button, Grid, IconButton, CircularProgress } from '@material-ui/core';
 import { SearchView } from '~/store/search-bar/search-bar-reducer';
-import { SEARCH_BAR_ADVANCE_FORM_NAME, SearchBarAdvanceFormData } from '~/store/search-bar/search-bar-actions';
+import { SEARCH_BAR_ADVANCE_FORM_NAME, saveQuery } from '~/store/search-bar/search-bar-actions';
 import { ArvadosTheme } from '~/common/custom-theme';
 import { CloseIcon } from '~/components/icon/icon';
+import { SearchBarAdvanceFormData } from '~/models/search-bar';
+import { SearchBarAdvancedPropertiesView } from './search-bar-advanced-properties-view';
 import { 
     SearchBarTypeField, SearchBarClusterField, SearchBarProjectField, SearchBarTrashField, 
-    SearchBarDataFromField, SearchBarDataToField, SearchBarKeyField, SearchBarValueField,
+    SearchBarDataFromField, SearchBarDataToField,
     SearchBarSaveSearchField, SearchBarQuerySearchField
 } from '~/views-components/form-fields/search-bar-form-fields';
 
-type CssRules = 'form' | 'container' | 'closeIcon' | 'label' | 'buttonWrapper' | 'button' | 'circularProgress';
+type CssRules = 'container' | 'closeIcon' | 'label' | 'buttonWrapper' 
+    | 'button' | 'circularProgress' | 'searchView' | 'selectGrid';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
-    form: {
-
-    },
     container: {
-        padding: theme.spacing.unit * 3,
+        padding: theme.spacing.unit * 2,
         borderBottom: `1px solid ${theme.palette.grey["200"]}`
     }, 
     closeIcon: {
@@ -37,6 +37,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         alignSelf: 'center'
     },
     buttonWrapper: {
+        paddingRight: '14px',
         paddingTop: '14px',
         position: 'relative',
     },
@@ -50,6 +51,13 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         left: 0,
         right: 0,
         margin: 'auto'
+    },
+    searchView: {
+        color: theme.palette.common.black,
+        borderRadius: `0 0 ${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px`
+    },
+    selectGrid: {
+        marginBottom: theme.spacing.unit * 2
     }
 });
 
@@ -61,6 +69,7 @@ interface SearchBarAdvancedViewDataProps {
 
 interface SearchBarAdvancedViewActionProps {
     setView: (currentView: string) => void;
+    saveQuery: (data: SearchBarAdvanceFormData) => void;
 }
 
 type SearchBarAdvancedViewProps = SearchBarAdvancedViewActionProps & SearchBarAdvancedViewDataProps 
@@ -70,22 +79,23 @@ export const SearchBarAdvancedView = compose(
     reduxForm<SearchBarAdvanceFormData, SearchBarAdvancedViewActionProps>({
         form: SEARCH_BAR_ADVANCE_FORM_NAME,
         onSubmit: (data: SearchBarAdvanceFormData, dispatch: Dispatch) => {
+            dispatch<any>(saveQuery(data));
             dispatch(reset(SEARCH_BAR_ADVANCE_FORM_NAME));
         }
     }),
     withStyles(styles))(
-        ({ classes, setView, handleSubmit, invalid, submitting, pristine }: SearchBarAdvancedViewProps) =>
-            <Paper>
-                <form onSubmit={handleSubmit} className={classes.form}>
+        ({ classes, setView, handleSubmit, submitting }: SearchBarAdvancedViewProps) =>
+            <Paper className={classes.searchView}>
+                <form onSubmit={handleSubmit}>
                     <Grid container direction="column" justify="flex-start" alignItems="flex-start">
                         <Grid item xs={12} container className={classes.container}>
-                            <Grid item container xs={12}>
+                            <Grid item container xs={12} className={classes.selectGrid}>
                                 <Grid item xs={2} className={classes.label}>Type</Grid>
                                 <Grid item xs={5}>
                                     <SearchBarTypeField />
                                 </Grid>
                             </Grid>
-                            <Grid item container xs={12}>
+                            <Grid item container xs={12} className={classes.selectGrid}>
                                 <Grid item xs={2} className={classes.label}>Cluster</Grid>
                                 <Grid item xs={5}>
                                     <SearchBarClusterField />
@@ -107,34 +117,18 @@ export const SearchBarAdvancedView = compose(
                                 <CloseIcon />
                             </IconButton>
                         </Grid>
-                        <Grid container item xs={12} className={classes.container}>
+                        <Grid container item xs={12} className={classes.container} spacing={16}>
                             <Grid item xs={2} className={classes.label}>Data modified</Grid>
-                            <Grid item xs={3}>
+                            <Grid item xs={4}>
                                 <SearchBarDataFromField />
                             </Grid>
-                            <Grid item xs={3}>
+                            <Grid item xs={4}>
                                 <SearchBarDataToField />
                             </Grid>
                         </Grid>
                         <Grid container item xs={12} className={classes.container}>
-                            <Grid container item xs={12}>
-                                <Grid item xs={2} className={classes.label}>Properties</Grid>
-                                <Grid item xs={4}>
-                                    <SearchBarKeyField />
-                                </Grid>
-                                <Grid item xs={4}>
-                                    <SearchBarValueField />
-                                </Grid>
-                                <Grid container item xs={2} justify='flex-end' alignItems="center">
-                                    <Button className={classes.button}
-                                        color="primary"
-                                        size='small'
-                                        variant="contained">
-                                        Add
-                                    </Button>
-                                </Grid>
-                            </Grid>
-                            <Grid container item xs={12} justify="flex-start" alignItems="center">
+                            <FieldArray name="properties" component={SearchBarAdvancedPropertiesView} />
+                            <Grid container item xs={12} justify="flex-start" alignItems="center" spacing={16}>
                                 <Grid item xs={2} className={classes.label} />
                                 <Grid item xs={4}>
                                     <SearchBarSaveSearchField />