Alerting: Fix notification route removal (#48774)

* Fix notification route removal

* fix tests

Co-authored-by: gillesdemey <gilles.de.mey@gmail.com>

public/app/features/alerting/unified/components/amroutes/AmRoutesTable.test.ts

@@ -166,7 +166,7 @@ describe('deleteRoute', () => {
     const routeToDelete = routes[1];
 
     // Act
-    const updatedRoutes = deleteRoute(routes, routeToDelete);
+    const updatedRoutes = deleteRoute(routes, routeToDelete.id);
 
     // Assert
     expect(updatedRoutes).toHaveLength(2);
@@ -179,7 +179,7 @@ describe('deleteRoute', () => {
     const routes: FormAmRoute[] = [buildAmRoute({ id: '1' }), buildAmRoute({ id: '2' }), buildAmRoute({ id: '3' })];
 
     // Act
-    const updatedRoutes = deleteRoute(routes, buildAmRoute({ id: '-1' }));
+    const updatedRoutes = deleteRoute(routes, '-1');
 
     // Assert
     expect(updatedRoutes).toHaveLength(3);

public/app/features/alerting/unified/components/amroutes/AmRoutesTable.tsx

@@ -63,8 +63,8 @@ export const updatedRoute = (routes: FormAmRoute[], updatedRoute: FormAmRoute):
   return newRoutes;
 };
 
-export const deleteRoute = (routes: FormAmRoute[], routeToRemove: FormAmRoute): FormAmRoute[] => {
-  return routes.filter((route) => route.id !== routeToRemove.id);
+export const deleteRoute = (routes: FormAmRoute[], routeId: string): FormAmRoute[] => {
+  return routes.filter((route) => route.id !== routeId);
 };
 
 export const AmRoutesTable: FC<AmRoutesTableProps> = ({
@@ -78,7 +78,7 @@ export const AmRoutesTable: FC<AmRoutesTableProps> = ({
   alertManagerSourceName,
 }) => {
   const [editMode, setEditMode] = useState(false);
-  const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);
+  const [deletingRouteId, setDeletingRouteId] = useState<string | undefined>(undefined);
   const [expandedId, setExpandedId] = useState<string | number>();
   const permissions = getNotificationsPermissions(alertManagerSourceName);
   const canEditRoutes = contextSrv.hasPermission(permissions.update);
@@ -155,23 +155,11 @@ export const AmRoutesTable: FC<AmRoutesTableProps> = ({
                       aria-label="Delete route"
                       name="trash-alt"
                       onClick={() => {
-                        setShowDeleteModal(true);
+                        setDeletingRouteId(item.data.id);
                       }}
                       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);
-                    }}
-                    onDismiss={() => setShowDeleteModal(false)}
-                  />
                 </>
               );
             },
@@ -209,45 +197,62 @@ export const AmRoutesTable: FC<AmRoutesTableProps> = ({
   }
 
   return (
-    <DynamicTable
-      cols={cols}
-      isExpandable={true}
-      items={dynamicTableRoutes}
-      testIdGenerator={() => 'am-routes-row'}
-      onCollapse={collapseItem}
-      onExpand={expandItem}
-      isExpanded={(item) => expandedId === item.id}
-      renderExpandedContent={(item: RouteTableItemProps) =>
-        isAddMode || editMode ? (
-          <AmRoutesExpandedForm
-            onCancel={() => {
-              if (isAddMode) {
-                onCancelAdd();
-              }
-              setEditMode(false);
-            }}
-            onSave={(data) => {
-              const newRoutes = updatedRoute(routes, data);
-
-              setEditMode(false);
-              onChange(newRoutes);
-            }}
-            receivers={receivers}
-            routes={item.data}
-          />
-        ) : (
-          <AmRoutesExpandedRead
-            onChange={(data) => {
-              const newRoutes = updatedRoute(routes, data);
-              onChange(newRoutes);
-            }}
-            receivers={receivers}
-            routes={item.data}
-            readOnly={readOnly}
-            alertManagerSourceName={alertManagerSourceName}
-          />
-        )
-      }
-    />
+    <>
+      <DynamicTable
+        cols={cols}
+        isExpandable={true}
+        items={dynamicTableRoutes}
+        testIdGenerator={() => 'am-routes-row'}
+        onCollapse={collapseItem}
+        onExpand={expandItem}
+        isExpanded={(item) => expandedId === item.id}
+        renderExpandedContent={(item: RouteTableItemProps) =>
+          isAddMode || editMode ? (
+            <AmRoutesExpandedForm
+              onCancel={() => {
+                if (isAddMode) {
+                  onCancelAdd();
+                }
+                setEditMode(false);
+              }}
+              onSave={(data) => {
+                const newRoutes = updatedRoute(routes, data);
+
+                setEditMode(false);
+                onChange(newRoutes);
+              }}
+              receivers={receivers}
+              routes={item.data}
+            />
+          ) : (
+            <AmRoutesExpandedRead
+              onChange={(data) => {
+                const newRoutes = updatedRoute(routes, data);
+                onChange(newRoutes);
+              }}
+              receivers={receivers}
+              routes={item.data}
+              readOnly={readOnly}
+              alertManagerSourceName={alertManagerSourceName}
+            />
+          )
+        }
+      />
+      <ConfirmModal
+        isOpen={!!deletingRouteId}
+        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={() => {
+          if (deletingRouteId) {
+            const newRoutes = deleteRoute(routes, deletingRouteId);
+            onChange(newRoutes);
+            setDeletingRouteId(undefined);
+          }
+        }}
+        onDismiss={() => setDeletingRouteId(undefined)}
+      />
+    </>
   );
 };