diff --git a/src/platform/plugins/shared/discover/public/application/main/components/top_nav/discover_topnav.tsx b/src/platform/plugins/shared/discover/public/application/main/components/top_nav/discover_topnav.tsx index eeeda7cb01908..b84b0c40f413c 100644 --- a/src/platform/plugins/shared/discover/public/application/main/components/top_nav/discover_topnav.tsx +++ b/src/platform/plugins/shared/discover/public/application/main/components/top_nav/discover_topnav.tsx @@ -7,11 +7,12 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import React, { useCallback, useEffect, useMemo, useRef } from 'react'; +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { DataViewType } from '@kbn/data-views-plugin/public'; import type { DataViewPickerProps } from '@kbn/unified-search-plugin/public'; import { DiscoverFlyouts, dismissAllFlyoutsExceptFor } from '@kbn/discover-utils'; import type { EuiHeaderLinksProps } from '@elastic/eui'; +import type { Query, TimeRange, AggregateQuery } from '@kbn/es-query'; import { useSavedSearchInitial } from '../../state_management/discover_state_provider'; import { ESQL_TRANSITION_MODAL_KEY } from '../../../../../common/constants'; import { useDiscoverServices } from '../../../../hooks/use_discover_services'; @@ -53,6 +54,22 @@ export const DiscoverTopNav = ({ const services = useDiscoverServices(); const { dataViewEditor, navigation, dataViewFieldEditor, data, setHeaderActionMenu } = services; const query = useAppStateSelector((state) => state.query); + const [actualQuery, setActualQuery] = useState(query as Query); + // Note, this is just experimental, if we want to store the edited / dirty state of the query + // is should be done I guess in out internal state container + const onQueryChange = useCallback((q: { dateRange: TimeRange; query?: Query | AggregateQuery | undefined }) => { + // console.log('onQueryChange', q); + if( q.query) { + setActualQuery(q.query); + } + }, []); + useEffect(() => { + if (query) { + setActualQuery(query); + } + + }, [query]); + const { savedDataViews, managedDataViews, adHocDataViews } = useDataViewsForPicker(); const dataView = useCurrentDataView(); const isESQLToDataViewTransitionModalVisible = useInternalStateSelector( @@ -89,19 +106,19 @@ export const DiscoverTopNav = ({ () => canEditDataView ? async (fieldName?: string) => { - if (dataView?.id) { - const dataViewInstance = await data.dataViews.get(dataView.id); - closeFieldEditor.current = await dataViewFieldEditor.openEditor({ - ctx: { - dataView: dataViewInstance, - }, - fieldName, - onSave: async () => { - await onFieldEdited(); - }, - }); - } + if (dataView?.id) { + const dataViewInstance = await data.dataViews.get(dataView.id); + closeFieldEditor.current = await dataViewFieldEditor.openEditor({ + ctx: { + dataView: dataViewInstance, + }, + fieldName, + onSave: async () => { + await onFieldEdited(); + }, + }); } + } : undefined, [canEditDataView, dataView?.id, data.dataViews, dataViewFieldEditor, onFieldEdited] ); @@ -214,6 +231,8 @@ export const DiscoverTopNav = ({ const shouldHideDefaultDataviewPicker = !!searchBarCustomization?.CustomDataViewPicker || !!searchBarCustomization?.hideDataViewPicker; + // console.log('DiscoverTop query in use', actualQuery); + return ( <> (props: StatefulSearchBarProps) => { - const { useDefaultBehaviors, allowSavingQueries } = props; + const { useDefaultBehaviors, allowSavingQueries, onQueryChange } = props; // Handle queries const onQuerySubmitRef = useRef(props.onQuerySubmit); + // Just to test tracking of query changes + // Problem that after this inial setting up the query, in this component subsequent changes to the props.query + // are just ignored, since there's a subscription to the queryStringManager of data.query.queryString setting the query + // and since a query edits is unknow to it, it will always return the most recent submitted query + const queryEdited = useRef(); + const onQueryChanged = useCallback( + (query: { dateRange: TimeRange; query?: QT | Query }) => { + if (query.query) { + queryEdited.current = query.query; + } + if (onQueryChange) { + onQueryChange(query); + } + }, + [onQueryChange] + ); useEffect(() => { onQuerySubmitRef.current = props.onQuerySubmit; @@ -195,6 +211,7 @@ export function createSearchBar({ // Fire onQuerySubmit on query or timerange change useEffect(() => { if (!useDefaultBehaviors || !onQuerySubmitRef.current) return; + queryEdited.current = undefined; onQuerySubmitRef.current( { dateRange: timeRange, @@ -244,7 +261,7 @@ export function createSearchBar({ isLoading={props.isLoading} onCancel={props.onCancel} filters={filters} - query={query} + query={queryEdited.current ?? query} onFiltersUpdated={defaultFiltersUpdated(data.query, props.onFiltersUpdated)} onRefreshChange={ !props.isAutoRefreshDisabled @@ -253,6 +270,7 @@ export function createSearchBar({ } savedQuery={savedQuery} onQuerySubmit={defaultOnQuerySubmit(props, data.query, query)} + onQueryChange={onQueryChanged} onRefresh={props.onRefresh} onClearSavedQuery={defaultOnClearSavedQuery(props, clearSavedQuery)} onSavedQueryUpdated={defaultOnSavedQueryUpdated(props, setSavedQuery)}