X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/8f42eae95848318db3f09a4424424560d36f2edd..f0a64666816383d2641d5fa7ea22019441ac4464:/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 bfa1e6aa3c..71d32ad7e9 100644
--- a/src/views-components/search-bar/search-bar-advanced-view.tsx
+++ b/src/views-components/search-bar/search-bar-advanced-view.tsx
@@ -3,19 +3,23 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { reduxForm, reset, InjectedFormProps } from 'redux-form';
+import { reduxForm, InjectedFormProps, reset } 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, saveQuery } from '~/store/search-bar/search-bar-actions';
+import {
+    SEARCH_BAR_ADVANCED_FORM_NAME, SEARCH_BAR_ADVANCED_FORM_PICKER_ID,
+    searchAdvancedData,
+    setSearchValueFromAdvancedData
+} 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 { SearchBarAdvancedFormData } from '~/models/search-bar';
 import {
     SearchBarTypeField, SearchBarClusterField, SearchBarProjectField, SearchBarTrashField,
     SearchBarDateFromField, SearchBarDateToField, SearchBarPropertiesField,
     SearchBarSaveSearchField, SearchBarQuerySearchField
 } from '~/views-components/form-fields/search-bar-form-fields';
+import { treePickerActions } from "~/store/tree-picker/tree-picker-actions";
 
 type CssRules = 'container' | 'closeIcon' | 'label' | 'buttonWrapper'
     | 'button' | 'circularProgress' | 'searchView' | 'selectGrid';
@@ -23,7 +27,8 @@ type CssRules = 'container' | 'closeIcon' | 'label' | 'buttonWrapper'
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     container: {
         padding: theme.spacing.unit * 2,
-        borderBottom: `1px solid ${theme.palette.grey["200"]}`
+        borderBottom: `1px solid ${theme.palette.grey["200"]}`,
+        position: 'relative',
     },
     closeIcon: {
         position: 'absolute',
@@ -36,8 +41,8 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         alignSelf: 'center'
     },
     buttonWrapper: {
-        paddingRight: '14px',
-        paddingTop: '14px',
+        marginRight: '14px',
+        marginTop: '14px',
         position: 'relative',
     },
     button: {
@@ -45,7 +50,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     },
     circularProgress: {
         position: 'absolute',
-        top: -9,
+        top: 0,
         bottom: 0,
         left: 0,
         right: 0,
@@ -60,27 +65,26 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     }
 });
 
-interface SearchBarAdvancedViewDataProps {
+// ToDo: maybe we should remove invalid and prostine
+interface SearchBarAdvancedViewFormDataProps {
     submitting: boolean;
     invalid: boolean;
     pristine: boolean;
 }
 
-export interface Tags {
-    values?: {
-        properties?: { key: string, value: string },
-        value?: string;
-        key?: string;
-    };
+// ToDo: maybe we should remove tags
+export interface SearchBarAdvancedViewDataProps {
+    tags: any;
+    saveQuery: boolean;
 }
 
-interface SearchBarAdvancedViewActionProps {
-    setView: (currentView: string) => void;
-    saveQuery: (data: SearchBarAdvanceFormData) => void;
-    tags: Tags;
+export interface SearchBarAdvancedViewActionProps {
+    closeAdvanceView: () => void;
 }
 
-type SearchBarAdvancedViewProps = SearchBarAdvancedViewActionProps & SearchBarAdvancedViewDataProps
+type SearchBarAdvancedViewProps = SearchBarAdvancedViewActionProps & SearchBarAdvancedViewDataProps;
+
+type SearchBarAdvancedViewFormProps = SearchBarAdvancedViewProps & SearchBarAdvancedViewFormDataProps
     & InjectedFormProps & WithStyles<CssRules>;
 
 const validate = (values: any) => {
@@ -96,16 +100,20 @@ const validate = (values: any) => {
 };
 
 export const SearchBarAdvancedView = compose(
-    reduxForm<SearchBarAdvanceFormData, SearchBarAdvancedViewActionProps>({
-        form: SEARCH_BAR_ADVANCE_FORM_NAME,
+    reduxForm<SearchBarAdvancedFormData, SearchBarAdvancedViewProps>({
+        form: SEARCH_BAR_ADVANCED_FORM_NAME,
         validate,
-        onSubmit: (data: SearchBarAdvanceFormData, dispatch: Dispatch) => {
-            dispatch<any>(saveQuery(data));
-            dispatch(reset(SEARCH_BAR_ADVANCE_FORM_NAME));
-        }
+        onSubmit: (data: SearchBarAdvancedFormData, dispatch: Dispatch) => {
+            dispatch<any>(searchAdvancedData(data));
+            dispatch(reset(SEARCH_BAR_ADVANCED_FORM_NAME));
+            dispatch(treePickerActions.DEACTIVATE_TREE_PICKER_NODE({ pickerId: SEARCH_BAR_ADVANCED_FORM_PICKER_ID }));
+        },
+        onChange: (data: SearchBarAdvancedFormData, dispatch: Dispatch, props: any, prevData: SearchBarAdvancedFormData) => {
+            dispatch<any>(setSearchValueFromAdvancedData(data, prevData));
+        },
     }),
     withStyles(styles))(
-        ({ classes, setView, handleSubmit, submitting, invalid, pristine, tags }: SearchBarAdvancedViewProps) =>
+        ({ classes, closeAdvanceView, handleSubmit, submitting, invalid, pristine, tags, saveQuery }: SearchBarAdvancedViewFormProps) =>
             <Paper className={classes.searchView}>
                 <form onSubmit={handleSubmit}>
                     <Grid container direction="column" justify="flex-start" alignItems="flex-start">
@@ -124,7 +132,7 @@ export const SearchBarAdvancedView = compose(
                             </Grid>
                             <Grid item container xs={12}>
                                 <Grid item xs={2} className={classes.label}>Project</Grid>
-                                <Grid item xs={5}>
+                                <Grid item xs={10}>
                                     <SearchBarProjectField />
                                 </Grid>
                             </Grid>
@@ -134,7 +142,7 @@ export const SearchBarAdvancedView = compose(
                                     <SearchBarTrashField />
                                 </Grid>
                             </Grid>
-                            <IconButton onClick={() => setView(SearchView.BASIC)} className={classes.closeIcon}>
+                            <IconButton onClick={closeAdvanceView} className={classes.closeIcon}>
                                 <CloseIcon />
                             </IconButton>
                         </Grid>
@@ -155,13 +163,15 @@ export const SearchBarAdvancedView = compose(
                                     <SearchBarSaveSearchField />
                                 </Grid>
                                 <Grid item xs={4}>
-                                    <SearchBarQuerySearchField />
+                                    {saveQuery && <SearchBarQuerySearchField />}
                                 </Grid>
                             </Grid>
                             <Grid container item xs={12} justify='flex-end'>
                                 <div className={classes.buttonWrapper}>
                                     <Button type="submit" className={classes.button}
-                                        disabled={invalid || submitting || pristine || !!((tags.values!.key || tags.values!.value) && !tags.values!.properties)}
+                                        // ToDo: create easier condition
+                                        // Question: do we need this condition?
+                                        // disabled={invalid || submitting || pristine || !!(tags && tags.values && ((tags.values.key) || (tags.values.value)) && !Object.keys(tags.values).find(el => el !== 'value' && el !== 'key'))}
                                         color="primary"
                                         size='small'
                                         variant="contained">
