[8.8] [AO] Handle buildEsQuery error (such as leading wildcard) in status change (#159891) (#159938)

# Backport

This will backport the following commits from `main` to `8.8`:
- [AO] Handle buildEsQuery error (such as leading wildcard) in status
change (#159891) (229e8ca8)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Maryam
Saeidi","email":"maryam.saeidi@elastic.co"},"sourceCommit":{"committedDate":"2023-06-19T14:22:28Z","message":"[AO]
Handle buildEsQuery error (such as leading wildcard) in status change
(#159891)\n\nFixes #159079\r\n\r\n## Summary\r\n\r\nIn the case of
providing a wildcard in the search query, an error might\r\nbe generated
depending on whether the related setting is enabled or not.\r\nThis PR
tries to handle this error on the Alerts page for a better
user\r\nexperience.\r\n\r\n|Before|After|\r\n|---|---|\r\n\r\n|![image](cf74577e-10ab-4543-8135-f498dcc7cabf)|","sha":"229e8ca808b5aca07ad7cead3b64a5d63cd9c650"},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[]}]
BACKPORT-->

Co-authored-by: Maryam Saeidi <maryam.saeidi@elastic.co>

x-pack/plugins/observability/public/components/shared/alert_search_bar/alert_search_bar.test.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import { waitFor } from '@testing-library/react';
 import { timefilterServiceMock } from '@kbn/data-plugin/public/query/timefilter/timefilter_service.mock';
-import { ObservabilityAlertSearchBarProps } from './types';
+import { ObservabilityAlertSearchBarProps, Services } from './types';
 import { ObservabilityAlertSearchBar } from './alert_search_bar';
 import { observabilityAlertFeatureIds } from '../../../config/alert_feature_ids';
 import { render } from '../../../utils/test_helper';
@@ -17,7 +17,10 @@ const getAlertsSearchBarMock = jest.fn();
 const ALERT_SEARCH_BAR_DATA_TEST_SUBJ = 'alerts-search-bar';
 
 describe('ObservabilityAlertSearchBar', () => {
-  const renderComponent = (props: Partial<ObservabilityAlertSearchBarProps> = {}) => {
+  const renderComponent = (
+    props: Partial<ObservabilityAlertSearchBarProps> = {},
+    services: Partial<Services> = {}
+  ) => {
     const observabilityAlertSearchBarProps: ObservabilityAlertSearchBarProps = {
       appName: 'testAppName',
       kuery: '',
@@ -35,6 +38,7 @@ describe('ObservabilityAlertSearchBar', () => {
           <div data-test-subj={ALERT_SEARCH_BAR_DATA_TEST_SUBJ} />
         ),
         useToasts: jest.fn(),
+        ...services,
       },
       ...props,
     };
@@ -152,4 +156,26 @@ describe('ObservabilityAlertSearchBar', () => {
       },
     });
   });
+
+  it('should show error in a toast', async () => {
+    const error = new Error('something is wrong in esQueryChange');
+    const mockedOnEsQueryChange = jest.fn().mockImplementation(() => {
+      throw error;
+    });
+    const mockedAddError = jest.fn();
+    const mockedUseToast = jest.fn().mockImplementation(() => ({
+      addError: mockedAddError,
+    }));
+
+    renderComponent(
+      {
+        onEsQueryChange: mockedOnEsQueryChange,
+      },
+      {
+        useToasts: mockedUseToast,
+      }
+    );
+
+    expect(mockedAddError).toHaveBeenCalledWith(error, { title: 'Invalid query string' });
+  });
 });

x-pack/plugins/observability/public/components/shared/alert_search_bar/alert_search_bar.tsx

@@ -22,6 +22,9 @@ const getAlertStatusQuery = (status: string): Query[] => {
     ? [{ query: ALERT_STATUS_QUERY[status], language: 'kuery' }]
     : [];
 };
+const toastTitle = i18n.translate('xpack.observability.alerts.searchBar.invalidQueryTitle', {
+  defaultMessage: 'Invalid query string',
+});
 
 export function ObservabilityAlertSearchBar({
   appName,
@@ -41,18 +44,25 @@ export function ObservabilityAlertSearchBar({
 
   const onAlertStatusChange = useCallback(
     (alertStatus: AlertStatus) => {
-      onEsQueryChange(
-        buildEsQuery(
-          {
-            to: rangeTo,
-            from: rangeFrom,
-          },
-          kuery,
-          [...getAlertStatusQuery(alertStatus), ...defaultSearchQueries]
-        )
-      );
+      try {
+        onEsQueryChange(
+          buildEsQuery(
+            {
+              to: rangeTo,
+              from: rangeFrom,
+            },
+            kuery,
+            [...getAlertStatusQuery(alertStatus), ...defaultSearchQueries]
+          )
+        );
+      } catch (error) {
+        toasts.addError(error, {
+          title: toastTitle,
+        });
+        onKueryChange(DEFAULT_QUERY_STRING);
+      }
     },
-    [kuery, defaultSearchQueries, rangeFrom, rangeTo, onEsQueryChange]
+    [onEsQueryChange, rangeTo, rangeFrom, kuery, defaultSearchQueries, toasts, onKueryChange]
   );
 
   useEffect(() => {
@@ -83,9 +93,7 @@ export function ObservabilityAlertSearchBar({
         onEsQueryChange(esQuery);
       } catch (error) {
         toasts.addError(error, {
-          title: i18n.translate('xpack.observability.alerts.searchBar.invalidQueryTitle', {
-            defaultMessage: 'Invalid query string',
-          }),
+          title: toastTitle,
         });
         onKueryChange(DEFAULT_QUERY_STRING);
       }