Merge branch 'main' into 21720-material-ui-upgrade
[arvados.git] / services / workbench2 / src / views-components / search-bar / search-bar-recent-queries.tsx
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
5 import React from 'react';
6 import { CustomStyleRulesCallback } from 'common/custom-theme';
7 import { List, ListItem, ListItemText } from '@mui/material';
8 import { WithStyles } from '@mui/styles';
9 import withStyles from '@mui/styles/withStyles';
10 import { ArvadosTheme } from 'common/custom-theme';
11 import { SearchBarSelectedItem } from "store/search-bar/search-bar-reducer";
12
13 type CssRules = 'root' | 'listItem' | 'listItemText';
14
15 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
16     root: {
17         padding: '0px'
18     },
19     listItem: {
20         paddingLeft: theme.spacing(1),
21         paddingRight: theme.spacing(2),
22     },
23     listItemText: {
24         fontSize: '0.8125rem',
25         color: theme.palette.grey["900"]
26     }
27 });
28
29 export interface SearchBarRecentQueriesDataProps {
30     selectedItem: SearchBarSelectedItem;
31 }
32
33 export interface SearchBarRecentQueriesActionProps {
34     onSearch: (searchValue: string) => void;
35     loadRecentQueries: () => string[];
36 }
37
38 type SearchBarRecentQueriesProps = SearchBarRecentQueriesDataProps & SearchBarRecentQueriesActionProps & WithStyles<CssRules>;
39
40 export const SearchBarRecentQueries = withStyles(styles)(
41     ({ classes, onSearch, loadRecentQueries, selectedItem }: SearchBarRecentQueriesProps) =>
42         <List component="nav" className={classes.root}>
43             {loadRecentQueries().map((query, index) =>
44                 <ListItem button key={index} className={classes.listItem} selected={`RQ-${index}-${query}` === selectedItem.id}>
45                     <ListItemText disableTypography
46                         secondary={query}
47                         onClick={() => onSearch(query)}
48                         className={classes.listItemText} />
49                 </ListItem>
50             )}
51         </List>);