Replace ClickAwayListener with Popover

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

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 9d312a059f4a1d473f0e2f4c3e78f447795fc810..b23a96a089e4c26099c6dbeb6cc3460d63c9c657 100644 (file)
--- a/src/views-components/search-bar/search-bar-basic-view.tsx
+++ b/src/views-components/search-bar/search-bar-basic-view.tsx
@@ -6,14 +6,14 @@ import * as React from 'react';
 import { Paper, StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core';
 import { SearchView } from '~/store/search-bar/search-bar-reducer';
 import {
-    SearchBarRenderRecentQueries,
-    SearchBarRenderRecentQueriesActionProps 
-} from '~/views-components/search-bar/search-bar-render-recent-queries';
+    SearchBarRecentQueries,
+    SearchBarRecentQueriesActionProps
+} from '~/views-components/search-bar/search-bar-recent-queries';
 import {
-    SearchBarRenderSavedQueries,
-    SearchBarRenderSavedQueriesDataProps,
-    SearchBarRenderSavedQueriesActionProps
-} from '~/views-components/search-bar/search-bar-render-save-queries';
+    SearchBarSavedQueries,
+    SearchBarSavedQueriesDataProps,
+    SearchBarSavedQueriesActionProps
+} from '~/views-components/search-bar/search-bar-save-queries';
 
 type CssRules = 'advanced' | 'label' | 'root';
 
@@ -32,36 +32,39 @@ const styles: StyleRulesCallback<CssRules> = theme => {
             color: theme.palette.primary.main
         },
         label: {
-            fontSize: '0.875rem',
-            padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px `,
+            fontSize: '0.775rem',
+            padding: `${theme.spacing.unit}px ${theme.spacing.unit}px `,
             color: theme.palette.grey["900"],
-            background: theme.palette.grey["200"]
+            background: 'white',
+            textAlign: 'right',
+            fontWeight: 'bold'
         }
     };
 };
 
-export type SearchBarBasicViewDataProps = SearchBarRenderSavedQueriesDataProps;
+export type SearchBarBasicViewDataProps = SearchBarSavedQueriesDataProps;
 
 export type SearchBarBasicViewActionProps = {
     onSetView: (currentView: string) => void;
     onSearch: (searchValue: string) => void;
-} & SearchBarRenderRecentQueriesActionProps & SearchBarRenderSavedQueriesActionProps;
+} & SearchBarRecentQueriesActionProps & SearchBarSavedQueriesActionProps;
 
 type SearchBarBasicViewProps = SearchBarBasicViewDataProps & SearchBarBasicViewActionProps & WithStyles<CssRules>;
 
 export const SearchBarBasicView = withStyles(styles)(
-    ({ classes, onSetView, loadRecentQueries, deleteSavedQuery, savedQueries, onSearch, editSavedQuery }: SearchBarBasicViewProps) =>
+    ({ classes, onSetView, loadRecentQueries, deleteSavedQuery, savedQueries, onSearch, editSavedQuery, selectedItem }: SearchBarBasicViewProps) =>
         <Paper className={classes.root}>
-            <div className={classes.label}>Recent search queries</div>
-            <SearchBarRenderRecentQueries
+            <div className={classes.label}>{"Recent queries"}</div>
+            <SearchBarRecentQueries
                 onSearch={onSearch}
-                loadRecentQueries={loadRecentQueries} />
-            <div className={classes.label}>Saved search queries</div>
-            <SearchBarRenderSavedQueries
+                loadRecentQueries={loadRecentQueries}
+                selectedItem={selectedItem} />
+            <div className={classes.label}>{"Saved queries"}</div>
+            <SearchBarSavedQueries
                 onSearch={onSearch}
                 savedQueries={savedQueries}
                 editSavedQuery={editSavedQuery}
-                deleteSavedQuery={deleteSavedQuery} />
-            <div className={classes.advanced} onClick={() => onSetView(SearchView.ADVANCED)}>Advanced search</div>
+                deleteSavedQuery={deleteSavedQuery}
+                selectedItem={selectedItem} />
         </Paper>
-);
\ No newline at end of file
+);