From 600473ff7276d45dc6b71c720047860a993c7a2f Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Fri, 9 Jul 2021 10:50:48 -0700
Subject: [PATCH] refactor: icon to icons for toasts component (#15579)

* initial commit

* remove code

* fix test

* Update superset-frontend/src/messageToasts/components/Toast.tsx

Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com>

* Update superset-frontend/src/messageToasts/components/Toast.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

* Update superset-frontend/src/messageToasts/components/Toast.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com>
Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
---
 .../messageToasts/components/Toast_spec.jsx   |  7 ++++++-
 .../src/messageToasts/components/Toast.tsx    | 20 ++++++++++---------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/superset-frontend/spec/javascripts/messageToasts/components/Toast_spec.jsx b/superset-frontend/spec/javascripts/messageToasts/components/Toast_spec.jsx
index fa5cae1f82..0686f82f9f 100644
--- a/superset-frontend/spec/javascripts/messageToasts/components/Toast_spec.jsx
+++ b/superset-frontend/spec/javascripts/messageToasts/components/Toast_spec.jsx
@@ -18,6 +18,7 @@
  */
 import React from 'react';
 import { mount } from 'enzyme';
+import { ThemeProvider, supersetTheme } from '@superset-ui/core';
 import Toast from 'src/messageToasts/components/Toast';
 import { act } from 'react-dom/test-utils';
 import mockMessageToasts from '../mockMessageToasts';
@@ -27,7 +28,11 @@ const props = {
   onCloseToast() {},
 };
 
-const setup = overrideProps => mount(<Toast {...props} {...overrideProps} />);
+const setup = overrideProps =>
+  mount(<Toast {...props} {...overrideProps} />, {
+    wrappingComponent: ThemeProvider,
+    wrappingComponentProps: { theme: supersetTheme },
+  });
 
 describe('Toast', () => {
   it('should render', () => {
diff --git a/superset-frontend/src/messageToasts/components/Toast.tsx b/superset-frontend/src/messageToasts/components/Toast.tsx
index 9018ed6ae2..5f7416aa4d 100644
--- a/superset-frontend/src/messageToasts/components/Toast.tsx
+++ b/superset-frontend/src/messageToasts/components/Toast.tsx
@@ -16,11 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { styled } from '@superset-ui/core';
+import { styled, css, SupersetTheme } from '@superset-ui/core';
 import cx from 'classnames';
 import Interweave from 'interweave';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import Icon, { IconName } from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 import { ToastType } from 'src/messageToasts/constants';
 import { ToastMeta } from '../types';
 
@@ -34,8 +34,9 @@ const ToastContainer = styled.div`
   }
 `;
 
-const StyledIcon = styled(Icon)`
-  min-width: ${({ theme }) => theme.gridUnit * 5}px;
+const StyledIcon = (theme: SupersetTheme) => css`
+  min-width: ${theme.gridUnit * 5}px;
+  color: ${theme.colors.grayscale.base};
 `;
 
 interface ToastPresenterProps {
@@ -76,16 +77,17 @@ export default function Toast({ toast, onCloseToast }: ToastPresenterProps) {
     };
   }, [handleClosePress, toast.duration]);
 
-  let iconName: IconName = 'circle-check-solid';
   let className = 'toast--success';
+  let icon = <Icons.CircleCheckSolid css={theme => StyledIcon(theme)} />;
+
   if (toast.toastType === ToastType.WARNING) {
-    iconName = 'warning-solid';
+    icon = <Icons.WarningSolid css={StyledIcon} />;
     className = 'toast--warning';
   } else if (toast.toastType === ToastType.DANGER) {
-    iconName = 'error-solid';
+    icon = <Icons.ErrorSolid css={StyledIcon} />;
     className = 'toast--danger';
   } else if (toast.toastType === ToastType.INFO) {
-    iconName = 'info-solid';
+    icon = <Icons.InfoSolid css={StyledIcon} />;
     className = 'toast--info';
   }
 
@@ -95,7 +97,7 @@ export default function Toast({ toast, onCloseToast }: ToastPresenterProps) {
       data-test="toast-container"
       role="alert"
     >
-      <StyledIcon name={iconName} />
+      {icon}
       <Interweave content={toast.text} />
       <i
         className="fa fa-close pull-right pointer"