services/workbench2/src/views-components/search-bar/search-bar-save-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 { withStyles, WithStyles, List, ListItem, ListItemText, ListItemSecondaryAction, Tooltip, IconButton } from '@material-ui/core';
   8 import { ArvadosTheme } from 'common/custom-theme';
   9 import { RemoveIcon, EditSavedQueryIcon } from 'components/icon/icon';
  10 import { SearchBarAdvancedFormData } from 'models/search-bar';
  11 import { SearchBarSelectedItem } from "store/search-bar/search-bar-reducer";
  12 import { getQueryFromAdvancedData } from "store/search-bar/search-bar-actions";
  13
  14 type CssRules = 'root' | 'listItem' | 'listItemText' | 'button';
  15
  16 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  17     root: {
  18         padding: '0px'
  19     },
  20     listItem: {
  21         paddingLeft: theme.spacing(1),
  22         paddingRight: theme.spacing(2)
  23     },
  24     listItemText: {
  25         fontSize: '0.8125rem',
  26         color: theme.palette.grey["900"]
  27     },
  28     button: {
  29         padding: '6px',
  30         marginRight: theme.spacing(1)
  31     }
  32 });
  33
  34 export interface SearchBarSavedQueriesDataProps {
  35     savedQueries: SearchBarAdvancedFormData[];
  36     selectedItem: SearchBarSelectedItem;
  37 }
  38
  39 export interface SearchBarSavedQueriesActionProps {
  40     onSearch: (searchValue: string) => void;
  41     deleteSavedQuery: (id: number) => void;
  42     editSavedQuery: (data: SearchBarAdvancedFormData, id: number) => void;
  43 }
  44
  45 type SearchBarSavedQueriesProps = SearchBarSavedQueriesDataProps
  46     & SearchBarSavedQueriesActionProps
  47     & WithStyles<CssRules>;
  48
  49 export const SearchBarSavedQueries = withStyles(styles)(
  50     ({ classes, savedQueries, onSearch, editSavedQuery, deleteSavedQuery, selectedItem }: SearchBarSavedQueriesProps) =>
  51         <List component="nav" className={classes.root}>
  52             {savedQueries.map((query, index) =>
  53                 <ListItem button key={index} className={classes.listItem} selected={`SQ-${index}-${query.queryName}` === selectedItem.id}>
  54                     <ListItemText disableTypography
  55                         secondary={query.queryName}
  56                         onClick={() => onSearch(getQueryFromAdvancedData(query))}
  57                         className={classes.listItemText} />
  58                     <ListItemSecondaryAction>
  59                         <Tooltip title="Edit">
  60                             <IconButton aria-label="Edit" onClick={() => editSavedQuery(query, index)} className={classes.button}>
  61                                 <EditSavedQueryIcon />
  62                             </IconButton>
  63                         </Tooltip>
  64                         <Tooltip title="Remove">
  65                             <IconButton aria-label="Remove" onClick={() => deleteSavedQuery(index)} className={classes.button}>
  66                                 <RemoveIcon />
  67                             </IconButton>
  68                         </Tooltip>
  69                     </ListItemSecondaryAction>
  70                 </ListItem>
  71             )}
  72     </List>);