[8.14] [Alert search bar] Fix alert search bar refresh functionality (e…

…lastic#180899) (elastic#181127) # Backport This will backport the following commits from `main` to `8.14`: - [[Alert search bar] Fix alert search bar refresh functionality (elastic#180899)](elastic#180899)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Maryam Saeidi <[email protected]>
kibanamachine · Apr 18, 2024 · dda3856 · dda3856
1 parent d0d0109
commit dda3856
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 31 deletions.
diff --git a/src/plugins/unified_search/public/search_bar/search_bar.test.tsx b/src/plugins/unified_search/public/search_bar/search_bar.test.tsx
@@ -143,6 +143,7 @@ describe('SearchBar', () => {
   const QUERY_BAR = '.kbnQueryBar';
   const QUERY_INPUT = '[data-test-subj="unifiedQueryInput"]';
   const QUERY_MENU_BUTTON = '[data-test-subj="showQueryBarMenu"]';
+  const QUERY_SUBMIT_BUTTON = 'button[data-test-subj="querySubmitButton"]';
   const EDITOR = '[data-test-subj="unifiedTextLangEditor"]';
 
   beforeEach(() => {
@@ -308,4 +309,60 @@ describe('SearchBar', () => {
       expect(button).toBeDisabled();
     });
   });
+
+  it('Should call onQuerySubmit with isUpdate prop as false when dateRange is provided', () => {
+    const mockedOnQuerySubmit = jest.fn();
+    const component = mount(
+      wrapSearchBarInContext({
+        indexPatterns: [mockIndexPattern],
+        screenTitle: 'test screen',
+        onQuerySubmit: mockedOnQuerySubmit,
+        query: kqlQuery,
+        showQueryMenu: false,
+        dateRangeTo: 'now',
+        dateRangeFrom: 'now-15m',
+      })
+    );
+
+    const submitButton = component.find(QUERY_SUBMIT_BUTTON);
+    submitButton.simulate('click');
+
+    expect(mockedOnQuerySubmit).toBeCalledTimes(1);
+    expect(mockedOnQuerySubmit).toHaveBeenNthCalledWith(
+      1,
+      {
+        dateRange: { from: 'now-15m', to: 'now' },
+        query: { language: 'kuery', query: 'response:200' },
+      },
+      false
+    );
+  });
+
+  it('Should call onQuerySubmit with isUpdate prop as true when dateRange is not provided', () => {
+    const mockedOnQuerySubmit = jest.fn();
+    const component = mount(
+      wrapSearchBarInContext({
+        indexPatterns: [mockIndexPattern],
+        screenTitle: 'test screen',
+        onQuerySubmit: mockedOnQuerySubmit,
+        query: kqlQuery,
+        showQueryMenu: false,
+      })
+    );
+
+    const submitButton = component.find(QUERY_SUBMIT_BUTTON);
+    submitButton.simulate('click');
+
+    expect(mockedOnQuerySubmit).toBeCalledTimes(1);
+    expect(mockedOnQuerySubmit).toHaveBeenNthCalledWith(
+      1,
+      {
+        dateRange: { from: 'now-15m', to: 'now' },
+        query: { language: 'kuery', query: 'response:200' },
+      },
+      // isUpdate is true because the default value in state ({ from: 'now-15m', to: 'now' })
+      // is not equal with props for dateRange which is undefined
+      true
+    );
+  });
 });
diff --git a/src/plugins/unified_search/public/search_bar/search_bar.tsx b/src/plugins/unified_search/public/search_bar/search_bar.tsx
@@ -413,13 +413,16 @@ class SearchBarUI<QT extends (Query | AggregateQuery) | Query = Query> extends C
       },
       () => {
         if (this.props.onQuerySubmit) {
-          this.props.onQuerySubmit({
-            query: query as QT,
-            dateRange: {
-              from: this.state.dateRangeFrom,
-              to: this.state.dateRangeTo,
+          this.props.onQuerySubmit(
+            {
+              query: query as QT,
+              dateRange: {
+                from: this.state.dateRangeFrom,
+                to: this.state.dateRangeTo,
+              },
             },
-          });
+            this.isDirty()
+          );
         }
       }
     );
