From c94c4e653a5ab4b64ebb152b5d81730c77f70ecd Mon Sep 17 00:00:00 2001 From: Dmitry Tomashevich <39378793+Dmitriynj@users.noreply.github.com> Date: Wed, 8 Sep 2021 17:33:29 +0300 Subject: [PATCH] [Discover] Fix opening the same saved search (#111127) * [Discover] fix opening the same saved search * [Discover] fix functional test * [Discover] apply suggestion * [Discover] apply suggestion Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../components/chart/discover_chart.test.tsx | 2 +- .../main/components/chart/discover_chart.tsx | 6 ++-- .../layout/discover_layout.test.tsx | 2 +- .../components/layout/discover_layout.tsx | 5 ++-- .../apps/main/components/layout/types.ts | 2 +- .../top_nav/discover_topnav.test.tsx | 1 + .../components/top_nav/discover_topnav.tsx | 30 +++++++++++++++++-- .../top_nav/get_top_nav_links.test.ts | 1 + .../components/top_nav/get_top_nav_links.ts | 4 ++- .../top_nav/open_search_panel.test.tsx | 8 +++-- .../components/top_nav/open_search_panel.tsx | 4 +-- .../top_nav/show_open_search_panel.tsx | 6 ++-- .../apps/main/discover_main_app.tsx | 4 +-- .../apps/main/services/use_discover_state.ts | 5 ++-- 14 files changed, 58 insertions(+), 22 deletions(-) diff --git a/src/plugins/discover/public/application/apps/main/components/chart/discover_chart.test.tsx b/src/plugins/discover/public/application/apps/main/components/chart/discover_chart.test.tsx index dc3c9ebbc75c..732dee6106b3 100644 --- a/src/plugins/discover/public/application/apps/main/components/chart/discover_chart.test.tsx +++ b/src/plugins/discover/public/application/apps/main/components/chart/discover_chart.test.tsx @@ -96,7 +96,7 @@ function getProps(timefield?: string) { }) as DataCharts$; return { - resetQuery: jest.fn(), + resetSavedSearch: jest.fn(), savedSearch: savedSearchMock, savedSearchDataChart$: charts$, savedSearchDataTotalHits$: totalHits$, diff --git a/src/plugins/discover/public/application/apps/main/components/chart/discover_chart.tsx b/src/plugins/discover/public/application/apps/main/components/chart/discover_chart.tsx index 7d761aa93b80..2a4e4a06b612 100644 --- a/src/plugins/discover/public/application/apps/main/components/chart/discover_chart.tsx +++ b/src/plugins/discover/public/application/apps/main/components/chart/discover_chart.tsx @@ -21,7 +21,7 @@ import { DiscoverServices } from '../../../../../build_services'; const TimechartHeaderMemoized = memo(TimechartHeader); const DiscoverHistogramMemoized = memo(DiscoverHistogram); export function DiscoverChart({ - resetQuery, + resetSavedSearch, savedSearch, savedSearchDataChart$, savedSearchDataTotalHits$, @@ -30,7 +30,7 @@ export function DiscoverChart({ stateContainer, timefield, }: { - resetQuery: () => void; + resetSavedSearch: () => void; savedSearch: SavedSearch; savedSearchDataChart$: DataCharts$; savedSearchDataTotalHits$: DataTotalHits$; @@ -88,7 +88,7 @@ export function DiscoverChart({ {!state.hideChart && ( diff --git a/src/plugins/discover/public/application/apps/main/components/layout/discover_layout.test.tsx b/src/plugins/discover/public/application/apps/main/components/layout/discover_layout.test.tsx index 7343760f32d1..79dfc9b77f90 100644 --- a/src/plugins/discover/public/application/apps/main/components/layout/discover_layout.test.tsx +++ b/src/plugins/discover/public/application/apps/main/components/layout/discover_layout.test.tsx @@ -135,7 +135,7 @@ function getProps(indexPattern: IndexPattern): DiscoverLayoutProps { navigateTo: jest.fn(), onChangeIndexPattern: jest.fn(), onUpdateQuery: jest.fn(), - resetQuery: jest.fn(), + resetSavedSearch: jest.fn(), savedSearch: savedSearchMock, savedSearchData$, savedSearchRefetch$: new Subject(), diff --git a/src/plugins/discover/public/application/apps/main/components/layout/discover_layout.tsx b/src/plugins/discover/public/application/apps/main/components/layout/discover_layout.tsx index 6d241468bdf7..ce745fecbbfa 100644 --- a/src/plugins/discover/public/application/apps/main/components/layout/discover_layout.tsx +++ b/src/plugins/discover/public/application/apps/main/components/layout/discover_layout.tsx @@ -57,7 +57,7 @@ export function DiscoverLayout({ onChangeIndexPattern, onUpdateQuery, savedSearchRefetch$, - resetQuery, + resetSavedSearch, savedSearchData$, savedSearch, searchSource, @@ -165,6 +165,7 @@ export function DiscoverLayout({ services={services} stateContainer={stateContainer} updateQuery={onUpdateQuery} + resetSavedSearch={resetSavedSearch} />

@@ -246,7 +247,7 @@ export function DiscoverLayout({ void; onChangeIndexPattern: (id: string) => void; onUpdateQuery: (payload: { dateRange: TimeRange; query?: Query }, isUpdate?: boolean) => void; - resetQuery: () => void; + resetSavedSearch: () => void; savedSearch: SavedSearch; savedSearchData$: SavedSearchData; savedSearchRefetch$: DataRefetch$; diff --git a/src/plugins/discover/public/application/apps/main/components/top_nav/discover_topnav.test.tsx b/src/plugins/discover/public/application/apps/main/components/top_nav/discover_topnav.test.tsx index 687532cd94f0..4b572f6e348b 100644 --- a/src/plugins/discover/public/application/apps/main/components/top_nav/discover_topnav.test.tsx +++ b/src/plugins/discover/public/application/apps/main/components/top_nav/discover_topnav.test.tsx @@ -33,6 +33,7 @@ function getProps(savePermissions = true): DiscoverTopNavProps { updateQuery: jest.fn(), onOpenInspector: jest.fn(), searchSource: {} as ISearchSource, + resetSavedSearch: () => {}, }; } diff --git a/src/plugins/discover/public/application/apps/main/components/top_nav/discover_topnav.tsx b/src/plugins/discover/public/application/apps/main/components/top_nav/discover_topnav.tsx index 9afda7340108..5e3e2dfd9695 100644 --- a/src/plugins/discover/public/application/apps/main/components/top_nav/discover_topnav.tsx +++ b/src/plugins/discover/public/application/apps/main/components/top_nav/discover_topnav.tsx @@ -5,7 +5,8 @@ * in compliance with, at your election, the Elastic License 2.0 or the Server * Side Public License, v 1. */ -import React, { useMemo } from 'react'; +import React, { useCallback, useMemo } from 'react'; +import { useHistory } from 'react-router-dom'; import { DiscoverLayoutProps } from '../layout/types'; import { getTopNavLinks } from './get_top_nav_links'; import { Query, TimeRange } from '../../../../../../../data/common/query'; @@ -21,6 +22,7 @@ export type DiscoverTopNavProps = Pick< savedQuery?: string; updateQuery: (payload: { dateRange: TimeRange; query?: Query }, isUpdate?: boolean) => void; stateContainer: GetStateReturn; + resetSavedSearch: () => void; }; export const DiscoverTopNav = ({ @@ -34,9 +36,23 @@ export const DiscoverTopNav = ({ navigateTo, savedSearch, services, + resetSavedSearch, }: DiscoverTopNavProps) => { + const history = useHistory(); const showDatePicker = useMemo(() => indexPattern.isTimeBased(), [indexPattern]); const { TopNavMenu } = services.navigation.ui; + + const onOpenSavedSearch = useCallback( + (newSavedSearchId: string) => { + if (savedSearch.id && savedSearch.id === newSavedSearchId) { + resetSavedSearch(); + } else { + history.push(`/view/${encodeURIComponent(newSavedSearchId)}`); + } + }, + [history, resetSavedSearch, savedSearch.id] + ); + const topNavMenu = useMemo( () => getTopNavLinks({ @@ -47,8 +63,18 @@ export const DiscoverTopNav = ({ state: stateContainer, onOpenInspector, searchSource, + onOpenSavedSearch, }), - [indexPattern, navigateTo, onOpenInspector, searchSource, stateContainer, savedSearch, services] + [ + indexPattern, + navigateTo, + savedSearch, + services, + stateContainer, + onOpenInspector, + searchSource, + onOpenSavedSearch, + ] ); const updateSavedQueryId = (newSavedQueryId: string | undefined) => { diff --git a/src/plugins/discover/public/application/apps/main/components/top_nav/get_top_nav_links.test.ts b/src/plugins/discover/public/application/apps/main/components/top_nav/get_top_nav_links.test.ts index 6a6fb8a44a5c..fd918429b57d 100644 --- a/src/plugins/discover/public/application/apps/main/components/top_nav/get_top_nav_links.test.ts +++ b/src/plugins/discover/public/application/apps/main/components/top_nav/get_top_nav_links.test.ts @@ -35,6 +35,7 @@ test('getTopNavLinks result', () => { services, state, searchSource: {} as ISearchSource, + onOpenSavedSearch: () => {}, }); expect(topNavLinks).toMatchInlineSnapshot(` Array [ diff --git a/src/plugins/discover/public/application/apps/main/components/top_nav/get_top_nav_links.ts b/src/plugins/discover/public/application/apps/main/components/top_nav/get_top_nav_links.ts index f19b30cda5f8..f7b4a35b4cf8 100644 --- a/src/plugins/discover/public/application/apps/main/components/top_nav/get_top_nav_links.ts +++ b/src/plugins/discover/public/application/apps/main/components/top_nav/get_top_nav_links.ts @@ -29,6 +29,7 @@ export const getTopNavLinks = ({ state, onOpenInspector, searchSource, + onOpenSavedSearch, }: { indexPattern: IndexPattern; navigateTo: (url: string) => void; @@ -37,6 +38,7 @@ export const getTopNavLinks = ({ state: GetStateReturn; onOpenInspector: () => void; searchSource: ISearchSource; + onOpenSavedSearch: (id: string) => void; }) => { const options = { id: 'options', @@ -89,7 +91,7 @@ export const getTopNavLinks = ({ testId: 'discoverOpenButton', run: () => showOpenSearchPanel({ - makeUrl: (searchId) => `#/view/${encodeURIComponent(searchId)}`, + onOpenSavedSearch, I18nContext: services.core.i18n.Context, }), }; diff --git a/src/plugins/discover/public/application/apps/main/components/top_nav/open_search_panel.test.tsx b/src/plugins/discover/public/application/apps/main/components/top_nav/open_search_panel.test.tsx index 5080d1d61c88..dc5d3e81744d 100644 --- a/src/plugins/discover/public/application/apps/main/components/top_nav/open_search_panel.test.tsx +++ b/src/plugins/discover/public/application/apps/main/components/top_nav/open_search_panel.test.tsx @@ -29,7 +29,9 @@ import { OpenSearchPanel } from './open_search_panel'; describe('OpenSearchPanel', () => { test('render', () => { - const component = shallow(); + const component = shallow( + + ); expect(component).toMatchSnapshot(); }); @@ -40,7 +42,9 @@ describe('OpenSearchPanel', () => { delete: false, }, }); - const component = shallow(); + const component = shallow( + + ); expect(component.find('[data-test-subj="manageSearches"]').exists()).toBe(false); }); }); diff --git a/src/plugins/discover/public/application/apps/main/components/top_nav/open_search_panel.tsx b/src/plugins/discover/public/application/apps/main/components/top_nav/open_search_panel.tsx index 31026a1e0ab5..1b34e6ffa0b9 100644 --- a/src/plugins/discover/public/application/apps/main/components/top_nav/open_search_panel.tsx +++ b/src/plugins/discover/public/application/apps/main/components/top_nav/open_search_panel.tsx @@ -27,7 +27,7 @@ const SEARCH_OBJECT_TYPE = 'search'; interface OpenSearchPanelProps { onClose: () => void; - makeUrl: (id: string) => string; + onOpenSavedSearch: (id: string) => void; } export function OpenSearchPanel(props: OpenSearchPanelProps) { @@ -70,7 +70,7 @@ export function OpenSearchPanel(props: OpenSearchPanelProps) { }, ]} onChoose={(id) => { - window.location.assign(props.makeUrl(id)); + props.onOpenSavedSearch(id); props.onClose(); }} uiSettings={uiSettings} diff --git a/src/plugins/discover/public/application/apps/main/components/top_nav/show_open_search_panel.tsx b/src/plugins/discover/public/application/apps/main/components/top_nav/show_open_search_panel.tsx index bb306396c4ca..1a9bfd7e30c5 100644 --- a/src/plugins/discover/public/application/apps/main/components/top_nav/show_open_search_panel.tsx +++ b/src/plugins/discover/public/application/apps/main/components/top_nav/show_open_search_panel.tsx @@ -14,11 +14,11 @@ import { OpenSearchPanel } from './open_search_panel'; let isOpen = false; export function showOpenSearchPanel({ - makeUrl, I18nContext, + onOpenSavedSearch, }: { - makeUrl: (path: string) => string; I18nContext: I18nStart['Context']; + onOpenSavedSearch: (id: string) => void; }) { if (isOpen) { return; @@ -35,7 +35,7 @@ export function showOpenSearchPanel({ document.body.appendChild(container); const element = ( - + ); ReactDOM.render(element, container); diff --git a/src/plugins/discover/public/application/apps/main/discover_main_app.tsx b/src/plugins/discover/public/application/apps/main/discover_main_app.tsx index 456f4ebfab62..7ee9ab44f9a7 100644 --- a/src/plugins/discover/public/application/apps/main/discover_main_app.tsx +++ b/src/plugins/discover/public/application/apps/main/discover_main_app.tsx @@ -92,7 +92,7 @@ export function DiscoverMainApp(props: DiscoverMainProps) { addHelpMenuToAppChrome(chrome, docLinks); }, [stateContainer, chrome, docLinks]); - const resetQuery = useCallback(() => { + const resetCurrentSavedSearch = useCallback(() => { resetSavedSearch(savedSearch.id); }, [resetSavedSearch, savedSearch]); @@ -103,7 +103,7 @@ export function DiscoverMainApp(props: DiscoverMainProps) { inspectorAdapters={inspectorAdapters} onChangeIndexPattern={onChangeIndexPattern} onUpdateQuery={onUpdateQuery} - resetQuery={resetQuery} + resetSavedSearch={resetCurrentSavedSearch} navigateTo={navigateTo} savedSearch={savedSearch} savedSearchData$={data$} diff --git a/src/plugins/discover/public/application/apps/main/services/use_discover_state.ts b/src/plugins/discover/public/application/apps/main/services/use_discover_state.ts index afe010379cff..e11a9937111a 100644 --- a/src/plugins/discover/public/application/apps/main/services/use_discover_state.ts +++ b/src/plugins/discover/public/application/apps/main/services/use_discover_state.ts @@ -148,7 +148,8 @@ export function useDiscoverState({ const resetSavedSearch = useCallback( async (id?: string) => { const newSavedSearch = await services.getSavedSearchById(id); - newSavedSearch.searchSource.setField('index', indexPattern); + const newIndexPattern = newSavedSearch.searchSource.getField('index') || indexPattern; + newSavedSearch.searchSource.setField('index', newIndexPattern); const newAppState = getStateDefaults({ config, data, @@ -157,7 +158,7 @@ export function useDiscoverState({ await stateContainer.replaceUrlAppState(newAppState); setState(newAppState); }, - [services, indexPattern, config, data, stateContainer] + [indexPattern, services, config, data, stateContainer] ); /**