diff --git a/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.test.ts b/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.test.ts index c15778b1cee..f9846440a5b 100644 --- a/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.test.ts +++ b/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); diff --git a/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.tsx b/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.tsx index 9da90b15ba9..366e0407aac 100644 --- a/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.tsx +++ b/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 = ({ @@ -78,7 +78,7 @@ export const AmRoutesTable: FC = ({ alertManagerSourceName, }) => { const [editMode, setEditMode] = useState(false); - const [showDeleteModal, setShowDeleteModal] = useState(false); + const [deletingRouteId, setDeletingRouteId] = useState(undefined); const [expandedId, setExpandedId] = useState(); const permissions = getNotificationsPermissions(alertManagerSourceName); const canEditRoutes = contextSrv.hasPermission(permissions.update); @@ -155,23 +155,11 @@ export const AmRoutesTable: FC = ({ aria-label="Delete route" name="trash-alt" onClick={() => { - setShowDeleteModal(true); + setDeletingRouteId(item.data.id); }} type="button" /> - { - const newRoutes = deleteRoute(routes, item.data); - onChange(newRoutes); - }} - onDismiss={() => setShowDeleteModal(false)} - /> ); }, @@ -209,45 +197,62 @@ export const AmRoutesTable: FC = ({ } return ( - 'am-routes-row'} - onCollapse={collapseItem} - onExpand={expandItem} - isExpanded={(item) => expandedId === item.id} - renderExpandedContent={(item: RouteTableItemProps) => - isAddMode || editMode ? ( - { - if (isAddMode) { - onCancelAdd(); - } - setEditMode(false); - }} - onSave={(data) => { - const newRoutes = updatedRoute(routes, data); - - setEditMode(false); - onChange(newRoutes); - }} - receivers={receivers} - routes={item.data} - /> - ) : ( - { - const newRoutes = updatedRoute(routes, data); - onChange(newRoutes); - }} - receivers={receivers} - routes={item.data} - readOnly={readOnly} - alertManagerSourceName={alertManagerSourceName} - /> - ) - } - /> + <> + 'am-routes-row'} + onCollapse={collapseItem} + onExpand={expandItem} + isExpanded={(item) => expandedId === item.id} + renderExpandedContent={(item: RouteTableItemProps) => + isAddMode || editMode ? ( + { + if (isAddMode) { + onCancelAdd(); + } + setEditMode(false); + }} + onSave={(data) => { + const newRoutes = updatedRoute(routes, data); + + setEditMode(false); + onChange(newRoutes); + }} + receivers={receivers} + routes={item.data} + /> + ) : ( + { + const newRoutes = updatedRoute(routes, data); + onChange(newRoutes); + }} + receivers={receivers} + routes={item.data} + readOnly={readOnly} + alertManagerSourceName={alertManagerSourceName} + /> + ) + } + /> + { + if (deletingRouteId) { + const newRoutes = deleteRoute(routes, deletingRouteId); + onChange(newRoutes); + setDeletingRouteId(undefined); + } + }} + onDismiss={() => setDeletingRouteId(undefined)} + /> + ); };