From cfa908742726b71c40bd3dc97915b161596c4144 Mon Sep 17 00:00:00 2001 From: "Qingyang(Abby) Hu" Date: Fri, 7 Jul 2023 14:03:59 -0700 Subject: [PATCH] [Dashboard De-Angular] Cypress fix (#4521) * fix cypress Signed-off-by: abbyhu2000 * refactor css files Signed-off-by: abbyhu2000 --------- Signed-off-by: abbyhu2000 --- .../embeddable/_dashboard_container.scss | 4 ++ .../embeddable/dashboard_container.tsx | 3 ++ .../embeddable/grid/_dashboard_grid.scss | 3 +- .../embeddable/grid/dashboard_grid.tsx | 1 - .../utils/create_dashboard_app_state.tsx | 41 +++++++++++++------ .../application/utils/get_nav_actions.tsx | 3 +- .../utils/use/use_dashboard_container.tsx | 15 +++++++ 7 files changed, 54 insertions(+), 16 deletions(-) create mode 100644 src/plugins/dashboard/public/application/embeddable/_dashboard_container.scss diff --git a/src/plugins/dashboard/public/application/embeddable/_dashboard_container.scss b/src/plugins/dashboard/public/application/embeddable/_dashboard_container.scss new file mode 100644 index 000000000000..30774d469b85 --- /dev/null +++ b/src/plugins/dashboard/public/application/embeddable/_dashboard_container.scss @@ -0,0 +1,4 @@ +@import "../../../../embeddable/public/variables"; +@import "./grid/index"; +@import "./panel/index"; +@import "./viewport/index"; diff --git a/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx b/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx index 8fe5fbd7974d..7159527325c1 100644 --- a/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx +++ b/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx @@ -28,6 +28,8 @@ * under the License. */ +import './_dashboard_container.scss'; + import React from 'react'; import ReactDOM from 'react-dom'; import { I18nProvider } from '@osd/i18n/react'; @@ -112,6 +114,7 @@ export class DashboardContainer extends Container React.ReactNode); public getChangesFromAppStateForContainerState?: (containerInput: any) => any; + public updateAppStateUrl?: undefined | ((pathname: string, replace: boolean) => void); private embeddablePanel: EmbeddableStart['EmbeddablePanel']; diff --git a/src/plugins/dashboard/public/application/embeddable/grid/_dashboard_grid.scss b/src/plugins/dashboard/public/application/embeddable/grid/_dashboard_grid.scss index 019667bec13f..7259ab9d9f66 100644 --- a/src/plugins/dashboard/public/application/embeddable/grid/_dashboard_grid.scss +++ b/src/plugins/dashboard/public/application/embeddable/grid/_dashboard_grid.scss @@ -81,8 +81,7 @@ &:hover, &:focus { - // TODO: this is a sass error, $embEditingModeHoverColor is undefined, comment it out for now - // background-color: $embEditingModeHoverColor; + background-color: $embEditingModeHoverColor; } } diff --git a/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.tsx b/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.tsx index ea58e82a88c5..e49999383712 100644 --- a/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.tsx +++ b/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.tsx @@ -30,7 +30,6 @@ import 'react-grid-layout/css/styles.css'; import 'react-resizable/css/styles.css'; -import './_dashboard_grid.scss'; // @ts-ignore import sizeMe from 'react-sizeme'; diff --git a/src/plugins/dashboard/public/application/utils/create_dashboard_app_state.tsx b/src/plugins/dashboard/public/application/utils/create_dashboard_app_state.tsx index 8724533eaee6..e62aa2593f02 100644 --- a/src/plugins/dashboard/public/application/utils/create_dashboard_app_state.tsx +++ b/src/plugins/dashboard/public/application/utils/create_dashboard_app_state.tsx @@ -75,14 +75,6 @@ export const createDashboardGlobalAndAppState = ({ pureTransitions ); - const toUrlState = (state: DashboardAppState): DashboardAppStateInUrl => { - if (state.viewMode === ViewMode.VIEW) { - const { panels, ...stateWithoutPanels } = state; - return stateWithoutPanels; - } - return state; - }; - const { start: startStateSync, stop: stopStateSync } = syncState({ storageKey: APP_STATE_STORAGE_KEY, stateContainer: { @@ -133,12 +125,37 @@ export const createDashboardGlobalAndAppState = ({ we update the state format at all and want to handle BWC, we must not only migrate the data stored with saved vis, but also any old state in the url. */ - osdUrlStateStorage.set(APP_STATE_STORAGE_KEY, toUrlState(initialState), { replace: true }); + const updateStateUrl = ({ state, replace }: { state: DashboardAppState; replace: boolean }) => { + osdUrlStateStorage.set(APP_STATE_STORAGE_KEY, toUrlState(state), { replace }); + // immediately forces scheduled updates and changes location + return osdUrlStateStorage.flush({ replace }); + }; - // immediately forces scheduled updates and changes location - osdUrlStateStorage.flush({ replace: true }); + updateStateUrl({ state: initialState, replace: true }); // start syncing the appState with the ('_a') url startStateSync(); - return { stateContainer, stopStateSync, stopSyncingQueryServiceStateWithUrl }; + return { stateContainer, stopStateSync, updateStateUrl, stopSyncingQueryServiceStateWithUrl }; +}; + +const toUrlState = (state: DashboardAppState): DashboardAppStateInUrl => { + if (state.viewMode === ViewMode.VIEW) { + const { panels, ...stateWithoutPanels } = state; + return stateWithoutPanels; + } + return state; +}; + +export const updateStateUrl = ({ + osdUrlStateStorage, + state, + replace, +}: { + osdUrlStateStorage: IOsdUrlStateStorage; + state: DashboardAppState; + replace: boolean; +}) => { + osdUrlStateStorage.set(APP_STATE_STORAGE_KEY, toUrlState(state), { replace }); + // immediately forces scheduled updates and changes location + return osdUrlStateStorage.flush({ replace }); }; diff --git a/src/plugins/dashboard/public/application/utils/get_nav_actions.tsx b/src/plugins/dashboard/public/application/utils/get_nav_actions.tsx index 649f86cd93b1..bddad2bd53a6 100644 --- a/src/plugins/dashboard/public/application/utils/get_nav_actions.tsx +++ b/src/plugins/dashboard/public/application/utils/get_nav_actions.tsx @@ -311,7 +311,8 @@ export const getNavActions = ( const pathname = savedDashboard.id ? createDashboardEditUrl(savedDashboard.id) : DashboardConstants.CREATE_NEW_DASHBOARD_URL; - history.push(pathname); + + dashboardContainer?.updateAppStateUrl?.(pathname, false); // This is only necessary for new dashboards, which will default to Edit mode. stateContainer.transitions.set('viewMode', ViewMode.VIEW); diff --git a/src/plugins/dashboard/public/application/utils/use/use_dashboard_container.tsx b/src/plugins/dashboard/public/application/utils/use/use_dashboard_container.tsx index 27d7094784dc..27248a3d8943 100644 --- a/src/plugins/dashboard/public/application/utils/use/use_dashboard_container.tsx +++ b/src/plugins/dashboard/public/application/utils/use/use_dashboard_container.tsx @@ -51,6 +51,7 @@ import { getSavedObjectFinder } from '../../../../../saved_objects/public'; import { DashboardConstants } from '../../../dashboard_constants'; import { SavedObjectDashboard } from '../../../saved_dashboards'; import { Dashboard } from '../../../dashboard'; +import { updateStateUrl } from '../create_dashboard_app_state'; export const useDashboardContainer = ( services: DashboardServices, @@ -128,6 +129,8 @@ const createDashboardEmbeddable = ( notifications, overlays, savedObjects, + history, + osdUrlStateStorage, } = dashboardServices; const { query: queryService } = data; const filterManager = queryService.filterManager; @@ -299,6 +302,18 @@ const createDashboardEmbeddable = ( ) : null; }; + dashboardContainer.updateAppStateUrl = (pathname: string, replace: boolean) => { + const updated = updateStateUrl({ + osdUrlStateStorage, + state: appState.getState(), + replace, + }); + history[updated ? 'replace' : 'push']({ + ...history.location, + pathname, + }); + }; + dashboardContainer.getChangesFromAppStateForContainerState = (currentContainer: any) => { const appStateDashboardInput = getDashboardInput(); if (!dashboardContainer || isErrorEmbeddable(dashboardContainer)) {