[Time to Visualize] Remove Panels from URL

src/plugins/dashboard/public/application/_dashboard_app.scss

@@ -33,3 +33,11 @@
   margin-left: $euiSizeS;
   text-align: center;
 }
+
+.dshUnsavedListingItemTitle {
+  margin-bottom: 0 !important;
+}
+
+.dshUnsavedListingButtons {
+  margin-left: 15px;
+}

src/plugins/dashboard/public/application/dashboard_router.tsx

@@ -26,12 +26,17 @@ import { Switch, Route, RouteComponentProps, HashRouter, Redirect } from 'react-
 
 import { DashboardListing } from './listing';
 import { DashboardApp } from './dashboard_app';
-import { addHelpMenuToAppChrome } from './lib';
+import { addHelpMenuToAppChrome, DashboardPanelStorage } from './lib';
 import { createDashboardListingFilterUrl } from '../dashboard_constants';
 import { getDashboardPageTitle, dashboardReadonlyBadge } from '../dashboard_strings';
 import { createDashboardEditUrl, DashboardConstants } from '../dashboard_constants';
 import { DashboardAppServices, DashboardEmbedSettings, RedirectToProps } from './types';
-import { DashboardSetupDependencies, DashboardStart, DashboardStartDependencies } from '../plugin';
+import {
+  DashboardFeatureFlagConfig,
+  DashboardSetupDependencies,
+  DashboardStart,
+  DashboardStartDependencies,
+} from '../plugin';
 
 import { createKbnUrlStateStorage, withNotifyOnErrors } from '../services/kibana_utils';
 import { KibanaContextProvider } from '../services/kibana_react';
