services/workbench2/src/views-components/search-bar/search-bar-basic-view.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 { Paper } from '@mui/material';
   8 import { WithStyles } from '@mui/styles';
   9 import withStyles from '@mui/styles/withStyles';
  10 import {
  11     SearchBarRecentQueries,
  12     SearchBarRecentQueriesActionProps
  13 } from 'views-components/search-bar/search-bar-recent-queries';
  14 import {
  15     SearchBarSavedQueries,
  16     SearchBarSavedQueriesDataProps,
  17     SearchBarSavedQueriesActionProps
  18 } from 'views-components/search-bar/search-bar-save-queries';
  19
  20 type CssRules = 'advanced' | 'label' | 'root';
  21
  22 const styles: CustomStyleRulesCallback<CssRules> = theme => {
  23     return {
  24         root: {
  25             color: theme.palette.common.black,
  26             borderRadius: `0 0 ${theme.spacing(0.5)} ${theme.spacing(0.5)}`
  27         },
  28         advanced: {
  29             display: 'flex',
  30             justifyContent: 'flex-end',
  31             padding: theme.spacing(1),
  32             fontSize: '0.875rem',
  33             cursor: 'pointer',
  34             color: theme.palette.primary.main
  35         },
  36         label: {
  37             fontSize: '0.775rem',
  38             padding: `${theme.spacing(1)} ${theme.spacing(1)} `,
  39             color: theme.palette.grey["900"],
  40             background: 'white',
  41             textAlign: 'right',
  42             fontWeight: 'bold'
  43         }
  44     };
  45 };
  46
  47 export type SearchBarBasicViewDataProps = SearchBarSavedQueriesDataProps;
  48
  49 export type SearchBarBasicViewActionProps = {
  50     onSetView: (currentView: string) => void;
  51     onSearch: (searchValue: string) => void;
  52 } & SearchBarRecentQueriesActionProps & SearchBarSavedQueriesActionProps;
  53
  54 type SearchBarBasicViewProps = SearchBarBasicViewDataProps & SearchBarBasicViewActionProps & WithStyles<CssRules>;
  55
  56 export const SearchBarBasicView = withStyles(styles)(
  57     ({ classes, onSetView, loadRecentQueries, deleteSavedQuery, savedQueries, onSearch, editSavedQuery, selectedItem }: SearchBarBasicViewProps) =>
  58         <Paper className={classes.root}>
  59             <div className={classes.label}>{"Recent queries"}</div>
  60             <SearchBarRecentQueries
  61                 onSearch={onSearch}
  62                 loadRecentQueries={loadRecentQueries}
  63                 selectedItem={selectedItem} />
  64             <div className={classes.label}>{"Saved queries"}</div>
  65             <SearchBarSavedQueries
  66                 onSearch={onSearch}
  67                 savedQueries={savedQueries}
  68                 editSavedQuery={editSavedQuery}
  69                 deleteSavedQuery={deleteSavedQuery}
  70                 selectedItem={selectedItem} />
  71         </Paper>
  72 );