connect without container

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

src/plugins/data/public/index.ts

@@ -444,6 +444,7 @@ export { Filter, Query, RefreshInterval, TimeRange } from '../common';
 
 export {
   createSavedQueryService,
+  useQueryStateWithNoContainer,
   connectToQueryState,
   syncQueryStateWithUrl,
   QueryState,

src/plugins/data/public/query/state_sync/connect_to_query_state.ts

@@ -31,12 +31,185 @@
 import { Subscription } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
 import _ from 'lodash';
-import { BaseStateContainer } from '../../../../opensearch_dashboards_utils/public';
+import {
+  BaseStateContainer,
+  IOsdUrlStateStorage,
+} from '../../../../opensearch_dashboards_utils/public';
 import { QuerySetup, QueryStart } from '../query_service';
 import { QueryState, QueryStateChange } from './types';
 import { FilterStateStore, COMPARE_ALL_OPTIONS, compareFilters } from '../../../common';
 import { validateTimeRange } from '../timefilter';
 
+export const useQueryStateWithNoContainer = (
+  {
+    timefilter: { timefilter },
+    filterManager,
+    queryString,
+    state$,
+  }: Pick<QueryStart | QuerySetup, 'timefilter' | 'filterManager' | 'queryString' | 'state$'>,
+  OsdUrlStateStorage: IOsdUrlStateStorage,
+  syncConfig: {
+    filters?: FilterStateStore | boolean;
+    query?: boolean;
+  }
+) => {
+  const syncKeys: Array<keyof QueryStateChange> = [];
+  if (syncConfig.query) {
+    syncKeys.push('query');
+  }
+  if (syncConfig.filters) {
+    switch (syncConfig.filters) {
+      case true:
+        syncKeys.push('filters');
+        break;
+      case FilterStateStore.APP_STATE:
+        syncKeys.push('appFilters');
+        break;
+      case FilterStateStore.GLOBAL_STATE:
+        syncKeys.push('globalFilters');
+        break;
+    }
+  }
+
+  const initialStateFromURL: QueryState = OsdUrlStateStorage.get('_q') ?? {
+    query: queryString.getDefaultQuery(),
+    filters: filterManager.getGlobalFilters(),
+  };
+  let initialDirty = false;
+
+  if (syncConfig.query && !_.isEqual(initialStateFromURL.query, queryString.getQuery())) {
+    initialStateFromURL.query = queryString.getQuery();
+    initialDirty = true;
+  }
+
+  if (syncConfig.filters) {
+    if (syncConfig.filters === true) {
+      if (
+        !initialStateFromURL.filters ||
+        !compareFilters(
+          initialStateFromURL.filters,
+          filterManager.getFilters(),
+          COMPARE_ALL_OPTIONS
+        )
+      ) {
+        initialStateFromURL.filters = filterManager.getFilters();
+        initialDirty = true;
+      }
+    } else if (syncConfig.filters === FilterStateStore.GLOBAL_STATE) {
+      if (
+        !initialStateFromURL.filters ||
+        !compareFilters(initialStateFromURL.filters, filterManager.getGlobalFilters(), {
+          ...COMPARE_ALL_OPTIONS,
+          state: false,
+        })
+      ) {
+        initialStateFromURL.filters = filterManager.getGlobalFilters();
+        initialDirty = true;
+      }
+    } else if (syncConfig.filters === FilterStateStore.APP_STATE) {
+      if (
+        !initialStateFromURL.filters ||
+        !compareFilters(initialStateFromURL.filters, filterManager.getAppFilters(), {
+          ...COMPARE_ALL_OPTIONS,
+          state: false,
+        })
+      ) {
+        initialStateFromURL.filters = filterManager.getAppFilters();
+        initialDirty = true;
+      }
+    }
+  }
+
+  if (initialDirty) {
+    OsdUrlStateStorage.set('_q', initialStateFromURL, {
+      replace: true,
+    });
+  }
+
+  // to ignore own state updates
+  const updateInProgress = false;
+
+  const subs: Subscription[] = [
+    state$
+      .pipe(
+        filter(({ changes, state }) => {
+          if (updateInProgress) return false;
+          return syncKeys.some((syncKey) => changes[syncKey]);
+        }),
+        map(({ changes }) => {
+          const newState: QueryState = {};
+          if (syncConfig.query && changes.query) {
+            newState.query = queryString.getQuery();
+          }
+          if (syncConfig.filters) {
+            if (syncConfig.filters === true && changes.filters) {
+              newState.filters = filterManager.getFilters();
+            } else if (
+              syncConfig.filters === FilterStateStore.GLOBAL_STATE &&
+              changes.globalFilters
+            ) {
+              newState.filters = filterManager.getGlobalFilters();
+            } else if (syncConfig.filters === FilterStateStore.APP_STATE && changes.appFilters) {
+              newState.filters = filterManager.getAppFilters();
+            }
+          }
+          return newState;
+        })
+      )
+      .subscribe((newState) => {
+        OsdUrlStateStorage.set('_q', newState, {
+          replace: true,
+        });
+      }),
+    /* stateContainer.state$.subscribe((state) => {
+      updateInProgress = true;
+
+      // cloneDeep is required because services are mutating passed objects
+      // and state in state container is frozen
+
+      if (syncConfig.query) {
+        const curQuery = state.query || queryString.getQuery();
+        if (!_.isEqual(curQuery, queryString.getQuery())) {
+          queryString.setQuery(_.cloneDeep(curQuery));
+        }
+      }
+
+      if (syncConfig.filters) {
+        const filters = state.filters || [];
+        if (syncConfig.filters === true) {
+          if (!compareFilters(filters, filterManager.getFilters(), COMPARE_ALL_OPTIONS)) {
+            filterManager.setFilters(_.cloneDeep(filters));
+          }
+        } else if (syncConfig.filters === FilterStateStore.APP_STATE) {
+          if (
+            !compareFilters(filters, filterManager.getAppFilters(), {
+              ...COMPARE_ALL_OPTIONS,
+              state: false,
+            })
+          ) {
+            filterManager.setAppFilters(_.cloneDeep(filters));
+          }
+        } else if (syncConfig.filters === FilterStateStore.GLOBAL_STATE) {
+          if (
+            !compareFilters(filters, filterManager.getGlobalFilters(), {
+              ...COMPARE_ALL_OPTIONS,
+              state: false,
+            })
+          ) {
+            filterManager.setGlobalFilters(_.cloneDeep(filters));
+          }
+        }
+      }
+
+      updateInProgress = false;
+    }),*/
+  ];
+
+  return () => {
+    subs.forEach((s) => s.unsubscribe());
+  };
+};
+
 /**
  * Helper to setup two-way syncing of global data and a state container
  * @param QueryService: either setup or start

src/plugins/data/public/query/state_sync/index.ts

@@ -28,6 +28,6 @@
  * under the License.
  */
 
-export { connectToQueryState } from './connect_to_query_state';
+export { connectToQueryState, useQueryStateWithNoContainer } from './connect_to_query_state';
 export { syncQueryStateWithUrl } from './sync_state_with_url';
 export { QueryState, QueryStateChange } from './types';

src/plugins/vis_builder/public/application/components/top_nav.tsx

@@ -18,6 +18,8 @@ import { setEditorState } from '../utils/state_management/metadata_slice';
 import { useCanSave } from '../utils/use/use_can_save';
 import { saveStateToSavedObject } from '../../saved_visualizations/transforms';
 import { TopNavMenuData } from '../../../../navigation/public';
+import { opensearchFilters } from '../../../../data/public';
+import { useQueryStateWithNoContainer } from '../../../../data/public';
 
 export const TopNav = () => {
   // id will only be set for the edit route
@@ -34,6 +36,10 @@ export const TopNav = () => {
 
   const saveDisabledReason = useCanSave();
   const savedVisBuilderVis = useSavedVisBuilderVis(visualizationIdFromUrl);
+  useQueryStateWithNoContainer(services.data.query, services.osdUrlStateStorage, {
+    filters: opensearchFilters.FilterStateStore.APP_STATE,
+    query: true,
+  });
   const { selected: indexPattern } = useIndexPatterns();
   const [config, setConfig] = useState<TopNavMenuData[] | undefined>();
   const originatingApp = useTypedSelector((state) => {