Alerts: Dedupe alerts so that we do not fill the screen with the same alert messsage (#30935)

public/app/core/reducers/appNotification.test.ts

@@ -116,4 +116,46 @@ describe('notify', () => {
 
     expect(result).toEqual(expectedResult);
   });
+
+  it('Dedupe identical alerts', () => {
+    const initialState = {
+      appNotifications: [
+        {
+          id: 'id1',
+          severity: AppNotificationSeverity.Success,
+          icon: 'success',
+          title: 'test',
+          text: 'test alert',
+          timeout: AppNotificationTimeout.Success,
+        },
+      ],
+    };
+
+    const result = appNotificationsReducer(
+      initialState,
+      notifyApp({
+        id: 'id2',
+        severity: AppNotificationSeverity.Success,
+        icon: 'success',
+        title: 'test',
+        text: 'test alert',
+        timeout: AppNotificationTimeout.Success,
+      })
+    );
+
+    const expectedResult = {
+      appNotifications: [
+        {
+          id: 'id1',
+          severity: AppNotificationSeverity.Success,
+          icon: 'success',
+          title: 'test',
+          text: 'test alert',
+          timeout: AppNotificationTimeout.Success,
+        },
+      ],
+    };
+
+    expect(result).toEqual(expectedResult);
+  });
 });

public/app/core/reducers/appNotification.ts

@@ -15,10 +15,23 @@ const appNotificationsSlice = createSlice({
   name: 'appNotifications',
   initialState,
   reducers: {
-    notifyApp: (state, action: PayloadAction<AppNotification>): AppNotificationsState => ({
-      ...state,
-      appNotifications: state.appNotifications.concat([action.payload]),
-    }),
+    notifyApp: (state, action: PayloadAction<AppNotification>) => {
+      const newAlert = action.payload;
+
+      for (const existingAlert of state.appNotifications) {
+        if (
+          newAlert.icon === existingAlert.icon &&
+          newAlert.severity === existingAlert.severity &&
+          newAlert.text === existingAlert.text &&
+          newAlert.title === existingAlert.title &&
+          newAlert.component === existingAlert.component
+        ) {
+          return;
+        }
+      }
+
+      state.appNotifications.push(newAlert);
+    },
     clearAppNotification: (state, action: PayloadAction<string>): AppNotificationsState => ({
       ...state,
       appNotifications: state.appNotifications.filter((appNotification) => appNotification.id !== action.payload),