[Embeddable Refactor] Create Decoupled Presentation Panel

.github/CODEOWNERS

@@ -591,6 +591,10 @@ packages/kbn-plugin-generator @elastic/kibana-operations
 packages/kbn-plugin-helpers @elastic/kibana-operations
 examples/portable_dashboards_example @elastic/kibana-presentation
 examples/preboot_example @elastic/kibana-security @elastic/kibana-core
+packages/presentation/presentation_containers @elastic/kibana-presentation
+packages/presentation/presentation_library @elastic/kibana-presentation
+src/plugins/presentation_panel @elastic/kibana-presentation
+packages/presentation/presentation_publishing @elastic/kibana-presentation
 src/plugins/presentation_util @elastic/kibana-presentation
 x-pack/plugins/profiling_data_access @elastic/obs-ux-infra_services-team
 x-pack/plugins/profiling @elastic/obs-ux-infra_services-team

.i18nrc.json

@@ -30,6 +30,7 @@
     "discover": ["src/plugins/discover", "packages/kbn-discover-utils"],
     "savedSearch": "src/plugins/saved_search",
     "embeddableApi": "src/plugins/embeddable",
+    "presentationPanel": "src/plugins/presentation_panel",
     "embeddableExamples": "examples/embeddable_examples",
     "esQuery": "packages/kbn-es-query/src",
     "esUi": "src/plugins/es_ui_shared",

docs/developer/plugin-list.asciidoc

