[Links] Migrate Links panel to the React embeddable framework (elasti…

…c#178670)

Fixes elastic#174970
Fixes elastic#186044

## Summary

Migrates the legacy Links embeddable to the React embeddable framework.

Additionally, the new embeddable factory now resolves the dashboards
info prior to rendering the Links component. Prior to this change, the
`DashboardLinkComponent` would be responsible for asynchronously loading
dashboards info and rendering a loading icon. This change reduces the
complexity of the `DashboardLinkComponent` as the resolved state is now
passed in as props.

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Hannah Mudge <Heenawter@users.noreply.github.com>

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

@@ -498,11 +498,19 @@ export class DashboardContainer
     if (reactEmbeddableRegistryHasKey(panelPackage.panelType)) {
       const newId = v4();
 
+      const getCustomPlacementSettingFunc = await getDashboardPanelPlacementSetting(
+        panelPackage.panelType
+      );
+
+      const customPlacementSettings = getCustomPlacementSettingFunc
+        ? await getCustomPlacementSettingFunc(panelPackage.initialState)
+        : {};
+
       const placementSettings = {
         width: DEFAULT_PANEL_WIDTH,
         height: DEFAULT_PANEL_HEIGHT,
         strategy: PanelPlacementStrategy.findTopLeftMostOpenSpace,
-        ...getDashboardPanelPlacementSetting(panelPackage.panelType)?.(panelPackage.initialState),
+        ...customPlacementSettings,
       };
 
       const { width, height, strategy } = placementSettings;

src/plugins/dashboard/public/dashboard_container/panel_placement/panel_placement_registry.ts

@@ -11,14 +11,14 @@ import { panelPlacementStrings } from '../_dashboard_container_strings';
 
 const registry = new Map<string, GetPanelPlacementSettings<object>>();
 
-export const registerDashboardPanelPlacementSetting = (
+export const registerDashboardPanelPlacementSetting = <SerializedState extends object = object>(
   embeddableType: string,
-  getPanelPlacementSettings: GetPanelPlacementSettings
+  getPanelPlacementSettings: GetPanelPlacementSettings<SerializedState>
 ) => {
   if (registry.has(embeddableType)) {
     throw new Error(panelPlacementStrings.getPanelPlacementSettingsExistsError(embeddableType));
   }
-  registry.set(embeddableType, getPanelPlacementSettings);
+  registry.set(embeddableType, getPanelPlacementSettings as GetPanelPlacementSettings<object>);
 };
 
 export const getDashboardPanelPlacementSetting = (embeddableType: string) => {

src/plugins/dashboard/public/dashboard_container/panel_placement/types.ts

@@ -7,6 +7,7 @@
  */
 
 import { EmbeddableInput } from '@kbn/embeddable-plugin/public';
+import { MaybePromise } from '@kbn/utility-types';
 import { DashboardPanelState } from '../../../common';
 import { GridData } from '../../../common/content_management';
 import { PanelPlacementStrategy } from '../../dashboard_constants';
@@ -40,4 +41,4 @@ export interface IProvidesLegacyPanelPlacementSettings<
 
 export type GetPanelPlacementSettings<SerializedState extends object = object> = (
   serializedState?: SerializedState
-) => PanelPlacementSettings;
+) => MaybePromise<PanelPlacementSettings>;

src/plugins/dashboard/public/plugin.tsx

@@ -120,9 +120,9 @@ export interface DashboardStart {
   locator?: DashboardAppLocator;
   dashboardFeatureFlagConfig: DashboardFeatureFlagConfig;
   findDashboardsService: () => Promise<FindDashboardsService>;
-  registerDashboardPanelPlacementSetting: (
+  registerDashboardPanelPlacementSetting: <SerializedState extends object = object>(
     embeddableType: string,
-    getPanelPlacementSettings: GetPanelPlacementSettings
+    getPanelPlacementSettings: GetPanelPlacementSettings<SerializedState>
   ) => void;
 }
 

src/plugins/embeddable/public/lib/attribute_service/attribute_service.tsx

@@ -20,7 +20,6 @@ import {
   EmbeddableInput,
   SavedObjectEmbeddableInput,
   isSavedObjectEmbeddableInput,
-  EmbeddableFactoryNotFoundError,
   EmbeddableFactory,
 } from '..';
 
@@ -74,9 +73,7 @@ export class AttributeService<
   ) {
     if (getEmbeddableFactory) {
       const factory = getEmbeddableFactory(this.type);
-      if (!factory) {
-        throw new EmbeddableFactoryNotFoundError(this.type);
-      }
+
       this.embeddableFactory = factory;
     }
   }

src/plugins/embeddable/public/lib/embeddable_placement/embeddable_placement_registry.ts

@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+type GetPanelPlacementSettings<StateType> = (serializedState: StateType) => {
+  width?: number;
+  height?: number;
+  strategy?: string;
+};
+
+const registry: Map<string, GetPanelPlacementSettings<any>> = new Map();
+
+export const registerEmbeddablePlacementStrategy = <StateType>(
+  panelType: string,
+  getPanelPlacementSettings: GetPanelPlacementSettings<StateType>
+) => {
+  if (registry.has(panelType)) {
+    throw new Error(`Embeddable placement for embeddable type ${panelType} already exists`);
+  }
+
+  registry.set(panelType, getPanelPlacementSettings);
+};
+
+export const getEmbeddablePlacementStrategy = (panelType: string) => {
+  return registry.get(panelType);
+};

src/plugins/links/common/constants.ts

@@ -17,3 +17,7 @@ export const APP_ICON = 'link';
 export const APP_NAME = i18n.translate('links.visTypeAlias.title', {
   defaultMessage: 'Links',
 });
+
+export const DISPLAY_NAME = i18n.translate('links.displayName', {
+  defaultMessage: 'links',
+});

src/plugins/links/common/content_management/v1/types.ts

@@ -24,7 +24,7 @@ import {
 
 export type LinksCrudTypes = ContentManagementCrudTypes<
   LinksContentType,
-  LinksAttributes,
+  Omit<LinksAttributes, 'title'> & { title: string }, // saved object attributes always have a title
   Pick<SavedObjectCreateOptions, 'references'>,
   Pick<SavedObjectUpdateOptions, 'references'>,
   {
@@ -60,7 +60,7 @@ export type LinksLayoutType = typeof LINKS_HORIZONTAL_LAYOUT | typeof LINKS_VERT
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export type LinksAttributes = {
-  title: string;
+  title?: string;
   description?: string;
   links?: Link[];
   layout?: LinksLayoutType;

src/plugins/links/common/index.ts

@@ -6,4 +6,4 @@
  * Side Public License, v 1.
  */
 
-export { APP_ICON, APP_NAME, CONTENT_ID, LATEST_VERSION } from './constants';
+export { APP_ICON, APP_NAME, CONTENT_ID, DISPLAY_NAME, LATEST_VERSION } from './constants';