1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { Paper, StyleRulesCallback, withStyles, WithStyles, List } from '@material-ui/core';
7 import { SearchView } from '~/store/search-bar/search-bar-reducer';
8 import { RecentQueriesItem, RenderSavedQueries } from '~/views-components/search-bar/search-bar-view';
10 type CssRules = 'advanced' | 'searchQueryList' | 'list' | 'searchView';
12 const styles: StyleRulesCallback<CssRules> = theme => {
16 justifyContent: 'flex-end',
17 paddingRight: theme.spacing.unit * 2,
18 paddingBottom: theme.spacing.unit,
23 padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px `,
24 background: '#f2f2f2',
31 color: theme.palette.common.black,
32 borderRadius: `0 0 ${theme.spacing.unit / 4}px ${theme.spacing.unit / 4}px`
37 interface SearchBarBasicViewProps {
38 setView: (currentView: string) => void;
39 recentQueries: () => string[];
42 export const SearchBarBasicView = withStyles(styles)(
43 ({ classes, setView, recentQueries }: SearchBarBasicViewProps & WithStyles<CssRules>) =>
44 <Paper className={classes.searchView}>
45 <div className={classes.searchQueryList}>Saved search queries</div>
46 <List component="nav" className={classes.list}>
47 <RenderSavedQueries text="Test" />
48 <RenderSavedQueries text="Demo" />
50 <div className={classes.searchQueryList}>Recent search queries</div>
51 <List component="nav" className={classes.list}>
52 {recentQueries().map((query, index) => <RecentQueriesItem key={query + index} text={query} />)}
54 <div className={classes.advanced} onClick={() => setView(SearchView.ADVANCED)}>Advanced search</div>