[Dashboard First] Lens By Value

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

@@ -57,7 +57,6 @@ import {
   ViewMode,
   ContainerOutput,
   EmbeddableInput,
-  SavedObjectEmbeddableInput,
 } from '../../../embeddable/public';
 import { NavAction, SavedDashboardPanel } from '../types';
 
@@ -168,7 +167,7 @@ export class DashboardAppController {
       chrome.docTitle.change(dash.title);
     }
 
-    const incomingEmbeddable = embeddable
+    let incomingEmbeddable = embeddable
       .getStateTransfer(scopedHistory())
       .getIncomingEmbeddablePackage();
 
@@ -328,6 +327,21 @@ export class DashboardAppController {
       dashboardStateManager.getPanels().forEach((panel: SavedDashboardPanel) => {
         embeddablesMap[panel.panelIndex] = convertSavedDashboardPanelToPanelState(panel);
       });
+
+      // If the incoming embeddable state's id already exists in the embeddables map, replace the input, retaining the existing gridData for that panel.
+      if (incomingEmbeddable?.embeddableId && embeddablesMap[incomingEmbeddable.embeddableId]) {
+        const originalPanelState = { ...embeddablesMap[incomingEmbeddable.embeddableId] };
+        embeddablesMap[incomingEmbeddable.embeddableId] = {
+          gridData: originalPanelState.gridData,
+          type: incomingEmbeddable.type,
+          explicitInput: {
+            ...incomingEmbeddable.input,
+            id: incomingEmbeddable.embeddableId,
+          },
+        };
+        incomingEmbeddable = undefined;
+      }
+
       let expandedPanelId;
       if (dashboardContainer && !isErrorEmbeddable(dashboardContainer)) {
         expandedPanelId = dashboardContainer.getInput().expandedPanelId;
@@ -454,30 +468,16 @@ export class DashboardAppController {
               refreshDashboardContainer();
             });
 
-            if (incomingEmbeddable) {
-              if ('id' in incomingEmbeddable) {
-                container.addOrUpdateEmbeddable<SavedObjectEmbeddableInput>(
-                  incomingEmbeddable.type,
-                  {
-                    savedObjectId: incomingEmbeddable.id,
-                  }
-                );
-              } else if ('input' in incomingEmbeddable) {
-                const input = incomingEmbeddable.input;
-                delete input.id;
-                const explicitInput = {
-                  savedVis: input,
-                };
-                const embeddableId =
-                  'embeddableId' in incomingEmbeddable
-                    ? incomingEmbeddable.embeddableId
-                    : undefined;
-                container.addOrUpdateEmbeddable<EmbeddableInput>(
-                  incomingEmbeddable.type,
-                  explicitInput,
-                  embeddableId
-                );
-              }
+            // If the incomingEmbeddable does not yet exist in the panels listing, create a new panel using the container's addEmbeddable method.
+            if (
+              incomingEmbeddable &&
+              (!incomingEmbeddable.embeddableId ||
+                !container.getInput().panels[incomingEmbeddable.embeddableId])
+            ) {
+              container.addNewEmbeddable<EmbeddableInput>(
+                incomingEmbeddable.type,
+                incomingEmbeddable.input
+              );
             }
           }
 

src/plugins/dashboard/public/attribute_service/attribute_service.tsx

@@ -24,6 +24,7 @@ import {
   SavedObjectEmbeddableInput,
   isSavedObjectEmbeddableInput,
   IEmbeddable,
+  Container,
 } from '../embeddable_plugin';
 import {
   SavedObjectsClientContract,
@@ -105,6 +106,15 @@ export class AttributeService<
     return isSavedObjectEmbeddableInput(input);
   };
 
+  public getExplicitInputFromEmbeddable(embeddable: IEmbeddable): ValType | RefType {
+    return embeddable.getRoot() &&
+      (embeddable.getRoot() as Container).getInput().panels[embeddable.id].explicitInput
+      ? ((embeddable.getRoot() as Container).getInput().panels[embeddable.id].explicitInput as
+          | ValType
+          | RefType)
+      : (embeddable.getInput() as ValType | RefType);
+  }
+
   getInputAsValueType = async (input: ValType | RefType): Promise<ValType> => {
     if (!this.inputIsRefType(input)) {
       return input;

src/plugins/dashboard/public/index.ts

@@ -31,7 +31,7 @@ export {
 } from './application';
 export { DashboardConstants, createDashboardEditUrl } from './dashboard_constants';
 
-export { DashboardStart, DashboardUrlGenerator } from './plugin';
+export { DashboardStart, DashboardUrlGenerator, DashboardFeatureFlagConfig } from './plugin';
 export {
   DASHBOARD_APP_URL_GENERATOR,
   createDashboardUrlGenerator,

src/plugins/dashboard/public/plugin.tsx

@@ -104,7 +104,7 @@ declare module '../../share/public' {
 
 export type DashboardUrlGenerator = UrlGeneratorContract<typeof DASHBOARD_APP_URL_GENERATOR>;
 
-interface DashboardFeatureFlagConfig {
+export interface DashboardFeatureFlagConfig {
   allowByValueEmbeddables: boolean;
 }
 

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

@@ -53,20 +53,45 @@ 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 input = { id: '123', viewMode: ViewMode.EDIT };
-  const embeddable = new EditableEmbeddable(input, 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: {
+      originatingApp: 'superCoolCurrentApp',
+      embeddableId: '123',
+      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',
-      byValueMode: true,
       embeddableId: '123',
-      valueInput: input,
+      valueInput: undefined,
     },
   });
 });

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

@@ -118,7 +118,6 @@ export class EditPanelAction implements Action<ActionContext> {
         const byValueMode = !(embeddable.getInput() as SavedObjectEmbeddableInput).savedObjectId;
         const state: EmbeddableEditorState = {
           originatingApp: this.currentAppId,
-          byValueMode,
           valueInput: byValueMode ? embeddable.getInput() : undefined,
           embeddableId: embeddable.id,
         };

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/embeddables/ref_or_val_embeddable/index.ts

@@ -0,0 +1,20 @@
+/*
+ * 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 { ReferenceOrValueEmbeddable, isReferenceOrValueEmbeddable } from './types';

src/plugins/embeddable/public/lib/embeddables/ref_or_val_embeddable/types.ts

@@ -0,0 +1,39 @@
+/*
+ * 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 { EmbeddableInput, SavedObjectEmbeddableInput } from '..';
+
+export interface ReferenceOrValueEmbeddable<
+  ValTypeInput extends EmbeddableInput = EmbeddableInput,
+  RefTypeInput extends SavedObjectEmbeddableInput = SavedObjectEmbeddableInput
+> {
+  inputIsRefType: (input: ValTypeInput | RefTypeInput) => input is RefTypeInput;
+  getInputAsValueType: () => Promise<ValTypeInput>;
+  getInputAsRefType: () => Promise<RefTypeInput>;
+}
+
+export function isReferenceOrValueEmbeddable(
+  incoming: unknown
+): incoming is ReferenceOrValueEmbeddable {
+  return (
+    !!(incoming as ReferenceOrValueEmbeddable).inputIsRefType &&
+    !!(incoming as ReferenceOrValueEmbeddable).getInputAsValueType &&
+    !!(incoming as ReferenceOrValueEmbeddable).getInputAsRefType
+  );
+}

src/plugins/embeddable/public/lib/state_transfer/embeddable_state_transfer.test.ts

@@ -62,23 +62,27 @@ describe('embeddable state transfer', () => {
 
   it('can send an outgoing embeddable package state', async () => {
     await stateTransfer.navigateToWithEmbeddablePackage(destinationApp, {
-      state: { type: 'coolestType', id: '150' },
+      state: { type: 'coolestType', input: { savedObjectId: '150' } },
     });
     expect(application.navigateToApp).toHaveBeenCalledWith('superUltraVisualize', {
-      state: { type: 'coolestType', id: '150' },
+      state: { type: 'coolestType', input: { savedObjectId: '150' } },
     });
   });
 
   it('can send an outgoing embeddable package state in append mode', async () => {
     const historyMock = mockHistoryState({ kibanaIsNowForSports: 'extremeSportsKibana' });
     stateTransfer = new EmbeddableStateTransfer(application.navigateToApp, historyMock);
     await stateTransfer.navigateToWithEmbeddablePackage(destinationApp, {
-      state: { type: 'coolestType', id: '150' },
+      state: { type: 'coolestType', input: { savedObjectId: '150' } },
       appendToExistingState: true,
     });
     expect(application.navigateToApp).toHaveBeenCalledWith('superUltraVisualize', {
       path: undefined,
-      state: { kibanaIsNowForSports: 'extremeSportsKibana', type: 'coolestType', id: '150' },
+      state: {
+        kibanaIsNowForSports: 'extremeSportsKibana',
+        type: 'coolestType',
+        input: { savedObjectId: '150' },
+      },
     });
   });
 
@@ -97,10 +101,13 @@ describe('embeddable state transfer', () => {
   });
 
   it('can fetch an incoming embeddable package state', async () => {
-    const historyMock = mockHistoryState({ type: 'skisEmbeddable', id: '123' });
+    const historyMock = mockHistoryState({
+      type: 'skisEmbeddable',
+      input: { savedObjectId: '123' },
+    });
     stateTransfer = new EmbeddableStateTransfer(application.navigateToApp, historyMock);
     const fetchedState = stateTransfer.getIncomingEmbeddablePackage();
-    expect(fetchedState).toEqual({ type: 'skisEmbeddable', id: '123' });
+    expect(fetchedState).toEqual({ type: 'skisEmbeddable', input: { savedObjectId: '123' } });
   });
 
   it('returns undefined when embeddable package is not in the right shape', async () => {
@@ -113,12 +120,12 @@ describe('embeddable state transfer', () => {
   it('removes all keys in the keysToRemoveAfterFetch array', async () => {
     const historyMock = mockHistoryState({
       type: 'skisEmbeddable',
-      id: '123',
+      input: { savedObjectId: '123' },
       test1: 'test1',
       test2: 'test2',
     });
     stateTransfer = new EmbeddableStateTransfer(application.navigateToApp, historyMock);
-    stateTransfer.getIncomingEmbeddablePackage({ keysToRemoveAfterFetch: ['type', 'id'] });
+    stateTransfer.getIncomingEmbeddablePackage({ keysToRemoveAfterFetch: ['type', 'input'] });
     expect(historyMock.replace).toHaveBeenCalledWith(
       expect.objectContaining({ state: { test1: 'test1', test2: 'test2' } })
     );
@@ -127,15 +134,15 @@ describe('embeddable state transfer', () => {
   it('leaves state as is when no keysToRemove are supplied', async () => {
     const historyMock = mockHistoryState({
       type: 'skisEmbeddable',
-      id: '123',
+      input: { savedObjectId: '123' },
       test1: 'test1',
       test2: 'test2',
     });
     stateTransfer = new EmbeddableStateTransfer(application.navigateToApp, historyMock);
     stateTransfer.getIncomingEmbeddablePackage();
     expect(historyMock.location.state).toEqual({
       type: 'skisEmbeddable',
-      id: '123',
+      input: { savedObjectId: '123' },
       test1: 'test1',
       test2: 'test2',
     });

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

@@ -17,50 +17,36 @@
  * under the License.
  */
 
-import { EmbeddableInput } from '..';
+import { Optional } from '@kbn/utility-types';
+import { EmbeddableInput, SavedObjectEmbeddableInput } from '..';
 
 /**
- * Represents a state package that contains the last active app id.
+ * A state package that contains information an editor will need to create or edit an embeddable then redirect back.
  * @public
  */
 export interface EmbeddableEditorState {
   originatingApp: string;
-  byValueMode?: boolean;
-  valueInput?: EmbeddableInput;
   embeddableId?: string;
+  valueInput?: EmbeddableInput;
 }
 
 export function isEmbeddableEditorState(state: unknown): state is EmbeddableEditorState {
   return ensureFieldOfTypeExists('originatingApp', state, 'string');
 }
 
 /**
- * Represents a state package that contains all fields necessary to create an embeddable by reference in a container.
+ * A state package that contains all fields necessary to create or update an embeddable by reference or by value in a container.
  * @public
  */
-export interface EmbeddablePackageByReferenceState {
+export interface EmbeddablePackageState {
   type: string;
-  id: string;
-}
-
-/**
- * Represents a state package that contains all fields necessary to create an embeddable by value in a container.
- * @public
- */
-export interface EmbeddablePackageByValueState {
-  type: string;
-  input: EmbeddableInput;
+  input: Optional<EmbeddableInput, 'id'> | Optional<SavedObjectEmbeddableInput, 'id'>;
   embeddableId?: string;
 }
 
-export type EmbeddablePackageState =
-  | EmbeddablePackageByReferenceState
-  | EmbeddablePackageByValueState;
-
 export function isEmbeddablePackageState(state: unknown): state is EmbeddablePackageState {
   return (
-    (ensureFieldOfTypeExists('type', state, 'string') &&
-      ensureFieldOfTypeExists('id', state, 'string')) ||
+    ensureFieldOfTypeExists('type', state, 'string') &&
     ensureFieldOfTypeExists('input', state, 'object')
   );
 }