[Dashboard First] Lens By Value

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

@@ -60,6 +60,7 @@ import {
   ViewMode,
   ContainerOutput,
   EmbeddableInput,
+  SavedObjectEmbeddableInput,
 } from '../../../embeddable/public';
 import { NavAction, SavedDashboardPanel } from '../types';
 
@@ -428,19 +429,23 @@ export class DashboardAppController {
 
             const incomingState = embeddable
               .getStateTransfer(scopedHistory())
-              .getIncomingEmbeddablePackage();
+              .getIncomingEmbeddablePackage({ keysToRemoveAfterFetch: ['id', 'type', 'input'] });
             if (incomingState) {
               if ('id' in incomingState) {
-                container.addNewEmbeddable<EmbeddableInput>(incomingState.type, {
+                container.addOrUpdateEmbeddable<SavedObjectEmbeddableInput>(incomingState.type, {
                   savedObjectId: incomingState.id,
+                  id: incomingState.embeddableIdToReplace,
                 });
               } else if ('input' in incomingState) {
-                const input = incomingState.input;
-                delete input.id;
-                const explicitInput = {
-                  savedVis: input,
-                };
-                container.addNewEmbeddable<EmbeddableInput>(incomingState.type, explicitInput);
+                // TODO: Get rid of this, maybe by making the visualize embeddable also use the attributeService
+                const explicitInput =
+                  incomingState.type === 'lens'
+                    ? incomingState.input
+                    : {
+                        savedVis: incomingState.input,
+                      };
+
+                container.addOrUpdateEmbeddable<EmbeddableInput>(incomingState.type, explicitInput);
               }
             }
           }

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

@@ -46,7 +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';
+import { EmbeddableStateTransfer, EmbeddableOutput } from '../../../../embeddable/public';
 
 export interface DashboardContainerInput extends ContainerInput {
   viewMode: ViewMode;
@@ -159,29 +159,55 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
         [placeholderPanelState.explicitInput.id]: placeholderPanelState,
       },
     });
-    newStateComplete.then((newPanelState: Partial<PanelState>) => {
-      const finalPanels = { ...this.input.panels };
-      delete finalPanels[placeholderPanelState.explicitInput.id];
-      const newPanelId = newPanelState.explicitInput?.id
-        ? newPanelState.explicitInput.id
-        : uuid.v4();
-      finalPanels[newPanelId] = {
-        ...placeholderPanelState,
-        ...newPanelState,
-        gridData: {
-          ...placeholderPanelState.gridData,
-          i: newPanelId,
-        },
+    newStateComplete.then((newPanelState: Partial<PanelState>) =>
+      this.replacePanel(placeholderPanelState, newPanelState)
+    );
+  }
+
+  public replacePanel(
+    previousPanelState: DashboardPanelState<EmbeddableInput>,
+    newPanelState: Partial<PanelState>
+  ) {
+    // TODO: In the current infrastructure, embeddables in a container do not react properly to
+    // changes. Removing the existing embeddable, and adding a new one is a temporary workaround
+    // until the container logic is fixed.
+    const finalPanels = { ...this.input.panels };
+    delete finalPanels[previousPanelState.explicitInput.id];
+    const newPanelId = newPanelState.explicitInput?.id ? newPanelState.explicitInput.id : uuid.v4();
+    finalPanels[newPanelId] = {
+      ...previousPanelState,
+      ...newPanelState,
+      gridData: {
+        ...previousPanelState.gridData,
+        i: newPanelId,
+      },
+      explicitInput: {
+        ...newPanelState.explicitInput,
+        id: newPanelId,
+      },
+    };
+    this.updateInput({
+      panels: finalPanels,
+      lastReloadRequestTime: new Date().getTime(),
+    });
+  }
+
+  public async addOrUpdateEmbeddable<
+    EEI extends EmbeddableInput = EmbeddableInput,
+    EEO extends EmbeddableOutput = EmbeddableOutput,
+    E extends IEmbeddable<EEI, EEO> = IEmbeddable<EEI, EEO>
+  >(type: string, explicitInput: Partial<EEI>) {
+    if (explicitInput.id && this.input.panels[explicitInput.id]) {
+      this.replacePanel(this.input.panels[explicitInput.id], {
+        type,
         explicitInput: {
-          ...newPanelState.explicitInput,
-          id: newPanelId,
+          ...explicitInput,
+          id: uuid.v4(),
         },
-      };
-      this.updateInput({
-        panels: finalPanels,
-        lastReloadRequestTime: new Date().getTime(),
       });
-    });
+    } else {
+      this.addNewEmbeddable<EEI, EEO, E>(type, explicitInput);
+    }
   }
 
   public render(dom: HTMLElement) {

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

@@ -53,15 +53,42 @@ test('is compatible when edit url is available, in edit mode and editable', asyn
   ).toBe(true);
 });
 
