Alerting: Fix notification route removal (#48774)

* Fix notification route removal

* fix tests

Co-authored-by: gillesdemey <gilles.de.mey@gmail.com>
This commit is contained in:
Konrad Lalik 2022-05-06 09:34:10 +02:00 committed by GitHub
parent 454e804657
commit ee8e125134
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 62 additions and 57 deletions

View File

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

View File

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