Alerting: Add confirmation modals for deleting notifier (#25303)

* Add confirm modals for deleting notifier
* Update public/app/features/alerting/NotificationsListPage.tsx

Co-authored-by: Marcus Andersson <marcus.andersson@grafana.com>

public/app/features/alerting/NotificationsEditCtrl.ts

@@ -5,6 +5,7 @@ import { AppEvents } from '@grafana/data';
 import { IScope } from 'angular';
 import { promiseToDigest } from '../../core/utils/promiseToDigest';
 import config from 'app/core/config';
+import { CoreEvents } from 'app/types';
 
 export class AlertNotificationEditCtrl {
   theForm: any;
@@ -118,6 +119,20 @@ export class AlertNotificationEditCtrl {
   }
 
   deleteNotification() {
+    appEvents.emit(CoreEvents.showConfirmModal, {
+      title: 'Delete',
+      text: 'Do you want to delete this notification channel?',
+      text2: `Deleting this notification channel will not delete from alerts any references to it`,
+      icon: 'trash-alt',
+      confirmText: 'Delete',
+      yesText: 'Delete',
+      onConfirm: () => {
+        this.deleteNotificationConfirmed();
+      },
+    });
+  }
+
+  deleteNotificationConfirmed() {
     promiseToDigest(this.$scope)(
       getBackendSrv()
         .delete(`/api/alert-notifications/${this.model.id}`)

public/app/features/alerting/NotificationsListPage.tsx

@@ -3,22 +3,21 @@ import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import Page from 'app/core/components/Page/Page';
 import { getBackendSrv } from '@grafana/runtime';
 import { useAsyncFn } from 'react-use';
+import { appEvents } from 'app/core/core';
 import { useNavModel } from 'app/core/hooks/useNavModel';
 import { HorizontalGroup, Button, LinkButton } from '@grafana/ui';
+import { CoreEvents } from 'app/types';
 import { AlertNotification } from 'app/types/alerting';
 
-const deleteNotification = async (id: number) => {
-  return await getBackendSrv().delete(`/api/alert-notifications/${id}`);
-};
-
-const getNotifications = async () => {
-  return await getBackendSrv().get(`/api/alert-notifications`);
-};
-
 const NotificationsListPage: FC = () => {
   const navModel = useNavModel('channels');
 
   const [notifications, setNotifications] = useState<AlertNotification[]>([]);
+
+  const getNotifications = async () => {
+    return await getBackendSrv().get(`/api/alert-notifications`);
+  };
+
   const [state, fetchNotifications] = useAsyncFn(getNotifications);
   useEffect(() => {
     fetchNotifications().then(res => {
@@ -26,6 +25,26 @@ const NotificationsListPage: FC = () => {
     });
   }, []);
 
+  const deleteNotification = (id: number) => {
+    appEvents.emit(CoreEvents.showConfirmModal, {
+      title: 'Delete',
+      text: 'Do you want to delete this notification channel?',
+      text2: `Deleting this notification channel will not delete from alerts any references to it`,
+      icon: 'trash-alt',
+      confirmText: 'Delete',
+      yesText: 'Delete',
+      onConfirm: async () => {
+        deleteNotificationConfirmed(id);
+      },
+    });
+  };
+
+  const deleteNotificationConfirmed = async (id: number) => {
+    await getBackendSrv().delete(`/api/alert-notifications/${id}`);
+    const notifications = await fetchNotifications();
+    setNotifications(notifications);
+  };
+
   return (
     <Page navModel={navModel}>
       <Page.Contents>
@@ -70,8 +89,6 @@ const NotificationsListPage: FC = () => {
                           size="sm"
                           onClick={() => {
                             deleteNotification(notification.id);
-                            setNotifications(notifications.filter(notify => notify.id !== notification.id));
-                            fetchNotifications();
                           }}
                         />
                       </HorizontalGroup>