Mirror of https://github.com/roostorg/osprey
github.com/roostorg/osprey
1import * as React from 'react';
2import { Link } from 'react-router-dom';
3
4import { getQueryUserEmails } from '../../actions/QueryActions';
5import OspreyButton, { ButtonColors } from '../../uikit/OspreyButton';
6import Text, { TextSizes } from '../../uikit/Text';
7import QueryHistoryIcon from '../../uikit/icons/QueryHistoryIcon';
8import IconHeader from '../common/IconHeader';
9import UserSelect from '../common/UserSelect';
10import QueryHistoryList from '../query_history/QueryHistoryList';
11import { SavedQueryCardTypes } from '../saved_queries/SavedQueryCard';
12import SavedQueryList from '../saved_queries/SavedQueryList';
13
14import { Routes } from '../../Constants';
15import styles from './QueryHistory.module.css';
16
17const QueryHistory = () => {
18 const [userEmail, setUserEmail] = React.useState<string | undefined>();
19
20 return (
21 <div className={styles.viewContainer}>
22 <div className={styles.content}>
23 <div className={styles.queryHistoryContainer}>
24 <div className={styles.header}>
25 <IconHeader size={TextSizes.H4} icon={<QueryHistoryIcon />} title="Query History" />
26 <div>
27 <UserSelect onSelect={setUserEmail} userResolver={getQueryUserEmails} />
28 </div>
29 </div>
30 <QueryHistoryList userEmail={userEmail} />
31 </div>
32 <div className={styles.compactSavedQueriesContainer}>
33 <div className={styles.compactHeader}>
34 <Text size={TextSizes.H5}>Saved Queries</Text>
35 </div>
36 <SavedQueryList cardType={SavedQueryCardTypes.COMPACT} />
37 <div className={styles.footer}>
38 <OspreyButton className={styles.viewDetailButton} color={ButtonColors.LINK_GRAY}>
39 <Link to={Routes.SAVED_QUERIES}>View all saved queries</Link>
40 </OspreyButton>
41 </div>
42 </div>
43 </div>
44 </div>
45 );
46};
47
48export default QueryHistory;