[Dashboard First] Lens By Value

examples/embeddable_examples/public/book/book_embeddable.tsx

@@ -109,7 +109,7 @@ export class BookEmbeddable extends Embeddable<BookEmbeddableInput, BookEmbeddab
 
   getInputAsRefType = async (): Promise<BookByReferenceInput> => {
     const input = this.attributeService.getExplicitInputFromEmbeddable(this);
-    return this.attributeService.getInputAsRefType(input, { showSaveModal: true });
+    return this.attributeService.getInputAsRefType(input, this, { showSaveModal: true });
   };
 
   public render(node: HTMLElement) {

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,22 @@ 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: {
+            ...originalPanelState.explicitInput,
+            ...incomingEmbeddable.input,
+            id: incomingEmbeddable.embeddableId,
+          },
+        };
+        incomingEmbeddable = undefined;
+      }
+
       let expandedPanelId;
       if (dashboardContainer && !isErrorEmbeddable(dashboardContainer)) {
         expandedPanelId = dashboardContainer.getInput().expandedPanelId;
@@ -454,31 +469,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,
-                  // This ugly solution is temporary - https://github.com/elastic/kibana/pull/70272 fixes this whole section
-                  (explicitInput as unknown) as EmbeddableInput,
-                  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,10 @@ import {
   SavedObjectEmbeddableInput,
   isSavedObjectEmbeddableInput,
   IEmbeddable,
+  Container,
+  EmbeddableStart,
+  EmbeddableFactory,
+  EmbeddableFactoryNotFoundError,
 } from '../embeddable_plugin';
 import {
   SavedObjectsClientContract,
@@ -39,47 +43,53 @@ import {
   SaveResult,
   checkForDuplicateTitle,
 } from '../../../saved_objects/public';
-import {
-  EmbeddableStart,
-  EmbeddableFactory,
-  EmbeddableFactoryNotFoundError,
-  Container,
-} from '../../../embeddable/public';
 
 /**
  * The attribute service is a shared, generic service that embeddables can use to provide the functionality
  * required to fulfill the requirements of the ReferenceOrValueEmbeddable interface. The attribute_service
  * can also be used as a higher level wrapper to transform an embeddable input shape that references a saved object
  * into an embeddable input shape that contains that saved object's attributes by value.
  */
+export interface AttributeServiceOptions<A extends { title: string }> {
+  customSaveMethod?: (attributes: A, savedObjectId?: string) => Promise<{ id: string }>;
+  customUnwrapMethod?: (savedObject: SimpleSavedObject<A>) => A;
+}
+
 export class AttributeService<
   SavedObjectAttributes extends { title: string },
-  ValType extends EmbeddableInput & { attributes: SavedObjectAttributes },
+  ValType extends EmbeddableInput & {
+    attributes: SavedObjectAttributes;
+  },
   RefType extends SavedObjectEmbeddableInput
 > {
-  private embeddableFactory: EmbeddableFactory;
+  private embeddableFactory?: EmbeddableFactory;
 
   constructor(
     private type: string,
     private savedObjectsClient: SavedObjectsClientContract,
     private overlays: OverlayStart,
     private i18nContext: I18nStart['Context'],
     private toasts: NotificationsStart['toasts'],
-    getEmbeddableFactory: EmbeddableStart['getEmbeddableFactory']
+    getEmbeddableFactory?: EmbeddableStart['getEmbeddableFactory'],
+    private options?: AttributeServiceOptions<SavedObjectAttributes>
   ) {
-    const factory = getEmbeddableFactory(this.type);
-    if (!factory) {
-      throw new EmbeddableFactoryNotFoundError(this.type);
+    if (getEmbeddableFactory) {
+      const factory = getEmbeddableFactory(this.type);
+      if (!factory) {
+        throw new EmbeddableFactoryNotFoundError(this.type);
+      }
+      this.embeddableFactory = factory;
     }
-    this.embeddableFactory = factory;
   }
 
   public async unwrapAttributes(input: RefType | ValType): Promise<SavedObjectAttributes> {
     if (this.inputIsRefType(input)) {
       const savedObject: SimpleSavedObject<SavedObjectAttributes> = await this.savedObjectsClient.get<
         SavedObjectAttributes
       >(this.type, input.savedObjectId);
-      return savedObject.attributes;
+      return this.options?.customUnwrapMethod
+        ? this.options?.customUnwrapMethod(savedObject)
+        : { ...savedObject.attributes };
     }
     return input.attributes;
   }
@@ -98,10 +108,13 @@ export class AttributeService<
     } else {
       try {
         if (savedObjectId) {
-          await this.savedObjectsClient.update(this.type, savedObjectId, newAttributes);
+          if (this.options?.customSaveMethod) await this.options.customSaveMethod(newAttributes);
+          else await this.savedObjectsClient.update(this.type, savedObjectId, newAttributes);
           return { savedObjectId } as RefType;
         } else {
-          const savedItem = await this.savedObjectsClient.create(this.type, newAttributes);
+          const savedItem = this.options?.customSaveMethod
+            ? await this.options.customSaveMethod(newAttributes, savedObjectId)
+            : await this.savedObjectsClient.create(this.type, newAttributes);
           return { savedObjectId: savedItem.id } as RefType;
         }
       } catch (error) {
@@ -146,6 +159,7 @@ export class AttributeService<
 
   getInputAsRefType = async (
     input: ValType | RefType,
+    embeddable: IEmbeddable,
     saveOptions?: { showSaveModal: boolean } | { title: string }
   ): Promise<RefType> => {
     if (this.inputIsRefType(input)) {
@@ -159,7 +173,7 @@ export class AttributeService<
             copyOnSave: false,
             lastSavedTitle: '',
             getEsType: () => this.type,
-            getDisplayName: this.embeddableFactory.getDisplayName,
+            getDisplayName: this.embeddableFactory?.getDisplayName || (() => this.type),
           },
           props.isTitleDuplicateConfirmed,
           props.onTitleDuplicate,
@@ -185,7 +199,7 @@ export class AttributeService<
           <SavedObjectSaveModal
             onSave={onSave}
             onClose={() => reject()}
-            title={input.attributes.title}
+            title={embeddable.getTitle() || input.attributes.title}
             showCopyOnSave={false}
             objectType={this.type}
             showDescription={false}

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

@@ -100,6 +100,7 @@ import {
   ACTION_ADD_TO_LIBRARY,
   AddToLibraryActionContext,
 } from './application/actions/add_to_library_action';
+import { AttributeServiceOptions } from './attribute_service/attribute_service';
 
 declare module '../../share/public' {
   export interface UrlGeneratorStateMapping {
@@ -109,7 +110,7 @@ declare module '../../share/public' {
 
 export type DashboardUrlGenerator = UrlGeneratorContract<typeof DASHBOARD_APP_URL_GENERATOR>;
 
-interface DashboardFeatureFlagConfig {
+export interface DashboardFeatureFlagConfig {
   allowByValueEmbeddables: boolean;
 }
 
@@ -151,7 +152,8 @@ export interface DashboardStart {
     V extends EmbeddableInput & { attributes: A },
     R extends SavedObjectEmbeddableInput
   >(
-    type: string
+    type: string,
+    options?: AttributeServiceOptions<A>
   ) => AttributeService<A, V, R>;
 }
 
@@ -458,14 +460,15 @@ export class DashboardPlugin
       DashboardContainerByValueRenderer: createDashboardContainerByValueRenderer({
         factory: dashboardContainerFactory,
       }),
-      getAttributeService: (type: string) =>
+      getAttributeService: (type, options) =>
         new AttributeService(
           type,
           core.savedObjects.client,
           core.overlays,
           core.i18n.Context,
           core.notifications.toasts,
-          embeddable.getEmbeddableFactory
+          embeddable.getEmbeddableFactory,
+          options
         ),
     };
   }

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

@@ -18,7 +18,7 @@
  */
 
 import { EditPanelAction } from './edit_panel_action';
-import { Embeddable, EmbeddableInput } from '../embeddables';
+import { Embeddable, EmbeddableInput, SavedObjectEmbeddableInput } from '../embeddables';
 import { ViewMode } from '../types';
 import { ContactCardEmbeddable } from '../test_samples';
 import { embeddablePluginMock } from '../../mocks';
@@ -53,20 +53,50 @@ 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,
+    } as unknown) as EmbeddableInput,
+    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' } as SavedObjectEmbeddableInput,
+    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,
     };
   }