[Time to Visualize] Transition Embeddable State Transfer to Session S…

…torage (#85688)

* Transitioned embeddable state transfer service to use sessionStorage

docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestart.getstatetransfer.md

@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-getStateTransfer: (history?: ScopedHistory) => EmbeddableStateTransfer;
+getStateTransfer: (storage?: Storage) => EmbeddableStateTransfer;
 ```

docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestart.md

@@ -18,6 +18,5 @@ export interface EmbeddableStart extends PersistableStateService<EmbeddableState
 |  [getAttributeService](./kibana-plugin-plugins-embeddable-public.embeddablestart.getattributeservice.md) | <code>&lt;A extends {</code><br/><code>        title: string;</code><br/><code>    }, V extends EmbeddableInput &amp; {</code><br/><code>        [ATTRIBUTE_SERVICE_KEY]: A;</code><br/><code>    } = EmbeddableInput &amp; {</code><br/><code>        [ATTRIBUTE_SERVICE_KEY]: A;</code><br/><code>    }, R extends SavedObjectEmbeddableInput = SavedObjectEmbeddableInput&gt;(type: string, options: AttributeServiceOptions&lt;A&gt;) =&gt; AttributeService&lt;A, V, R&gt;</code> |  |
 |  [getEmbeddableFactories](./kibana-plugin-plugins-embeddable-public.embeddablestart.getembeddablefactories.md) | <code>() =&gt; IterableIterator&lt;EmbeddableFactory&gt;</code> |  |
 |  [getEmbeddableFactory](./kibana-plugin-plugins-embeddable-public.embeddablestart.getembeddablefactory.md) | <code>&lt;I extends EmbeddableInput = EmbeddableInput, O extends EmbeddableOutput = EmbeddableOutput, E extends IEmbeddable&lt;I, O&gt; = IEmbeddable&lt;I, O&gt;&gt;(embeddableFactoryId: string) =&gt; EmbeddableFactory&lt;I, O, E&gt; &#124; undefined</code> |  |
-|  [getEmbeddablePanel](./kibana-plugin-plugins-embeddable-public.embeddablestart.getembeddablepanel.md) | <code>(stateTransfer?: EmbeddableStateTransfer) =&gt; EmbeddablePanelHOC</code> |  |
-|  [getStateTransfer](./kibana-plugin-plugins-embeddable-public.embeddablestart.getstatetransfer.md) | <code>(history?: ScopedHistory) =&gt; EmbeddableStateTransfer</code> |  |
+|  [getStateTransfer](./kibana-plugin-plugins-embeddable-public.embeddablestart.getstatetransfer.md) | <code>(storage?: Storage) =&gt; EmbeddableStateTransfer</code> |  |
 

docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestatetransfer._constructor_.md

@@ -9,14 +9,14 @@ Constructs a new instance of the `EmbeddableStateTransfer` class
 <b>Signature:</b>
 
 ```typescript
-constructor(navigateToApp: ApplicationStart['navigateToApp'], scopedHistory?: ScopedHistory<unknown> | undefined, appList?: ReadonlyMap<string, PublicAppInfo> | undefined);
+constructor(navigateToApp: ApplicationStart['navigateToApp'], appList?: ReadonlyMap<string, PublicAppInfo> | undefined, customStorage?: Storage);
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
 |  navigateToApp | <code>ApplicationStart['navigateToApp']</code> |  |
-|  scopedHistory | <code>ScopedHistory&lt;unknown&gt; &#124; undefined</code> |  |
 |  appList | <code>ReadonlyMap&lt;string, PublicAppInfo&gt; &#124; undefined</code> |  |
+|  customStorage | <code>Storage</code> |  |
 

docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.cleareditorstate.md

@@ -0,0 +1,15 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-plugins-embeddable-public](./kibana-plugin-plugins-embeddable-public.md) &gt; [EmbeddableStateTransfer](./kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.md) &gt; [clearEditorState](./kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.cleareditorstate.md)
+
+## EmbeddableStateTransfer.clearEditorState() method
+
+<b>Signature:</b>
+
+```typescript
+clearEditorState(): void;
+```
+<b>Returns:</b>
+
+`void`
+

docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.getincomingeditorstate.md

@@ -4,21 +4,19 @@
 
 ## EmbeddableStateTransfer.getIncomingEditorState() method
 
-Fetches an [originating app](./kibana-plugin-plugins-embeddable-public.embeddableeditorstate.md) argument from the scoped history's location state.
+Fetches an [originating app](./kibana-plugin-plugins-embeddable-public.embeddableeditorstate.md) argument from the sessionStorage
 
 <b>Signature:</b>
 
 ```typescript
-getIncomingEditorState(options?: {
-        keysToRemoveAfterFetch?: string[];
-    }): EmbeddableEditorState | undefined;
+getIncomingEditorState(removeAfterFetch?: boolean): EmbeddableEditorState | undefined;
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  options | <code>{</code><br/><code>        keysToRemoveAfterFetch?: string[];</code><br/><code>    }</code> |  |
+|  removeAfterFetch | <code>boolean</code> | Whether to remove the package state after fetch to prevent duplicates. |
 
 <b>Returns:</b>
 

docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.getincomingembeddablepackage.md

@@ -4,21 +4,19 @@
 
 ## EmbeddableStateTransfer.getIncomingEmbeddablePackage() method
 
-Fetches an [embeddable package](./kibana-plugin-plugins-embeddable-public.embeddablepackagestate.md) argument from the scoped history's location state.
+Fetches an [embeddable package](./kibana-plugin-plugins-embeddable-public.embeddablepackagestate.md) argument from the sessionStorage
 
 <b>Signature:</b>
 
 ```typescript
-getIncomingEmbeddablePackage(options?: {
-        keysToRemoveAfterFetch?: string[];
-    }): EmbeddablePackageState | undefined;
+getIncomingEmbeddablePackage(removeAfterFetch?: boolean): EmbeddablePackageState | undefined;
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  options | <code>{</code><br/><code>        keysToRemoveAfterFetch?: string[];</code><br/><code>    }</code> |  |
+|  removeAfterFetch | <code>boolean</code> | Whether to remove the package state after fetch to prevent duplicates. |
 
 <b>Returns:</b>
 

docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.md

@@ -4,7 +4,7 @@
 
 ## EmbeddableStateTransfer class
 
-A wrapper around the state object in  which provides strongly typed helper methods for common incoming and outgoing states used by the embeddable infrastructure.
+A wrapper around the session storage which provides strongly typed helper methods for common incoming and outgoing states used by the embeddable infrastructure.
 
 <b>Signature:</b>
 
@@ -16,7 +16,7 @@ export declare class EmbeddableStateTransfer
 
 |  Constructor | Modifiers | Description |
 |  --- | --- | --- |
-|  [(constructor)(navigateToApp, scopedHistory, appList)](./kibana-plugin-plugins-embeddable-public.embeddablestatetransfer._constructor_.md) |  | Constructs a new instance of the <code>EmbeddableStateTransfer</code> class |
+|  [(constructor)(navigateToApp, appList, customStorage)](./kibana-plugin-plugins-embeddable-public.embeddablestatetransfer._constructor_.md) |  | Constructs a new instance of the <code>EmbeddableStateTransfer</code> class |
 
 ## Properties
 
@@ -28,8 +28,9 @@ export declare class EmbeddableStateTransfer
 
 |  Method | Modifiers | Description |
 |  --- | --- | --- |
