[Dashboards as Code][Embeddable API Integration] Make EmbeddableContentManagementRegistry async

examples/embeddable_examples/public/plugin.ts

@@ -33,8 +33,6 @@ import { SAVED_BOOK_ID } from './react_embeddables/saved_book/constants';
 import { registerCreateSavedBookAction } from './react_embeddables/saved_book/create_saved_book_action';
 import { registerAddSearchPanelAction } from './react_embeddables/search/register_add_search_panel_action';
 import { registerSearchEmbeddable } from './react_embeddables/search/register_search_embeddable';
-import { bookCmDefinitions } from '../common/book/content_management/cm_services';
-import { fieldListCmDefinitions } from '../common/field_list/content_management/cm_services';
 import { BOOK_CONTENT_ID, BOOK_LATEST_VERSION } from '../common/book/content_management/schema';
 import { setKibanaServices } from './kibana_services';
 import { BookSerializedState } from './react_embeddables/saved_book/types';
@@ -103,8 +101,16 @@ export class EmbeddableExamplesPlugin implements Plugin<void, void, SetupDeps, S
       new Promise((resolve) => startServicesPromise.then(([_, startDeps]) => resolve(startDeps)))
     );
 
-    embeddable.registerEmbeddableContentManagementDefinition(bookCmDefinitions);
-    embeddable.registerEmbeddableContentManagementDefinition(fieldListCmDefinitions);
+    embeddable.registerEmbeddableContentManagementDefinition('book', async () => {
+      const { bookCmDefinitions } = await import('../common/book/content_management/cm_services');
+      return bookCmDefinitions;
+    });
+    embeddable.registerEmbeddableContentManagementDefinition('field_list', async () => {
+      const { fieldListCmDefinitions } = await import(
+        '../common/field_list/content_management/cm_services'
+      );
+      return fieldListCmDefinitions;
+    });
 
     contentManagement.registry.register({
       id: BOOK_CONTENT_ID,

examples/embeddable_examples/server/plugin.ts

@@ -44,7 +44,9 @@ export class EmbeddableExamplesPlugin implements Plugin<void, void, SetupDeps, S
       },
     });
 
-    embeddable.registerEmbeddableContentManagementDefinition(bookCmDefinitionsWithSchemas);
+    embeddable.registerEmbeddableContentManagementDefinition('book', () =>
+      Promise.resolve(bookCmDefinitionsWithSchemas)
+    );
 
     return {};
   }

src/platform/plugins/shared/dashboard/server/content_management/dashboard_storage.ts

@@ -196,10 +196,15 @@ export class DashboardStorage {
       outcome,
     } = await soClient.resolve<DashboardSavedObjectAttributes>(DASHBOARD_SAVED_OBJECT_TYPE, id);
 
-    const { item, error: itemError } = savedObjectToItem(savedObject, this.embeddable, false, {
-      getTagNamesFromReferences: (references: SavedObjectReference[]) =>
-        this.getTagNamesFromReferences(references, allTags),
-    });
+    const { item, error: itemError } = await savedObjectToItem(
+      savedObject,
+      this.embeddable,
+      false,
+      {
+        getTagNamesFromReferences: (references: SavedObjectReference[]) =>
+          this.getTagNamesFromReferences(references, allTags),
+      }
+    );
     if (itemError) {
       throw Boom.badRequest(`Invalid response. ${itemError.message}`);
     }
@@ -286,10 +291,15 @@ export class DashboardStorage {
       { ...optionsToLatest, references: soReferences }
     );
 
-    const { item, error: itemError } = savedObjectToItem(savedObject, this.embeddable, false, {
-      getTagNamesFromReferences: (references: SavedObjectReference[]) =>
-        this.getTagNamesFromReferences(references, allTags),
-    });
+    const { item, error: itemError } = await savedObjectToItem(
+      savedObject,
+      this.embeddable,
+      false,
+      {
+        getTagNamesFromReferences: (references: SavedObjectReference[]) =>
+          this.getTagNamesFromReferences(references, allTags),
+      }
+    );
     if (itemError) {
       throw Boom.badRequest(`Invalid response. ${itemError.message}`);
     }
@@ -373,7 +383,7 @@ export class DashboardStorage {
       }
     );
 
