diff --git a/superset-frontend/src/features/alerts/AlertReportModal.tsx b/superset-frontend/src/features/alerts/AlertReportModal.tsx index 2a9a9f438d8fe..50e2380b5fe3b 100644 --- a/superset-frontend/src/features/alerts/AlertReportModal.tsx +++ b/superset-frontend/src/features/alerts/AlertReportModal.tsx @@ -50,6 +50,7 @@ import { useCommonConf } from 'src/features/databases/state'; import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls'; import { NotificationMethodOption, + NotificationSetting, AlertObject, ChartObject, DashboardObject, @@ -395,12 +396,6 @@ const NotificationMethodAdd: FunctionComponent = ({ ); }; -type NotificationSetting = { - method?: NotificationMethodOption; - recipients: string; - options: NotificationMethodOption[]; -}; - const AlertReportModal: FunctionComponent = ({ addDangerToast, onAdd, @@ -497,15 +492,26 @@ const AlertReportModal: FunctionComponent = ({ NotificationSetting[] >([]); const onNotificationAdd = () => { - const settings: NotificationSetting[] = notificationSettings.slice(); - settings.push({ - recipients: '', - options: allowedNotificationMethods, - }); + setNotificationSettings([ + ...notificationSettings, + { + recipients: '', + // options shown in the newly added notification method + options: allowedNotificationMethods.filter( + // are filtered such that + option => + // options are not included + !notificationSettings.reduce( + // when it exists in previous notificationSettings + (accum, setting) => accum || option === setting.method, + false, + ), + ), + }, + ]); - setNotificationSettings(settings); setNotificationAddState( - settings.length === allowedNotificationMethods.length + notificationSettings.length === allowedNotificationMethods.length ? 'hidden' : 'disabled', ); @@ -547,13 +553,20 @@ const AlertReportModal: FunctionComponent = ({ index: number, setting: NotificationSetting, ) => { - const settings = notificationSettings.slice(); + // if you've changed notification method + if (notificationSettings[index].method !== setting.method) { + notificationSettings[index] = setting; - settings[index] = setting; - setNotificationSettings(settings); + setNotificationSettings( + notificationSettings.filter((_, idx) => idx <= index), + ); + if (notificationSettings.length - 1 > index) { + setNotificationAddState('active'); + } - if (setting.method !== undefined && notificationAddState !== 'hidden') { - setNotificationAddState('active'); + if (setting.method !== undefined && notificationAddState !== 'hidden') { + setNotificationAddState('active'); + } } }; diff --git a/superset-frontend/src/features/alerts/components/NotificationMethod.tsx b/superset-frontend/src/features/alerts/components/NotificationMethod.tsx index 1708c76f76881..b50988700ef4e 100644 --- a/superset-frontend/src/features/alerts/components/NotificationMethod.tsx +++ b/superset-frontend/src/features/alerts/components/NotificationMethod.tsx @@ -20,7 +20,7 @@ import React, { FunctionComponent, useState } from 'react'; import { styled, t, useTheme } from '@superset-ui/core'; import { Select } from 'src/components'; import Icons from 'src/components/Icons'; -import { NotificationMethodOption } from '../types'; +import { NotificationMethodOption, NotificationSetting } from '../types'; import { StyledInputContainer } from '../AlertReportModal'; const StyledNotificationMethod = styled.div` @@ -46,12 +46,6 @@ const StyledNotificationMethod = styled.div` } `; -type NotificationSetting = { - method?: NotificationMethodOption; - recipients: string; - options: NotificationMethodOption[]; -}; - interface NotificationMethodProps { setting?: NotificationSetting | null; index: number; @@ -130,7 +124,7 @@ export const NotificationMethod: FunctionComponent = ({ )} value={method} /> - {method !== undefined && index !== 0 && !!onRemove ? ( + {index !== 0 && !!onRemove ? (