fix(D&D): Handles topnav state update

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

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

@@ -12,9 +12,8 @@ import { WizardServices } from '../../types';
 
 import './top_nav.scss';
 import { useIndexPattern } from '../utils/use';
-import { useTypedSelector, useTypedDispatch } from '../utils/state_management';
+import { useTypedSelector } from '../utils/state_management';
 import { useSavedWizardVis } from '../utils/use/use_saved_wizard_vis';
-import { setTopNav } from '../utils/state_management/metadata_slice';
 
 export const TopNav = () => {
   // id will only be set for the edit route
@@ -27,7 +26,6 @@ export const TopNav = () => {
     },
   } = services;
   const rootState = useTypedSelector((state) => state);
-  const dispatch = useTypedDispatch();
   const hasUnappliedChanges = useTypedSelector(
     (state) => !!state.visualization.activeVisualization?.draftAgg
   );
@@ -60,15 +58,10 @@ export const TopNav = () => {
         appName={PLUGIN_ID}
         config={config}
         setMenuMountPoint={setHeaderActionMenu}
-        showSearchBar={true}
-        useDefaultBehaviors={true}
-        screenTitle="Test"
         indexPatterns={indexPattern ? [indexPattern] : []}
-        onQuerySubmit={(payload, isUpdate) => {
-          if (isUpdate) {
-            dispatch(setTopNav(payload));
-          }
-        }}
+        showSearchBar
+        showSaveQuery
+        useDefaultBehaviors
       />
     </div>
   );

src/plugins/wizard/public/application/components/workspace.tsx

@@ -14,7 +14,7 @@ import {
   EuiPanel,
   EuiPopover,
 } from '@elastic/eui';
-import React, { FC, useState, useMemo, useEffect } from 'react';
+import React, { FC, useState, useMemo, useEffect, useLayoutEffect } from 'react';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { IExpressionLoaderParams } from '../../../../expressions/public';
 import { WizardServices } from '../../types';
@@ -30,10 +30,16 @@ export const Workspace: FC = ({ children }) => {
     services: {
       expressions: { ReactExpressionRenderer },
       notifications: { toasts },
+      data,
     },
   } = useOpenSearchDashboards<WizardServices>();
   const { toExpression, ui } = useVisualizationType();
   const [expression, setExpression] = useState<string>();
+  const [searchContext, setSearchContext] = useState<IExpressionLoaderParams['searchContext']>({
+    query: data.query.queryString.getQuery(),
+    filters: data.query.filterManager.getFilters(),
+    timeRange: data.query.timefilter.timefilter.getTime(),
+  });
   const rootState = useTypedSelector((state) => state);
 
   useEffect(() => {
@@ -55,10 +61,19 @@ export const Workspace: FC = ({ children }) => {
     loadExpression();
   }, [rootState, toExpression, toasts, ui.containerConfig.data.schemas]);
 
-  const searchContext: IExpressionLoaderParams['searchContext'] = {
-    query: rootState.metadata.query,
-    timeRange: rootState.metadata.dateRange,
-  };
+  useLayoutEffect(() => {
+    const subscription = data.query.state$.subscribe(({ state }) => {
+      setSearchContext({
+        query: state.query,
+        timeRange: state.time,
+        filters: state.filters,
+      });
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [data.query.state$]);
 
   return (
     <section className="wizWorkspace">

src/plugins/wizard/public/application/utils/state_management/preload.ts

@@ -7,19 +7,16 @@ import { PreloadedState } from '@reduxjs/toolkit';
 import { WizardServices } from '../../..';
 import { getPreloadedState as getPreloadedStyleState } from './style_slice';
 import { getPreloadedState as getPreloadedVisualizationState } from './visualization_slice';
-import { getPreloadedState as getPreloadedMetadataState } from './metadata_slice';
 import { RootState } from './store';
 
 export const getPreloadedState = async (
   services: WizardServices
 ): Promise<PreloadedState<RootState>> => {
   const styleState = await getPreloadedStyleState(services);
   const visualizationState = await getPreloadedVisualizationState(services);
-  const metadataState = await getPreloadedMetadataState(services);
 
   return {
     style: styleState,
     visualization: visualizationState,
-    metadata: metadataState,
   };
 };

src/plugins/wizard/public/application/utils/state_management/store.ts

@@ -6,14 +6,12 @@
 import { combineReducers, configureStore, PreloadedState } from '@reduxjs/toolkit';
 import { reducer as styleReducer } from './style_slice';
 import { reducer as visualizationReducer } from './visualization_slice';
-import { reducer as metadataReducer } from './metadata_slice';
 import { WizardServices } from '../../..';
 import { getPreloadedState } from './preload';
 
 const rootReducer = combineReducers({
   style: styleReducer,
   visualization: visualizationReducer,
-  metadata: metadataReducer,
 });
 
 export const configurePreloadedStore = (preloadedState: PreloadedState<RootState>) => {