Return to dashboard after editing embeddable (#62865) (#65371)

Changed the process for saving visualizations and lens visualizations when the user has been redirected there from another application.

Co-authored-by: Elastic Machine <[email protected]>

Author: ThomThomson

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

@@ -34,6 +34,7 @@ import {
 import { KibanaContextProvider } from '../../../../../kibana_react/public';
 // eslint-disable-next-line
 import { embeddablePluginMock } from 'src/plugins/embeddable/public/mocks';
+import { applicationServiceMock } from '../../../../../../core/public/mocks';
 
 let dashboardContainer: DashboardContainer | undefined;
 
@@ -50,7 +51,7 @@ function getProps(
 
   const start = doStart();
   const options: DashboardContainerOptions = {
-    application: {} as any,
+    application: applicationServiceMock.createStartContract(),
     embeddable: {
       getTriggerCompatibleActions: (() => []) as any,
       getEmbeddableFactories: start.getEmbeddableFactories,

src/plugins/dashboard/public/application/tests/dashboard_container.test.tsx

@@ -38,6 +38,7 @@ import { embeddablePluginMock } from '../../../../embeddable/public/mocks';
 import { inspectorPluginMock } from '../../../../inspector/public/mocks';
 import { KibanaContextProvider } from '../../../../kibana_react/public';
 import { uiActionsPluginMock } from '../../../../ui_actions/public/mocks';
+import { applicationServiceMock } from '../../../../../core/public/mocks';
 
 test('DashboardContainer in edit mode shows edit mode actions', async () => {
   const inspector = inspectorPluginMock.createStartContract();
@@ -56,7 +57,7 @@ test('DashboardContainer in edit mode shows edit mode actions', async () => {
 
   const initialInput = getSampleDashboardInput({ viewMode: ViewMode.VIEW });
   const options: DashboardContainerOptions = {
-    application: {} as any,
+    application: applicationServiceMock.createStartContract(),
     embeddable: start,
     notifications: {} as any,
     overlays: {} as any,
@@ -84,7 +85,7 @@ test('DashboardContainer in edit mode shows edit mode actions', async () => {
           getAllEmbeddableFactories={(() => []) as any}
           getEmbeddableFactory={(() => null) as any}
           notifications={{} as any}
-          application={{} as any}
+          application={options.application}
           overlays={{} as any}
           inspector={inspector}
           SavedObjectFinder={() => null}

src/plugins/dashboard/public/dashboard_constants.ts

@@ -18,7 +18,6 @@
  */
 
 export const DashboardConstants = {
-  ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM: 'addToDashboard',
   LANDING_PAGE_PATH: '/dashboards',
   CREATE_NEW_DASHBOARD_URL: '/dashboard',
   ADD_EMBEDDABLE_ID: 'addEmbeddableId',

src/plugins/embeddable/public/index.ts

@@ -22,6 +22,7 @@ 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,

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

@@ -22,10 +22,12 @@ import { Embeddable, EmbeddableInput } from '../embeddables';
 import { ViewMode } from '../types';
 import { ContactCardEmbeddable } from '../test_samples';
 import { embeddablePluginMock } from '../../mocks';
+import { applicationServiceMock } from '../../../../../core/public/mocks';
 
 const { doStart } = embeddablePluginMock.createInstance();
 const start = doStart();
 const getFactory = start.getEmbeddableFactory;
+const applicationMock = applicationServiceMock.createStartContract();
 
 class EditableEmbeddable extends Embeddable {
   public readonly type = 'EDITABLE_EMBEDDABLE';
@@ -41,7 +43,7 @@ class EditableEmbeddable extends Embeddable {
 }
 
 test('is compatible when edit url is available, in edit mode and editable', async () => {
-  const action = new EditPanelAction(getFactory, {} as any);
+  const action = new EditPanelAction(getFactory, applicationMock);
   expect(
     await action.isCompatible({
       embeddable: new EditableEmbeddable({ id: '123', viewMode: ViewMode.EDIT }, true),
@@ -50,7 +52,7 @@ test('is compatible when edit url is available, in edit mode and editable', asyn
 });
 
 test('getHref returns the edit urls', async () => {
-  const action = new EditPanelAction(getFactory, {} as any);
+  const action = new EditPanelAction(getFactory, applicationMock);
   expect(action.getHref).toBeDefined();
 
   if (action.getHref) {
@@ -64,7 +66,7 @@ test('getHref returns the edit urls', async () => {
 });
 
 test('is not compatible when edit url is not available', async () => {
-  const action = new EditPanelAction(getFactory, {} as any);
+  const action = new EditPanelAction(getFactory, applicationMock);
   const embeddable = new ContactCardEmbeddable(
     {
       id: '123',
@@ -83,7 +85,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, {} as any);
+  const action = new EditPanelAction(getFactory, applicationMock);
   expect(
     await action.isCompatible({
       embeddable: new EditableEmbeddable(
@@ -98,7 +100,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, {} as any);
+  const action = new EditPanelAction(getFactory, applicationMock);
   expect(
     await action.isCompatible({
       embeddable: new EditableEmbeddable(

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

@@ -20,10 +20,11 @@
 import { i18n } from '@kbn/i18n';
 import { ApplicationStart } from 'kibana/public';
 import { Action } from 'src/plugins/ui_actions/public';
+import { take } from 'rxjs/operators';
 import { ViewMode } from '../types';
 import { EmbeddableFactoryNotFoundError } from '../errors';
-import { IEmbeddable } from '../embeddables';
 import { EmbeddableStart } from '../../plugin';
+import { EMBEDDABLE_ORIGINATING_APP_PARAM, IEmbeddable } from '../..';
 
 export const ACTION_EDIT_PANEL = 'editPanel';
 
@@ -35,11 +36,18 @@ export class EditPanelAction implements Action<ActionContext> {
   public readonly type = ACTION_EDIT_PANEL;
   public readonly id = ACTION_EDIT_PANEL;
   public order = 50;
+  public currentAppId: string | undefined;
 
   constructor(
     private readonly getEmbeddableFactory: EmbeddableStart['getEmbeddableFactory'],
     private readonly application: ApplicationStart
-  ) {}
+  ) {
+    if (this.application?.currentAppId$) {
+      this.application.currentAppId$
+        .pipe(take(1))
+        .subscribe((appId: string | undefined) => (this.currentAppId = appId));
+    }
+  }
 
   public getDisplayName({ embeddable }: ActionContext) {
     const factory = this.getEmbeddableFactory(embeddable.type);
@@ -93,7 +101,15 @@ export class EditPanelAction implements Action<ActionContext> {
   }
 
   public async getHref({ embeddable }: ActionContext): Promise<string> {
-    const editUrl = embeddable ? embeddable.getOutput().editUrl : undefined;
+    let editUrl = embeddable ? embeddable.getOutput().editUrl : undefined;
+    if (editUrl && this.currentAppId) {
+      editUrl += `?${EMBEDDABLE_ORIGINATING_APP_PARAM}=${this.currentAppId}`;
+
+      // TODO: Remove this after https://github.com/elastic/kibana/pull/63443
+      if (this.currentAppId === 'kibana') {
+        editUrl += `:${window.location.hash.split(/[\/\?]/)[1]}`;
+      }
+    }
     return editUrl ? editUrl : '';
   }
 }

src/plugins/embeddable/public/lib/panel/embeddable_panel.test.tsx

@@ -44,6 +44,7 @@ import {
 import { inspectorPluginMock } from '../../../../inspector/public/mocks';
 import { EuiBadge } from '@elastic/eui';
 import { embeddablePluginMock } from '../../mocks';
+import { applicationServiceMock } from '../../../../../core/public/mocks';
 
 const actionRegistry = new Map<string, Action>();
 const triggerRegistry = new Map<string, Trigger>();
@@ -55,6 +56,7 @@ const trigger: Trigger = {
   id: CONTEXT_MENU_TRIGGER,
 };
 const embeddableFactory = new ContactCardEmbeddableFactory((() => null) as any, {} as any);
+const applicationMock = applicationServiceMock.createStartContract();
 
 actionRegistry.set(editModeAction.id, editModeAction);
 triggerRegistry.set(trigger.id, trigger);
@@ -159,7 +161,7 @@ test('HelloWorldContainer in view mode hides edit mode actions', async () => {
         getAllEmbeddableFactories={start.getEmbeddableFactories}
         getEmbeddableFactory={start.getEmbeddableFactory}
         notifications={{} as any}
-        application={{} as any}
+        application={applicationMock}
         overlays={{} as any}
         inspector={inspector}
         SavedObjectFinder={() => null}
@@ -199,7 +201,7 @@ const renderInEditModeAndOpenContextMenu = async (
         getEmbeddableFactory={start.getEmbeddableFactory}
         notifications={{} as any}
         overlays={{} as any}
-        application={{} as any}
+        application={applicationMock}
         inspector={inspector}
         SavedObjectFinder={() => null}
       />
@@ -306,7 +308,7 @@ test('HelloWorldContainer in edit mode shows edit mode actions', async () => {
         getEmbeddableFactory={start.getEmbeddableFactory}
         notifications={{} as any}
         overlays={{} as any}
-        application={{} as any}
+        application={applicationMock}
         inspector={inspector}
         SavedObjectFinder={() => null}
       />
@@ -369,7 +371,7 @@ test('Updates when hidePanelTitles is toggled', async () => {
         getEmbeddableFactory={start.getEmbeddableFactory}
         notifications={{} as any}
         overlays={{} as any}
-        application={{} as any}
+        application={applicationMock}
         inspector={inspector}
         SavedObjectFinder={() => null}
       />
@@ -422,7 +424,7 @@ test('Check when hide header option is false', async () => {
         getEmbeddableFactory={start.getEmbeddableFactory}
         notifications={{} as any}
         overlays={{} as any}
-        application={{} as any}
+        application={applicationMock}
         inspector={inspector}
         SavedObjectFinder={() => null}
         hideHeader={false}

src/plugins/embeddable/public/types.ts

@@ -26,6 +26,8 @@ import {
   EmbeddableFactoryDefinition,
 } from './lib/embeddables';
 
+export const EMBEDDABLE_ORIGINATING_APP_PARAM = 'embeddableOriginatingApp';
+
 export type EmbeddableFactoryRegistry = Map<string, EmbeddableFactory>;
 
 export type EmbeddableFactoryProvider = <

src/plugins/saved_objects/public/index.ts

@@ -19,7 +19,14 @@
 
 import { SavedObjectsPublicPlugin } from './plugin';
 
-export { OnSaveProps, SavedObjectSaveModal, SaveResult, showSaveModal } from './save_modal';
+export {
+  OnSaveProps,
+  SavedObjectSaveModal,
+  SavedObjectSaveModalOrigin,
+  SaveModalState,
+  SaveResult,
+  showSaveModal,
+} from './save_modal';
 export { getSavedObjectFinder, SavedObjectFinderUi, SavedObjectMetaData } from './finder';
 export {
   SavedObjectLoader,

src/plugins/saved_objects/public/save_modal/index.ts

@@ -17,5 +17,6 @@
  * under the License.
  */
 
-export { SavedObjectSaveModal, OnSaveProps } from './saved_object_save_modal';
+export { SavedObjectSaveModal, OnSaveProps, SaveModalState } from './saved_object_save_modal';
+export { SavedObjectSaveModalOrigin } from './saved_object_save_modal_origin';
 export { showSaveModal, SaveResult } from './show_saved_object_save_modal';