From b03fe59033255c954e281c4bc9a4907d1670975d Mon Sep 17 00:00:00 2001 From: Ashwin Pc Date: Sun, 17 Jul 2022 10:59:32 +0000 Subject: [PATCH] fix(D&D): Handles topnav state update Signed-off-by: Ashwin Pc --- .../public/application/components/top_nav.tsx | 15 ++------ .../application/components/workspace.tsx | 29 ++++++++++---- .../utils/state_management/metadata_slice.ts | 38 ------------------- .../utils/state_management/preload.ts | 3 -- .../utils/state_management/store.ts | 2 - 5 files changed, 26 insertions(+), 61 deletions(-) delete mode 100644 src/plugins/wizard/public/application/utils/state_management/metadata_slice.ts diff --git a/src/plugins/wizard/public/application/components/top_nav.tsx b/src/plugins/wizard/public/application/components/top_nav.tsx index a510c1329ac..b1427e01523 100644 --- a/src/plugins/wizard/public/application/components/top_nav.tsx +++ b/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 /> ); diff --git a/src/plugins/wizard/public/application/components/workspace.tsx b/src/plugins/wizard/public/application/components/workspace.tsx index 02d9234ac1a..17565a1d000 100644 --- a/src/plugins/wizard/public/application/components/workspace.tsx +++ b/src/plugins/wizard/public/application/components/workspace.tsx @@ -14,7 +14,7 @@ import { EuiPanel, EuiPopover, } from '@elastic/eui'; -import React, { FC, useState, useMemo, useEffect, Fragment } 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'; @@ -33,10 +33,16 @@ export const Workspace: FC = ({ children }) => { services: { expressions: { ReactExpressionRenderer }, notifications: { toasts }, + data, }, } = useOpenSearchDashboards(); const { toExpression, ui } = useVisualizationType(); const [expression, setExpression] = useState(); + const [searchContext, setSearchContext] = useState({ + query: data.query.queryString.getQuery(), + filters: data.query.filterManager.getFilters(), + timeRange: data.query.timefilter.timefilter.getTime(), + }); const rootState = useTypedSelector((state) => state); useEffect(() => { @@ -58,10 +64,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 (
@@ -78,7 +93,7 @@ export const Workspace: FC = ({ children }) => { Drop some fields here to start} body={ - + <>

Drag a field directly to the canvas or axis to generate a visualization.

@@ -88,7 +103,7 @@ export const Workspace: FC = ({ children }) => { size="original" /> - + } /> diff --git a/src/plugins/wizard/public/application/utils/state_management/metadata_slice.ts b/src/plugins/wizard/public/application/utils/state_management/metadata_slice.ts deleted file mode 100644 index e9678ed8545..00000000000 --- a/src/plugins/wizard/public/application/utils/state_management/metadata_slice.ts +++ /dev/null @@ -1,38 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import { createSlice, PayloadAction } from '@reduxjs/toolkit'; -import { Query, TimeRange } from '../../../../../data/common'; -import { WizardServices } from '../../../types'; - -interface MetadataState { - query?: Query; - dateRange?: TimeRange; -} - -const initialState = {} as MetadataState; - -export const getPreloadedState = async ({ - types, - data, -}: WizardServices): Promise => { - const preloadedState = initialState; - - return preloadedState; -}; - -export const metadataSlice = createSlice({ - name: 'metadata', - initialState, - reducers: { - setTopNav: (state, action: PayloadAction<{ query?: Query; dateRange: TimeRange }>) => { - state.query = action.payload.query; - state.dateRange = action.payload.dateRange; - }, - }, -}); - -export const { reducer } = metadataSlice; -export const { setTopNav } = metadataSlice.actions; diff --git a/src/plugins/wizard/public/application/utils/state_management/preload.ts b/src/plugins/wizard/public/application/utils/state_management/preload.ts index 1d96608e33c..d9cefa21a06 100644 --- a/src/plugins/wizard/public/application/utils/state_management/preload.ts +++ b/src/plugins/wizard/public/application/utils/state_management/preload.ts @@ -7,7 +7,6 @@ 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 ( @@ -15,11 +14,9 @@ export const getPreloadedState = async ( ): Promise> => { const styleState = await getPreloadedStyleState(services); const visualizationState = await getPreloadedVisualizationState(services); - const metadataState = await getPreloadedMetadataState(services); return { style: styleState, visualization: visualizationState, - metadata: metadataState, }; }; diff --git a/src/plugins/wizard/public/application/utils/state_management/store.ts b/src/plugins/wizard/public/application/utils/state_management/store.ts index 932a5f4d891..d8fff094cd1 100644 --- a/src/plugins/wizard/public/application/utils/state_management/store.ts +++ b/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) => {