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>);