X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/b8a54f4563eb3bbe73226a8f22c04a98a1cba039..ef8180fa2f0b90b1656b1d8c7ef12bc6ea028a0a:/src/views-components/search-bar/search-bar-save-queries.tsx

diff --git a/src/views-components/search-bar/search-bar-save-queries.tsx b/src/views-components/search-bar/search-bar-save-queries.tsx
index ccf10a1b..1b765b94 100644
--- a/src/views-components/search-bar/search-bar-save-queries.tsx
+++ b/src/views-components/search-bar/search-bar-save-queries.tsx
@@ -2,11 +2,13 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
+import React from 'react';
 import { withStyles, WithStyles, StyleRulesCallback, List, ListItem, ListItemText, ListItemSecondaryAction, Tooltip, IconButton } from '@material-ui/core';
-import { ArvadosTheme } from '~/common/custom-theme';
-import { RemoveIcon, EditSavedQueryIcon } from '~/components/icon/icon';
-import { SearchBarAdvanceFormData } from '~/models/search-bar';
+import { ArvadosTheme } from 'common/custom-theme';
+import { RemoveIcon, EditSavedQueryIcon } from 'components/icon/icon';
+import { SearchBarAdvancedFormData } from 'models/search-bar';
+import { SearchBarSelectedItem } from "store/search-bar/search-bar-reducer";
+import { getQueryFromAdvancedData } from "store/search-bar/search-bar-actions";
 
 type CssRules = 'root' | 'listItem' | 'listItemText' | 'button';
 
@@ -29,27 +31,28 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 });
 
 export interface SearchBarSavedQueriesDataProps {
-    savedQueries: SearchBarAdvanceFormData[];
+    savedQueries: SearchBarAdvancedFormData[];
+    selectedItem: SearchBarSelectedItem;
 }
 
 export interface SearchBarSavedQueriesActionProps {
     onSearch: (searchValue: string) => void;
     deleteSavedQuery: (id: number) => void;
-    editSavedQuery: (data: SearchBarAdvanceFormData, id: number) => void;
+    editSavedQuery: (data: SearchBarAdvancedFormData, id: number) => void;
 }
 
-type SearchBarSavedQueriesProps = SearchBarSavedQueriesDataProps 
-    & SearchBarSavedQueriesActionProps 
+type SearchBarSavedQueriesProps = SearchBarSavedQueriesDataProps
+    & SearchBarSavedQueriesActionProps
     & WithStyles<CssRules>;
 
 export const SearchBarSavedQueries = withStyles(styles)(
-    ({ classes, savedQueries, onSearch, editSavedQuery, deleteSavedQuery }: SearchBarSavedQueriesProps) =>
+    ({ classes, savedQueries, onSearch, editSavedQuery, deleteSavedQuery, selectedItem }: SearchBarSavedQueriesProps) =>
         <List component="nav" className={classes.root}>
-            {savedQueries.map((query, index) => 
-                <ListItem button key={index} className={classes.listItem}>
-                    <ListItemText disableTypography 
-                        secondary={query.searchQuery} 
-                        onClick={() => onSearch(query.searchQuery)} 
+            {savedQueries.map((query, index) =>
+                <ListItem button key={index} className={classes.listItem} selected={`SQ-${index}-${query.queryName}` === selectedItem.id}>
+                    <ListItemText disableTypography
+                        secondary={query.queryName}
+                        onClick={() => onSearch(getQueryFromAdvancedData(query))}
                         className={classes.listItemText} />
                     <ListItemSecondaryAction>
                         <Tooltip title="Edit">
@@ -65,4 +68,4 @@ export const SearchBarSavedQueries = withStyles(styles)(
                     </ListItemSecondaryAction>
                 </ListItem>
             )}
-    </List>);
\ No newline at end of file
+    </List>);