Alerting: Fix notification policy "Override grouping" form save (#50031)

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

@@ -36,7 +36,7 @@ export const AmRootRouteForm: FC<AmRootRouteFormProps> = ({
   const [groupByOptions, setGroupByOptions] = useState(stringsToSelectableValues(routes.groupBy));
 
   return (
-    <Form defaultValues={{ ...routes, overrideTimings: true }} onSubmit={onSave}>
+    <Form defaultValues={{ ...routes, overrideTimings: true, overrideGrouping: true }} onSubmit={onSave}>
       {({ control, errors, setValue }) => (
         <>
           <Field label="Default contact point" invalid={!!errors.receiver} error={errors.receiver?.message}>

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

@@ -44,7 +44,6 @@ export interface AmRoutesExpandedFormProps {
 export const AmRoutesExpandedForm: FC<AmRoutesExpandedFormProps> = ({ onCancel, onSave, receivers, routes }) => {
   const styles = useStyles2(getStyles);
   const formStyles = useStyles2(getFormStyles);
-  const [overrideGrouping, setOverrideGrouping] = useState(routes.groupBy.length > 0);
   const [groupByOptions, setGroupByOptions] = useState(stringsToSelectableValues(routes.groupBy));
   const muteTimingOptions = useMuteTimingOptions();
 
@@ -159,13 +158,9 @@ export const AmRoutesExpandedForm: FC<AmRoutesExpandedFormProps> = ({ onCancel,
             <Switch id="continue-toggle" {...register('continue')} />
           </Field>
           <Field label="Override grouping">
-            <Switch
-              id="override-grouping-toggle"
-              value={overrideGrouping}
-              onChange={() => setOverrideGrouping((overrideGrouping) => !overrideGrouping)}
-            />
+            <Switch id="override-grouping-toggle" {...register('overrideGrouping')} />
           </Field>
-          {overrideGrouping && (
+          {watch().overrideGrouping && (
             <Field
               label="Group by"
               description="Group alerts when you receive a notification based on labels. If empty it will be inherited from the parent policy."

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

@@ -10,6 +10,7 @@ const defaultAmRoute: FormAmRoute = {
   object_matchers: [],
   continue: false,
   receiver: '',
+  overrideGrouping: false,
   groupBy: [],
   overrideTimings: false,
   groupWaitValue: '',

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

@@ -106,7 +106,7 @@ export const AmRoutesTable: FC<AmRoutesTableProps> = ({
     {
       id: 'groupBy',
       label: 'Group by',
-      renderCell: (item) => item.data.groupBy.join(', ') || '-',
+      renderCell: (item) => (item.data.overrideGrouping && item.data.groupBy.join(', ')) || '-',
       size: 5,
     },
     {

public/app/features/alerting/unified/types/amroutes.ts

@@ -5,6 +5,7 @@ export interface FormAmRoute {
   object_matchers: MatcherFieldValue[];
   continue: boolean;
   receiver: string;
+  overrideGrouping: boolean;
   groupBy: string[];
   overrideTimings: boolean;
   groupWaitValue: string;

public/app/features/alerting/unified/utils/amroutes.test.ts

@@ -0,0 +1,91 @@
+import { Route } from 'app/plugins/datasource/alertmanager/types';
+
+import { FormAmRoute } from '../types/amroutes';
+
+import { amRouteToFormAmRoute, emptyRoute, formAmRouteToAmRoute } from './amroutes';
+
+const emptyAmRoute: Route = {
+  receiver: '',
+  group_by: [],
+  continue: false,
+  object_matchers: [],
+  matchers: [],
+  match: {},
+  match_re: {},
+  group_wait: '',
+  group_interval: '',
+  repeat_interval: '',
+  routes: [],
+  mute_time_intervals: [],
+};
+
+const buildAmRoute = (override: Partial<Route> = {}): Route => {
+  return { ...emptyAmRoute, ...override };
+};
+
+const buildFormAmRoute = (override: Partial<FormAmRoute> = {}): FormAmRoute => {
+  return { ...emptyRoute, ...override };
+};
+
+describe('formAmRouteToAmRoute', () => {
+  describe('when called with overrideGrouping=false', () => {
+    it('Should not set groupBy', () => {
+      // Arrange
+      const route: FormAmRoute = buildFormAmRoute({ id: '1', overrideGrouping: false, groupBy: ['SHOULD NOT BE SET'] });
+
+      // Act
+      const amRoute = formAmRouteToAmRoute('test', route, {});
+
+      // Assert
+      expect(amRoute.group_by).toStrictEqual([]);
+    });
+  });
+
+  describe('when called with overrideGrouping=true', () => {
+    it('Should set groupBy', () => {
+      // Arrange
+      const route: FormAmRoute = buildFormAmRoute({ id: '1', overrideGrouping: true, groupBy: ['SHOULD BE SET'] });
+
+      // Act
+      const amRoute = formAmRouteToAmRoute('test', route, {});
+
+      // Assert
+      expect(amRoute.group_by).toStrictEqual(['SHOULD BE SET']);
+    });
+  });
+});
+
+describe('amRouteToFormAmRoute', () => {
+  describe('when called with empty group_by', () => {
+    it.each`
+      group_by
+      ${[]}
+      ${null}
+      ${undefined}
+    `("when group_by is '$group_by', should set overrideGrouping false", ({ group_by }) => {
+      // Arrange
+      const amRoute: Route = buildAmRoute({ group_by: group_by });
+
+      // Act
+      const [formRoute] = amRouteToFormAmRoute(amRoute);
+
+      // Assert
+      expect(formRoute.groupBy).toStrictEqual([]);
+      expect(formRoute.overrideGrouping).toBe(false);
+    });
+  });
+
+  describe('when called with non-empty group_by', () => {
+    it('Should set overrideGrouping true and groupBy', () => {
+      // Arrange
+      const amRoute: Route = buildAmRoute({ group_by: ['SHOULD BE SET'] });
+
+      // Act
+      const [formRoute] = amRouteToFormAmRoute(amRoute);
+
+      // Assert
+      expect(formRoute.groupBy).toStrictEqual(['SHOULD BE SET']);
+      expect(formRoute.overrideGrouping).toBe(true);
+    });
+  });
+});

public/app/features/alerting/unified/utils/amroutes.ts

@@ -61,6 +61,7 @@ export const emptyArrayFieldMatcher: MatcherFieldValue = {
 
 export const emptyRoute: FormAmRoute = {
   id: '',
+  overrideGrouping: false,
   groupBy: [],
   object_matchers: [],
   routes: [],
@@ -114,6 +115,7 @@ export const amRouteToFormAmRoute = (route: Route | undefined): [FormAmRoute, Re
       ],
       continue: route.continue ?? false,
       receiver: route.receiver ?? '',
+      overrideGrouping: Array.isArray(route.group_by) && route.group_by.length !== 0,
       groupBy: route.group_by ?? [],
       overrideTimings: [groupWaitValue, groupIntervalValue, repeatIntervalValue].some(Boolean),
       groupWaitValue,
@@ -137,6 +139,8 @@ export const formAmRouteToAmRoute = (
   const existing: Route | undefined = id2ExistingRoute[formAmRoute.id];
 
   const {
+    overrideGrouping,
+    groupBy,
     overrideTimings,
     groupWaitValue,
     groupWaitValueType,
@@ -146,6 +150,8 @@ export const formAmRouteToAmRoute = (
     repeatIntervalValueType,
   } = formAmRoute;
 
+  const group_by = overrideGrouping && groupBy ? groupBy : [];
+
   const overrideGroupWait = overrideTimings && groupWaitValue;
   const group_wait = overrideGroupWait ? `${groupWaitValue}${groupWaitValueType}` : undefined;
 
@@ -158,7 +164,7 @@ export const formAmRouteToAmRoute = (
   const amRoute: Route = {
     ...(existing ?? {}),
     continue: formAmRoute.continue,
-    group_by: formAmRoute.groupBy,
+    group_by: group_by,
     object_matchers: formAmRoute.object_matchers.length
       ? formAmRoute.object_matchers.map((matcher) => [matcher.name, matcher.operator, matcher.value])
       : undefined,