[State Management] State syncing helpers for query service I

examples/state_containers_examples/common/index.ts

@@ -0,0 +1,21 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export const PLUGIN_ID = 'stateContainersExampleWithDataServices';
+export const PLUGIN_NAME = 'State containers example - with data services';

examples/state_containers_examples/kibana.json

@@ -3,8 +3,8 @@
   "version": "0.0.1",
   "kibanaVersion": "kibana",
   "configPath": ["state_containers_examples"],
-  "server": false,
+  "server": true,
   "ui": true,
-  "requiredPlugins": [],
+  "requiredPlugins": ["navigation", "data"],
   "optionalPlugins": []
 }

examples/state_containers_examples/public/plugin.ts

@@ -18,14 +18,16 @@
  */
 
 import { AppMountParameters, CoreSetup, Plugin } from 'kibana/public';
+import { AppPluginDependencies } from './with_data_services/types';
+import { PLUGIN_ID, PLUGIN_NAME } from '../common';
 
 export class StateContainersExamplesPlugin implements Plugin {
   public setup(core: CoreSetup) {
     core.application.register({
-      id: 'state-containers-example-browser-history',
+      id: 'stateContainersExampleBrowserHistory',
       title: 'State containers example - browser history routing',
       async mount(params: AppMountParameters) {
-        const { renderApp, History } = await import('./app');
+        const { renderApp, History } = await import('./todo/app');
         return renderApp(params, {
           appInstanceId: '1',
           appTitle: 'Routing with browser history',
@@ -34,17 +36,30 @@ export class StateContainersExamplesPlugin implements Plugin {
       },
     });
     core.application.register({
-      id: 'state-containers-example-hash-history',
+      id: 'stateContainersExampleHashHistory',
       title: 'State containers example - hash history routing',
       async mount(params: AppMountParameters) {
-        const { renderApp, History } = await import('./app');
+        const { renderApp, History } = await import('./todo/app');
         return renderApp(params, {
           appInstanceId: '2',
           appTitle: 'Routing with hash history',
           historyType: History.Hash,
         });
       },
     });
+
+    core.application.register({
+      id: PLUGIN_ID,
+      title: PLUGIN_NAME,
+      async mount(params: AppMountParameters) {
+        // Load application bundle
+        const { renderApp } = await import('./with_data_services/application');
+        // Get start services as specified in kibana.json
+        const [coreStart, depsStart] = await core.getStartServices();
+        // Render the application
+        return renderApp(coreStart, depsStart as AppPluginDependencies, params);
+      },
+    });
   }
 
   public start() {}

examples/state_containers_examples/public/todo.tsx → examples/state_containers_examples/public/todo/todo.tsx

@@ -42,14 +42,14 @@ import {
   syncStates,
   getStateFromKbnUrl,
   BaseState,
-} from '../../../src/plugins/kibana_utils/public';
-import { useUrlTracker } from '../../../src/plugins/kibana_react/public';
+} from '../../../../src/plugins/kibana_utils/public';
+import { useUrlTracker } from '../../../../src/plugins/kibana_react/public';
 import {
   defaultState,
   pureTransitions,
   TodoActions,
   TodoState,
-} from '../../../src/plugins/kibana_utils/demos/state_containers/todomvc';
+} from '../../../../src/plugins/kibana_utils/demos/state_containers/todomvc';
 
 interface GlobalState {
   text: string;

examples/state_containers_examples/public/with_data_services/application.tsx

@@ -0,0 +1,49 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { createBrowserHistory } from 'history';
+import { AppMountParameters, CoreStart } from '../../../../src/core/public';
+import { AppPluginDependencies } from './types';
+import { StateDemoApp } from './components/app';
+import { createKbnUrlStateStorage } from '../../../../src/plugins/kibana_utils/public/';
+
+export const renderApp = (
+  { notifications, http }: CoreStart,
+  { navigation, data }: AppPluginDependencies,
+  { appBasePath, element }: AppMountParameters
+) => {
+  const history = createBrowserHistory({ basename: appBasePath });
+  const kbnUrlStateStorage = createKbnUrlStateStorage({ useHash: false, history });
+
+  ReactDOM.render(
+    <StateDemoApp
+      notifications={notifications}
+      http={http}
+      navigation={navigation}
+      data={data}
+      history={history}
+      kbnUrlStateStorage={kbnUrlStateStorage}
+    />,
+    element
+  );
+
+  return () => ReactDOM.unmountComponentAtNode(element);
+};

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

@@ -0,0 +1,244 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+import { History } from 'history';
+import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
+import { Router } from 'react-router-dom';
+
+import {
+  EuiFieldText,
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageHeader,
+  EuiTitle,
+} from '@elastic/eui';
+
+import { CoreStart } from '../../../../../src/core/public';
+import { NavigationPublicPluginStart } from '../../../../../src/plugins/navigation/public';
+import {
+  connectToQueryState,
+  syncQueryStateWithUrl,
+  DataPublicPluginStart,
+  IIndexPattern,
+  QueryState,
+  Filter,
+  esFilters,
+} from '../../../../../src/plugins/data/public';
+import {
+  BaseState,
+  BaseStateContainer,
+  createStateContainer,
+  createStateContainerReactHelpers,
+  IKbnUrlStateStorage,
+  ReduxLikeStateContainer,
+  syncState,
+} from '../../../../../src/plugins/kibana_utils/public';
+import { PLUGIN_ID, PLUGIN_NAME } from '../../../common';
+
+interface StateDemoAppDeps {
+  notifications: CoreStart['notifications'];
+  http: CoreStart['http'];
+  navigation: NavigationPublicPluginStart;
+  data: DataPublicPluginStart;
+  history: History;
+  kbnUrlStateStorage: IKbnUrlStateStorage;
+}
+
+interface AppState {
+  name: string;
+  filters: Filter[];
+  // TODO: https://github.com/elastic/kibana/issues/58111
+  // query?: Query;
+}
+const defaultAppState: AppState = {
+  name: '',
+  filters: [],
+};
+const {
+  Provider: AppStateContainerProvider,
+  useState: useAppState,
+  useContainer: useAppStateContainer,
+} = createStateContainerReactHelpers<ReduxLikeStateContainer<AppState>>();
+
+const App = ({
+  notifications,
+  http,
+  navigation,
+  data,
+  history,
+  kbnUrlStateStorage,
+}: StateDemoAppDeps) => {
+  const appStateContainer = useAppStateContainer();
+  const appState = useAppState();
+
+  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 indexPattern = useIndexPattern(data);
+  if (!indexPattern) return <div>Loading...</div>;
+
+  // Render the application DOM.
+  // Note that `navigation.ui.TopNavMenu` is a stateful component exported on the `navigation` plugin's start contract.
+  return (
+    <Router history={history}>
+      <I18nProvider>
+        <>
+          <navigation.ui.TopNavMenu
+            appName={PLUGIN_ID}
+            showSearchBar={true}
+            indexPatterns={[indexPattern]}
+            useDefaultBehaviors={true}
+            // TODO: https://github.com/elastic/kibana/issues/58111
+            // onQuerySubmit={onQuerySubmit}
+            // query={appState.query}
+          />
+          <EuiPage restrictWidth="1000px">
+            <EuiPageBody>
+              <EuiPageHeader>
+                <EuiTitle size="l">
+                  <h1>
+                    <FormattedMessage
+                      id="stateDemo.helloWorldText"
+                      defaultMessage="{name}!"
+                      values={{ name: PLUGIN_NAME }}
+                    />
+                  </h1>
+                </EuiTitle>
+              </EuiPageHeader>
+              <EuiPageContent>
+                <EuiFieldText
+                  placeholder="Additional application state: My name is..."
+                  value={appState.name}
+                  onChange={e => appStateContainer.set({ ...appState, name: e.target.value })}
+                  aria-label="My name"
+                />
+              </EuiPageContent>
+            </EuiPageBody>
+          </EuiPage>
+        </>
+      </I18nProvider>
+    </Router>
+  );
+};
+
+export const StateDemoApp = (props: StateDemoAppDeps) => {
+  const appStateContainer = useCreateStateContainer(defaultAppState);
+
+  return (
+    <AppStateContainerProvider value={appStateContainer}>
+      <App {...props} />
+    </AppStateContainerProvider>
+  );
+};
+
+function useCreateStateContainer<State extends BaseState>(
+  defaultState: State
+): ReduxLikeStateContainer<State> {
+  const stateContainerRef = useRef<ReduxLikeStateContainer<State> | null>(null);
+  if (!stateContainerRef.current) {
+    stateContainerRef.current = createStateContainer(defaultState);
+  }
+  return stateContainerRef.current;
+}
+
+function useIndexPattern(data: DataPublicPluginStart) {
+  const [indexPattern, setIndexPattern] = useState<IIndexPattern>();
+  useEffect(() => {
+    const fetchIndexPattern = async () => {
+      const defaultIndexPattern = await data.indexPatterns.getDefault();
+      if (defaultIndexPattern) {
+        setIndexPattern(defaultIndexPattern);
+      }
+    };
+    fetchIndexPattern();
+  }, [data.indexPatterns]);
+
+  return indexPattern;
+}
+
+function useGlobalStateSyncing(
+  query: DataPublicPluginStart['query'],
+  kbnUrlStateStorage: IKbnUrlStateStorage
+) {
+  // setup sync state utils
+  useEffect(() => {
+    // sync global filters, time filters, refresh interval from data.query to url '_g'
+    const { stop } = syncQueryStateWithUrl(query, kbnUrlStateStorage);
+    return () => {
+      stop();
+    };
+  }, [query, kbnUrlStateStorage]);
+}
+
+function useAppStateSyncing<AppState extends QueryState>(
+  appStateContainer: BaseStateContainer<AppState>,
+  query: DataPublicPluginStart['query'],
+  kbnUrlStateStorage: IKbnUrlStateStorage
+) {
+  // setup sync state utils
+  useEffect(() => {
+    // sync app filters with app state container from data.query to state container
+    const stopSyncingQueryAppStateWithStateContainer = connectToQueryState(
+      query,
+      appStateContainer,
+      { filters: esFilters.FilterStateStore.APP_STATE }
+    );
+
+    // sets up syncing app state container with url
+    const { start: startSyncingAppStateWithUrl, stop: stopSyncingAppStateWithUrl } = syncState({
+      storageKey: '_a',
+      stateStorage: kbnUrlStateStorage,
+      stateContainer: {
+        ...appStateContainer,
+        // stateSync utils requires explicit handling of default state ("null")
+        set: state => state && appStateContainer.set(state),
+      },
+    });
+
+    // merge initial state from app state container and current state in url
+    const initialAppState: AppState = {
+      ...appStateContainer.get(),
+      ...kbnUrlStateStorage.get<AppState>('_a'),
+    };
+    // trigger state update. actually needed in case some data was in url
+    appStateContainer.set(initialAppState);
+
+    // set current url to whatever is in app state container
+    kbnUrlStateStorage.set<AppState>('_a', initialAppState);
+
+    // finally start syncing state containers with url
+    startSyncingAppStateWithUrl();
+
+    return () => {
+      stopSyncingQueryAppStateWithStateContainer();
+      stopSyncingAppStateWithUrl();
+    };
+  }, [query, kbnUrlStateStorage, appStateContainer]);
+}