fix-tests + search-bar-border-radius

Feature #14313

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>

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 ef13547c7462696c4b7b427a7fc75dec86478b96..fe167ba965fa859beb1660394f654708699f9db9 100644 (file)
--- a/src/views-components/search-bar/search-bar-advanced-view.tsx
+++ b/src/views-components/search-bar/search-bar-advanced-view.tsx
@@ -7,12 +7,15 @@ import { Paper, StyleRulesCallback, withStyles, WithStyles, List, Button } from
 import { SearchView } from '~/store/search-bar/search-bar-reducer';
 import { RenderRecentQueries } from '~/views-components/search-bar/search-bar-view';
 
-type CssRules = 'list';
+type CssRules = 'list' | 'searchView';
 
 const styles: StyleRulesCallback<CssRules> = theme => {
     return {
         list: {
             padding: '0px'
+        },
+        searchView: {
+            borderRadius: `0 0 ${theme.spacing.unit / 4}px ${theme.spacing.unit / 4}px`
         }
     };
 };
@@ -23,7 +26,7 @@ interface SearchBarAdvancedViewProps {
 
 export const SearchBarAdvancedView = withStyles(styles)(
     ({ classes, setView }: SearchBarAdvancedViewProps & WithStyles<CssRules>) =>
-        <Paper>
+        <Paper className={classes.searchView}>
             <List component="nav" className={classes.list}>
                 <RenderRecentQueries text='ADVANCED VIEW' />
             </List>

diff --git a/src/views-components/search-bar/search-bar-autocomplete-view.tsx b/src/views-components/search-bar/search-bar-autocomplete-view.tsx
index 64b836196ba581ce7f350b367b41bfd43668e2da..faeabb173aed2fa4d8c93891077bbb34c68cf4aa 100644 (file)
--- a/src/views-components/search-bar/search-bar-autocomplete-view.tsx
+++ b/src/views-components/search-bar/search-bar-autocomplete-view.tsx
@@ -6,12 +6,15 @@ import * as React from 'react';
 import { Paper, StyleRulesCallback, withStyles, WithStyles, List } from '@material-ui/core';
 import { RenderRecentQueries } from '~/views-components/search-bar/search-bar-view';
 
-type CssRules = 'list';
+type CssRules = 'list' | 'searchView';
 
 const styles: StyleRulesCallback<CssRules> = theme => {
     return {
         list: {
             padding: '0px'
+        },
+        searchView: {
+            borderRadius: `0 0 ${theme.spacing.unit / 4}px ${theme.spacing.unit / 4}px`
         }
     };
 };
@@ -21,7 +24,7 @@ interface SearchBarAutocompleteViewProps {
 
 export const SearchBarAutocompleteView = withStyles(styles)(
     ({ classes }: SearchBarAutocompleteViewProps & WithStyles<CssRules>) =>
-        <Paper>
+        <Paper className={classes.searchView}>
             <List component="nav" className={classes.list}>
                 <RenderRecentQueries text='AUTOCOMPLETE VIEW' />
             </List>

diff --git a/src/views-components/search-bar/search-bar-basic-view.tsx b/src/views-components/search-bar/search-bar-basic-view.tsx
index 43fb40fcd2858a19da82c1a9bb719dd63e6359c0..b8746316e0414d9b6d6fa8dc1e9de665053a9ea9 100644 (file)
--- a/src/views-components/search-bar/search-bar-basic-view.tsx
+++ b/src/views-components/search-bar/search-bar-basic-view.tsx
@@ -28,7 +28,8 @@ const styles: StyleRulesCallback<CssRules> = theme => {
             padding: '0px'
         },
         searchView: {
-            color: theme.palette.common.black
+            color: theme.palette.common.black,
+            borderRadius: `0 0 ${theme.spacing.unit / 4}px ${theme.spacing.unit / 4}px`
         }
     };
 };

diff --git a/src/views-components/search-bar/search-bar-view.tsx b/src/views-components/search-bar/search-bar-view.tsx
index 7f9a14ad99b5b094ed242ac9ed6f35701ea1c110..b4d98f884cb3963c082d9ce97b6b49725c45a12f 100644 (file)
--- a/src/views-components/search-bar/search-bar-view.tsx
+++ b/src/views-components/search-bar/search-bar-view.tsx
@@ -21,14 +21,19 @@ import { SearchBarBasicView } from '~/views-components/search-bar/search-bar-bas
 import { SearchBarAdvancedView } from '~/views-components/search-bar/search-bar-advanced-view';
 import { SearchBarAutocompleteView } from '~/views-components/search-bar/search-bar-autocomplete-view';
 
-type CssRules = 'container' | 'input' | 'searchBar';
+type CssRules = 'container' | 'containerSearchViewOpened' | 'input' | 'searchBar';
 
 const styles: StyleRulesCallback<CssRules> = theme => {
     return {
         container: {
             position: 'relative',
             width: '100%',
-            borderRadius: '0px'
+            borderRadius: theme.spacing.unit / 4
+        },
+        containerSearchViewOpened: {
+            position: 'relative',
+            width: '100%',
+            borderRadius: `${theme.spacing.unit / 4}px ${theme.spacing.unit / 4}px 0 0`
         },
         input: {
             border: 'none',
@@ -99,7 +104,7 @@ export const SearchBarView = withStyles(styles)(
         render() {
             const { classes, currentView, openView, closeView, open } = this.props;
             return <ClickAwayListener onClickAway={() => closeView()}>
-                <Paper className={classes.container} >
+                <Paper className={open ? classes.containerSearchViewOpened : classes.container} >
                     <form onSubmit={this.handleSubmit} className={classes.searchBar}>
                         <Input
                             className={classes.input}
@@ -141,23 +146,23 @@ export const SearchBarView = withStyles(styles)(
         getView = (currentView: string) => {
             switch (currentView) {
                 case SearchView.BASIC:
-                    return <SearchBarBasicView setView={this.props.onSetView} recentQueries={this.props.loadQueries}/>;
+                    return <SearchBarBasicView setView={this.props.onSetView} recentQueries={this.props.loadQueries} />;
                 case SearchView.ADVANCED:
                     return <SearchBarAdvancedView setView={this.props.onSetView} />;
                 case SearchView.AUTOCOMPLETE:
                     return <SearchBarAutocompleteView />;
                 default:
-                    return <SearchBarBasicView setView={this.props.onSetView} recentQueries={this.props.loadQueries}/>;
+                    return <SearchBarBasicView setView={this.props.onSetView} recentQueries={this.props.loadQueries} />;
             }
         }
 
         handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-                event.preventDefault();
-                clearTimeout(this.timeout);
-                this.props.saveQuery(this.state.value);
-                this.props.onSearch(this.state.value);
-                this.props.loadQueries();
-            }
+            event.preventDefault();
+            clearTimeout(this.timeout);
+            this.props.saveQuery(this.state.value);
+            this.props.onSearch(this.state.value);
+            this.props.loadQueries();
+        }
 
         handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
             clearTimeout(this.timeout);

diff --git a/src/views/workbench/workbench.test.tsx b/src/views/workbench/workbench.test.tsx
index 14ca6947edfe967c6b3892f2b4340adf156f37a8..29eed6023762007273abec55a6b930ec156913d4 100644 (file)
--- a/src/views/workbench/workbench.test.tsx
+++ b/src/views/workbench/workbench.test.tsx
@@ -12,6 +12,7 @@ import { ConnectedRouter } from "react-router-redux";
 import { MuiThemeProvider } from '@material-ui/core/styles';
 import { CustomTheme } from '~/common/custom-theme';
 import { createServices } from "~/services/services";
+import 'jest-localstorage-mock';
 
 const history = createBrowserHistory();