use patch

Signed-off-by: Kawika Avilla <[email protected]>

src/plugins/data/public/index.ts

@@ -445,6 +445,7 @@ export {
   QueryEditorTopRow,
   // for BWC, keeping the old name
   IUiStart as DataPublicPluginStartUi,
+  useQueryStringManager,
 } from './ui';
 
 /**

src/plugins/data/public/ui/index.ts

@@ -47,5 +47,10 @@ export {
   QueryEditorExtensionDependencies,
   QueryEditorExtensionConfig,
 } from './query_editor';
-export { SearchBar, SearchBarProps, StatefulSearchBarProps } from './search_bar';
+export {
+  SearchBar,
+  SearchBarProps,
+  StatefulSearchBarProps,
+  useQueryStringManager,
+} from './search_bar';
 export { SuggestionsComponent } from './typeahead';

src/plugins/data/public/ui/search_bar/create_search_bar.tsx

@@ -154,8 +154,7 @@ export function createSearchBar({
       filterManager: data.query.filterManager,
     });
     const { query } = useQueryStringManager({
-      query: props.query,
-      queryStringManager: data.query.queryString,
+      queryString: data.query.queryString,
     });
 
     const { timeRange, refreshInterval } = useTimefilter({

src/plugins/data/public/ui/search_bar/index.tsx

@@ -45,3 +45,4 @@ const WrappedSearchBar = (props: SearchBarProps) => (
 export const SearchBar = injectI18n(withOpenSearchDashboards(WrappedSearchBar));
 export { StatefulSearchBarProps } from './create_search_bar';
 export type { SearchBarProps, SearchBarOwnProps } from './search_bar';
+export { useQueryStringManager } from './lib/use_query_string_manager';

src/plugins/data/public/ui/search_bar/lib/use_query_string_manager.ts

@@ -28,35 +28,49 @@
  * under the License.
  */
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { Subscription } from 'rxjs';
 import { Query } from '../../..';
 import { QueryStringContract } from '../../../query/query_string';
 
 interface UseQueryStringProps {
   query?: Query;
-  queryStringManager: QueryStringContract;
+  queryString: QueryStringContract;
 }
 
 export const useQueryStringManager = (props: UseQueryStringProps) => {
   // Filters should be either what's passed in the initial state or the current state of the filter manager
-  const [query, setQuery] = useState<Query>(props.query || props.queryStringManager.getQuery());
+  const [query, setQuery] = useState(() => props.query || props.queryString.getQuery());
+
   useEffect(() => {
     const subscriptions = new Subscription();
-
     subscriptions.add(
-      props.queryStringManager.getUpdates$().subscribe({
+      props.queryString.getUpdates$().subscribe({
         next: () => {
-          const newQuery = props.queryStringManager.getQuery();
-          setQuery(newQuery);
+          setQuery((prevQuery) => {
+            const newQuery = props.queryString.getQuery();
+            // Only update if the query has actually changed
+            return JSON.stringify(prevQuery) !== JSON.stringify(newQuery) ? newQuery : prevQuery;
+          });
         },
       })
     );
-
     return () => {
       subscriptions.unsubscribe();
     };
-  }, [props.queryStringManager]);
+  }, [props.queryString]); // Remove query from dependencies
+
+  // Use callback to memoize the function
+  const updateQuery = useCallback(
+    (newQuery) => {
+      props.queryString.setQuery(newQuery);
+      setQuery(newQuery);
+    },
+    [props.queryString]
+  );
 
-  return { query };
+  return {
+    query,
+    updateQuery,
+  };
 };

src/plugins/discover/public/application/view_components/utils/use_index_pattern.ts

@@ -5,11 +5,10 @@
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { i18n } from '@osd/i18n';
-import { IndexPattern } from '../../../../../data/public';
+import { IndexPattern, useQueryStringManager } from '../../../../../data/public';
 import { useSelector, updateIndexPattern } from '../../utils/state_management';
 import { DiscoverViewServices } from '../../../build_services';
 import { getIndexPatternId } from '../../helpers/get_index_pattern_id';
-import { useQueryStringManager } from './use_query_manager';
 import { QUERY_ENHANCEMENT_ENABLED_SETTING } from '../../../../common';
 
 /**
@@ -55,7 +54,11 @@ export const useIndexPattern = (services: DiscoverViewServices) => {
       } else if (!isQueryEnhancementEnabled) {
         if (!indexPatternIdFromState) {
           const indexPatternList = await data.indexPatterns.getCache();
-          const newId = getIndexPatternId('', indexPatternList, uiSettings.get('defaultIndex'));
+          const newId = getIndexPatternId(
+            '',
+            indexPatternList || [],
+            uiSettings.get('defaultIndex')
+          );
           if (isMounted) {
             store!.dispatch(updateIndexPattern(newId));
             handleIndexPattern();