@@ -437,13 +440,16 @@ class SearchBarUI<QT extends (Query | AggregateQuery) | Query = Query> extends C
       },
       () => {
         if (this.props.onQuerySubmit) {
-          this.props.onQuerySubmit({
-            query: this.state.query,
-            dateRange: {
-              from: this.state.dateRangeFrom,
-              to: this.state.dateRangeTo,
+          this.props.onQuerySubmit(
+            {
+              query: this.state.query,
+              dateRange: {
+                from: this.state.dateRangeFrom,
+                to: this.state.dateRangeTo,
+              },
             },
-          });
+            this.isDirty()
+          );
         }
         this.services.usageCollection?.reportUiCounter(
           this.services.appName,

diff --git a/...ervability_solution/observability/public/components/alert_search_bar/alert_search_bar.tsx b/...ervability_solution/observability/public/components/alert_search_bar/alert_search_bar.tsx
@@ -90,7 +90,7 @@ export function ObservabilityAlertSearchBar({
     onAlertStatusChange(status);
   }, [onAlertStatusChange, status]);
 
-  useEffect(() => {
+  const submitQuery = useCallback(() => {
     try {
       onEsQueryChange(
         buildEsQuery({
@@ -123,21 +123,30 @@ export function ObservabilityAlertSearchBar({
     toasts,
   ]);
 
-  const onSearchBarParamsChange = useCallback<
-    (query: {
+  useEffect(() => {
+    submitQuery();
+  }, [submitQuery]);
+
+  const onQuerySubmit = (
+    {
+      dateRange,
+      query,
+    }: {
       dateRange: { from: string; to: string; mode?: 'absolute' | 'relative' };
       query?: string;
-    }) => void
-  >(
-    ({ dateRange, query }) => {
+    },
+    isUpdate?: boolean
+  ) => {
+    if (isUpdate) {
       clearSavedQuery();
       onKueryChange(query ?? '');
       timeFilterService.setTime(dateRange);
       onRangeFromChange(dateRange.from);
       onRangeToChange(dateRange.to);
-    },
-    [onKueryChange, timeFilterService, clearSavedQuery, onRangeFromChange, onRangeToChange]
-  );
+    } else {
+      submitQuery();
+    }
+  };
 
   const onFilterUpdated = useCallback<(filters: Filter[]) => void>(
     (updatedFilters) => {
@@ -162,7 +171,7 @@ export function ObservabilityAlertSearchBar({
           onSavedQueryUpdated={setSavedQuery}
           onClearSavedQuery={clearSavedQuery}
           query={kuery}
-          onQuerySubmit={onSearchBarParamsChange}
+          onQuerySubmit={onQuerySubmit}
         />
       </EuiFlexItem>
 

diff --git a/...s/triggers_actions_ui/public/application/sections/alerts_search_bar/alerts_search_bar.tsx b/...s/triggers_actions_ui/public/application/sections/alerts_search_bar/alerts_search_bar.tsx
@@ -70,11 +70,17 @@ export function AlertsSearchBar({
       ruleType.ruleTypesState.data.get(ruleTypeId)?.producer === AlertConsumers.SIEM);
 
   const onSearchQuerySubmit = useCallback(
-    ({ dateRange, query: nextQuery }: { dateRange: TimeRange; query?: Query }) => {
-      onQuerySubmit({
-        dateRange,
-        query: typeof nextQuery?.query === 'string' ? nextQuery.query : undefined,
-      });
+    (
+      { dateRange, query: nextQuery }: { dateRange: TimeRange; query?: Query },
+      isUpdate?: boolean
+    ) => {
+      onQuerySubmit(
+        {
+          dateRange,
+          query: typeof nextQuery?.query === 'string' ? nextQuery.query : undefined,
+        },
+        isUpdate
+      );
       setQueryLanguage((nextQuery?.language ?? 'kuery') as QueryLanguageType);
     },
     [onQuerySubmit, setQueryLanguage]

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/types.ts b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/types.ts
@@ -32,10 +32,13 @@ export interface AlertsSearchBarProps
     dateRange: { from: string; to: string; mode?: 'absolute' | 'relative' };
     query?: string;
   }) => void;
-  onQuerySubmit: (query: {
-    dateRange: { from: string; to: string; mode?: 'absolute' | 'relative' };
-    query?: string;
-  }) => void;
+  onQuerySubmit: (
+    query: {
+      dateRange: { from: string; to: string; mode?: 'absolute' | 'relative' };
+      query?: string;
+    },
+    isUpdate?: boolean
+  ) => void;
   onFiltersUpdated?: (filters: Filter[]) => void;
   filtersForSuggestions?: Filter[];
 }