refactor: icon to icons in erroralert component (#15341)

* initial commit

* initial commit

* lint
This commit is contained in:
Phillip Kelley-Dotson 2021-06-24 18:05:22 -07:00 committed by GitHub
parent a477505291
commit a3f4e4ad9e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 21 deletions

View File

@ -47,11 +47,9 @@ test('should render', () => {
test('should render warning icon', () => { test('should render warning icon', () => {
render(<ErrorAlert {...mockedProps} />); render(<ErrorAlert {...mockedProps} />);
expect(screen.getByTestId('icon')).toBeInTheDocument(); expect(
expect(screen.getByTestId('icon')).toHaveAttribute( screen.getByRole('img', { name: 'warning-solid' }),
'data-name', ).toBeInTheDocument();
'warning-solid',
);
}); });
test('should render error icon', () => { test('should render error icon', () => {
@ -60,11 +58,7 @@ test('should render error icon', () => {
level: 'error' as ErrorLevel, level: 'error' as ErrorLevel,
}; };
render(<ErrorAlert {...errorProps} />); render(<ErrorAlert {...errorProps} />);
expect(screen.getByTestId('icon')).toBeInTheDocument(); expect(screen.getByRole('img', { name: 'error-solid' })).toBeInTheDocument();
expect(screen.getByTestId('icon')).toHaveAttribute(
'data-name',
'error-solid',
);
}); });
test('should render the error title', () => { test('should render the error title', () => {

View File

@ -22,7 +22,7 @@ import { noOp } from 'src/utils/common';
import Modal from 'src/components/Modal'; import Modal from 'src/components/Modal';
import Button from 'src/components/Button'; import Button from 'src/components/Button';
import Icon from '../Icon'; import Icons from 'src/components/Icons';
import { ErrorLevel, ErrorSource } from './types'; import { ErrorLevel, ErrorSource } from './types';
import CopyToClipboard from '../CopyToClipboard'; import CopyToClipboard from '../CopyToClipboard';
@ -106,11 +106,17 @@ export default function ErrorAlert({
<ErrorAlertDiv level={level} role="alert"> <ErrorAlertDiv level={level} role="alert">
<div className="top-row"> <div className="top-row">
<LeftSideContent> <LeftSideContent>
<Icon {level === 'error' ? (
className="icon" <Icons.ErrorSolid
name={level === 'error' ? 'error-solid' : 'warning-solid'} className="icon"
color={supersetTheme.colors[level].base} iconColor={supersetTheme.colors[level].base}
/> />
) : (
<Icons.WarningSolid
className="icon"
iconColor={supersetTheme.colors[level].base}
/>
)}
<strong>{title}</strong> <strong>{title}</strong>
</LeftSideContent> </LeftSideContent>
{!isExpandable && ( {!isExpandable && (
@ -163,11 +169,17 @@ export default function ErrorAlert({
onHide={() => setIsModalOpen(false)} onHide={() => setIsModalOpen(false)}
title={ title={
<div className="header"> <div className="header">
<Icon {level === 'error' ? (
className="icon" <Icons.ErrorSolid
name={level === 'error' ? 'error-solid' : 'warning-solid'} className="icon"
color={supersetTheme.colors[level].base} iconColor={supersetTheme.colors[level].base}
/> />
) : (
<Icons.WarningSolid
className="icon"
iconColor={supersetTheme.colors[level].base}
/>
)}
<div className="title">{title}</div> <div className="title">{title}</div>
</div> </div>
} }