[7.x] [Alerting] retains empty AlertsList when filter has removed all…

… items (#60501) (#60793) * [Alerting] retains empty AlertsList when filter has removed all items (#60501) Ensure that when the filtering on the AlertList removes all items we show the empty list rather than the Create Your First Alert CTA * fixed empty list assertions * Fixed whitespace introduced by merge conflict Co-authored-by: Elastic Machine <[email protected]>
elastic · Mar 23, 2020 · 0ef9835 · 0ef9835
1 parent cf85c74
commit 0ef9835
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 14 deletions.
diff --git a/...ns/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx b/...ns/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx
@@ -21,6 +21,7 @@ import {
 } from '@elastic/eui';
 import { useHistory } from 'react-router-dom';
 
+import { isEmpty } from 'lodash';
 import { AlertsContextProvider } from '../../../context/alerts_context';
 import { useAppDependencies } from '../../../app_context';
 import { ActionType, Alert, AlertTableItem, AlertTypeIndex, Pagination } from '../../../../types';
@@ -419,6 +420,14 @@ export const AlertsList: React.FunctionComponent = () => {
     </Fragment>
   );
 
+  const loadedItems = convertAlertsToTableItems(alertsState.data, alertTypesState.data);
+
+  const isFilterApplied = !(
+    isEmpty(searchText) &&
+    isEmpty(typesFilter) &&
+    isEmpty(actionTypesFilter)
+  );
+
   return (
     <section data-test-subj="alertsList">
       <DeleteModalConfirmation
@@ -456,12 +465,13 @@ export const AlertsList: React.FunctionComponent = () => {
         })}
       />
       <EuiSpacer size="m" />
-      {convertAlertsToTableItems(alertsState.data, alertTypesState.data).length !== 0 && table}
-      {convertAlertsToTableItems(alertsState.data, alertTypesState.data).length === 0 &&
-        !alertTypesState.isLoading &&
-        !alertsState.isLoading &&
-        emptyPrompt}
-      {(alertTypesState.isLoading || alertsState.isLoading) && <EuiLoadingSpinner size="xl" />}
+      {loadedItems.length || isFilterApplied ? (
+        table
+      ) : alertTypesState.isLoading || alertsState.isLoading ? (
+        <EuiLoadingSpinner size="xl" />
+      ) : (
+        emptyPrompt
+      )}
       <AlertsContextProvider
         value={{
           reloadAlerts: loadAlertsData,

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
@@ -240,6 +240,13 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
       ]);
     });
 
+    it('should display an empty list when search removes all alerts', async () => {
+      await pageObjects.common.navigateToApp('triggersActions');
+      await pageObjects.triggersActionsUI.searchAlerts(`An Alert That For Sure Doesn't Exist!`);
+
+      expect(await pageObjects.triggersActionsUI.isAlertsListDisplayed()).to.eql(true);
+    });
+
     it('should disable single alert', async () => {
       const createdAlert = await createAlert();
       await pageObjects.common.navigateToApp('triggersActions');
@@ -332,15 +339,14 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
       await testSubjects.click('collapsedItemActions');
 
       await testSubjects.click('deleteAlert');
+
       await testSubjects.existOrFail('deleteIdsConfirmation');
       await testSubjects.click('deleteIdsConfirmation > confirmModalConfirmButton');
       await testSubjects.missingOrFail('deleteIdsConfirmation');
       const toastTitle = await pageObjects.common.closeToast();
       expect(toastTitle).to.eql('Deleted 1 alert');
-      const emptyPrompt = await find.byCssSelector(
-        '[data-test-subj="createFirstAlertEmptyPrompt"]'
-      );
-      expect(await emptyPrompt.elementHasClass('euiEmptyPrompt')).to.be(true);
+
+      expect(await pageObjects.triggersActionsUI.isAnEmptyAlertsListDisplayed()).to.be(true);
     });
 
     it('should mute all selection', async () => {
@@ -455,10 +461,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
 
       await pageObjects.common.closeToast();
 
-      const emptyPrompt = await find.byCssSelector(
-        '[data-test-subj="createFirstAlertEmptyPrompt"]'
-      );
-      expect(await emptyPrompt.elementHasClass('euiEmptyPrompt')).to.be(true);
+      expect(await pageObjects.triggersActionsUI.isAnEmptyAlertsListDisplayed()).to.be(true);
     });
   });
 };
diff --git a/x-pack/test/functional_with_es_ssl/page_objects/triggers_actions_ui_page.ts b/x-pack/test/functional_with_es_ssl/page_objects/triggers_actions_ui_page.ts
@@ -102,6 +102,23 @@ export function TriggersActionsPageProvider({ getService }: FtrProviderContext)
           };
         });
     },
+    async isAlertsListDisplayed() {
+      const table = await find.byCssSelector('[data-test-subj="alertsList"] table');
+      return table.isDisplayed();
+    },
+    async isAnEmptyAlertsListDisplayed() {
+      await retry.try(async () => {
+        const table = await find.byCssSelector('[data-test-subj="alertsList"] table');
+        const $ = await table.parseDomContent();
+        const rows = $.findTestSubjects('alert-row').toArray();
+        expect(rows.length).to.eql(0);
+        const emptyRow = await find.byCssSelector(
+          '[data-test-subj="alertsList"] table .euiTableRow'
+        );
+        expect(await emptyRow.getVisibleText()).to.eql('No items found');
+      });
+      return true;
+    },
     async clickOnAlertInAlertsList(name: string) {
       await this.searchAlerts(name);
       await find.clickDisplayedByCssSelector(`[data-test-subj="alertsList"] [title="${name}"]`);