From 7b8645e0fc6774b631acdc1ed01e217a16313e40 Mon Sep 17 00:00:00 2001
From: Yuliia Naumenko <jo.naumenko@gmail.com>
Date: Wed, 30 Jun 2021 12:17:07 +0300
Subject: [PATCH] [Alerting] Fixed search results are not updated when search
 term is removed on Rules and Connectors page (#103663)

---
 .../alerts_list/components/alerts_list.tsx    |  7 +++-
 .../apps/triggers_actions_ui/alerts_list.ts   | 37 +++++++++++++++++++
 2 files changed, 43 insertions(+), 1 deletion(-)

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 1c1633ff4a72f4..b48f6f45ce4b84 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
@@ -539,7 +539,12 @@ export const AlertsList: React.FunctionComponent = () => {
             fullWidth
             isClearable
             data-test-subj="alertSearchField"
-            onChange={(e) => setInputText(e.target.value)}
+            onChange={(e) => {
+              setInputText(e.target.value);
+              if (e.target.value === '') {
+                setSearchText(e.target.value);
+              }
+            }}
             onKeyUp={(e) => {
               if (e.keyCode === ENTER_KEY) {
                 setSearchText(inputText);
diff --git a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts_list.ts b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts_list.ts
index cbb1d2729e74c1..d4d556e06b70c9 100644
--- a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts_list.ts
+++ b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts_list.ts
@@ -109,6 +109,43 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
       ]);
     });
 
+    it('should update alert list on the search clear button click', async () => {
+      await createAlert({ name: 'b' });
+      await createAlert({ name: 'c' });
+      await refreshAlertsList();
+      await pageObjects.triggersActionsUI.searchAlerts('b');
+
+      const searchResults = await pageObjects.triggersActionsUI.getAlertsList();
+      expect(searchResults).to.eql([
+        {
+          name: 'b',
+          tagsText: 'foo, bar',
+          alertType: 'Test: Noop',
+          interval: '1m',
+        },
+      ]);
+      const searchClearButton = await find.byCssSelector('.euiFormControlLayoutClearButton');
+      await searchClearButton.click();
+      await find.byCssSelector(
+        '.euiBasicTable[data-test-subj="alertsList"]:not(.euiBasicTable-loading)'
+      );
+      const searchResultsAfterClear = await pageObjects.triggersActionsUI.getAlertsList();
+      expect(searchResultsAfterClear).to.eql([
+        {
+          name: 'b',
+          tagsText: 'foo, bar',
+          alertType: 'Test: Noop',
+          interval: '1m',
+        },
+        {
+          name: 'c',
+          tagsText: 'foo, bar',
+          alertType: 'Test: Noop',
+          interval: '1m',
+        },
+      ]);
+    });
+
     it('should search for tags', async () => {
       const createdAlert = await createAlert();
       await refreshAlertsList();