-    const { item, error: itemError } = savedObjectToItem(
+    const { item, error: itemError } = await savedObjectToItem(
       partialSavedObject,
       this.embeddable,
       true,
@@ -448,7 +458,7 @@ export class DashboardStorage {
     const hits = await Promise.all(
       soResponse.saved_objects
         .map(async (so) => {
-          const { item } = savedObjectToItem(so, this.embeddable, false, {
+          const { item } = await savedObjectToItem(so, this.embeddable, false, {
             allowedAttributes: soQuery.fields,
             allowedReferences: optionsToLatest?.includeReferences,
             getTagNamesFromReferences: (references: SavedObjectReference[]) =>

src/platform/plugins/shared/dashboard/server/content_management/v3/cm_services.ts

@@ -33,7 +33,7 @@ import {
   DEFAULT_PANEL_WIDTH,
   DEFAULT_DASHBOARD_OPTIONS,
 } from '../../../common/content_management';
-import { getResultV3ToV2 } from './transform_utils';
+// import { getResultV3ToV2 } from './transform_utils';
 
 const apiError = schema.object({
   error: schema.string(),
@@ -230,7 +230,7 @@ const searchSourceSchema = schema.object(
   { defaultValue: {}, unknowns: 'allow' }
 );
 
-const sectionGridDataSchema = schema.object({
+export const sectionGridDataSchema = schema.object({
   y: schema.number({ meta: { description: 'The y coordinate of the section in grid units' } }),
   i: schema.maybe(
     schema.string({
@@ -564,8 +564,8 @@ export const getServiceDefinition = (embeddable: EmbeddableStart): ServicesDefin
     out: {
       result: {
         schema: dashboardGetResultSchema,
-        // TODO Ignoring references for now...
-        down: (data) => getResultV3ToV2(data, embeddable),
+        // TODO Ignoring down transforms for now since it needs to be a promise.
+        // down: (data) => getResultV3ToV2(data, embeddable),
       },
     },
   },

src/platform/plugins/shared/dashboard/server/content_management/v3/transform_utils.ts

@@ -36,12 +36,12 @@ import type {
   SavedObjectToItemReturn,
 } from './types';
 
-export function dashboardAttributesOut(
+export async function dashboardAttributesOut(
   attributes: DashboardSavedObjectAttributes | Partial<DashboardSavedObjectAttributes>,
   embeddable: EmbeddableStart,
   references?: SavedObjectReference[],
   getTagNamesFromReferences?: (references: SavedObjectReference[]) => string[]
-): DashboardAttributes | Partial<DashboardAttributes> {
+): Promise<DashboardAttributes | Partial<DashboardAttributes>> {
   const {
     controlGroupInput,
     description,
@@ -71,7 +71,7 @@ export function dashboardAttributesOut(
     }),
     ...(optionsJSON && { options: transformOptionsOut(optionsJSON) }),
     ...((panelsJSON || sections) && {
-      panels: transformPanelsOut({ panelsJSON, sections, embeddable, references }),
+      panels: await transformPanelsOut({ panelsJSON, sections, embeddable, references }),
     }),
     ...(refreshInterval && {
       refreshInterval: { pause: refreshInterval.pause, value: refreshInterval.value },
@@ -85,10 +85,10 @@ export function dashboardAttributesOut(
   };
 }
 
-export const getResultV3ToV2 = (
+export const getResultV3ToV2 = async (
   result: DashboardGetOut,
   embeddable: EmbeddableStart
-): DashboardCrudTypesV2['GetOut'] => {
+): Promise<DashboardCrudTypesV2['GetOut']> => {
   const { meta, item } = result;
   const { attributes, references, ...rest } = item;
   const {
@@ -105,7 +105,7 @@ export const getResultV3ToV2 = (
     version,
   } = attributes;
 
-  const { panelsJSON, references: panelReferences } = transformPanelsIn(panels, embeddable);
+  const { panelsJSON, references: panelReferences } = await transformPanelsIn(panels, embeddable);
 
   const v2Attributes = {
     ...(controlGroupInput && {
@@ -134,19 +134,19 @@ export const getResultV3ToV2 = (
   };
 };
 
-export const itemToSavedObject = ({
+export const itemToSavedObject = async ({
   attributes,
   embeddable,
   references = [],
-}: ItemToSavedObjectParams): ItemToSavedObjectReturn => {
+}: ItemToSavedObjectParams): Promise<ItemToSavedObjectReturn> => {
   try {
     const { controlGroupInput, kibanaSavedObjectMeta, options, panels, tags, ...rest } = attributes;
     const {
       panelsJSON,
       sections,
       references: panelReferences,
     } = panels
-      ? transformPanelsIn(panels, embeddable)
+      ? await transformPanelsIn(panels, embeddable)
       : { panelsJSON: '[]', sections: [], references: [] };
     const soAttributes = {
       ...rest,
@@ -186,7 +186,7 @@ export const itemToSavedObjectWithTags = async ({
     replaceTagReferencesByName && tags && tags.length
       ? await replaceTagReferencesByName({ references, newTagNames: tags })
       : references;
-  return itemToSavedObject({
+  return await itemToSavedObject({
     attributes: restAttributes,
     embeddable,
     references: soReferences,
@@ -209,28 +209,28 @@ interface SavedObjectToItemOptions {
   getTagNamesFromReferences?: (references: SavedObjectReference[]) => string[];
 }
 
-export function savedObjectToItem(
+export async function savedObjectToItem(
   savedObject: SavedObject<DashboardSavedObjectAttributes>,
   embeddable: EmbeddableStart,
   partial: false,
   opts?: SavedObjectToItemOptions
-): SavedObjectToItemReturn<DashboardItem>;
+): Promise<SavedObjectToItemReturn<DashboardItem>>;
 
-export function savedObjectToItem(
+export async function savedObjectToItem(
   savedObject: PartialSavedObject<DashboardSavedObjectAttributes>,
   embeddable: EmbeddableStart,
   partial: true,
   opts?: SavedObjectToItemOptions
-): SavedObjectToItemReturn<PartialDashboardItem>;
+): Promise<SavedObjectToItemReturn<PartialDashboardItem>>;
 
-export function savedObjectToItem(
+export async function savedObjectToItem(
   savedObject:
     | SavedObject<DashboardSavedObjectAttributes>
     | PartialSavedObject<DashboardSavedObjectAttributes>,
   embeddable: EmbeddableStart,
   partial: boolean /* partial arg is used to enforce the correct savedObject type */,
   { allowedAttributes, allowedReferences, getTagNamesFromReferences }: SavedObjectToItemOptions = {}
-): SavedObjectToItemReturn<DashboardItem | PartialDashboardItem> {
+): Promise<SavedObjectToItemReturn<DashboardItem | PartialDashboardItem>> {
   const {
     id,
     type,
@@ -248,10 +248,15 @@ export function savedObjectToItem(
   try {
     const attributesOut = allowedAttributes
       ? pick(
-          dashboardAttributesOut(attributes, embeddable, references, getTagNamesFromReferences),
+          await dashboardAttributesOut(
+            attributes,
+            embeddable,
+            references,
+            getTagNamesFromReferences
+          ),
           allowedAttributes
         )
-      : dashboardAttributesOut(attributes, embeddable, references, getTagNamesFromReferences);
+      : await dashboardAttributesOut(attributes, embeddable, references, getTagNamesFromReferences);
 
     // if includeReferences is provided, only include references of those types
     const referencesOut = allowedReferences

src/platform/plugins/shared/dashboard/server/content_management/v3/transforms/in/panels_in_transforms.ts

@@ -18,15 +18,15 @@ import type {
 import type { DashboardAttributes, DashboardPanel, DashboardSection } from '../../types';
 import { isDashboardSection, prefixReferencesFromPanel } from '../../../../../common';
 
-export function transformPanelsIn(
+export async function transformPanelsIn(
   widgets: DashboardAttributes['panels'] | undefined,
   embeddable: EmbeddableStart,
   dropSections: boolean = false
-): {
+): Promise<{
   panelsJSON: DashboardSavedObjectAttributes['panelsJSON'];
   sections: DashboardSavedObjectAttributes['sections'];
   references: SavedObjectReference[];
-} {
+}> {
   if (!widgets) return { panelsJSON: '[]', sections: [], references: [] };
 
   // Step 1: Add a panelIndex to each panel if necessary
@@ -42,7 +42,7 @@ export function transformPanelsIn(
   const { panels: panelsWithSections, sections } = extractSections(extractedPanels, dropSections);
 
   // Step 4: Transform panels properties
-  const transformedPanels = transformPanelsProperties(panelsWithSections, embeddable);
+  const transformedPanels = await transformPanelsProperties(panelsWithSections, embeddable);
 
   // Step 5: Stringify panels
   const panelsJSON = JSON.stringify(transformedPanels);
@@ -170,29 +170,33 @@ function extractSections(widgets: Array<DashboardPanel | DashboardSection>, drop
   return { panels, sections };
 }
 
-function panelToSavedObject(
+async function panelToSavedObject(
   panelConfig: DashboardPanel['panelConfig'],
   panelType: DashboardPanel['type'],
   embeddable: EmbeddableStart
 ) {
-  const embeddableCmDefintions = embeddable.getEmbeddableContentManagementDefinition(panelType);
+  const embeddableCmDefintions = await embeddable.getEmbeddableContentManagementDefinition(
+    panelType
+  );
   if (!embeddableCmDefintions) return panelConfig;
   const { itemToSavedObject } =
     embeddableCmDefintions.versions[embeddableCmDefintions.latestVersion];
   return itemToSavedObject?.(panelConfig) ?? panelConfig;
 }
 
-function transformPanelsProperties(panels: DashboardPanel[], embeddable: EmbeddableStart) {
-  return panels.map(
-    ({ panelConfig, gridData, id, panelIndex, panelRefName, title, type, version }) => ({
-      gridData,
-      id,
-      embeddableConfig: panelToSavedObject(panelConfig, type, embeddable),
-      panelIndex,
-      panelRefName,
-      title,
-      type,
-      version,
-    })
+async function transformPanelsProperties(panels: DashboardPanel[], embeddable: EmbeddableStart) {
+  return Promise.all(
+    panels.map(
+      async ({ panelConfig, gridData, id, panelIndex, panelRefName, title, type, version }) => ({
+        gridData,
+        id,
+        embeddableConfig: await panelToSavedObject(panelConfig, type, embeddable),
+        panelIndex,
+        panelRefName,
+        title,
+        type,
+        version,
+      })
+    )
   );
 }