@@ -105,8 +110,11 @@ export async function mountApp({
     indexPatterns: dataStart.indexPatterns,
     savedQueryService: dataStart.query.savedQueries,
     savedObjectsClient: coreStart.savedObjects.client,
+    dashboardPanelStorage: new DashboardPanelStorage(),
     savedDashboards: dashboardStart.getSavedDashboardLoader(),
     savedObjectsTagging: savedObjectsTaggingOss?.getTaggingApi(),
+    allowByValueEmbeddables: initializerContext.config.get<DashboardFeatureFlagConfig>()
+      .allowByValueEmbeddables,
     dashboardCapabilities: {
       hideWriteControls: dashboardConfig.getHideWriteControls(),
       show: Boolean(coreStart.application.capabilities.dashboard.show),
@@ -132,7 +140,7 @@ export async function mountApp({
     let destination;
     if (redirectTo.destination === 'dashboard') {
       destination = redirectTo.id
-        ? createDashboardEditUrl(redirectTo.id)
+        ? createDashboardEditUrl(redirectTo.id, redirectTo.editMode)
         : DashboardConstants.CREATE_NEW_DASHBOARD_URL;
     } else {
       destination = createDashboardListingFilterUrl(redirectTo.filter);

src/plugins/dashboard/public/application/dashboard_state.test.ts

@@ -52,6 +52,7 @@ describe('DashboardState', function () {
     dashboardState = new DashboardStateManager({
       savedDashboard,
       hideWriteControls: false,
+      allowByValueEmbeddables: false,
       kibanaVersion: '7.0.0',
       kbnUrlStateStorage: createKbnUrlStateStorage(),
       history: createBrowserHistory(),

src/plugins/dashboard/public/application/dashboard_state_manager.ts

@@ -27,7 +27,12 @@ import { FilterUtils } from './lib/filter_utils';
 import { DashboardContainer } from './embeddable';
 import { DashboardSavedObject } from '../saved_dashboards';
 import { migrateLegacyQuery } from './lib/migrate_legacy_query';
-import { getAppStateDefaults, migrateAppState, getDashboardIdFromUrl } from './lib';
+import {
+  getAppStateDefaults,
+  migrateAppState,
+  getDashboardIdFromUrl,
+  DashboardPanelStorage,
+} from './lib';
 import { convertPanelStateToSavedDashboardPanel } from '../../common/embeddable/embeddable_saved_object_converters';
 import {
   DashboardAppState,
@@ -48,6 +53,7 @@ import {
   ReduxLikeStateContainer,
   syncState,
 } from '../services/kibana_utils';
+import { STATE_STORAGE_KEY } from '../url_generator';
 
 /**
  * Dashboard state manager handles connecting angular and redux state between the angular and react portions of the
@@ -82,10 +88,11 @@ export class DashboardStateManager {
     DashboardAppStateTransitions
   >;
   private readonly stateContainerChangeSub: Subscription;
-  private readonly STATE_STORAGE_KEY = '_a';
   private readonly kbnUrlStateStorage: IKbnUrlStateStorage;
+  private readonly dashboardPanelStorage?: DashboardPanelStorage;
   private readonly stateSyncRef: ISyncStateRef;
-  private readonly history: History;
+  private readonly allowByValueEmbeddables: boolean;
+
   private readonly usageCollection: UsageCollectionSetup | undefined;
   public readonly hasTaggingCapabilities: SavedObjectTagDecoratorTypeGuard;
 
@@ -97,49 +104,62 @@ export class DashboardStateManager {
    * @param
    */
   constructor({
+    history,
+    kibanaVersion,
     savedDashboard,
+    usageCollection,
     hideWriteControls,
-    kibanaVersion,
     kbnUrlStateStorage,
-    history,
-    usageCollection,
+    dashboardPanelStorage,
     hasTaggingCapabilities,
+    allowByValueEmbeddables,
   }: {
-    savedDashboard: DashboardSavedObject;
-    hideWriteControls: boolean;
-    kibanaVersion: string;
-    kbnUrlStateStorage: IKbnUrlStateStorage;
     history: History;
+    kibanaVersion: string;
+    hideWriteControls: boolean;
+    allowByValueEmbeddables: boolean;
+    savedDashboard: DashboardSavedObject;
     usageCollection?: UsageCollectionSetup;
+    kbnUrlStateStorage: IKbnUrlStateStorage;
+    dashboardPanelStorage?: DashboardPanelStorage;
     hasTaggingCapabilities: SavedObjectTagDecoratorTypeGuard;
   }) {
-    this.history = history;
     this.kibanaVersion = kibanaVersion;
     this.savedDashboard = savedDashboard;
     this.hideWriteControls = hideWriteControls;
     this.usageCollection = usageCollection;
     this.hasTaggingCapabilities = hasTaggingCapabilities;
+    this.allowByValueEmbeddables = allowByValueEmbeddables;
 
     // get state defaults from saved dashboard, make sure it is migrated
     this.stateDefaults = migrateAppState(
       getAppStateDefaults(this.savedDashboard, this.hideWriteControls, this.hasTaggingCapabilities),
       kibanaVersion,
       usageCollection
     );
-
+    this.dashboardPanelStorage = dashboardPanelStorage;
     this.kbnUrlStateStorage = kbnUrlStateStorage;
 
-    // setup initial state by merging defaults with state from url
+    // setup initial state by merging defaults with state from url & panels storage
     // also run migration, as state in url could be of older version
+    const initialUrlState = this.kbnUrlStateStorage.get<DashboardAppState>(STATE_STORAGE_KEY);
     const initialState = migrateAppState(
       {
         ...this.stateDefaults,
-        ...this.kbnUrlStateStorage.get<DashboardAppState>(this.STATE_STORAGE_KEY),
+        ...this.getUnsavedPanelState(),
+        ...initialUrlState,
       },
       kibanaVersion,
       usageCollection
     );
 
+    this.isDirty = false;
+
+    if (initialUrlState?.panels && !_.isEqual(initialUrlState.panels, this.stateDefaults.panels)) {
+      this.isDirty = true;
+      this.setUnsavedPanels(initialState.panels);
+    }
+
     // setup state container using initial state both from defaults and from url
     this.stateContainer = createStateContainer<DashboardAppState, DashboardAppStateTransitions>(
       initialState,
@@ -155,8 +175,6 @@ export class DashboardStateManager {
       }
     );
 
-    this.isDirty = false;
-
     // We can't compare the filters stored on this.appState to this.savedDashboard because in order to apply
     // the filters to the visualizations, we need to save it on the dashboard. We keep track of the original
     // filter state in order to let the user know if their filters changed and provide this specific information
@@ -170,16 +188,16 @@ export class DashboardStateManager {
       this.changeListeners.forEach((listener) => listener({ dirty: this.isDirty }));
     });
 
-    // setup state syncing utils. state container will be synced with url into `this.STATE_STORAGE_KEY` query param
+    // setup state syncing utils. state container will be synced with url into `STATE_STORAGE_KEY` query param
     this.stateSyncRef = syncState<DashboardAppStateInUrl>({
-      storageKey: this.STATE_STORAGE_KEY,
+      storageKey: STATE_STORAGE_KEY,
       stateContainer: {
         ...this.stateContainer,
         get: () => this.toUrlState(this.stateContainer.get()),
-        set: (state: DashboardAppStateInUrl | null) => {
+        set: (stateFromUrl: DashboardAppStateInUrl | null) => {
           // sync state required state container to be able to handle null
           // overriding set() so it could handle null coming from url
-          if (state) {
+          if (stateFromUrl) {
             // Skip this update if current dashboardId in the url is different from what we have in the current instance of state manager
             // As dashboard is driven by angular at the moment, the destroy cycle happens async,
             // If the dashboardId has changed it means this instance
@@ -188,9 +206,15 @@ export class DashboardStateManager {
             const currentDashboardIdInUrl = getDashboardIdFromUrl(history.location.pathname);
             if (currentDashboardIdInUrl !== this.savedDashboard.id) return;
 
+            // set View mode before the rest of the state so unsaved panels can be added correctly.
+            if (this.appState.viewMode !== stateFromUrl.viewMode) {
+              this.switchViewMode(stateFromUrl.viewMode);
+            }
+
             this.stateContainer.set({
               ...this.stateDefaults,
-              ...state,
+              ...this.getUnsavedPanelState(),
+              ...stateFromUrl,
             });
           } else {
             // Do nothing in case when state from url is empty,
@@ -271,6 +295,13 @@ export class DashboardStateManager {
       this.stateContainer.transitions.set('panels', Object.values(convertedPanelStateMap));
       if (dirtyBecauseOfInitialStateMigration) {
         this.saveState({ replace: true });
+      } else {
+        this.setUnsavedPanels(this.getPanels());
+      }
+
+      // If a panel has been changed, and the state is now equal to the state in the saved object, remove the unsaved panels
+      if (!this.isDirty && this.getIsEditMode()) {
+        this.clearUnsavedPanels();
       }
     }
 
@@ -494,7 +525,16 @@ export class DashboardStateManager {
   }
 
   public getViewMode() {
-    return this.hideWriteControls ? ViewMode.VIEW : this.appState.viewMode;
+    if (this.hideWriteControls) {
+      return ViewMode.VIEW;
+    }
+    if (this.stateContainer) {
+      return this.appState.viewMode;
+    }
+    // get viewMode should work properly even before the state container is created
+    return this.savedDashboard.id
+      ? this.kbnUrlStateStorage.get<DashboardAppState>(STATE_STORAGE_KEY)?.viewMode ?? ViewMode.VIEW
+      : ViewMode.EDIT;
   }
 
   public getIsViewMode() {
@@ -603,29 +643,13 @@ export class DashboardStateManager {
   private saveState({ replace }: { replace: boolean }): boolean {
     // schedules setting current state to url
     this.kbnUrlStateStorage.set<DashboardAppStateInUrl>(
-      this.STATE_STORAGE_KEY,
+      STATE_STORAGE_KEY,
       this.toUrlState(this.stateContainer.get())
     );
     // immediately forces scheduled updates and changes location
     return this.kbnUrlStateStorage.flush({ replace });
   }
 
-  // TODO: find nicer solution for this
-  // this function helps to make just 1 browser history update, when we imperatively changing the dashboard url
-  // It could be that there is pending *dashboardStateManager* updates, which aren't flushed yet to the url.
-  // So to prevent 2 browser updates:
-  // 1. Force flush any pending state updates (syncing state to query)
-  // 2. If url was updated, then apply path change with replace
-  public changeDashboardUrl(pathname: string) {
-    // synchronously persist current state to url with push()
-    const updated = this.saveState({ replace: false });
-    // change pathname
-    this.history[updated ? 'replace' : 'push']({
-      ...this.history.location,
-      pathname,
-    });
-  }
-
   public setQuery(query: Query) {
     this.stateContainer.transitions.set('query', query);
   }
@@ -655,6 +679,59 @@ export class DashboardStateManager {
     }
   }
 
+  public restorePanels() {
+    const unsavedState = this.getUnsavedPanelState();
+    if (!unsavedState || unsavedState.panels?.length === 0) {
+      return;
+    }
+    this.stateContainer.set(
+      migrateAppState(
+        {
+          ...this.stateDefaults,
+          ...unsavedState,
+          ...this.kbnUrlStateStorage.get<DashboardAppState>(STATE_STORAGE_KEY),
+        },
+        this.kibanaVersion,
+        this.usageCollection
+      )
+    );
+  }
+
+  public clearUnsavedPanels() {
+    if (!this.allowByValueEmbeddables || !this.dashboardPanelStorage) {
+      return;
+    }
+    this.dashboardPanelStorage.clearPanels(this.savedDashboard?.id);
+  }
+
+  private getUnsavedPanelState(): { panels?: SavedDashboardPanel[] } {
+    if (!this.allowByValueEmbeddables || this.getIsViewMode() || !this.dashboardPanelStorage) {
+      return {};
+    }
+    const panels = this.dashboardPanelStorage.getPanels(this.savedDashboard?.id);
+    return panels ? { panels } : {};
+  }
+
+  private setUnsavedPanels(newPanels: SavedDashboardPanel[]) {
+    if (
+      !this.allowByValueEmbeddables ||
+      this.getIsViewMode() ||
+      !this.getIsDirty() ||
+      !this.dashboardPanelStorage
+    ) {
+      return;
+    }
+    this.dashboardPanelStorage.setPanels(this.savedDashboard?.id, newPanels);
+  }
+
+  private toUrlState(state: DashboardAppState): DashboardAppStateInUrl {
+    if (this.getIsEditMode() && !this.allowByValueEmbeddables) {
+      return state;
+    }
+    const { panels, ...stateWithoutPanels } = state;
+    return stateWithoutPanels;
+  }
+
   private checkIsDirty() {
     // Filters need to be compared manually because they sometimes have a $$hashkey stored on the object.
     // Query needs to be compared manually because saved legacy queries get migrated in app state automatically
@@ -664,13 +741,4 @@ export class DashboardStateManager {
     const current = _.omit(this.stateContainer.get(), propsToIgnore);
     return !_.isEqual(initial, current);
   }
-
-  private toUrlState(state: DashboardAppState): DashboardAppStateInUrl {
-    if (state.viewMode === ViewMode.VIEW) {
-      const { panels, ...stateWithoutPanels } = state;
-      return stateWithoutPanels;
-    }
-
-    return state;
-  }
 }