[Discover][UnifiedSearch] POC to enable onQueryChange

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 | AggregateQuery>(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,17 +231,20 @@ export const DiscoverTopNav = ({
   const shouldHideDefaultDataviewPicker =
     !!searchBarCustomization?.CustomDataViewPicker || !!searchBarCustomization?.hideDataViewPicker;
 
+  // console.log('DiscoverTop query in use', actualQuery);
+
   return (
     <>
       <SearchBar
         {...topNavProps}
         appName="discover"
         indexPatterns={[dataView]}
         onQuerySubmit={stateContainer.actions.onUpdateQuery}
+        onQueryChange={onQueryChange}
         onCancel={onCancelClick}
         isLoading={isLoading}
         onSavedQueryIdChange={updateSavedQueryId}
-        query={query}
+        query={actualQuery}
         savedQueryId={savedQuery}
         screenTitle={savedSearch.title}
         showDatePicker={showDatePicker}

src/platform/plugins/shared/unified_search/public/search_bar/create_search_bar.tsx

@@ -8,7 +8,7 @@
  */
 
 import { isEqual } from 'lodash';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useCallback } from 'react';
 import type { CoreStart } from '@kbn/core/public';
 import type { IStorageWrapper } from '@kbn/kibana-utils-plugin/public';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
@@ -160,9 +160,25 @@ export function createSearchBar({
   // App name should come from the core application service.
   // Until it's available, we'll ask the user to provide it for the pre-wired component.
   return <QT extends AggregateQuery | Query = Query>(props: StatefulSearchBarProps<QT>) => {
-    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<Query | QT | undefined>();
+    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)}