Mirror of https://github.com/roostorg/osprey
github.com/roostorg/osprey
1import * as React from 'react';
2import { Alert } from 'antd';
3
4import useErrorStore from '../../stores/ErrorStore';
5import Text, { TextColors, TextWeights } from '../../uikit/Text';
6import Tooltip from '../../uikit/Tooltip';
7import { Placements } from '../../utils/DOMUtils';
8
9import styles from './QueryErrors.module.css';
10
11const QueryErrors: React.FC = () => {
12 const errors = useErrorStore((state) => state.errors);
13
14 const renderErrors = () => {
15 const errorList = [...errors].map((error: string, index: number) => (
16 <div className={styles.error} key={index}>
17 {error}
18 </div>
19 ));
20
21 return (
22 <Tooltip placement={Placements.BOTTOM_LEFT} className={styles.errorTooltip} content={errorList} defaultVisible>
23 <Text className={styles.errorCount} tag="span" color={TextColors.LINK_BLUE} weight={TextWeights.SEMIBOLD}>
24 {`Error${errors.size > 1 ? 's' : ''}`}
25 </Text>
26 </Tooltip>
27 );
28 };
29
30 return errors.size === 0 ? null : (
31 <div className={styles.errorAlertWrapper}>
32 <Alert
33 type="error"
34 message={
35 <>
36 {`${errors.size} `}
37 {renderErrors()}
38 {` Found`}
39 </>
40 }
41 />
42 </div>
43 );
44};
45
46export default QueryErrors;