-|  [getIncomingEditorState(options)](./kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.getincomingeditorstate.md) |  | Fetches an [originating app](./kibana-plugin-plugins-embeddable-public.embeddableeditorstate.md) argument from the scoped history's location state. |
-|  [getIncomingEmbeddablePackage(options)](./kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.getincomingembeddablepackage.md) |  | Fetches an [embeddable package](./kibana-plugin-plugins-embeddable-public.embeddablepackagestate.md) argument from the scoped history's location state. |
+|  [clearEditorState()](./kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.cleareditorstate.md) |  |  |
+|  [getIncomingEditorState(removeAfterFetch)](./kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.getincomingeditorstate.md) |  | Fetches an [originating app](./kibana-plugin-plugins-embeddable-public.embeddableeditorstate.md) argument from the sessionStorage |
+|  [getIncomingEmbeddablePackage(removeAfterFetch)](./kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.getincomingembeddablepackage.md) |  | Fetches an [embeddable package](./kibana-plugin-plugins-embeddable-public.embeddablepackagestate.md) argument from the sessionStorage |
 |  [navigateToEditor(appId, options)](./kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.navigatetoeditor.md) |  | A wrapper around the  method which navigates to the specified appId with [embeddable editor state](./kibana-plugin-plugins-embeddable-public.embeddableeditorstate.md) |
 |  [navigateToWithEmbeddablePackage(appId, options)](./kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.navigatetowithembeddablepackage.md) |  | A wrapper around the  method which navigates to the specified appId with [embeddable package state](./kibana-plugin-plugins-embeddable-public.embeddablepackagestate.md) |
 

docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.navigatetoeditor.md

