[State Management] State syncing helpers for query service I

examples/state_containers_examples/public/with_data_services/components/app.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { History } from 'history';
 import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
 import { Router } from 'react-router-dom';
@@ -41,6 +41,7 @@ import {
   QueryState,
   Filter,
   esFilters,
+  Query,
 } from '../../../../../src/plugins/data/public';
 import {
   BaseState,
@@ -65,8 +66,7 @@ interface StateDemoAppDeps {
 interface AppState {
   name: string;
   filters: Filter[];
-  // TODO: https://github.com/elastic/kibana/issues/58111
-  // query?: Query;
+  query?: Query;
 }
 const defaultAppState: AppState = {
   name: '',
@@ -92,17 +92,16 @@ const App = ({
   useGlobalStateSyncing(data.query, kbnUrlStateStorage);
   useAppStateSyncing(appStateContainer, data.query, kbnUrlStateStorage);
 
-  // TODO: https://github.com/elastic/kibana/issues/58111
-  // useEffect indefinite cycle inside TopNavManu
-  // const onQuerySubmit = useCallback(
-  //   ({ query }) => {
-  //     appStateContainer.set({ ...appState, query });
-  //   },
-  //   [appStateContainer, appState]
-  // );
+  const onQuerySubmit = useCallback(
+    ({ query }) => {
+      appStateContainer.set({ ...appState, query });
+    },
+    [appStateContainer, appState]
+  );
 
   const indexPattern = useIndexPattern(data);
-  if (!indexPattern) return <div>Loading...</div>;
+  if (!indexPattern)
+    return <div>No index pattern found. Please create an intex patter before loading...</div>;
 
   // Render the application DOM.
   // Note that `navigation.ui.TopNavMenu` is a stateful component exported on the `navigation` plugin's start contract.
@@ -115,9 +114,8 @@ const App = ({
             showSearchBar={true}
             indexPatterns={[indexPattern]}
             useDefaultBehaviors={true}
-            // TODO: https://github.com/elastic/kibana/issues/58111
-            // onQuerySubmit={onQuerySubmit}
-            // query={appState.query}
+            onQuerySubmit={onQuerySubmit}
+            query={appState.query}
           />
           <EuiPage restrictWidth="1000px">
             <EuiPageBody>

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

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { CoreStart } from 'src/core/public';
 import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
 import { KibanaContextProvider } from '../../../../kibana_react/public';
@@ -117,13 +117,28 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
   // 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 (props: StatefulSearchBarProps) => {
+    const { useDefaultBehaviors } = props;
     // Handle queries
-    const [query, setQuery] = useState<Query>(
-      props.query || {
-        query: '',
-        language: core.uiSettings.get('search:queryLanguage'),
+    const queryRef = useRef(props.query);
+    const onQuerySubmitRef = useRef(props.onQuerySubmit);
+    const defaultQuery = {
+      query: '',
+      language: core.uiSettings.get('search:queryLanguage'),
+    };
+    const [query, setQuery] = useState<Query>(defaultQuery);
+
+    useEffect(() => {
+      if (props.query !== queryRef.current) {
+        queryRef.current = props.query;
+        setQuery(props.query || defaultQuery);
       }
-    );
+    }, [defaultQuery, props.query]);
+
+    useEffect(() => {
+      if (props.onQuerySubmit !== onQuerySubmitRef.current) {
+        onQuerySubmitRef.current = props.onQuerySubmit;
+      }
+    }, [props.onQuerySubmit]);
 
     // handle service state updates.
     // i.e. filters being added from a visualization directly to filterManager.
@@ -150,16 +165,15 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
 
     // Fire onQuerySubmit on query or timerange change
     useEffect(() => {
-      if (!props.useDefaultBehaviors) return;
-      if (props.onQuerySubmit)
-        props.onQuerySubmit(
-          {
-            dateRange: timeRange,
-            query,
-          },
-          true
-        );
-    }, [props, props.onQuerySubmit, props.useDefaultBehaviors, query, timeRange]);
+      if (!useDefaultBehaviors || !onQuerySubmitRef.current) return;
+      onQuerySubmitRef.current(
+        {
+          dateRange: timeRange,
+          query,
+        },
+        true
+      );
+    }, [query, timeRange, useDefaultBehaviors]);
 
     return (
       <KibanaContextProvider