[Backport 2.x] Adjusted source of QueryStringManager functions for flyout.

src/plugins/data/public/ui/filter_bar/filter_options.tsx

@@ -59,7 +59,7 @@ import {
 import { FilterEditor } from './filter_editor';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { SavedQueryManagementComponent } from '../saved_query_management';
-import { QueryStringManager, SavedQuery, SavedQueryService } from '../../query';
+import { SavedQuery, SavedQueryService } from '../../query';
 import { SavedQueryMeta } from '../saved_query_form';
 import { getUseNewSavedQueriesUI } from '../../services';
 
@@ -79,7 +79,6 @@ interface Props {
   useSaveQueryMenu: boolean;
   isQueryEditorControl: boolean;
   saveQuery: (savedQueryMeta: SavedQueryMeta, saveAsNew?: boolean) => Promise<void>;
-  queryStringManager: QueryStringManager;
 }
 const maxFilterWidth = 600;
 
@@ -311,7 +310,6 @@ const FilterOptionsUI = (props: Props) => {
           key={'savedQueryManagement'}
           useNewSavedQueryUI={getUseNewSavedQueriesUI()}
           saveQuery={props.saveQuery}
-          queryStringManager={props.queryStringManager}
         />,
       ]}
       data-test-subj="save-query-panel"

src/plugins/data/public/ui/saved_query_flyouts/open_saved_query_flyout.test.tsx

@@ -4,13 +4,14 @@
  */
 
 import React from 'react';
-import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { OpenSavedQueryFlyout } from './open_saved_query_flyout';
 import { createSavedQueryService } from '../../../public/query/saved_query/saved_query_service';
 import { applicationServiceMock, uiSettingsServiceMock } from '../../../../../core/public/mocks';
 import { SavedQueryAttributes } from '../../../public/query/saved_query/types';
 import '@testing-library/jest-dom';
 import { queryStringManagerMock } from '../../../../data/public/query/query_string/query_string_manager.mock';
+import { getQueryService } from '../../services';
 
 const savedQueryAttributesWithTemplate: SavedQueryAttributes = {
   title: 'foo',
@@ -63,6 +64,10 @@ jest.mock('@osd/i18n', () => ({
   },
 }));
 
