initial commit (#15597)

superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx

@@ -17,11 +17,17 @@
  * under the License.
  */
 import React, { FunctionComponent, useState, useEffect } from 'react';
-import { styled, t, SupersetClient } from '@superset-ui/core';
+import {
+  styled,
+  t,
+  SupersetClient,
+  css,
+  SupersetTheme,
+} from '@superset-ui/core';
 import rison from 'rison';
 import { useSingleViewResource } from 'src/views/CRUD/hooks';
 
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 import { Switch } from 'src/components/Switch';
 import Modal from 'src/components/Modal';
 import { Radio } from 'src/components/Radio';
@@ -135,8 +141,9 @@ const StyledModal = styled(Modal)`
   }
 `;
 
-const StyledIcon = styled(Icon)`
-  margin: auto ${({ theme }) => theme.gridUnit * 2}px auto 0;
+const StyledIcon = (theme: SupersetTheme) => css`
+  margin: auto ${theme.gridUnit * 2}px auto 0;
+  color: ${theme.colors.grayscale.base};
 `;
 
 const StyledSectionContainer = styled.div`
@@ -998,9 +1005,9 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
       title={
         <h4 data-test="alert-report-modal-title">
           {isEditMode ? (
-            <StyledIcon name="edit-alt" />
+            <Icons.EditAlt css={StyledIcon} />
           ) : (
-            <StyledIcon name="plus-large" />
+            <Icons.PlusLarge css={StyledIcon} />
           )}
           {isEditMode
             ? t(`Edit ${isReport ? 'Report' : 'Alert'}`)

superset-frontend/src/views/CRUD/alert/components/NotificationMethod.tsx

@@ -17,9 +17,9 @@
  * under the License.
  */
 import React, { FunctionComponent, useState } from 'react';
-import { styled, t } from '@superset-ui/core';
+import { styled, t, useTheme } from '@superset-ui/core';
 import { NativeGraySelect as Select } from 'src/components/Select';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 import { StyledInputContainer } from '../AlertReportModal';
 
 const StyledNotificationMethod = styled.div`
@@ -74,6 +74,7 @@ export const NotificationMethod: FunctionComponent<NotificationMethodProps> = ({
   const [recipientValue, setRecipientValue] = useState<string>(
     recipients || '',
   );
+  const theme = useTheme();
 
   if (!setting) {
     return null;
@@ -144,7 +145,7 @@ export const NotificationMethod: FunctionComponent<NotificationMethodProps> = ({
             className="delete-button"
             onClick={() => onRemove(index)}
           >
-            <Icon name="trash" />
+            <Icons.Trash iconColor={theme.colors.grayscale.base} />
           </span>
         ) : null}
       </div>

superset-frontend/src/views/CRUD/alert/components/RecipientIcon.tsx

@@ -16,38 +16,38 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { styled, t } from '@superset-ui/core';
-import React from 'react';
+import { t, SupersetTheme, css } from '@superset-ui/core';
+import React, { ReactElement } from 'react';
 import { Tooltip } from 'src/components/Tooltip';
-import Icon, { IconName } from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 import { RecipientIconName } from '../types';
 
-const StyledIcon = styled(Icon)`
-  color: ${({ theme }) => theme.colors.grayscale.light1};
-  margin-right: ${({ theme }) => theme.gridUnit * 2}px;
+const StyledIcon = (theme: SupersetTheme) => css`
+  color: ${theme.colors.grayscale.light1};
+  margin-right: ${theme.gridUnit * 2}px;
 `;
 
 export default function RecipientIcon({ type }: { type: string }) {
-  const recipientIconConfig = {
-    name: '',
+  const recipientIconConfig: { icon: null | ReactElement; label: string } = {
+    icon: null,
     label: '',
   };
   switch (type) {
     case RecipientIconName.email:
-      recipientIconConfig.name = 'email';
+      recipientIconConfig.icon = <Icons.Email css={StyledIcon} />;
       recipientIconConfig.label = t(`${RecipientIconName.email}`);
       break;
     case RecipientIconName.slack:
-      recipientIconConfig.name = 'slack';
+      recipientIconConfig.icon = <Icons.Slack css={StyledIcon} />;
       recipientIconConfig.label = t(`${RecipientIconName.slack}`);
       break;
     default:
-      recipientIconConfig.name = '';
+      recipientIconConfig.icon = null;
       recipientIconConfig.label = '';
   }
-  return recipientIconConfig.name.length ? (
+  return recipientIconConfig.icon ? (
     <Tooltip title={recipientIconConfig.label} placement="bottom">
-      <StyledIcon name={recipientIconConfig.name as IconName} />
+      {recipientIconConfig.icon}
     </Tooltip>
   ) : null;
 }