[Alerting] Reload the Alerts List when alerts are deleted (#73715)

Reloads the entire Alerts list when alerts are deleted through the UI.

Author: gmmorris

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 () => {

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';
 
@@ -361,11 +362,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');
 
@@ -377,9 +389,11 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
       await pageObjects.common.closeToast();
 
       await pageObjects.common.navigateToApp('triggersActions');
-      await pageObjects.triggersActionsUI.searchAlerts(createdAlert.name);
+      await pageObjects.triggersActionsUI.searchAlerts(namePrefix);
       const searchResultsAfterDelete = await pageObjects.triggersActionsUI.getAlertsList();
-      expect(searchResultsAfterDelete.length).to.eql(0);
+      expect(searchResultsAfterDelete).to.have.length(2);
+      expect(searchResultsAfterDelete[0].name).to.eql(createdAlertsSecondPage[0].name);
+      expect(searchResultsAfterDelete[1].name).to.eql(createdAlertsSecondPage[1].name);
     });
   });
 };