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