-test('redirects to app using state transfer', async () => {
+test('redirects to app using state transfer with by value mode', async () => {
   applicationMock.currentAppId$ = of('superCoolCurrentApp');
   const action = new EditPanelAction(getFactory, applicationMock, stateTransferMock);
-  const embeddable = new EditableEmbeddable({ id: '123', viewMode: ViewMode.EDIT }, true);
+  const embeddable = new EditableEmbeddable(
+    { id: '123', viewMode: ViewMode.EDIT, coolInput1: 1, coolInput2: 2 },
+    true
+  );
+  embeddable.getOutput = jest.fn(() => ({ editApp: 'ultraVisualize', editPath: '/123' }));
+  await action.execute({ embeddable });
+  expect(stateTransferMock.navigateToEditor).toHaveBeenCalledWith('ultraVisualize', {
+    path: '/123',
+    state: {
+      byValueMode: true,
+      originatingApp: 'superCoolCurrentApp',
+      valueInput: {
+        id: '123',
+        viewMode: ViewMode.EDIT,
+        coolInput1: 1,
+        coolInput2: 2,
+      },
+    },
+  });
+});
+
+test('redirects to app using state transfer without by value mode', async () => {
+  applicationMock.currentAppId$ = of('superCoolCurrentApp');
+  const action = new EditPanelAction(getFactory, applicationMock, stateTransferMock);
+  const embeddable = new EditableEmbeddable(
+    { id: '123', viewMode: ViewMode.EDIT, savedObjectId: '1234' },
+    true
+  );
   embeddable.getOutput = jest.fn(() => ({ editApp: 'ultraVisualize', editPath: '/123' }));
   await action.execute({ embeddable });
   expect(stateTransferMock.navigateToEditor).toHaveBeenCalledWith('ultraVisualize', {
     path: '/123',
-    state: { originatingApp: 'superCoolCurrentApp' },
+    state: { originatingApp: 'superCoolCurrentApp', byValueMode: false, valueInput: undefined },
   });
 });
 

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

@@ -24,7 +24,8 @@ import { take } from 'rxjs/operators';
 import { ViewMode } from '../types';
 import { EmbeddableFactoryNotFoundError } from '../errors';
 import { EmbeddableStart } from '../../plugin';
-import { IEmbeddable, EmbeddableEditorState, EmbeddableStateTransfer } from '../..';
+import { IEmbeddable, EmbeddableStateTransfer, EmbeddableEditorState } from '../..';
+import { SavedObjectEmbeddableInput } from '..';
 
 export const ACTION_EDIT_PANEL = 'editPanel';
 
@@ -109,8 +110,16 @@ export class EditPanelAction implements Action<ActionContext> {
     const app = embeddable ? embeddable.getOutput().editApp : undefined;
     const path = embeddable ? embeddable.getOutput().editPath : undefined;
     if (app && path) {
-      const state = this.currentAppId ? { originatingApp: this.currentAppId } : undefined;
-      return { app, path, state };
+      if (this.currentAppId) {
+        const byValueMode = !(embeddable.getInput() as SavedObjectEmbeddableInput).savedObjectId;
+        const state: EmbeddableEditorState = {
+          originatingApp: this.currentAppId,
+          byValueMode,
+          valueInput: byValueMode ? embeddable.getInput() : undefined,
+        };
+        return { app, path, state };
+      }
+      return { app, path };
     }
   }
 

src/plugins/embeddable/public/lib/containers/container.ts

@@ -198,8 +198,8 @@ export abstract class Container<
     return {
       type: factory.type,
       explicitInput: {
-        id: embeddableId,
         ...explicitInput,
+        id: embeddableId,
       } as TEmbeddableInput,
     };
   }

src/plugins/embeddable/public/lib/state_transfer/types.ts

@@ -40,6 +40,7 @@ export function isEmbeddableEditorState(state: unknown): state is EmbeddableEdit
 export interface EmbeddablePackageByReferenceState {
   type: string;
   id: string;
+  embeddableIdToReplace?: string;
 }
 
 /**

src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx

@@ -136,6 +136,7 @@ export class VisualizeEmbeddableFactory
       showNewVisModal({
         originatingApp: await this.getCurrentAppId(),
         outsideVisualizeApp: true,
+        createByValue: true,
       });
       return undefined;
     }

src/plugins/visualizations/public/wizard/new_vis_modal.tsx

@@ -43,6 +43,7 @@ interface TypeSelectionProps {
   application: ApplicationStart;
   outsideVisualizeApp?: boolean;
   stateTransfer?: EmbeddableStateTransfer;
+  createByValue?: boolean;
   originatingApp?: string;
 }
 
@@ -174,7 +175,7 @@ class NewVisModal extends React.Component<TypeSelectionProps, TypeSelectionState
     if (this.props.stateTransfer && this.props.originatingApp) {
       this.props.stateTransfer.navigateToEditor(appId, {
         path: params,
-        state: { originatingApp: this.props.originatingApp },
+        state: { originatingApp: this.props.originatingApp, byValueMode: this.props.createByValue },
       });
     } else {
       this.props.application.navigateToApp(appId, {

src/plugins/visualizations/public/wizard/show_new_vis.tsx

@@ -37,6 +37,7 @@ export interface ShowNewVisModalParams {
   onClose?: () => void;
   originatingApp?: string;
   outsideVisualizeApp?: boolean;
+  createByValue?: boolean;
 }
 
 /**
@@ -49,6 +50,7 @@ export function showNewVisModal({
   onClose,
   originatingApp,
   outsideVisualizeApp,
+  createByValue,
 }: ShowNewVisModalParams = {}) {
   const container = document.createElement('div');
   let isClosed = false;
@@ -69,6 +71,7 @@ export function showNewVisModal({
         isOpen={true}
         onClose={handleClose}
         originatingApp={originatingApp}
+        createByValue={createByValue}
         stateTransfer={getEmbeddable().getStateTransfer()}
         outsideVisualizeApp={outsideVisualizeApp}
         editorParams={editorParams}

x-pack/plugins/lens/common/constants.ts

@@ -13,6 +13,6 @@ export function getBasePath() {
   return `#/`;
 }
 
-export function getEditPath(id: string) {
-  return `#/edit/${encodeURIComponent(id)}`;
+export function getEditPath(id: string | undefined) {
+  return id ? `#/edit/${encodeURIComponent(id)}` : '#/edit/value';
 }

x-pack/plugins/lens/public/app_plugin/app.test.tsx

@@ -124,7 +124,13 @@ describe('Lens App', () => {
     storage: Storage;
     docId?: string;
     docStorage: SavedObjectStore;
-    redirectTo: (id?: string, returnToOrigin?: boolean, newlyCreated?: boolean) => void;
+    redirectTo: (
+      id?: string,
+      documentByValue?: Document,
+      returnToOrigin?: boolean,
+      newlyCreated?: boolean,
+      embeddableIdToReplace?: string
+    ) => void;
     originatingApp: string | undefined;
     onAppLeave: AppMountParameters['onAppLeave'];
     history: History;
@@ -163,7 +169,15 @@ describe('Lens App', () => {
         load: jest.fn(),
         save: jest.fn(),
       },
-      redirectTo: jest.fn((id?: string, returnToOrigin?: boolean, newlyCreated?: boolean) => {}),
+      redirectTo: jest.fn(
+        (
+          id?: string,
+          documentByValue?: Document,
+          returnToOrigin?: boolean,
+          newlyCreated?: boolean,
+          embeddableIdToReplace?: string
+        ) => {}
+      ),
       onAppLeave: jest.fn(),
       history: createMemoryHistory(),
     } as unknown) as jest.Mocked<{
@@ -174,7 +188,13 @@ describe('Lens App', () => {
       storage: Storage;
       docId?: string;
       docStorage: SavedObjectStore;
-      redirectTo: (id?: string, returnToOrigin?: boolean, newlyCreated?: boolean) => void;
+      redirectTo: (
+        id?: string,
+        documentByValue?: Document,
+        returnToOrigin?: boolean,
+        newlyCreated?: boolean,
+        embeddableIdToReplace?: string
+      ) => void;
       originatingApp: string | undefined;
       onAppLeave: AppMountParameters['onAppLeave'];
       history: History;
@@ -517,7 +537,7 @@ describe('Lens App', () => {
           expression: 'kibana 3',
         });
 
-        expect(args.redirectTo).toHaveBeenCalledWith('aaa', undefined, true);
+        expect(args.redirectTo).toHaveBeenCalledWith('aaa', undefined, undefined, true, undefined);
 
         inst.setProps({ docId: 'aaa' });
 
@@ -537,7 +557,7 @@ describe('Lens App', () => {
           expression: 'kibana 3',
         });
 
-        expect(args.redirectTo).toHaveBeenCalledWith('aaa', undefined, true);
+        expect(args.redirectTo).toHaveBeenCalledWith('aaa', undefined, undefined, true, undefined);
 
         inst.setProps({ docId: 'aaa' });
 
@@ -605,7 +625,7 @@ describe('Lens App', () => {
           title: 'hello there',
         });
 
-        expect(args.redirectTo).toHaveBeenCalledWith('aaa', true, true);
+        expect(args.redirectTo).toHaveBeenCalledWith('aaa', undefined, true, true, undefined);
       });
 
       it('saves app filters and does not save pinned filters', async () => {