X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/1e2635886e1342a7b29914d3a437313807676466..aca5731485b1a79ee2305e08fd198950c7a34b42:/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 b8746316..8ad0f095 100644
--- a/src/views-components/search-bar/search-bar-basic-view.tsx
+++ b/src/views-components/search-bar/search-bar-basic-view.tsx
@@ -6,6 +6,7 @@ import * as React from 'react';
 import { Paper, StyleRulesCallback, withStyles, WithStyles, List } from '@material-ui/core';
 import { SearchView } from '~/store/search-bar/search-bar-reducer';
 import { RenderRecentQueries, RenderSavedQueries } from '~/views-components/search-bar/search-bar-view';
+import { SearchBarAdvanceFormData } from '~/models/search-bar';
 
 type CssRules = 'advanced' | 'searchQueryList' | 'list' | 'searchView';
 
@@ -17,7 +18,8 @@ const styles: StyleRulesCallback<CssRules> = theme => {
             paddingRight: theme.spacing.unit * 2,
             paddingBottom: theme.spacing.unit,
             fontSize: '14px',
-            cursor: 'pointer'
+            cursor: 'pointer',
+            color: theme.palette.primary.main
         },
         searchQueryList: {
             padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px `,
@@ -29,7 +31,7 @@ const styles: StyleRulesCallback<CssRules> = theme => {
         },
         searchView: {
             color: theme.palette.common.black,
-            borderRadius: `0 0 ${theme.spacing.unit / 4}px ${theme.spacing.unit / 4}px`
+            borderRadius: `0 0 ${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px`
         }
     };
 };
@@ -37,19 +39,22 @@ const styles: StyleRulesCallback<CssRules> = theme => {
 interface SearchBarBasicViewProps {
     setView: (currentView: string) => void;
     recentQueries: () => string[];
+    deleteSavedQuery: (id: number) => void;
+    savedQueries: SearchBarAdvanceFormData[];
+    onSearch: (searchValue: string) => void;
+    editSavedQuery: (data: SearchBarAdvanceFormData, id: number) => void;
 }
 
 export const SearchBarBasicView = withStyles(styles)(
-    ({ classes, setView, recentQueries }: SearchBarBasicViewProps & WithStyles<CssRules>) =>
+    ({ classes, setView, recentQueries, deleteSavedQuery, savedQueries, onSearch, editSavedQuery }: SearchBarBasicViewProps & WithStyles<CssRules>) =>
         <Paper className={classes.searchView}>
-            <div className={classes.searchQueryList}>Saved search queries</div>
+            <div className={classes.searchQueryList}>Recent search queries</div>
             <List component="nav" className={classes.list}>
-                <RenderSavedQueries text="Test" />
-                <RenderSavedQueries text="Demo" />
+                {recentQueries().map((query, index) => <RenderRecentQueries key={index} text={query} onSearch={onSearch} />)}
             </List>
-            <div className={classes.searchQueryList}>Recent search queries</div>
+            <div className={classes.searchQueryList}>Saved search queries</div>
             <List component="nav" className={classes.list}>
-                {recentQueries().map((query, index) => <RenderRecentQueries key={query + index} text={query} />)}
+                {savedQueries.map((query, index) => <RenderSavedQueries key={index} text={query.searchQuery} id={index} deleteSavedQuery={deleteSavedQuery} onSearch={onSearch} data={query} editSavedQuery={editSavedQuery}/>)}
             </List>
             <div className={classes.advanced} onClick={() => setView(SearchView.ADVANCED)}>Advanced search</div>
         </Paper>