[Dashboard De-Angular] Cypress fix (#4521)

* fix cypress

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

* refactor css files

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

---------

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

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