[Dashboard De-Angular] Cypress fix

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";

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<InheritedChildInput, Dashboard
 
  public renderEmpty?: undefined | (() => React.ReactNode);
  public getChangesFromAppStateForContainerState?: (containerInput: any) => any;
+ public updateAppStateUrl?: undefined | ((pathname: string, replace: boolean) => void);
 
  private embeddablePanel: EmbeddableStart['EmbeddablePanel'];
 

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;
  }
  }
 

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';

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 });
 };

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);

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)) {