+jest.mock('../../services', () => ({
+  getQueryService: jest.fn(),
+}));
+
 const mockSavedQueryService = createSavedQueryService(
   // @ts-ignore
   mockSavedObjectsClient,
@@ -100,6 +105,9 @@ jest.spyOn(mockSavedQueryService, 'getAllSavedQueries').mockResolvedValue(savedQ
 describe('OpenSavedQueryFlyout', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    (getQueryService as jest.Mock).mockReturnValue({
+      queryString: queryStringManagerMock.createSetupContract(),
+    });
   });
 
   it('should render the flyout with correct tabs and content', async () => {
@@ -109,7 +117,6 @@ describe('OpenSavedQueryFlyout', () => {
         onClose={mockOnClose}
         onQueryOpen={mockOnQueryOpen}
         handleQueryDelete={mockHandleQueryDelete}
-        queryStringManager={queryStringManagerMock.createSetupContract()}
       />
     );
 
@@ -141,7 +148,6 @@ describe('OpenSavedQueryFlyout', () => {
         onClose={mockOnClose}
         onQueryOpen={mockOnQueryOpen}
         handleQueryDelete={mockHandleQueryDelete}
-        queryStringManager={queryStringManagerMock.createSetupContract()}
       />
     );
 
@@ -162,7 +168,6 @@ describe('OpenSavedQueryFlyout', () => {
         onClose={mockOnClose}
         onQueryOpen={mockOnQueryOpen}
         handleQueryDelete={mockHandleQueryDelete}
-        queryStringManager={queryStringManagerMock.createSetupContract()}
       />
     );
 
@@ -181,7 +186,6 @@ describe('OpenSavedQueryFlyout', () => {
         onClose={mockOnClose}
         onQueryOpen={mockOnQueryOpen}
         handleQueryDelete={mockHandleQueryDelete}
-        queryStringManager={queryStringManagerMock.createSetupContract()}
       />
     );
 
@@ -214,7 +218,6 @@ describe('OpenSavedQueryFlyout', () => {
         onClose={mockOnClose}
         onQueryOpen={mockOnQueryOpen}
         handleQueryDelete={mockHandleQueryDelete}
-        queryStringManager={queryStringManagerMock.createSetupContract()}
       />
     );
 

src/plugins/data/public/ui/saved_query_flyouts/open_saved_query_flyout.tsx

@@ -24,16 +24,16 @@
 } from '@elastic/eui';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { i18n } from '@osd/i18n';
-import { QueryStringManager, SavedQuery, SavedQueryService } from '../../query';
+import { SavedQuery, SavedQueryService } from '../../query';
 import { SavedQueryCard } from './saved_query_card';
 import { Query } from '../../../common';
+import { getQueryService } from '../../services';
 
 export interface OpenSavedQueryFlyoutProps {
   savedQueryService: SavedQueryService;
   onClose: () => void;
   onQueryOpen: (query: SavedQuery) => void;
   handleQueryDelete: (query: SavedQuery) => Promise<void>;
-  queryStringManager: QueryStringManager;
 }
 
 interface SavedQuerySearchableItem {
@@ -50,7 +50,6 @@
   onClose,
   onQueryOpen,
   handleQueryDelete,
-  queryStringManager,
 }: OpenSavedQueryFlyoutProps) {
   const [selectedTabId, setSelectedTabId] = useState<string>('mutable-saved-queries');
   const [savedQueries, setSavedQueries] = useState<SavedQuery[]>([]);
@@ -65,36 +64,43 @@
   const [searchQuery, setSearchQuery] = useState(EuiSearchBar.Query.MATCH_ALL);
   const [isLoading, setIsLoading] = useState(false);
   const currentTabIdRef = useRef(selectedTabId);
+  const queryStringManager = getQueryService().queryString;
 
   const fetchAllSavedQueriesForSelectedTab = useCallback(async () => {
     setIsLoading(true);
-    const query = queryStringManager.getQuery();
-    let templateQueries: any[] = [];
+    try {
+      const query = queryStringManager.getQuery();
+      let templateQueries: any[] = [];
 
-    // fetch sample query based on dataset type
-    if (query?.dataset?.type) {
-      templateQueries =
-        (await queryStringManager
-          .getDatasetService()
-          ?.getType(query.dataset.type)
-          ?.getSampleQueries?.()) || [];
+      // fetch sample query based on dataset type
+      if (query?.dataset?.type) {
+        templateQueries =
+          (await queryStringManager
+            .getDatasetService()
+            ?.getType(query.dataset.type)
+            ?.getSampleQueries?.()) || [];
 
-      // Check if any sample query has isTemplate set to true
-      const hasTemplates = templateQueries.some((q) => q?.attributes?.isTemplate);
-      setHasTemplateQueries(hasTemplates);
-    }
+        // Check if any sample query has isTemplate set to true
+        const hasTemplates = templateQueries.some((q) => q?.attributes?.isTemplate);
+        setHasTemplateQueries(hasTemplates);
+      }
 
-    // Set queries based on the current tab
-    if (currentTabIdRef.current === 'mutable-saved-queries') {
-      const allQueries = await savedQueryService.getAllSavedQueries();
-      const mutableSavedQueries = allQueries.filter((q) => !q.attributes.isTemplate);
+      // Set queries based on the current tab
       if (currentTabIdRef.current === 'mutable-saved-queries') {
-        setSavedQueries(mutableSavedQueries);
+        const allQueries = await savedQueryService.getAllSavedQueries();
+        const mutableSavedQueries = allQueries.filter((q) => !q.attributes.isTemplate);
+        if (currentTabIdRef.current === 'mutable-saved-queries') {
+          setSavedQueries(mutableSavedQueries);
+        }
+      } else if (currentTabIdRef.current === 'template-saved-queries') {
+        setSavedQueries(templateQueries);
       }
-    } else if (currentTabIdRef.current === 'template-saved-queries') {
-      setSavedQueries(templateQueries);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error('Error occurred while retrieving saved queries.', e);
+    } finally {
+      setIsLoading(false);
     }
-    setIsLoading(false);
   }, [savedQueryService, currentTabIdRef, setSavedQueries, queryStringManager]);
 
   const updatePageIndex = useCallback((index: number) => {

src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx

@@ -45,7 +45,7 @@ import {
 import { i18n } from '@osd/i18n';
 import React, { useCallback, useEffect, useState, Fragment, useRef } from 'react';
 import { sortBy } from 'lodash';
-import { QueryStringManager, SavedQuery, SavedQueryService } from '../..';
+import { SavedQuery, SavedQueryService } from '../..';
 import { SavedQueryListItem } from './saved_query_list_item';
 import {
   toMountPoint,
@@ -70,7 +70,6 @@ interface Props {
   onClearSavedQuery: () => void;
   closeMenuPopover: () => void;
   saveQuery: (savedQueryMeta: SavedQueryMeta, saveAsNew?: boolean) => Promise<void>;
-  queryStringManager: QueryStringManager;
 }
 
 export function SavedQueryManagementComponent({
@@ -84,7 +83,6 @@ export function SavedQueryManagementComponent({
   closeMenuPopover,
   useNewSavedQueryUI,
   saveQuery,
-  queryStringManager,
 }: Props) {
   const [savedQueries, setSavedQueries] = useState([] as SavedQuery[]);
   const [count, setTotalCount] = useState(0);
@@ -258,7 +256,6 @@ export function SavedQueryManagementComponent({
                   onClose={() => openSavedQueryFlyout?.close().then()}
                   onQueryOpen={onLoad}
                   handleQueryDelete={handleDelete}
-                  queryStringManager={queryStringManager}
                 />
               )
             );

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

@@ -202,7 +202,6 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
           isRefreshPaused={refreshInterval.pause}
           filters={filters}
           query={query}
-          queryStringManager={data.query.queryString}
           onFiltersUpdated={defaultFiltersUpdated(data.query)}
           onRefreshChange={defaultOnRefreshChange(data.query)}
           savedQuery={savedQuery}

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

@@ -38,13 +38,7 @@ import {
   withOpenSearchDashboards,
 } from '../../../../opensearch_dashboards_react/public';
 import { Filter, IIndexPattern, Query, TimeRange, UI_SETTINGS } from '../../../common';
-import {
-  SavedQuery,
-  SavedQueryAttributes,
-  TimeHistoryContract,
-  QueryStatus,
-  QueryStringManager,
-} from '../../query';
+import { SavedQuery, SavedQueryAttributes, TimeHistoryContract, QueryStatus } from '../../query';
 import { IDataPluginServices } from '../../types';
 import { FilterBar } from '../filter_bar/filter_bar';
 import { QueryEditorTopRow } from '../query_editor';
@@ -101,7 +95,6 @@ export interface SearchBarOwnProps {
   onRefresh?: (payload: { dateRange: TimeRange }) => void;
   indicateNoData?: boolean;
   queryStatus?: QueryStatus;
-  queryStringManager: QueryStringManager;
 }
 
 export type SearchBarProps = SearchBarOwnProps & SearchBarInjectedDeps;
@@ -474,7 +467,6 @@ class SearchBarUI extends Component<SearchBarProps, State> {
             useSaveQueryMenu={useSaveQueryMenu}
             isQueryEditorControl={isQueryEditorControl}
             saveQuery={this.onSave}
-            queryStringManager={this.props.queryStringManager}
           />
         )
       );