From 5740259f54e6dbe5fa2199cbf3b141f5c7cd4da8 Mon Sep 17 00:00:00 2001 From: AWSHurneyt Date: Mon, 18 Nov 2024 14:01:19 -0800 Subject: [PATCH] Adjusted source of QueryStringManager functions for flyout. (#8864) * Change origin of query string management functions. Signed-off-by: AWSHurneyt * Added try/catch block. Signed-off-by: AWSHurneyt * Changed source of query string management functions. Signed-off-by: AWSHurneyt * Fixed typo. Signed-off-by: AWSHurneyt * Fixed import. Signed-off-by: AWSHurneyt * Fix lint errors. Signed-off-by: AWSHurneyt * Fixed lint error. Signed-off-by: AWSHurneyt * Fixed test mocks. Signed-off-by: AWSHurneyt --------- Signed-off-by: AWSHurneyt --- .../public/ui/filter_bar/filter_options.tsx | 4 +- .../open_saved_query_flyout.test.tsx | 15 +++--- .../open_saved_query_flyout.tsx | 54 ++++++++++--------- .../saved_query_management_component.tsx | 5 +- .../ui/search_bar/create_search_bar.tsx | 1 - .../data/public/ui/search_bar/search_bar.tsx | 10 +--- 6 files changed, 42 insertions(+), 47 deletions(-) diff --git a/src/plugins/data/public/ui/filter_bar/filter_options.tsx b/src/plugins/data/public/ui/filter_bar/filter_options.tsx index 4af53fa28df1..3cda39731fa7 100644 --- a/src/plugins/data/public/ui/filter_bar/filter_options.tsx +++ b/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; - 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" diff --git a/src/plugins/data/public/ui/saved_query_flyouts/open_saved_query_flyout.test.tsx b/src/plugins/data/public/ui/saved_query_flyouts/open_saved_query_flyout.test.tsx index 8daaafe0fdcb..f004f6e7e5af 100644 --- a/src/plugins/data/public/ui/saved_query_flyouts/open_saved_query_flyout.test.tsx +++ b/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()} /> ); diff --git a/src/plugins/data/public/ui/saved_query_flyouts/open_saved_query_flyout.tsx b/src/plugins/data/public/ui/saved_query_flyouts/open_saved_query_flyout.tsx index 41aa344bbaef..212e0228e626 100644 --- a/src/plugins/data/public/ui/saved_query_flyouts/open_saved_query_flyout.tsx +++ b/src/plugins/data/public/ui/saved_query_flyouts/open_saved_query_flyout.tsx @@ -24,16 +24,16 @@ import { } 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; - queryStringManager: QueryStringManager; } interface SavedQuerySearchableItem { @@ -50,7 +50,6 @@ export function OpenSavedQueryFlyout({ onClose, onQueryOpen, handleQueryDelete, - queryStringManager, }: OpenSavedQueryFlyoutProps) { const [selectedTabId, setSelectedTabId] = useState('mutable-saved-queries'); const [savedQueries, setSavedQueries] = useState([]); @@ -65,36 +64,43 @@ export function OpenSavedQueryFlyout({ 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) => { diff --git a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx index 44c5ef384966..01f9b97e978f 100644 --- a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx +++ b/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; - 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} /> ) ); diff --git a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx index d3f89d0f559d..f8b9694caabc 100644 --- a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx +++ b/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} diff --git a/src/plugins/data/public/ui/search_bar/search_bar.tsx b/src/plugins/data/public/ui/search_bar/search_bar.tsx index 3cd6cdcca25e..1f1b20b8c952 100644 --- a/src/plugins/data/public/ui/search_bar/search_bar.tsx +++ b/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 { useSaveQueryMenu={useSaveQueryMenu} isQueryEditorControl={isQueryEditorControl} saveQuery={this.onSave} - queryStringManager={this.props.queryStringManager} /> ) );