Remove App communication from URL (#67064)

Removed all inter-app communication via url in favour of a new service in the embeddable start contract called the state transfer service.

Author: ThomThomson

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

@@ -75,7 +75,7 @@ import { getDashboardTitle } from './dashboard_strings';
 import { DashboardAppScope } from './dashboard_app';
 import { convertSavedDashboardPanelToPanelState } from './lib/embeddable_saved_object_converters';
 import { RenderDeps } from './application';
-import { IKbnUrlStateStorage, removeQueryParam, unhashUrl } from '../../../kibana_utils/public';
+import { IKbnUrlStateStorage, unhashUrl } from '../../../kibana_utils/public';
 import {
   addFatalError,
   AngularHttpError,
@@ -132,6 +132,7 @@ export class DashboardAppController {
     embeddable,
     share,
     dashboardCapabilities,
+    scopedHistory,
     embeddableCapabilities: { visualizeCapabilities, mapsCapabilities },
     data: { query: queryService },
     core: {
@@ -425,15 +426,13 @@ export class DashboardAppController {
               refreshDashboardContainer();
             });
 
-            // This code needs to be replaced with a better mechanism for adding new embeddables of
-            // any type from the add panel. Likely this will happen via creating a visualization "inline",
-            // without navigating away from the UX.
-            if ($routeParams[DashboardConstants.ADD_EMBEDDABLE_TYPE]) {
-              const type = $routeParams[DashboardConstants.ADD_EMBEDDABLE_TYPE];
-              const id = $routeParams[DashboardConstants.ADD_EMBEDDABLE_ID];
-              container.addNewEmbeddable<SavedObjectEmbeddableInput>(type, { savedObjectId: id });
-              removeQueryParam(history, DashboardConstants.ADD_EMBEDDABLE_TYPE);
-              removeQueryParam(history, DashboardConstants.ADD_EMBEDDABLE_ID);
+            const incomingState = embeddable
+              .getStateTransfer(scopedHistory())
+              .getIncomingEmbeddablePackage();
+            if (incomingState) {
+              container.addNewEmbeddable<SavedObjectEmbeddableInput>(incomingState.type, {
+                savedObjectId: incomingState.id,
+              });
             }
           }
 

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

@@ -46,6 +46,7 @@ import {
 } from '../../../../kibana_react/public';
 import { PLACEHOLDER_EMBEDDABLE } from './placeholder';
 import { PanelPlacementMethod, IPanelPlacementArgs } from './panel/dashboard_panel_placement';
+import { EmbeddableStateTransfer } from '../../../../embeddable/public';
 
 export interface DashboardContainerInput extends ContainerInput {
   viewMode: ViewMode;
@@ -98,9 +99,12 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
 
   public renderEmpty?: undefined | (() => React.ReactNode);
 
+  private embeddablePanel: EmbeddableStart['EmbeddablePanel'];
+
   constructor(
     initialInput: DashboardContainerInput,
     private readonly options: DashboardContainerOptions,
+    stateTransfer?: EmbeddableStateTransfer,
     parent?: Container
   ) {
     super(
@@ -111,6 +115,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
       options.embeddable.getEmbeddableFactory,
       parent
     );
+    this.embeddablePanel = options.embeddable.getEmbeddablePanel(stateTransfer);
   }
 
   protected createNewPanelState<
@@ -186,7 +191,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
           <DashboardViewport
             renderEmpty={this.renderEmpty}
             container={this}
-            PanelComponent={this.options.embeddable.EmbeddablePanel}
+            PanelComponent={this.embeddablePanel}
           />
         </KibanaContextProvider>
       </I18nProvider>,

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

@@ -19,7 +19,7 @@
 
 import { i18n } from '@kbn/i18n';
 import { UiActionsStart } from 'src/plugins/ui_actions/public';
-import { CoreStart } from 'src/core/public';
+import { CoreStart, ScopedHistory } from 'src/core/public';
 import { Start as InspectorStartContract } from 'src/plugins/inspector/public';
 import { EmbeddableFactory, EmbeddableStart } from '../../../../embeddable/public';
 import {
@@ -54,7 +54,10 @@ export class DashboardContainerFactoryDefinition
   public readonly isContainerType = true;
   public readonly type = DASHBOARD_CONTAINER_TYPE;
 
-  constructor(private readonly getStartServices: () => Promise<StartServices>) {}
+  constructor(
+    private readonly getStartServices: () => Promise<StartServices>,
+    private getHistory: () => ScopedHistory
+  ) {}
 
   public isEditable = async () => {
     const { capabilities } = await this.getStartServices();
@@ -81,6 +84,7 @@ export class DashboardContainerFactoryDefinition
     parent?: Container
   ): Promise<DashboardContainer | ErrorEmbeddable> => {
     const services = await this.getStartServices();
-    return new DashboardContainer(initialInput, services, parent);
+    const stateTransfer = services.embeddable.getStateTransfer(this.getHistory());
+    return new DashboardContainer(initialInput, services, stateTransfer, parent);
   };
 }

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

@@ -64,6 +64,7 @@ function prepare(props?: Partial<DashboardGridProps>) {
     embeddable: {
       getTriggerCompatibleActions: (() => []) as any,
       getEmbeddableFactories: start.getEmbeddableFactories,
+      getEmbeddablePanel: jest.fn(),
       getEmbeddableFactory,
     } as any,
     notifications: {} as any,

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

@@ -54,6 +54,7 @@ function getProps(
     application: applicationServiceMock.createStartContract(),
     embeddable: {
       getTriggerCompatibleActions: (() => []) as any,
+      getEmbeddablePanel: jest.fn(),
       getEmbeddableFactories: start.getEmbeddableFactories,
       getEmbeddableFactory: start.getEmbeddableFactory,
     } as any,

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

@@ -26,8 +26,8 @@ import { context } from '../../../../../kibana_react/public';
 
 export interface DashboardViewportProps {
   container: DashboardContainer;
-  renderEmpty?: () => React.ReactNode;
   PanelComponent: EmbeddableStart['EmbeddablePanel'];
+  renderEmpty?: () => React.ReactNode;
 }
 
 interface State {

src/plugins/dashboard/public/plugin.tsx

@@ -206,7 +206,10 @@ export class DashboardPlugin
       };
     };
 
-    const factory = new DashboardContainerFactoryDefinition(getStartServices);
+    const factory = new DashboardContainerFactoryDefinition(
+      getStartServices,
+      () => this.currentHistory!
+    );
     embeddable.registerEmbeddableFactory(factory.type, factory);
 
     const placeholderFactory = new PlaceholderEmbeddableFactory();

src/plugins/embeddable/public/index.ts

@@ -22,7 +22,6 @@ import './index.scss';
 import { PluginInitializerContext } from 'src/core/public';
 import { EmbeddablePublicPlugin } from './plugin';
 
-export { EMBEDDABLE_ORIGINATING_APP_PARAM } from './types';
 export {
   ACTION_ADD_PANEL,
   ACTION_APPLY_FILTER,
@@ -69,6 +68,9 @@ export {
   isSavedObjectEmbeddableInput,
   isRangeSelectTriggerContext,
   isValueClickTriggerContext,
+  EmbeddableStateTransfer,
+  EmbeddableOriginatingAppState,
+  EmbeddablePackageState,
   EmbeddableRenderer,
   EmbeddableRendererProps,
 } from './lib';
@@ -82,4 +84,5 @@ export {
   EmbeddableStart,
   EmbeddableSetupDependencies,
   EmbeddableStartDependencies,
+  EmbeddablePanelHOC,
 } from './plugin';

src/plugins/embeddable/public/lib/actions/edit_panel_action.test.tsx

@@ -23,11 +23,13 @@ import { ViewMode } from '../types';
 import { ContactCardEmbeddable } from '../test_samples';
 import { embeddablePluginMock } from '../../mocks';
 import { applicationServiceMock } from '../../../../../core/public/mocks';
+import { of } from 'rxjs';
 
 const { doStart } = embeddablePluginMock.createInstance();
 const start = doStart();
 const getFactory = start.getEmbeddableFactory;
 const applicationMock = applicationServiceMock.createStartContract();
+const stateTransferMock = embeddablePluginMock.createStartContract().getStateTransfer();
 
 class EditableEmbeddable extends Embeddable {
   public readonly type = 'EDITABLE_EMBEDDABLE';
@@ -43,16 +45,28 @@ class EditableEmbeddable extends Embeddable {
 }
 
 test('is compatible when edit url is available, in edit mode and editable', async () => {
-  const action = new EditPanelAction(getFactory, applicationMock);
+  const action = new EditPanelAction(getFactory, applicationMock, stateTransferMock);
   expect(
     await action.isCompatible({
       embeddable: new EditableEmbeddable({ id: '123', viewMode: ViewMode.EDIT }, true),
     })
   ).toBe(true);
 });
 
+test('redirects to app using state transfer', async () => {
+  applicationMock.currentAppId$ = of('superCoolCurrentApp');
+  const action = new EditPanelAction(getFactory, applicationMock, stateTransferMock);
+  const embeddable = new EditableEmbeddable({ id: '123', viewMode: ViewMode.EDIT }, true);
+  embeddable.getOutput = jest.fn(() => ({ editApp: 'ultraVisualize', editPath: '/123' }));
+  await action.execute({ embeddable });
+  expect(stateTransferMock.navigateToWithOriginatingApp).toHaveBeenCalledWith('ultraVisualize', {
+    path: '/123',
+    state: { originatingApp: 'superCoolCurrentApp' },
+  });
+});
+
 test('getHref returns the edit urls', async () => {
-  const action = new EditPanelAction(getFactory, applicationMock);
+  const action = new EditPanelAction(getFactory, applicationMock, stateTransferMock);
   expect(action.getHref).toBeDefined();
 
   if (action.getHref) {
@@ -66,7 +80,7 @@ test('getHref returns the edit urls', async () => {
 });
 
 test('is not compatible when edit url is not available', async () => {
-  const action = new EditPanelAction(getFactory, applicationMock);
+  const action = new EditPanelAction(getFactory, applicationMock, stateTransferMock);
   const embeddable = new ContactCardEmbeddable(
     {
       id: '123',
@@ -85,7 +99,7 @@ test('is not compatible when edit url is not available', async () => {
 });
 
 test('is not visible when edit url is available but in view mode', async () => {
-  const action = new EditPanelAction(getFactory, applicationMock);
+  const action = new EditPanelAction(getFactory, applicationMock, stateTransferMock);
   expect(
     await action.isCompatible({
       embeddable: new EditableEmbeddable(
@@ -100,7 +114,7 @@ test('is not visible when edit url is available but in view mode', async () => {
 });
 
 test('is not compatible when edit url is available, in edit mode, but not editable', async () => {
-  const action = new EditPanelAction(getFactory, applicationMock);
+  const action = new EditPanelAction(getFactory, applicationMock, stateTransferMock);
   expect(
     await action.isCompatible({
       embeddable: new EditableEmbeddable(

src/plugins/embeddable/public/lib/actions/edit_panel_action.ts

@@ -24,14 +24,20 @@ import { take } from 'rxjs/operators';
 import { ViewMode } from '../types';
 import { EmbeddableFactoryNotFoundError } from '../errors';
 import { EmbeddableStart } from '../../plugin';
-import { EMBEDDABLE_ORIGINATING_APP_PARAM, IEmbeddable } from '../..';
+import { IEmbeddable, EmbeddableOriginatingAppState, EmbeddableStateTransfer } from '../..';
 
 export const ACTION_EDIT_PANEL = 'editPanel';
 
 interface ActionContext {
   embeddable: IEmbeddable;
 }
 
+interface NavigationContext {
+  app: string;
+  path: string;
+  state?: EmbeddableOriginatingAppState;
+}
+
 export class EditPanelAction implements Action<ActionContext> {
   public readonly type = ACTION_EDIT_PANEL;
   public readonly id = ACTION_EDIT_PANEL;
@@ -40,7 +46,8 @@ export class EditPanelAction implements Action<ActionContext> {
 
   constructor(
     private readonly getEmbeddableFactory: EmbeddableStart['getEmbeddableFactory'],
-    private readonly application: ApplicationStart
+    private readonly application: ApplicationStart,
+    private readonly stateTransfer?: EmbeddableStateTransfer
   ) {
     if (this.application?.currentAppId$) {
       this.application.currentAppId$
@@ -79,9 +86,15 @@ export class EditPanelAction implements Action<ActionContext> {
 
   public async execute(context: ActionContext) {
     const appTarget = this.getAppTarget(context);
-
     if (appTarget) {
-      await this.application.navigateToApp(appTarget.app, { path: appTarget.path });
+      if (this.stateTransfer && appTarget.state) {
+        await this.stateTransfer.navigateToWithOriginatingApp(appTarget.app, {
+          path: appTarget.path,
+          state: appTarget.state,
+        });
+      } else {
+        await this.application.navigateToApp(appTarget.app, { path: appTarget.path });
+      }
       return;
     }
 
@@ -92,22 +105,17 @@ export class EditPanelAction implements Action<ActionContext> {
     }
   }
 
-  public getAppTarget({ embeddable }: ActionContext): { app: string; path: string } | undefined {
+  public getAppTarget({ embeddable }: ActionContext): NavigationContext | undefined {
     const app = embeddable ? embeddable.getOutput().editApp : undefined;
-    let path = embeddable ? embeddable.getOutput().editPath : undefined;
+    const path = embeddable ? embeddable.getOutput().editPath : undefined;
     if (app && path) {
-      if (this.currentAppId) {
-        path += `?${EMBEDDABLE_ORIGINATING_APP_PARAM}=${this.currentAppId}`;
-      }
-      return { app, path };
+      const state = this.currentAppId ? { originatingApp: this.currentAppId } : undefined;
+      return { app, path, state };
     }
   }
 
   public async getHref({ embeddable }: ActionContext): Promise<string> {
-    let editUrl = embeddable ? embeddable.getOutput().editUrl : undefined;
-    if (editUrl && this.currentAppId) {
-      editUrl += `?${EMBEDDABLE_ORIGINATING_APP_PARAM}=${this.currentAppId}`;
-    }
+    const editUrl = embeddable ? embeddable.getOutput().editUrl : undefined;
     return editUrl ? editUrl : '';
   }
 }