@@ -12,7 +12,6 @@ A wrapper around the  method which navigates to the specified appId with [embedd
 navigateToEditor(appId: string, options?: {
         path?: string;
         state: EmbeddableEditorState;
-        appendToExistingState?: boolean;
     }): Promise<void>;
 ```
 
@@ -21,7 +20,7 @@ navigateToEditor(appId: string, options?: {
 |  Parameter | Type | Description |
 |  --- | --- | --- |
 |  appId | <code>string</code> |  |
-|  options | <code>{</code><br/><code>        path?: string;</code><br/><code>        state: EmbeddableEditorState;</code><br/><code>        appendToExistingState?: boolean;</code><br/><code>    }</code> |  |
+|  options | <code>{</code><br/><code>        path?: string;</code><br/><code>        state: EmbeddableEditorState;</code><br/><code>    }</code> |  |
 
 <b>Returns:</b>
 

docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.navigatetowithembeddablepackage.md

@@ -12,7 +12,6 @@ A wrapper around the  method which navigates to the specified appId with [embedd
 navigateToWithEmbeddablePackage(appId: string, options?: {
         path?: string;
         state: EmbeddablePackageState;
-        appendToExistingState?: boolean;
     }): Promise<void>;
 ```
 
@@ -21,7 +20,7 @@ navigateToWithEmbeddablePackage(appId: string, options?: {
 |  Parameter | Type | Description |
 |  --- | --- | --- |
 |  appId | <code>string</code> |  |
-|  options | <code>{</code><br/><code>        path?: string;</code><br/><code>        state: EmbeddablePackageState;</code><br/><code>        appendToExistingState?: boolean;</code><br/><code>    }</code> |  |
+|  options | <code>{</code><br/><code>        path?: string;</code><br/><code>        state: EmbeddablePackageState;</code><br/><code>    }</code> |  |
 
 <b>Returns:</b>
 

docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.md

@@ -17,7 +17,7 @@
 |  [EmbeddableFactoryNotFoundError](./kibana-plugin-plugins-embeddable-public.embeddablefactorynotfounderror.md) |  |
 |  [EmbeddablePanel](./kibana-plugin-plugins-embeddable-public.embeddablepanel.md) |  |
 |  [EmbeddableRoot](./kibana-plugin-plugins-embeddable-public.embeddableroot.md) |  |
-|  [EmbeddableStateTransfer](./kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.md) | A wrapper around the state object in  which provides strongly typed helper methods for common incoming and outgoing states used by the embeddable infrastructure. |
+|  [EmbeddableStateTransfer](./kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.md) | A wrapper around the session storage which provides strongly typed helper methods for common incoming and outgoing states used by the embeddable infrastructure. |
 |  [ErrorEmbeddable](./kibana-plugin-plugins-embeddable-public.errorembeddable.md) |  |
 |  [PanelNotFoundError](./kibana-plugin-plugins-embeddable-public.panelnotfounderror.md) |  |
 

src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx

@@ -36,7 +36,6 @@ import {
   EmbeddableStart,
   EmbeddableOutput,
   EmbeddableFactory,
-  EmbeddableStateTransfer,
 } from '../../services/embeddable';
 import { DASHBOARD_CONTAINER_TYPE } from './dashboard_constants';
 import { createPanelState } from './panel';
@@ -111,8 +110,6 @@ const defaultCapabilities = {
 
 export class DashboardContainer extends Container<InheritedChildInput, DashboardContainerInput> {
   public readonly type = DASHBOARD_CONTAINER_TYPE;
-
-  private embeddablePanel: EmbeddableStart['EmbeddablePanel'];
   public switchViewMode?: (newViewMode: ViewMode) => void;
 
   public getPanelCount = () => {
@@ -122,7 +119,6 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
   constructor(
     initialInput: DashboardContainerInput,
     private readonly services: DashboardContainerServices,
-    stateTransfer?: EmbeddableStateTransfer,
     parent?: Container
   ) {
     super(
@@ -134,7 +130,6 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
       services.embeddable.getEmbeddableFactory,
       parent
     );
-    this.embeddablePanel = services.embeddable.getEmbeddablePanel(stateTransfer);
   }
 
   protected createNewPanelState<
@@ -258,11 +253,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
     ReactDOM.render(
       <I18nProvider>
         <KibanaContextProvider services={this.services}>
-          <DashboardViewport
-            container={this}
-            PanelComponent={this.embeddablePanel}
-            switchViewMode={this.switchViewMode}
-          />
+          <DashboardViewport container={this} switchViewMode={this.switchViewMode} />
         </KibanaContextProvider>
       </I18nProvider>,
       dom

src/plugins/dashboard/public/application/embeddable/dashboard_container_factory.tsx

@@ -18,7 +18,6 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { ScopedHistory } from 'src/core/public';
 import {
   Container,
   ErrorEmbeddable,
@@ -44,10 +43,7 @@ export class DashboardContainerFactoryDefinition
   public readonly isContainerType = true;
   public readonly type = DASHBOARD_CONTAINER_TYPE;
 
-  constructor(
-    private readonly getStartServices: () => Promise<DashboardContainerServices>,
-    private getHistory: () => ScopedHistory
-  ) {}
+  constructor(private readonly getStartServices: () => Promise<DashboardContainerServices>) {}
 
   public isEditable = async () => {
     // Currently unused for dashboards
@@ -74,7 +70,6 @@ export class DashboardContainerFactoryDefinition
     parent?: Container
   ): Promise<DashboardContainer | ErrorEmbeddable> => {
     const services = await this.getStartServices();
-    const stateTransfer = services.embeddable.getStateTransfer(this.getHistory());
-    return new DashboardContainer(initialInput, services, stateTransfer, parent);
+    return new DashboardContainer(initialInput, services, parent);
   };
 }

src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.test.tsx

@@ -83,7 +83,6 @@ function prepare(props?: Partial<DashboardGridProps>) {
   dashboardContainer = new DashboardContainer(initialInput, options);
   const defaultTestProps: DashboardGridProps = {
     container: dashboardContainer,
-    PanelComponent: () => <div />,
     kibana: null as any,
     intl: null as any,
   };

src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.tsx

@@ -30,7 +30,7 @@ import React from 'react';
 import { Subscription } from 'rxjs';
 import ReactGridLayout, { Layout } from 'react-grid-layout';
 import { GridData } from '../../../../common';
-import { ViewMode, EmbeddableChildPanel, EmbeddableStart } from '../../../services/embeddable';
+import { ViewMode, EmbeddableChildPanel } from '../../../services/embeddable';
 import { DASHBOARD_GRID_COLUMN_COUNT, DASHBOARD_GRID_HEIGHT } from '../dashboard_constants';
 import { DashboardPanelState } from '../types';
 import { withKibana } from '../../../services/kibana_react';
@@ -115,7 +115,6 @@ const ResponsiveSizedGrid = sizeMe(config)(ResponsiveGrid);
 
 export interface DashboardGridProps extends ReactIntl.InjectedIntlProps {
   kibana: DashboardReactContextValue;
-  PanelComponent: EmbeddableStart['EmbeddablePanel'];
   container: DashboardContainer;
 }
 
@@ -277,7 +276,7 @@ class DashboardGridUi extends React.Component<DashboardGridProps, State> {
             key={panel.type}
             embeddableId={panel.explicitInput.id}
             container={this.props.container}
-            PanelComponent={this.props.PanelComponent}
+            PanelComponent={this.props.kibana.services.embeddable.EmbeddablePanel}
           />
         </div>
       );

src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.test.tsx

@@ -92,7 +92,6 @@ function getProps(
   dashboardContainer = new DashboardContainer(input, options);
   const defaultTestProps: DashboardViewportProps = {
     container: dashboardContainer,
-    PanelComponent: () => <div />,
   };
 
   return {

src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx

@@ -21,7 +21,6 @@ import React from 'react';
 import { Subscription } from 'rxjs';
 import {
   PanelState,
-  EmbeddableStart,
   ViewMode,
   isErrorEmbeddable,
   openAddPanelFlyout,
@@ -33,7 +32,6 @@ import { context } from '../../../services/kibana_react';
 import { DashboardEmptyScreen } from '../empty_screen/dashboard_empty_screen';
 
 export interface DashboardViewportProps {
-  PanelComponent: EmbeddableStart['EmbeddablePanel'];
   switchViewMode?: (newViewMode: ViewMode) => void;
   container: DashboardContainer;
 }
@@ -131,7 +129,7 @@ export class DashboardViewport extends React.Component<DashboardViewportProps, S
   };
 
   public render() {
-    const { container, PanelComponent } = this.props;
+    const { container } = this.props;
     const isEditMode = container.getInput().viewMode !== ViewMode.VIEW;
     const {
       isEmbeddedExternally,
@@ -174,7 +172,7 @@ export class DashboardViewport extends React.Component<DashboardViewportProps, S
               />
             </div>
           )}
-          <DashboardGrid container={container} PanelComponent={PanelComponent} />
+          <DashboardGrid container={container} />
         </div>
       </React.Fragment>
     );

src/plugins/dashboard/public/application/hooks/use_dashboard_container.ts

@@ -79,9 +79,7 @@ export const useDashboardContainer = (
       searchSession.restore(searchSessionIdFromURL);
     }
 
-    const incomingEmbeddable = embeddable
-      .getStateTransfer(scopedHistory())
-      .getIncomingEmbeddablePackage();
+    const incomingEmbeddable = embeddable.getStateTransfer().getIncomingEmbeddablePackage(true);
 
     (async function createContainer() {
       const newContainer = await dashboardFactory.create(

src/plugins/dashboard/public/plugin.tsx

@@ -280,11 +280,8 @@ export class DashboardPlugin
       getHistory: () => this.currentHistory!,
     });
 
-    const factory = new DashboardContainerFactoryDefinition(
-      getStartServices,
-      () => this.currentHistory!
-    );
-    embeddable.registerEmbeddableFactory(factory.type, factory);
+    const dashboardContainerFactory = new DashboardContainerFactoryDefinition(getStartServices);
+    embeddable.registerEmbeddableFactory(dashboardContainerFactory.type, dashboardContainerFactory);
 
     const placeholderFactory = new PlaceholderEmbeddableFactory();
     embeddable.registerEmbeddableFactory(placeholderFactory.type, placeholderFactory);