From a3f4e4ad9e72a6f7d687d495e255fdd0622ca044 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Thu, 24 Jun 2021 18:05:22 -0700
Subject: [PATCH] refactor: icon to icons in erroralert component (#15341)

* initial commit

* initial commit

* lint
---
 .../ErrorMessage/ErrorAlert.test.tsx          | 14 +++-----
 .../components/ErrorMessage/ErrorAlert.tsx    | 34 +++++++++++++------
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/superset-frontend/src/components/ErrorMessage/ErrorAlert.test.tsx b/superset-frontend/src/components/ErrorMessage/ErrorAlert.test.tsx
index f9c54e9be7..bcf80f64ca 100644
--- a/superset-frontend/src/components/ErrorMessage/ErrorAlert.test.tsx
+++ b/superset-frontend/src/components/ErrorMessage/ErrorAlert.test.tsx
@@ -47,11 +47,9 @@ test('should render', () => {
 
 test('should render warning icon', () => {
   render(<ErrorAlert {...mockedProps} />);
-  expect(screen.getByTestId('icon')).toBeInTheDocument();
-  expect(screen.getByTestId('icon')).toHaveAttribute(
-    'data-name',
-    'warning-solid',
-  );
+  expect(
+    screen.getByRole('img', { name: 'warning-solid' }),
+  ).toBeInTheDocument();
 });
 
 test('should render error icon', () => {
@@ -60,11 +58,7 @@ test('should render error icon', () => {
     level: 'error' as ErrorLevel,
   };
   render(<ErrorAlert {...errorProps} />);
-  expect(screen.getByTestId('icon')).toBeInTheDocument();
-  expect(screen.getByTestId('icon')).toHaveAttribute(
-    'data-name',
-    'error-solid',
-  );
+  expect(screen.getByRole('img', { name: 'error-solid' })).toBeInTheDocument();
 });
 
 test('should render the error title', () => {
diff --git a/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx b/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx
index bd5ec4c2cb..3298fcf056 100644
--- a/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx
+++ b/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx
@@ -22,7 +22,7 @@ import { noOp } from 'src/utils/common';
 import Modal from 'src/components/Modal';
 import Button from 'src/components/Button';
 
-import Icon from '../Icon';
+import Icons from 'src/components/Icons';
 import { ErrorLevel, ErrorSource } from './types';
 import CopyToClipboard from '../CopyToClipboard';
 
@@ -106,11 +106,17 @@ export default function ErrorAlert({
     <ErrorAlertDiv level={level} role="alert">
       <div className="top-row">
         <LeftSideContent>
-          <Icon
-            className="icon"
-            name={level === 'error' ? 'error-solid' : 'warning-solid'}
-            color={supersetTheme.colors[level].base}
-          />
+          {level === 'error' ? (
+            <Icons.ErrorSolid
+              className="icon"
+              iconColor={supersetTheme.colors[level].base}
+            />
+          ) : (
+            <Icons.WarningSolid
+              className="icon"
+              iconColor={supersetTheme.colors[level].base}
+            />
+          )}
           <strong>{title}</strong>
         </LeftSideContent>
         {!isExpandable && (
@@ -163,11 +169,17 @@ export default function ErrorAlert({
           onHide={() => setIsModalOpen(false)}
           title={
             <div className="header">
-              <Icon
-                className="icon"
-                name={level === 'error' ? 'error-solid' : 'warning-solid'}
-                color={supersetTheme.colors[level].base}
-              />
+              {level === 'error' ? (
+                <Icons.ErrorSolid
+                  className="icon"
+                  iconColor={supersetTheme.colors[level].base}
+                />
+              ) : (
+                <Icons.WarningSolid
+                  className="icon"
+                  iconColor={supersetTheme.colors[level].base}
+                />
+              )}
               <div className="title">{title}</div>
             </div>
           }