From 58eaf6901be97e7df79c8d92f937fa862d9cea51 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 3 Jan 2023 22:00:18 +0000 Subject: [PATCH] [Vis Builder] Add redux store persistence (#3088) * add redux store persistence implement persistence without using state container or state sync utils, and it works with both the URL and session storage. Signed-off-by: abbyhu2000 * changelog and rebase Signed-off-by: abbyhu2000 * Console log the error Signed-off-by: abbyhu2000 * rebase and changelog Signed-off-by: abbyhu2000 * add unit tests Signed-off-by: abbyhu2000 Signed-off-by: abbyhu2000 (cherry picked from commit bfc59d44daf8b3891f1e89afff4dcaed048f3b49) Signed-off-by: github-actions[bot] # Conflicts: # CHANGELOG.md --- src/plugins/data/public/mocks.ts | 6 +++ .../public/application/utils/mocks.ts | 19 ++++++- .../redux_persistence.test.tsx | 53 +++++++++++++++++++ .../state_management/redux_persistence.ts | 38 +++++++++++++ .../utils/state_management/store.ts | 13 ++++- 5 files changed, 126 insertions(+), 3 deletions(-) create mode 100644 src/plugins/vis_builder/public/application/utils/state_management/redux_persistence.test.tsx create mode 100644 src/plugins/vis_builder/public/application/utils/state_management/redux_persistence.ts diff --git a/src/plugins/data/public/mocks.ts b/src/plugins/data/public/mocks.ts index 27ea95100000..8beb241f8768 100644 --- a/src/plugins/data/public/mocks.ts +++ b/src/plugins/data/public/mocks.ts @@ -85,6 +85,12 @@ const createStartContract = (): Start => { }, }), get: jest.fn().mockReturnValue(Promise.resolve({})), + getDefault: jest.fn().mockReturnValue( + Promise.resolve({ + name: 'Default name', + id: 'id', + }) + ), clearCache: jest.fn(), } as unknown) as IndexPatternsContract, }; diff --git a/src/plugins/vis_builder/public/application/utils/mocks.ts b/src/plugins/vis_builder/public/application/utils/mocks.ts index df0687efaa6b..6feb98aaa930 100644 --- a/src/plugins/vis_builder/public/application/utils/mocks.ts +++ b/src/plugins/vis_builder/public/application/utils/mocks.ts @@ -9,6 +9,7 @@ import { dataPluginMock } from '../../../../data/public/mocks'; import { embeddablePluginMock } from '../../../../embeddable/public/mocks'; import { expressionsPluginMock } from '../../../../expressions/public/mocks'; import { navigationPluginMock } from '../../../../navigation/public/mocks'; +import { createOsdUrlStateStorage } from '../../../../opensearch_dashboards_utils/public'; import { VisBuilderServices } from '../../types'; export const createVisBuilderServicesMock = () => { @@ -16,10 +17,11 @@ export const createVisBuilderServicesMock = () => { const toastNotifications = coreStartMock.notifications.toasts; const applicationMock = coreStartMock.application; const i18nContextMock = coreStartMock.i18n.Context; - const indexPatternMock = dataPluginMock.createStartContract().indexPatterns; + const indexPatternMock = dataPluginMock.createStartContract(); const embeddableMock = embeddablePluginMock.createStartContract(); const navigationMock = navigationPluginMock.createStartContract(); const expressionMock = expressionsPluginMock.createStartContract(); + const osdUrlStateStorageMock = createOsdUrlStateStorage({ useHash: false }); const visBuilderServicesMock = { ...coreStartMock, @@ -39,6 +41,21 @@ export const createVisBuilderServicesMock = () => { data: indexPatternMock, embeddable: embeddableMock, scopedHistory: (scopedHistoryMock.create() as unknown) as ScopedHistory, + osdUrlStateStorage: osdUrlStateStorageMock, + types: { + all: () => [ + { + name: 'viz', + ui: { + containerConfig: { + style: { + defaults: 'style default states', + }, + }, + }, + }, + ], + }, }; return (visBuilderServicesMock as unknown) as jest.Mocked; diff --git a/src/plugins/vis_builder/public/application/utils/state_management/redux_persistence.test.tsx b/src/plugins/vis_builder/public/application/utils/state_management/redux_persistence.test.tsx new file mode 100644 index 000000000000..ea3db25fbea0 --- /dev/null +++ b/src/plugins/vis_builder/public/application/utils/state_management/redux_persistence.test.tsx @@ -0,0 +1,53 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { VisBuilderServices } from '../../../types'; +import { createVisBuilderServicesMock } from '../mocks'; +import { getPreloadedState } from './preload'; +import { loadReduxState, saveReduxState } from './redux_persistence'; + +describe('test redux state persistence', () => { + let mockServices: jest.Mocked; + let reduxStateParams: any; + + beforeEach(() => { + mockServices = createVisBuilderServicesMock(); + reduxStateParams = { + style: 'style', + visualization: 'visualization', + metadata: 'metadata', + }; + }); + + test('test load redux state when url is empty', async () => { + const defaultStates = { + style: 'style default states', + visualization: { + searchField: '', + activeVisualization: { name: 'viz', aggConfigParams: [] }, + indexPattern: 'id', + }, + metadata: { + editor: { validity: {}, state: 'loading' }, + originatingApp: undefined, + }, + }; + + const returnStates = await loadReduxState(mockServices); + expect(returnStates).toStrictEqual(defaultStates); + }); + + test('test load redux state', async () => { + mockServices.osdUrlStateStorage.set('_a', reduxStateParams, { replace: true }); + const returnStates = await loadReduxState(mockServices); + expect(returnStates).toStrictEqual(reduxStateParams); + }); + + test('test save redux state', () => { + saveReduxState(reduxStateParams, mockServices); + const urlStates = mockServices.osdUrlStateStorage.get('_a'); + expect(urlStates).toStrictEqual(reduxStateParams); + }); +}); diff --git a/src/plugins/vis_builder/public/application/utils/state_management/redux_persistence.ts b/src/plugins/vis_builder/public/application/utils/state_management/redux_persistence.ts new file mode 100644 index 000000000000..295d3e2b4478 --- /dev/null +++ b/src/plugins/vis_builder/public/application/utils/state_management/redux_persistence.ts @@ -0,0 +1,38 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { VisBuilderServices } from '../../../types'; +import { getPreloadedState } from './preload'; +import { RootState } from './store'; + +export const loadReduxState = async (services: VisBuilderServices) => { + try { + const serializedState = services.osdUrlStateStorage.get('_a'); + if (serializedState !== null) return serializedState; + } catch (err) { + /* eslint-disable no-console */ + console.error(err); + /* eslint-enable no-console */ + } + + return await getPreloadedState(services); +}; + +export const saveReduxState = ( + { style, visualization, metadata }, + services: VisBuilderServices +) => { + try { + services.osdUrlStateStorage.set( + '_a', + { style, visualization, metadata }, + { + replace: true, + } + ); + } catch (err) { + return; + } +}; diff --git a/src/plugins/vis_builder/public/application/utils/state_management/store.ts b/src/plugins/vis_builder/public/application/utils/state_management/store.ts index f02fc5e946dd..19f60858b19d 100644 --- a/src/plugins/vis_builder/public/application/utils/state_management/store.ts +++ b/src/plugins/vis_builder/public/application/utils/state_management/store.ts @@ -8,8 +8,8 @@ import { reducer as styleReducer } from './style_slice'; import { reducer as visualizationReducer } from './visualization_slice'; import { reducer as metadataReducer } from './metadata_slice'; import { VisBuilderServices } from '../../..'; -import { getPreloadedState } from './preload'; import { setEditorState } from './metadata_slice'; +import { loadReduxState, saveReduxState } from './redux_persistence'; const rootReducer = combineReducers({ style: styleReducer, @@ -25,7 +25,7 @@ export const configurePreloadedStore = (preloadedState: PreloadedState { - const preloadedState = await getPreloadedState(services); + const preloadedState = await loadReduxState(services); const store = configurePreloadedStore(preloadedState); const { metadata: metadataState, style: styleState, visualization: vizState } = store.getState(); @@ -62,6 +62,15 @@ export const getPreloadedStore = async (services: VisBuilderServices) => { previousStore = currentStore; previousMetadata = currentMetadata; + + saveReduxState( + { + style: store.getState().style, + visualization: store.getState().visualization, + metadata: store.getState().metadata, + }, + services + ); }; // the store subscriber will automatically detect changes and call handleChange function