From c804f596a82f96a1c526c6512c4303d6061a3c0e Mon Sep 17 00:00:00 2001
From: Gidi Meir Morris <github@gidi.io>
Date: Thu, 6 Aug 2020 00:08:40 +0100
Subject: [PATCH] [Alerting] Reload the Alerts List when alerts are deleted
 (#73715) (#74426)

Reloads the entire Alerts list when alerts are deleted through the UI.
---
 .../alerts_list/components/alerts_list.tsx    | 19 ++++++--------
 .../apps/triggers_actions_ui/alerts.ts        | 25 ++++++++++++++++---
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx
index 2b2897a2181b1..3d55c51e45281 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx
@@ -152,6 +152,10 @@ export const AlertsList: React.FunctionComponent = () => {
           data: alertsResponse.data,
           totalItemCount: alertsResponse.total,
         });
+
+        if (!alertsResponse.data?.length && page.index > 0) {
+          setPage({ ...page, index: 0 });
+        }
       } catch (e) {
         toastNotifications.addDanger({
           title: i18n.translate(
@@ -399,18 +403,9 @@ export const AlertsList: React.FunctionComponent = () => {
   return (
     <section data-test-subj="alertsList">
       <DeleteModalConfirmation
-        onDeleted={(deleted: string[]) => {
-          if (selectedIds.length === 0 || selectedIds.length === deleted.length) {
-            const updatedAlerts = alertsState.data.filter(
-              (alert) => alert.id && !alertsToDelete.includes(alert.id)
-            );
-            setAlertsState({
-              isLoading: false,
-              data: updatedAlerts,
-              totalItemCount: alertsState.totalItemCount - deleted.length,
-            });
-            setSelectedIds([]);
-          }
+        onDeleted={async (deleted: string[]) => {
+          loadAlertsData();
+          setSelectedIds([]);
           setAlertsToDelete([]);
         }}
         onErrors={async () => {
diff --git a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts.ts b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts.ts
index 1eeb4cc131363..656835a71012b 100644
--- a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts.ts
+++ b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts.ts
@@ -5,6 +5,7 @@
  */
 
 import uuid from 'uuid';
+import { times } from 'lodash';
 import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
@@ -358,11 +359,22 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
     });
 
     it('should delete all selection', async () => {
-      const createdAlert = await createAlert();
+      const namePrefix = generateUniqueKey();
+      let count = 0;
+      const createdAlertsFirstPage = await Promise.all(
+        times(10, () => createAlert({ name: `${namePrefix}-0${count++}` }))
+      );
+
+      const createdAlertsSecondPage = await Promise.all(
+        times(2, () => createAlert({ name: `${namePrefix}-1${count++}` }))
+      );
+
       await pageObjects.common.navigateToApp('triggersActions');
-      await pageObjects.triggersActionsUI.searchAlerts(createdAlert.name);
+      await pageObjects.triggersActionsUI.searchAlerts(namePrefix);
 
-      await testSubjects.click(`checkboxSelectRow-${createdAlert.id}`);
+      for (const createdAlert of createdAlertsFirstPage) {
+        await testSubjects.click(`checkboxSelectRow-${createdAlert.id}`);
+      }
 
       await testSubjects.click('bulkAction');
 
@@ -373,7 +385,12 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
 
       await pageObjects.common.closeToast();
 
-      expect(await pageObjects.triggersActionsUI.isAnEmptyAlertsListDisplayed()).to.be(true);
+      await pageObjects.common.navigateToApp('triggersActions');
+      await pageObjects.triggersActionsUI.searchAlerts(namePrefix);
+      const searchResultsAfterDelete = await pageObjects.triggersActionsUI.getAlertsList();
+      expect(searchResultsAfterDelete).to.have.length(2);
+      expect(searchResultsAfterDelete[0].name).to.eql(createdAlertsSecondPage[0].name);
+      expect(searchResultsAfterDelete[1].name).to.eql(createdAlertsSecondPage[1].name);
     });
   });
 };