Merge branch 'master' into 14565-admin-managing-user

[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 aca1422813402ef13b3b28b4badfebdf78879b10..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
@@ -3,56 +3,68 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { Paper, StyleRulesCallback, withStyles, WithStyles, List } from '@material-ui/core';
+import { Paper, StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core';
 import { SearchView } from '~/store/search-bar/search-bar-reducer';
-import { RecentQueriesItem, RenderSavedQueries } from '~/views-components/search-bar/search-bar-view';
+import {
+    SearchBarRecentQueries,
+    SearchBarRecentQueriesActionProps
+} from '~/views-components/search-bar/search-bar-recent-queries';
+import {
+    SearchBarSavedQueries,
+    SearchBarSavedQueriesDataProps,
+    SearchBarSavedQueriesActionProps
+} from '~/views-components/search-bar/search-bar-save-queries';
 
-type CssRules = 'advanced' | 'searchQueryList' | 'list' | 'searchView';
+type CssRules = 'advanced' | 'label' | 'root';
 
 const styles: StyleRulesCallback<CssRules> = theme => {
     return {
+        root: {
+            color: theme.palette.common.black,
+            borderRadius: `0 0 ${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px`
+        },
         advanced: {
             display: 'flex',
             justifyContent: 'flex-end',
-            paddingRight: theme.spacing.unit * 2,
-            paddingBottom: theme.spacing.unit,
-            fontSize: '14px',
+            padding: theme.spacing.unit,
+            fontSize: '0.875rem',
             cursor: 'pointer',
             color: theme.palette.primary.main
         },
-        searchQueryList: {
-            padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px `,
-            background: '#f2f2f2',
-            fontSize: '14px'
-        },
-        list: {
-            padding: '0px'
-        },
-        searchView: {
-            color: theme.palette.common.black,
-            borderRadius: `0 0 ${theme.spacing.unit / 4}px ${theme.spacing.unit / 4}px`
+        label: {
+            fontSize: '0.775rem',
+            padding: `${theme.spacing.unit}px ${theme.spacing.unit}px `,
+            color: theme.palette.grey["900"],
+            background: 'white',
+            textAlign: 'right',
+            fontWeight: 'bold'
         }
     };
 };
 
-interface SearchBarBasicViewProps {
-    setView: (currentView: string) => void;
-    recentQueries: () => string[];
-    deleteSavedQuery: (id: number) => void;
-    savedQueries: string[];
-}
+export type SearchBarBasicViewDataProps = SearchBarSavedQueriesDataProps;
+
+export type SearchBarBasicViewActionProps = {
+    onSetView: (currentView: string) => void;
+    onSearch: (searchValue: string) => void;
+} & SearchBarRecentQueriesActionProps & SearchBarSavedQueriesActionProps;
+
+type SearchBarBasicViewProps = SearchBarBasicViewDataProps & SearchBarBasicViewActionProps & WithStyles<CssRules>;
 
 export const SearchBarBasicView = withStyles(styles)(
-    ({ classes, setView, recentQueries, deleteSavedQuery, savedQueries }: SearchBarBasicViewProps & WithStyles<CssRules>) =>
-        <Paper className={classes.searchView}>
-            <div className={classes.searchQueryList}>Saved search queries</div>
-            <List component="nav" className={classes.list}>
-                {savedQueries.map((query, index) => <RenderSavedQueries key={index} text={query} id={index} deleteSavedQuery={deleteSavedQuery}/>)}
-            </List>
-            <div className={classes.searchQueryList}>Recent search queries</div>
-            <List component="nav" className={classes.list}>
-                {recentQueries().map((query, index) => <RecentQueriesItem key={index} text={query} />)}
-            </List>
-            <div className={classes.advanced} onClick={() => setView(SearchView.ADVANCED)}>Advanced search</div>
+    ({ classes, onSetView, loadRecentQueries, deleteSavedQuery, savedQueries, onSearch, editSavedQuery, selectedItem }: SearchBarBasicViewProps) =>
+        <Paper className={classes.root}>
+            <div className={classes.label}>{"Recent queries"}</div>
+            <SearchBarRecentQueries
+                onSearch={onSearch}
+                loadRecentQueries={loadRecentQueries}
+                selectedItem={selectedItem} />
+            <div className={classes.label}>{"Saved queries"}</div>
+            <SearchBarSavedQueries
+                onSearch={onSearch}
+                savedQueries={savedQueries}
+                editSavedQuery={editSavedQuery}
+                deleteSavedQuery={deleteSavedQuery}
+                selectedItem={selectedItem} />
         </Paper>
-);
\ No newline at end of file
+);