From 69eb6efd6ef4ae46399faf83aafbe1145fc1301c Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Tue, 19 Apr 2022 15:55:54 +0200
Subject: [PATCH] Alerting: add confirmation modal for deleting notification
 policies (#47819)

---
 .../components/amroutes/AmRoutesTable.tsx     | 50 ++++++++++++-------
 1 file changed, 32 insertions(+), 18 deletions(-)

diff --git a/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.tsx b/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.tsx
index 8719728235e..5d8db06fc1d 100644
--- a/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.tsx
+++ b/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { Button, HorizontalGroup, IconButton } from '@grafana/ui';
+import { Button, ConfirmModal, HorizontalGroup, IconButton } from '@grafana/ui';
 import { AmRouteReceiver, FormAmRoute } from '../../types/amroutes';
 import { prepareItems } from '../../utils/dynamicTable';
 import { DynamicTable, DynamicTableColumnProps, DynamicTableItemProps } from '../DynamicTable';
@@ -75,6 +75,7 @@ export const AmRoutesTable: FC<AmRoutesTableProps> = ({
   alertManagerSourceName,
 }) => {
   const [editMode, setEditMode] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);
   const [expandedId, setExpandedId] = useState<string | number>();
   const permissions = getNotificationsPermissions(alertManagerSourceName);
   const canEditRoutes = contextSrv.hasPermission(permissions.update);
@@ -135,27 +136,40 @@ export const AmRoutesTable: FC<AmRoutesTableProps> = ({
               };
 
               return (
-                <HorizontalGroup>
-                  <Button
-                    aria-label="Edit route"
-                    icon="pen"
-                    onClick={expandWithCustomContent}
-                    size="sm"
-                    type="button"
-                    variant="secondary"
-                  >
-                    Edit
-                  </Button>
-                  <IconButton
-                    aria-label="Delete route"
-                    name="trash-alt"
-                    onClick={() => {
+                <>
+                  <HorizontalGroup>
+                    <Button
+                      aria-label="Edit route"
+                      icon="pen"
+                      onClick={expandWithCustomContent}
+                      size="sm"
+                      type="button"
+                      variant="secondary"
+                    >
+                      Edit
+                    </Button>
+                    <IconButton
+                      aria-label="Delete route"
+                      name="trash-alt"
+                      onClick={() => {
+                        setShowDeleteModal(true);
+                      }}
+                      type="button"
+                    />
+                  </HorizontalGroup>
+                  <ConfirmModal
+                    isOpen={showDeleteModal}
+                    title="Delete notification policy"
+                    body="Deleting this notification policy will permanently remove it. Are you sure you want to delete this policy?"
+                    confirmText="Yes, delete"
+                    icon="exclamation-triangle"
+                    onConfirm={() => {
                       const newRoutes = deleteRoute(routes, item.data);
                       onChange(newRoutes);
                     }}
-                    type="button"
+                    onDismiss={() => setShowDeleteModal(false)}
                   />
-                </HorizontalGroup>
+                </>
               );
             },
             size: '100px',