@@ -274,6 +274,10 @@ Content is fetched from the remote (https://feeds.elastic.co) once a day, with p
 |Helps to globally configure the no data page components
 
 
+|{kib-repo}blob/{branch}/src/plugins/presentation_panel/README.md[presentationPanel]
+|The Presentation Panel is the point of contact between any React component and any registered UI actions. Components provided to the Presentation Panel should use an imperative handle to expose methods and state.
+
+
 |{kib-repo}blob/{branch}/src/plugins/presentation_util/README.mdx[presentationUtil]
 |The Presentation Utility Plugin is a set of common, shared components and toolkits for solutions within the Presentation space, (e.g. Dashboards, Canvas).
 

package.json

@@ -596,6 +596,10 @@
     "@kbn/panel-loader": "link:packages/kbn-panel-loader",
     "@kbn/portable-dashboards-example": "link:examples/portable_dashboards_example",
     "@kbn/preboot-example-plugin": "link:examples/preboot_example",
+    "@kbn/presentation-containers": "link:packages/presentation/presentation_containers",
+    "@kbn/presentation-library": "link:packages/presentation/presentation_library",
+    "@kbn/presentation-panel-plugin": "link:src/plugins/presentation_panel",
+    "@kbn/presentation-publishing": "link:packages/presentation/presentation_publishing",
     "@kbn/presentation-util-plugin": "link:src/plugins/presentation_util",
     "@kbn/profiling-data-access-plugin": "link:x-pack/plugins/profiling_data_access",
     "@kbn/profiling-plugin": "link:x-pack/plugins/profiling",

packages/kbn-optimizer/limits.yml

@@ -110,6 +110,7 @@ pageLoadAssetSize:
   observabilityShared: 52256
   osquery: 107090
   painlessLab: 179748
+  presentationPanel: 55463
   presentationUtil: 58834
   profiling: 36694
   remoteClusters: 51327

packages/kbn-panel-loader/index.tsx

@@ -8,14 +8,25 @@
 
 import React from 'react';
 import { EuiLoadingChart, EuiPanel } from '@elastic/eui';
+import { css } from '@emotion/react';
 
 export const PanelLoader = (props: { showShadow?: boolean; dataTestSubj?: string }) => {
   return (
     <EuiPanel
+      css={css`
+        z-index: auto;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        min-height: $euiSizeL + 2px;
+        position: relative;
+        justify-content: center;
+        align-items: center;
+      `}
       role="figure"
       paddingSize="none"
       hasShadow={props.showShadow ?? false}
-      className={'embPanel embPanel--loading embPanel-isLoading'}
       data-test-subj={props.dataTestSubj}
     >
       <EuiLoadingChart size="l" mono />

packages/presentation/presentation_containers/README.md

@@ -0,0 +1,3 @@
+# @kbn/presentation-containers
+
+Contains interfaces and type guards which can be used to define and consume "containers" which are pages or elements which render multiple panels.

packages/presentation/presentation_containers/index.ts

@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+export {
+  apiCanDuplicatePanels,
+  apiCanExpandPanels,
+  useExpandedPanelId,
+  type CanDuplicatePanels,
+  type CanExpandPanels,
+} from './interfaces/panel_management';
+export {
+  apiIsPresentationContainer,
+  getContainerParentFromAPI,
+  type PanelPackage,
+  type PresentationContainer,
+} from './interfaces/presentation_container';
+export { tracksOverlays, type TracksOverlays } from './interfaces/tracks_overlays';

packages/presentation/presentation_containers/interfaces/panel_management.ts

@@ -0,0 +1,39 @@
+/*
+ * 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.
+ */
+
+import {
+  PublishingSubject,
+  useStateFromPublishingSubject,
+} from '@kbn/presentation-publishing/publishing_subject';
+
+export interface CanDuplicatePanels {
+  duplicatePanel: (panelId: string) => void;
+}
+
+export const apiCanDuplicatePanels = (
+  unknownApi: unknown | null
+): unknownApi is CanDuplicatePanels => {
+  return Boolean((unknownApi as CanDuplicatePanels)?.duplicatePanel !== undefined);
+};
+
+export interface CanExpandPanels {
+  expandPanel: (panelId?: string) => void;
+  expandedPanelId: PublishingSubject<string | undefined>;
+}
+
+export const apiCanExpandPanels = (unknownApi: unknown | null): unknownApi is CanExpandPanels => {
+  return Boolean((unknownApi as CanExpandPanels)?.expandPanel !== undefined);
+};
+
+/**
+ * Gets this API's expanded panel state as a reactive variable which will cause re-renders on change.
+ */
+export const useExpandedPanelId = (api: Partial<CanExpandPanels> | undefined) =>
+  useStateFromPublishingSubject<string | undefined, CanExpandPanels['expandedPanelId']>(
+    apiCanExpandPanels(api) ? api.expandedPanelId : undefined
+  );

packages/presentation/presentation_containers/interfaces/presentation_container.ts

@@ -0,0 +1,33 @@
+/*
+ * 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.
+ */
+
+import { apiPublishesParentApi } from '@kbn/presentation-publishing';
+
+export interface PanelPackage {
+  panelType: string;
+  initialState: unknown;
+}
+export interface PresentationContainer {
+  removePanel: (panelId: string) => void;
+  canRemovePanels?: () => boolean;
+  replacePanel: (idToRemove: string, newPanel: PanelPackage) => Promise<string>;
+}
+
+export const apiIsPresentationContainer = (
+  unknownApi: unknown | null
+): unknownApi is PresentationContainer => {
+  return Boolean((unknownApi as PresentationContainer)?.removePanel !== undefined);
+};
+
+export const getContainerParentFromAPI = (
+  api: null | unknown
+): PresentationContainer | undefined => {
+  const apiParent = apiPublishesParentApi(api) ? api.parentApi.value : null;
+  if (!apiParent) return undefined;
+  return apiIsPresentationContainer(apiParent) ? apiParent : undefined;
+};

src/plugins/embeddable/public/embeddable_panel/panel_actions/track_overlays.ts → packages/presentation/presentation_containers/interfaces/tracks_overlays.ts

@@ -9,14 +9,20 @@
 import { OverlayRef } from '@kbn/core-mount-utils-browser';
 
 interface TracksOverlaysOptions {
+  /**
+   * If present, the panel with this ID will be focused when the overlay is opened. This can be used in tandem with a push
+   * flyout to edit a panel's settings in context
+   */
   focusedPanelId?: string;
 }
 
-interface TracksOverlays {
+export interface TracksOverlays {
   openOverlay: (ref: OverlayRef, options?: TracksOverlaysOptions) => void;
   clearOverlays: () => void;
 }
 
 export const tracksOverlays = (root: unknown): root is TracksOverlays => {
-  return Boolean((root as TracksOverlays).openOverlay && (root as TracksOverlays).clearOverlays);
+  return Boolean(
+    root && (root as TracksOverlays).openOverlay && (root as TracksOverlays).clearOverlays
+  );
 };

packages/presentation/presentation_containers/jest.config.js

@@ -0,0 +1,13 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../..',
+  roots: ['<rootDir>/packages/presentation/presentation_containers'],
+};

packages/presentation/presentation_containers/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/presentation-containers",
+  "owner": "@elastic/kibana-presentation"
+}

packages/presentation/presentation_containers/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/presentation-containers",
+  "private": true,
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

packages/presentation/presentation_containers/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+    "types": ["jest", "node", "react"]
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["target/**/*"],
+  "kbn_references": ["@kbn/presentation-publishing", "@kbn/core-mount-utils-browser"]
+}

packages/presentation/presentation_library/README.md

@@ -0,0 +1,3 @@
+# @kbn/presentation-library
+
+Contains interfaces and type guards to be used to mediate the relationship between panels / charts, and a content library. 

packages/presentation/presentation_library/index.ts

@@ -0,0 +1,13 @@
+/*
+ * 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.
+ */
+
+export { type CanLinkToLibrary, apiCanLinkToLibrary } from './interfaces/can_link_to_library';
+export {
+  type CanUnlinkFromLibrary,
+  apiCanUnlinkFromLibrary,
+} from './interfaces/can_unlink_from_library';

packages/presentation/presentation_library/interfaces/can_link_to_library.ts

@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */
+
+export interface CanLinkToLibrary {
+  canLinkToLibrary: () => Promise<boolean>;
+  linkToLibrary: () => Promise<void>;
+}
+
+export const apiCanLinkToLibrary = (api: unknown): api is CanLinkToLibrary =>
+  typeof (api as CanLinkToLibrary).canLinkToLibrary === 'function' &&
+  typeof (api as CanLinkToLibrary).linkToLibrary === 'function';

packages/presentation/presentation_library/interfaces/can_unlink_from_library.ts

@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */
+
+export interface CanUnlinkFromLibrary {
+  canUnlinkFromLibrary: () => Promise<boolean>;
+  unlinkFromLibrary: () => Promise<void>;
+}
+
+export const apiCanUnlinkFromLibrary = (api: unknown): api is CanUnlinkFromLibrary =>
+  typeof (api as CanUnlinkFromLibrary).canUnlinkFromLibrary === 'function' &&
+  typeof (api as CanUnlinkFromLibrary).unlinkFromLibrary === 'function';

packages/presentation/presentation_library/jest.config.js

@@ -0,0 +1,13 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../..',
+  roots: ['<rootDir>/packages/presentation/presentation_library'],
+};

packages/presentation/presentation_library/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/presentation-library",
+  "owner": "@elastic/kibana-presentation"
+}

packages/presentation/presentation_library/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/presentation-library",
+  "private": true,
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

packages/presentation/presentation_library/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+    "types": ["jest", "node", "react"]
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["target/**/*"],
+  "kbn_references": []
+}

packages/presentation/presentation_publishing/README.md

@@ -0,0 +1,3 @@
+# @kbn/presentation-publishing
+
+Contains interfaces and type guards to be used to publish and consume state of specific types.