diff --git a/src/plugins/dashboard/public/application/dashboard_app_controller.tsx b/src/plugins/dashboard/public/application/dashboard_app_controller.tsx index 206ef4f3d4313..3c559a6cde211 100644 --- a/src/plugins/dashboard/public/application/dashboard_app_controller.tsx +++ b/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(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(incomingState.type, { + savedObjectId: incomingState.id, + }); } } diff --git a/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx b/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx index 27bbc2ef675a1..f1ecd0f221926 100644 --- a/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx +++ b/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 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 , diff --git a/src/plugins/dashboard/public/application/embeddable/dashboard_container_factory.tsx b/src/plugins/dashboard/public/application/embeddable/dashboard_container_factory.tsx index 514b4e7ca8588..4107a00ba80ce 100644 --- a/src/plugins/dashboard/public/application/embeddable/dashboard_container_factory.tsx +++ b/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) {} + constructor( + private readonly getStartServices: () => Promise, + private getHistory: () => ScopedHistory + ) {} public isEditable = async () => { const { capabilities } = await this.getStartServices(); @@ -81,6 +84,7 @@ export class DashboardContainerFactoryDefinition parent?: Container ): Promise => { 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); }; } diff --git a/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.test.tsx b/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.test.tsx index 9a2610a82b97d..493ae8eb51797 100644 --- a/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.test.tsx +++ b/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.test.tsx @@ -64,6 +64,7 @@ function prepare(props?: Partial) { embeddable: { getTriggerCompatibleActions: (() => []) as any, getEmbeddableFactories: start.getEmbeddableFactories, + getEmbeddablePanel: jest.fn(), getEmbeddableFactory, } as any, notifications: {} as any, diff --git a/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.test.tsx b/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.test.tsx index 25e451dc7f793..733ea11c1eb64 100644 --- a/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.test.tsx +++ b/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, diff --git a/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx b/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx index 9ee50426b19bb..15a486f99a37f 100644 --- a/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx +++ b/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 { diff --git a/src/plugins/dashboard/public/plugin.tsx b/src/plugins/dashboard/public/plugin.tsx index e99b8ad616cb9..5e2cb60965396 100644 --- a/src/plugins/dashboard/public/plugin.tsx +++ b/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(); diff --git a/src/plugins/embeddable/public/index.ts b/src/plugins/embeddable/public/index.ts index d595197373a21..1d1dc79121937 100644 --- a/src/plugins/embeddable/public/index.ts +++ b/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'; diff --git a/src/plugins/embeddable/public/lib/actions/edit_panel_action.test.tsx b/src/plugins/embeddable/public/lib/actions/edit_panel_action.test.tsx index 196bd593eb8d5..4b602efb02717 100644 --- a/src/plugins/embeddable/public/lib/actions/edit_panel_action.test.tsx +++ b/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,7 +45,7 @@ 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), @@ -51,8 +53,20 @@ test('is compatible when edit url is available, in edit mode and editable', asyn ).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( diff --git a/src/plugins/embeddable/public/lib/actions/edit_panel_action.ts b/src/plugins/embeddable/public/lib/actions/edit_panel_action.ts index 0bb2206988d83..d983dc9f41853 100644 --- a/src/plugins/embeddable/public/lib/actions/edit_panel_action.ts +++ b/src/plugins/embeddable/public/lib/actions/edit_panel_action.ts @@ -24,7 +24,7 @@ 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'; @@ -32,6 +32,12 @@ interface ActionContext { embeddable: IEmbeddable; } +interface NavigationContext { + app: string; + path: string; + state?: EmbeddableOriginatingAppState; +} + export class EditPanelAction implements Action { public readonly type = ACTION_EDIT_PANEL; public readonly id = ACTION_EDIT_PANEL; @@ -40,7 +46,8 @@ export class EditPanelAction implements Action { 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 { 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 { } } - 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 { - 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 : ''; } } diff --git a/src/plugins/embeddable/public/lib/index.ts b/src/plugins/embeddable/public/lib/index.ts index 172d9bdc9ec47..b757fa59a7f3a 100644 --- a/src/plugins/embeddable/public/lib/index.ts +++ b/src/plugins/embeddable/public/lib/index.ts @@ -24,3 +24,4 @@ export * from './actions'; export * from './triggers'; export * from './containers'; export * from './panel'; +export * from './state_transfer'; diff --git a/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx b/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx index 9948d5a2db3db..8cf2e015f88cf 100644 --- a/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx +++ b/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx @@ -43,6 +43,7 @@ import { EditPanelAction } from '../actions'; import { CustomizePanelModal } from './panel_header/panel_actions/customize_title/customize_panel_modal'; import { EmbeddableStart } from '../../plugin'; import { EmbeddableErrorLabel } from './embeddable_error_label'; +import { EmbeddableStateTransfer } from '..'; const sortByOrderField = ( { order: orderA }: { order?: number }, @@ -62,6 +63,7 @@ interface Props { application: CoreStart['application']; inspector: InspectorStartContract; SavedObjectFinder: React.ComponentType; + stateTransfer?: EmbeddableStateTransfer; hideHeader?: boolean; } @@ -299,7 +301,11 @@ export class EmbeddablePanel extends React.Component { ), new InspectPanelAction(this.props.inspector), new RemovePanelAction(), - new EditPanelAction(this.props.getEmbeddableFactory, this.props.application), + new EditPanelAction( + this.props.getEmbeddableFactory, + this.props.application, + this.props.stateTransfer + ), ]; const sortedActions = [...regularActions, ...extraActions].sort(sortByOrderField); diff --git a/src/plugins/embeddable/public/lib/state_transfer/embeddable_state_transfer.test.ts b/src/plugins/embeddable/public/lib/state_transfer/embeddable_state_transfer.test.ts new file mode 100644 index 0000000000000..0d5ae6be68185 --- /dev/null +++ b/src/plugins/embeddable/public/lib/state_transfer/embeddable_state_transfer.test.ts @@ -0,0 +1,167 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { coreMock, scopedHistoryMock } from '../../../../../core/public/mocks'; +import { EmbeddableStateTransfer } from '.'; +import { ApplicationStart, ScopedHistory } from '../../../../../core/public'; + +function mockHistoryState(state: unknown) { + return scopedHistoryMock.create({ state }); +} + +describe('embeddable state transfer', () => { + let application: jest.Mocked; + let stateTransfer: EmbeddableStateTransfer; + const destinationApp = 'superUltraVisualize'; + const originatingApp = 'superUltraTestDashboard'; + + beforeEach(() => { + const core = coreMock.createStart(); + application = core.application; + stateTransfer = new EmbeddableStateTransfer(application.navigateToApp); + }); + + it('can send an outgoing originating app state', async () => { + await stateTransfer.navigateToWithOriginatingApp(destinationApp, { state: { originatingApp } }); + expect(application.navigateToApp).toHaveBeenCalledWith('superUltraVisualize', { + state: { originatingApp: 'superUltraTestDashboard' }, + }); + }); + + it('can send an outgoing originating app state in append mode', async () => { + const historyMock = mockHistoryState({ kibanaIsNowForSports: 'extremeSportsKibana' }); + stateTransfer = new EmbeddableStateTransfer( + application.navigateToApp, + (historyMock as unknown) as ScopedHistory + ); + await stateTransfer.navigateToWithOriginatingApp(destinationApp, { + state: { originatingApp }, + appendToExistingState: true, + }); + expect(application.navigateToApp).toHaveBeenCalledWith('superUltraVisualize', { + path: undefined, + state: { + kibanaIsNowForSports: 'extremeSportsKibana', + originatingApp: 'superUltraTestDashboard', + }, + }); + }); + + it('can send an outgoing embeddable package state', async () => { + await stateTransfer.navigateToWithEmbeddablePackage(destinationApp, { + state: { type: 'coolestType', id: '150' }, + }); + expect(application.navigateToApp).toHaveBeenCalledWith('superUltraVisualize', { + state: { type: 'coolestType', id: '150' }, + }); + }); + + it('can send an outgoing embeddable package state in append mode', async () => { + const historyMock = mockHistoryState({ kibanaIsNowForSports: 'extremeSportsKibana' }); + stateTransfer = new EmbeddableStateTransfer( + application.navigateToApp, + (historyMock as unknown) as ScopedHistory + ); + await stateTransfer.navigateToWithEmbeddablePackage(destinationApp, { + state: { type: 'coolestType', id: '150' }, + appendToExistingState: true, + }); + expect(application.navigateToApp).toHaveBeenCalledWith('superUltraVisualize', { + path: undefined, + state: { kibanaIsNowForSports: 'extremeSportsKibana', type: 'coolestType', id: '150' }, + }); + }); + + it('can fetch an incoming originating app state', async () => { + const historyMock = mockHistoryState({ originatingApp: 'extremeSportsKibana' }); + stateTransfer = new EmbeddableStateTransfer( + application.navigateToApp, + (historyMock as unknown) as ScopedHistory + ); + const fetchedState = stateTransfer.getIncomingOriginatingApp(); + expect(fetchedState).toEqual({ originatingApp: 'extremeSportsKibana' }); + }); + + it('returns undefined with originating app state is not in the right shape', async () => { + const historyMock = mockHistoryState({ kibanaIsNowForSports: 'extremeSportsKibana' }); + stateTransfer = new EmbeddableStateTransfer( + application.navigateToApp, + (historyMock as unknown) as ScopedHistory + ); + const fetchedState = stateTransfer.getIncomingOriginatingApp(); + expect(fetchedState).toBeUndefined(); + }); + + it('can fetch an incoming embeddable package state', async () => { + const historyMock = mockHistoryState({ type: 'skisEmbeddable', id: '123' }); + stateTransfer = new EmbeddableStateTransfer( + application.navigateToApp, + (historyMock as unknown) as ScopedHistory + ); + const fetchedState = stateTransfer.getIncomingEmbeddablePackage(); + expect(fetchedState).toEqual({ type: 'skisEmbeddable', id: '123' }); + }); + + it('returns undefined when embeddable package is not in the right shape', async () => { + const historyMock = mockHistoryState({ kibanaIsNowForSports: 'extremeSportsKibana' }); + stateTransfer = new EmbeddableStateTransfer( + application.navigateToApp, + (historyMock as unknown) as ScopedHistory + ); + const fetchedState = stateTransfer.getIncomingEmbeddablePackage(); + expect(fetchedState).toBeUndefined(); + }); + + it('removes all keys in the keysToRemoveAfterFetch array', async () => { + const historyMock = mockHistoryState({ + type: 'skisEmbeddable', + id: '123', + test1: 'test1', + test2: 'test2', + }); + stateTransfer = new EmbeddableStateTransfer( + application.navigateToApp, + (historyMock as unknown) as ScopedHistory + ); + stateTransfer.getIncomingEmbeddablePackage({ keysToRemoveAfterFetch: ['type', 'id'] }); + expect(historyMock.replace).toHaveBeenCalledWith( + expect.objectContaining({ state: { test1: 'test1', test2: 'test2' } }) + ); + }); + + it('leaves state as is when no keysToRemove are supplied', async () => { + const historyMock = mockHistoryState({ + type: 'skisEmbeddable', + id: '123', + test1: 'test1', + test2: 'test2', + }); + stateTransfer = new EmbeddableStateTransfer( + application.navigateToApp, + (historyMock as unknown) as ScopedHistory + ); + stateTransfer.getIncomingEmbeddablePackage(); + expect(historyMock.location.state).toEqual({ + type: 'skisEmbeddable', + id: '123', + test1: 'test1', + test2: 'test2', + }); + }); +}); diff --git a/src/plugins/embeddable/public/lib/state_transfer/embeddable_state_transfer.ts b/src/plugins/embeddable/public/lib/state_transfer/embeddable_state_transfer.ts new file mode 100644 index 0000000000000..57b425d2df45c --- /dev/null +++ b/src/plugins/embeddable/public/lib/state_transfer/embeddable_state_transfer.ts @@ -0,0 +1,132 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { cloneDeep } from 'lodash'; +import { ScopedHistory, ApplicationStart } from '../../../../../core/public'; +import { + EmbeddableOriginatingAppState, + isEmbeddableOriginatingAppState, + EmbeddablePackageState, + isEmbeddablePackageState, +} from './types'; + +/** + * A wrapper around the state object in {@link ScopedHistory | core scoped history} which provides + * strongly typed helper methods for common incoming and outgoing states used by the embeddable infrastructure. + * + * @public + */ +export class EmbeddableStateTransfer { + constructor( + private navigateToApp: ApplicationStart['navigateToApp'], + private scopedHistory?: ScopedHistory + ) {} + + /** + * Fetches an {@link EmbeddableOriginatingAppState | originating app} argument from the scoped + * history's location state. + * + * @param history - the scoped history to fetch from + * @param options.keysToRemoveAfterFetch - an array of keys to be removed from the state after they are retrieved + */ + public getIncomingOriginatingApp(options?: { + keysToRemoveAfterFetch?: string[]; + }): EmbeddableOriginatingAppState | undefined { + return this.getIncomingState(isEmbeddableOriginatingAppState, { + keysToRemoveAfterFetch: options?.keysToRemoveAfterFetch, + }); + } + + /** + * Fetches an {@link EmbeddablePackageState | embeddable package} argument from the scoped + * history's location state. + * + * @param history - the scoped history to fetch from + * @param options.keysToRemoveAfterFetch - an array of keys to be removed from the state after they are retrieved + */ + public getIncomingEmbeddablePackage(options?: { + keysToRemoveAfterFetch?: string[]; + }): EmbeddablePackageState | undefined { + return this.getIncomingState(isEmbeddablePackageState, { + keysToRemoveAfterFetch: options?.keysToRemoveAfterFetch, + }); + } + + /** + * A wrapper around the {@link ApplicationStart.navigateToApp} method which navigates to the specified appId + * with {@link EmbeddableOriginatingAppState | originating app state} + */ + public async navigateToWithOriginatingApp( + appId: string, + options?: { + path?: string; + state: EmbeddableOriginatingAppState; + appendToExistingState?: boolean; + } + ): Promise { + await this.navigateToWithState(appId, options); + } + + /** + * A wrapper around the {@link ApplicationStart.navigateToApp} method which navigates to the specified appId + * with {@link EmbeddablePackageState | embeddable package state} + */ + public async navigateToWithEmbeddablePackage( + appId: string, + options?: { path?: string; state: EmbeddablePackageState; appendToExistingState?: boolean } + ): Promise { + await this.navigateToWithState(appId, options); + } + + private getIncomingState( + guard: (state: unknown) => state is IncomingStateType, + options?: { + keysToRemoveAfterFetch?: string[]; + } + ): IncomingStateType | undefined { + if (!this.scopedHistory) { + throw new TypeError('ScopedHistory is required to fetch incoming state'); + } + const incomingState = this.scopedHistory.location?.state; + const castState = + !guard || guard(incomingState) ? (cloneDeep(incomingState) as IncomingStateType) : undefined; + if (castState && options?.keysToRemoveAfterFetch) { + const stateReplace = { ...(this.scopedHistory.location.state as { [key: string]: unknown }) }; + options.keysToRemoveAfterFetch.forEach((key: string) => { + delete stateReplace[key]; + }); + this.scopedHistory.replace({ ...this.scopedHistory.location, state: stateReplace }); + } + return castState; + } + + private async navigateToWithState( + appId: string, + options?: { path?: string; state?: OutgoingStateType; appendToExistingState?: boolean } + ): Promise { + const stateObject = + options?.appendToExistingState && this.scopedHistory + ? { + ...(this.scopedHistory?.location.state as { [key: string]: unknown }), + ...options.state, + } + : options?.state; + await this.navigateToApp(appId, { path: options?.path, state: stateObject }); + } +} diff --git a/src/plugins/embeddable/public/lib/state_transfer/index.ts b/src/plugins/embeddable/public/lib/state_transfer/index.ts new file mode 100644 index 0000000000000..e51efc5dcca26 --- /dev/null +++ b/src/plugins/embeddable/public/lib/state_transfer/index.ts @@ -0,0 +1,21 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export { EmbeddableStateTransfer } from './embeddable_state_transfer'; +export { EmbeddableOriginatingAppState, EmbeddablePackageState } from './types'; diff --git a/src/plugins/embeddable/public/lib/state_transfer/types.ts b/src/plugins/embeddable/public/lib/state_transfer/types.ts new file mode 100644 index 0000000000000..8eae441d1be23 --- /dev/null +++ b/src/plugins/embeddable/public/lib/state_transfer/types.ts @@ -0,0 +1,56 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +/** + * Represents a state package that contains the last active app id. + * @public + */ +export interface EmbeddableOriginatingAppState { + originatingApp: string; +} + +export function isEmbeddableOriginatingAppState( + state: unknown +): state is EmbeddableOriginatingAppState { + return ensureFieldOfTypeExists('originatingApp', state, 'string'); +} + +/** + * Represents a state package that contains all fields necessary to create an embeddable in a container. + * @public + */ +export interface EmbeddablePackageState { + type: string; + id: string; +} + +export function isEmbeddablePackageState(state: unknown): state is EmbeddablePackageState { + return ( + ensureFieldOfTypeExists('type', state, 'string') && + ensureFieldOfTypeExists('id', state, 'string') + ); +} + +function ensureFieldOfTypeExists(key: string, obj: unknown, type?: string): boolean { + return ( + obj && + key in (obj as { [key: string]: unknown }) && + (!type || typeof (obj as { [key: string]: unknown })[key] === type) + ); +} diff --git a/src/plugins/embeddable/public/mocks.tsx b/src/plugins/embeddable/public/mocks.tsx index 9da0b7602c4f8..49910525c7ab1 100644 --- a/src/plugins/embeddable/public/mocks.tsx +++ b/src/plugins/embeddable/public/mocks.tsx @@ -22,6 +22,7 @@ import { EmbeddableSetup, EmbeddableSetupDependencies, EmbeddableStartDependencies, + EmbeddableStateTransfer, IEmbeddable, EmbeddablePanel, } from '.'; @@ -75,6 +76,15 @@ export const createEmbeddablePanelMock = ({ ); }; +export const createEmbeddableStateTransferMock = (): Partial => { + return { + getIncomingOriginatingApp: jest.fn(), + getIncomingEmbeddablePackage: jest.fn(), + navigateToWithOriginatingApp: jest.fn(), + navigateToWithEmbeddablePackage: jest.fn(), + }; +}; + const createSetupContract = (): Setup => { const setupContract: Setup = { registerEmbeddableFactory: jest.fn(), @@ -88,6 +98,8 @@ const createStartContract = (): Start => { getEmbeddableFactories: jest.fn(), getEmbeddableFactory: jest.fn(), EmbeddablePanel: jest.fn(), + getEmbeddablePanel: jest.fn(), + getStateTransfer: jest.fn(() => createEmbeddableStateTransferMock() as EmbeddableStateTransfer), }; return startContract; }; diff --git a/src/plugins/embeddable/public/plugin.tsx b/src/plugins/embeddable/public/plugin.tsx index 269b1ffed829b..c4e0ca44a4e7e 100644 --- a/src/plugins/embeddable/public/plugin.tsx +++ b/src/plugins/embeddable/public/plugin.tsx @@ -20,7 +20,13 @@ import React from 'react'; import { getSavedObjectFinder } from '../../saved_objects/public'; import { UiActionsSetup, UiActionsStart } from '../../ui_actions/public'; import { Start as InspectorStart } from '../../inspector/public'; -import { PluginInitializerContext, CoreSetup, CoreStart, Plugin } from '../../../core/public'; +import { + PluginInitializerContext, + CoreSetup, + CoreStart, + Plugin, + ScopedHistory, +} from '../../../core/public'; import { EmbeddableFactoryRegistry, EmbeddableFactoryProvider } from './types'; import { bootstrap } from './bootstrap'; import { @@ -32,6 +38,7 @@ import { EmbeddablePanel, } from './lib'; import { EmbeddableFactoryDefinition } from './lib/embeddables/embeddable_factory_definition'; +import { EmbeddableStateTransfer } from './lib/state_transfer'; export interface EmbeddableSetupDependencies { uiActions: UiActionsSetup; @@ -63,9 +70,13 @@ export interface EmbeddableStart { embeddableFactoryId: string ) => EmbeddableFactory | undefined; getEmbeddableFactories: () => IterableIterator; - EmbeddablePanel: React.FC<{ embeddable: IEmbeddable; hideHeader?: boolean }>; + EmbeddablePanel: EmbeddablePanelHOC; + getEmbeddablePanel: (stateTransfer?: EmbeddableStateTransfer) => EmbeddablePanelHOC; + getStateTransfer: (history?: ScopedHistory) => EmbeddableStateTransfer; } +export type EmbeddablePanelHOC = React.FC<{ embeddable: IEmbeddable; hideHeader?: boolean }>; + export class EmbeddablePublicPlugin implements Plugin { private readonly embeddableFactoryDefinitions: Map< string, @@ -73,6 +84,7 @@ export class EmbeddablePublicPlugin implements Plugin = new Map(); private readonly embeddableFactories: EmbeddableFactoryRegistry = new Map(); private customEmbeddableFactoryProvider?: EmbeddableFactoryProvider; + private outgoingOnlyStateTransfer: EmbeddableStateTransfer = {} as EmbeddableStateTransfer; private isRegistryReady = false; constructor(initializerContext: PluginInitializerContext) {} @@ -105,31 +117,42 @@ export class EmbeddablePublicPlugin implements Plugin ({ + embeddable, + hideHeader, + }: { + embeddable: IEmbeddable; + hideHeader?: boolean; + }) => ( + + ); + return { getEmbeddableFactory: this.getEmbeddableFactory, getEmbeddableFactories: this.getEmbeddableFactories, - EmbeddablePanel: ({ - embeddable, - hideHeader, - }: { - embeddable: IEmbeddable; - hideHeader?: boolean; - }) => ( - - ), + getStateTransfer: (history?: ScopedHistory) => { + return history + ? new EmbeddableStateTransfer(core.application.navigateToApp, history) + : this.outgoingOnlyStateTransfer; + }, + EmbeddablePanel: getEmbeddablePanelHoc(), + getEmbeddablePanel: getEmbeddablePanelHoc, }; } diff --git a/src/plugins/embeddable/public/tests/container.test.ts b/src/plugins/embeddable/public/tests/container.test.ts index 6a388fe61782a..e6162748fdb68 100644 --- a/src/plugins/embeddable/public/tests/container.test.ts +++ b/src/plugins/embeddable/public/tests/container.test.ts @@ -82,6 +82,7 @@ async function creatHelloWorldContainerAndEmbeddable( getEmbeddableFactory: start.getEmbeddableFactory, panelComponent: testPanel, }); + const embeddable = await container.addNewEmbeddable< ContactCardEmbeddableInput, ContactCardEmbeddableOutput, diff --git a/src/plugins/embeddable/public/types.ts b/src/plugins/embeddable/public/types.ts index a57af862f2a34..2d112b2359818 100644 --- a/src/plugins/embeddable/public/types.ts +++ b/src/plugins/embeddable/public/types.ts @@ -26,8 +26,6 @@ import { EmbeddableFactoryDefinition, } from './lib/embeddables'; -export const EMBEDDABLE_ORIGINATING_APP_PARAM = 'embeddableOriginatingApp'; - export type EmbeddableFactoryRegistry = Map; export type EmbeddableFactoryProvider = < diff --git a/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx b/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx index c4267c9a36f78..eb4b66401820f 100644 --- a/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx +++ b/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx @@ -26,7 +26,6 @@ import { EmbeddableOutput, ErrorEmbeddable, IContainer, - EMBEDDABLE_ORIGINATING_APP_PARAM, } from '../../../embeddable/public'; import { DisabledLabEmbeddable } from './disabled_lab_embeddable'; import { VisualizeEmbeddable, VisualizeInput, VisualizeOutput } from './visualize_embeddable'; @@ -50,7 +49,7 @@ interface VisualizationAttributes extends SavedObjectAttributes { } export interface VisualizeEmbeddableFactoryDeps { - start: StartServicesGetter>; + start: StartServicesGetter>; } export class VisualizeEmbeddableFactory @@ -103,15 +102,7 @@ export class VisualizeEmbeddableFactory } public async getCurrentAppId() { - let currentAppId = await this.deps - .start() - .core.application.currentAppId$.pipe(first()) - .toPromise(); - // TODO: Remove this after https://github.com/elastic/kibana/pull/63443 - if (currentAppId === 'kibana') { - currentAppId += `:${window.location.hash.split(/[\/\?]/)[1]}`; - } - return currentAppId; + return await this.deps.start().core.application.currentAppId$.pipe(first()).toPromise(); } public async createFromSavedObject( @@ -136,9 +127,8 @@ export class VisualizeEmbeddableFactory public async create() { // TODO: This is a bit of a hack to preserve the original functionality. Ideally we will clean this up // to allow for in place creation of visualizations without having to navigate away to a new URL. - const originatingAppParam = await this.getCurrentAppId(); showNewVisModal({ - editorParams: [`${EMBEDDABLE_ORIGINATING_APP_PARAM}=${originatingAppParam}`], + originatingApp: await this.getCurrentAppId(), outsideVisualizeApp: true, }); return undefined; diff --git a/src/plugins/visualizations/public/wizard/new_vis_modal.test.tsx b/src/plugins/visualizations/public/wizard/new_vis_modal.test.tsx index 57e30631becbc..dd89e98fb8fe5 100644 --- a/src/plugins/visualizations/public/wizard/new_vis_modal.test.tsx +++ b/src/plugins/visualizations/public/wizard/new_vis_modal.test.tsx @@ -22,6 +22,7 @@ import { mountWithIntl } from 'test_utils/enzyme_helpers'; import { TypesStart, VisType } from '../vis_types'; import { NewVisModal } from './new_vis_modal'; import { ApplicationStart, SavedObjectsStart } from '../../../../core/public'; +import { embeddablePluginMock } from '../../../embeddable/public/mocks'; describe('NewVisModal', () => { const defaultVisTypeParams = { @@ -144,30 +145,34 @@ describe('NewVisModal', () => { ); }); - it('closes and redirects properly if visualization with aliasPath and addToDashboard in editorParams', () => { + it('closes and redirects properly if visualization with aliasPath and originatingApp in props', () => { const onClose = jest.fn(); const navigateToApp = jest.fn(); + const stateTransfer = embeddablePluginMock.createStartContract().getStateTransfer(); const wrapper = mountWithIntl( ); const visButton = wrapper.find('button[data-test-subj="visType-visWithAliasUrl"]'); visButton.simulate('click'); - expect(navigateToApp).toBeCalledWith('otherApp', { - path: '#/aliasUrl?embeddableOriginatingApp=notAnApp', + expect(stateTransfer.navigateToWithOriginatingApp).toBeCalledWith('otherApp', { + path: '#/aliasUrl', + state: { originatingApp: 'coolJestTestApp' }, }); expect(onClose).toHaveBeenCalled(); }); - it('closes and redirects properly if visualization with aliasApp and without addToDashboard in editorParams', () => { + it('closes and redirects properly if visualization with aliasApp and without originatingApp in props', () => { const onClose = jest.fn(); const navigateToApp = jest.fn(); const wrapper = mountWithIntl( diff --git a/src/plugins/visualizations/public/wizard/new_vis_modal.tsx b/src/plugins/visualizations/public/wizard/new_vis_modal.tsx index 1a970e505b7c7..84a5bca0ed0ed 100644 --- a/src/plugins/visualizations/public/wizard/new_vis_modal.tsx +++ b/src/plugins/visualizations/public/wizard/new_vis_modal.tsx @@ -28,7 +28,7 @@ import { SearchSelection } from './search_selection'; import { TypeSelection } from './type_selection'; import { TypesStart, VisType, VisTypeAlias } from '../vis_types'; import { UsageCollectionSetup } from '../../../../plugins/usage_collection/public'; -import { EMBEDDABLE_ORIGINATING_APP_PARAM } from '../../../embeddable/public'; +import { EmbeddableStateTransfer } from '../../../embeddable/public'; import { VISUALIZE_ENABLE_LABS_SETTING } from '../../common/constants'; interface TypeSelectionProps { @@ -42,6 +42,8 @@ interface TypeSelectionProps { usageCollection?: UsageCollectionSetup; application: ApplicationStart; outsideVisualizeApp?: boolean; + stateTransfer?: EmbeddableStateTransfer; + originatingApp?: string; } interface TypeSelectionState { @@ -148,14 +150,8 @@ class NewVisModal extends React.Component - param.startsWith(EMBEDDABLE_ORIGINATING_APP_PARAM) - ); - params = originatingAppParam ? `${params}?${originatingAppParam}` : params; - } this.props.onClose(); - this.props.application.navigateToApp(visType.aliasApp, { path: params }); + this.navigate(visType.aliasApp, visType.aliasPath); return; } @@ -168,13 +164,24 @@ class NewVisModal extends React.Component void; + originatingApp?: string; outsideVisualizeApp?: boolean; } @@ -45,6 +47,7 @@ export interface ShowNewVisModalParams { export function showNewVisModal({ editorParams = [], onClose, + originatingApp, outsideVisualizeApp, }: ShowNewVisModalParams = {}) { const container = document.createElement('div'); @@ -65,6 +68,8 @@ export function showNewVisModal({ originatingApp; const visStateToEditorState = () => { @@ -647,7 +646,7 @@ function VisualizeAppController($scope, $route, $injector, $timeout, kbnUrlState */ function doSave(saveOptions) { // vis.title was not bound and it's needed to reflect title into visState - const firstSave = !Boolean(savedVis.id); + const newlyCreated = !Boolean(savedVis.id) || savedVis.copyOnSave; stateContainer.transitions.setVis({ title: savedVis.title, type: savedVis.type || stateContainer.getState().vis.type, @@ -680,16 +679,14 @@ function VisualizeAppController($scope, $route, $injector, $timeout, kbnUrlState // Manually insert a new url so the back button will open the saved visualization. history.replace(appPath); setActiveUrl(appPath); - const lastAppType = $scope.getOriginatingApp(); - - if (lastAppType === 'dashboards') { - const savedVisId = firstSave || savedVis.copyOnSave ? savedVis.id : ''; - dashboard.addEmbeddableToDashboard({ - embeddableId: savedVisId, - embeddableType: VISUALIZE_EMBEDDABLE_TYPE, - }); + if (newlyCreated && embeddable) { + embeddable + .getStateTransfer() + .navigateToWithEmbeddablePackage($scope.getOriginatingApp(), { + state: { id: savedVis.id, type: VISUALIZE_EMBEDDABLE_TYPE }, + }); } else { - application.navigateToApp(lastAppType); + application.navigateToApp($scope.getOriginatingApp()); } } else if (savedVis.id === $route.current.params.id) { chrome.docTitle.change(savedVis.lastSavedTitle); diff --git a/src/plugins/visualize/public/kibana_services.ts b/src/plugins/visualize/public/kibana_services.ts index 8d714f1844345..d954a3f4925ac 100644 --- a/src/plugins/visualize/public/kibana_services.ts +++ b/src/plugins/visualize/public/kibana_services.ts @@ -34,8 +34,8 @@ import { DataPublicPluginStart } from '../../data/public'; import { VisualizationsStart } from '../../visualizations/public'; import { SavedVisualizations } from './application/types'; import { KibanaLegacyStart } from '../../kibana_legacy/public'; -import { DashboardStart } from '../../dashboard/public'; import { SavedObjectsStart } from '../../saved_objects/public'; +import { EmbeddableStart } from '../../embeddable/public'; export interface VisualizeKibanaServices { pluginInitializerContext: PluginInitializerContext; @@ -52,7 +52,7 @@ export interface VisualizeKibanaServices { kibanaLegacy: KibanaLegacyStart; visualizeCapabilities: any; visualizations: VisualizationsStart; - dashboard: DashboardStart; + embeddable: EmbeddableStart; I18nContext: I18nStart['Context']; setActiveUrl: (newUrl: string) => void; createVisEmbeddableFromObject: VisualizationsStart['__LEGACY']['createVisEmbeddableFromObject']; diff --git a/src/plugins/visualize/public/plugin.ts b/src/plugins/visualize/public/plugin.ts index 8a05adc18964a..3bd111084e34b 100644 --- a/src/plugins/visualize/public/plugin.ts +++ b/src/plugins/visualize/public/plugin.ts @@ -40,16 +40,16 @@ import { VisualizationsStart } from '../../visualizations/public'; import { VisualizeConstants } from './application/visualize_constants'; import { setServices, VisualizeKibanaServices } from './kibana_services'; import { FeatureCatalogueCategory, HomePublicPluginSetup } from '../../home/public'; -import { DashboardStart } from '../../dashboard/public'; import { DEFAULT_APP_CATEGORIES } from '../../../core/public'; import { SavedObjectsStart } from '../../saved_objects/public'; +import { EmbeddableStart } from '../../embeddable/public'; export interface VisualizePluginStartDependencies { data: DataPublicPluginStart; navigation: NavigationStart; share?: SharePluginStart; visualizations: VisualizationsStart; - dashboard: DashboardStart; + embeddable: EmbeddableStart; kibanaLegacy: KibanaLegacyStart; savedObjects: SavedObjectsStart; } @@ -129,11 +129,11 @@ export class VisualizePlugin toastNotifications: coreStart.notifications.toasts, visualizeCapabilities: coreStart.application.capabilities.visualize, visualizations: pluginsStart.visualizations, + embeddable: pluginsStart.embeddable, I18nContext: coreStart.i18n.Context, setActiveUrl, createVisEmbeddableFromObject: pluginsStart.visualizations.__LEGACY.createVisEmbeddableFromObject, - dashboard: pluginsStart.dashboard, scopedHistory: () => this.currentHistory!, savedObjects: pluginsStart.savedObjects, }; diff --git a/x-pack/plugins/lens/public/app_plugin/app.test.tsx b/x-pack/plugins/lens/public/app_plugin/app.test.tsx index 53498a8e5afa1..cd6fbf96d6750 100644 --- a/x-pack/plugins/lens/public/app_plugin/app.test.tsx +++ b/x-pack/plugins/lens/public/app_plugin/app.test.tsx @@ -124,12 +124,7 @@ describe('Lens App', () => { storage: Storage; docId?: string; docStorage: SavedObjectStore; - redirectTo: ( - id?: string, - returnToOrigin?: boolean, - originatingApp?: string | undefined, - newlyCreated?: boolean - ) => void; + redirectTo: (id?: string, returnToOrigin?: boolean, newlyCreated?: boolean) => void; originatingApp: string | undefined; onAppLeave: AppMountParameters['onAppLeave']; history: History; @@ -168,14 +163,7 @@ describe('Lens App', () => { load: jest.fn(), save: jest.fn(), }, - redirectTo: jest.fn( - ( - id?: string, - returnToOrigin?: boolean, - originatingApp?: string | undefined, - newlyCreated?: boolean - ) => {} - ), + redirectTo: jest.fn((id?: string, returnToOrigin?: boolean, newlyCreated?: boolean) => {}), onAppLeave: jest.fn(), history: createMemoryHistory(), } as unknown) as jest.Mocked<{ @@ -186,12 +174,7 @@ describe('Lens App', () => { storage: Storage; docId?: string; docStorage: SavedObjectStore; - redirectTo: ( - id?: string, - returnToOrigin?: boolean, - originatingApp?: string | undefined, - newlyCreated?: boolean - ) => void; + redirectTo: (id?: string, returnToOrigin?: boolean, newlyCreated?: boolean) => void; originatingApp: string | undefined; onAppLeave: AppMountParameters['onAppLeave']; history: History; @@ -533,7 +516,7 @@ describe('Lens App', () => { expression: 'kibana 3', }); - expect(args.redirectTo).toHaveBeenCalledWith('aaa', undefined, undefined, true); + expect(args.redirectTo).toHaveBeenCalledWith('aaa', undefined, true); inst.setProps({ docId: 'aaa' }); @@ -553,7 +536,7 @@ describe('Lens App', () => { expression: 'kibana 3', }); - expect(args.redirectTo).toHaveBeenCalledWith('aaa', undefined, undefined, true); + expect(args.redirectTo).toHaveBeenCalledWith('aaa', undefined, true); inst.setProps({ docId: 'aaa' }); @@ -621,7 +604,7 @@ describe('Lens App', () => { title: 'hello there', }); - expect(args.redirectTo).toHaveBeenCalledWith('aaa', true, undefined, true); + expect(args.redirectTo).toHaveBeenCalledWith('aaa', true, true); }); it('saves app filters and does not save pinned filters', async () => { diff --git a/x-pack/plugins/lens/public/app_plugin/app.tsx b/x-pack/plugins/lens/public/app_plugin/app.tsx index fc8d5dd9eb395..0ab547bed6d37 100644 --- a/x-pack/plugins/lens/public/app_plugin/app.tsx +++ b/x-pack/plugins/lens/public/app_plugin/app.tsx @@ -43,7 +43,6 @@ interface State { isLoading: boolean; isSaveModalVisible: boolean; indexPatternsForTopNav: IndexPatternInstance[]; - originatingApp: string | undefined; persistedDoc?: Document; lastKnownDoc?: Document; @@ -65,7 +64,7 @@ export function App({ docId, docStorage, redirectTo, - originatingAppFromUrl, + originatingApp, navigation, onAppLeave, history, @@ -77,13 +76,8 @@ export function App({ storage: IStorageWrapper; docId?: string; docStorage: SavedObjectStore; - redirectTo: ( - id?: string, - returnToOrigin?: boolean, - originatingApp?: string | undefined, - newlyCreated?: boolean - ) => void; - originatingAppFromUrl?: string | undefined; + redirectTo: (id?: string, returnToOrigin?: boolean, newlyCreated?: boolean) => void; + originatingApp?: string | undefined; onAppLeave: AppMountParameters['onAppLeave']; history: History; }) { @@ -98,7 +92,6 @@ export function App({ isSaveModalVisible: false, indexPatternsForTopNav: [], query: { query: '', language }, - originatingApp: originatingAppFromUrl, dateRange: { fromDate: currentRange.from, toDate: currentRange.to, @@ -316,7 +309,7 @@ export function App({ lastKnownDoc: newDoc, })); if (docId !== id || saveProps.returnToOrigin) { - redirectTo(id, saveProps.returnToOrigin, state.originatingApp, newlyCreated); + redirectTo(id, saveProps.returnToOrigin, newlyCreated); } }) .catch((e) => { @@ -356,7 +349,7 @@ export function App({
{ if (isSaveable && lastKnownDoc) { setState((s) => ({ ...s, isSaveModalVisible: true })); @@ -509,7 +502,7 @@ export function App({
{lastKnownDoc && state.isSaveModalVisible && ( runSave(props)} onClose={() => setState((s) => ({ ...s, isSaveModalVisible: false }))} documentInfo={{ diff --git a/x-pack/plugins/lens/public/app_plugin/mounter.tsx b/x-pack/plugins/lens/public/app_plugin/mounter.tsx index e6a9119ad4306..7a33241792a58 100644 --- a/x-pack/plugins/lens/public/app_plugin/mounter.tsx +++ b/x-pack/plugins/lens/public/app_plugin/mounter.tsx @@ -10,9 +10,8 @@ import { FormattedMessage, I18nProvider } from '@kbn/i18n/react'; import { HashRouter, Route, RouteComponentProps, Switch } from 'react-router-dom'; import { render, unmountComponentAtNode } from 'react-dom'; import { i18n } from '@kbn/i18n'; -import { parse } from 'query-string'; -import { removeQueryParam, Storage } from '../../../../../src/plugins/kibana_utils/public'; +import { Storage } from '../../../../../src/plugins/kibana_utils/public'; import { LensReportManager, setReportManager, trackUiEvent } from '../lens_ui_telemetry'; @@ -29,7 +28,7 @@ export async function mountApp( createEditorFrame: EditorFrameStart['createInstance'] ) { const [coreStart, startDependencies] = await core.getStartServices(); - const { data: dataStart, navigation } = startDependencies; + const { data: dataStart, navigation, embeddable } = startDependencies; const savedObjectsClient = coreStart.savedObjects.client; addHelpMenuToAppChrome(coreStart.chrome, coreStart.docLinks); @@ -37,6 +36,10 @@ export async function mountApp( i18n.translate('xpack.lens.pageTitle', { defaultMessage: 'Lens' }) ); + const stateTransfer = embeddable?.getStateTransfer(params.history); + const { originatingApp } = + stateTransfer?.getIncomingOriginatingApp({ keysToRemoveAfterFetch: ['originatingApp'] }) || {}; + const instance = await createEditorFrame(); setReportManager( @@ -49,7 +52,6 @@ export async function mountApp( routeProps: RouteComponentProps<{ id?: string }>, id?: string, returnToOrigin?: boolean, - originatingApp?: string, newlyCreated?: boolean ) => { if (!id) { @@ -59,11 +61,9 @@ export async function mountApp( } else if (!!originatingApp && id && returnToOrigin) { routeProps.history.push(`/edit/${id}`); - if (originatingApp === 'dashboards') { - const addLensId = newlyCreated ? id : ''; - startDependencies.dashboard.addEmbeddableToDashboard({ - embeddableId: addLensId, - embeddableType: LENS_EMBEDDABLE_TYPE, + if (newlyCreated && stateTransfer) { + stateTransfer.navigateToWithEmbeddablePackage(originatingApp, { + state: { id, type: LENS_EMBEDDABLE_TYPE }, }); } else { coreStart.application.navigateToApp(originatingApp); @@ -73,11 +73,6 @@ export async function mountApp( const renderEditor = (routeProps: RouteComponentProps<{ id?: string }>) => { trackUiEvent('loaded'); - const urlParams = parse(routeProps.location.search) as Record; - const originatingAppFromUrl = urlParams.embeddableOriginatingApp; - if (urlParams.embeddableOriginatingApp) { - removeQueryParam(routeProps.history, 'embeddableOriginatingApp'); - } return ( - redirectTo(routeProps, id, returnToOrigin, originatingApp, newlyCreated) + redirectTo={(id, returnToOrigin, newlyCreated) => + redirectTo(routeProps, id, returnToOrigin, newlyCreated) } - originatingAppFromUrl={originatingAppFromUrl} + originatingApp={originatingApp} onAppLeave={params.onAppLeave} history={routeProps.history} /> diff --git a/x-pack/plugins/lens/public/plugin.ts b/x-pack/plugins/lens/public/plugin.ts index 3000c9321b3b9..25458d86f0e12 100644 --- a/x-pack/plugins/lens/public/plugin.ts +++ b/x-pack/plugins/lens/public/plugin.ts @@ -6,7 +6,7 @@ import { AppMountParameters, CoreSetup, CoreStart } from 'kibana/public'; import { DataPublicPluginSetup, DataPublicPluginStart } from 'src/plugins/data/public'; -import { EmbeddableSetup } from 'src/plugins/embeddable/public'; +import { EmbeddableSetup, EmbeddableStart } from 'src/plugins/embeddable/public'; import { ExpressionsSetup, ExpressionsStart } from 'src/plugins/expressions/public'; import { VisualizationsSetup } from 'src/plugins/visualizations/public'; import { NavigationPublicPluginStart } from 'src/plugins/navigation/public'; @@ -26,7 +26,6 @@ import { EditorFrameStart } from './types'; import { getLensAliasConfig } from './vis_type_alias'; import './index.scss'; -import { DashboardStart } from '../../../../src/plugins/dashboard/public'; export interface LensPluginSetupDependencies { kibanaLegacy: KibanaLegacySetup; @@ -41,7 +40,7 @@ export interface LensPluginStartDependencies { expressions: ExpressionsStart; navigation: NavigationPublicPluginStart; uiActions: UiActionsStart; - dashboard: DashboardStart; + embeddable: EmbeddableStart; } export class LensPlugin {