[Embeddable] Refactor embeddable panel

examples/embeddable_examples/public/list_container/list_container.tsx

@@ -17,7 +17,7 @@ export class ListContainer extends Container<{}, ContainerInput> {
   public readonly type = LIST_CONTAINER;
   private node?: HTMLElement;
 
-  constructor(input: ContainerInput, private embeddableServices: EmbeddableStart) {
+  constructor(input: ContainerInput, embeddableServices: EmbeddableStart) {
     super(input, { embeddableLoaded: {} }, embeddableServices.getEmbeddableFactory);
   }
 
@@ -32,10 +32,7 @@ export class ListContainer extends Container<{}, ContainerInput> {
       ReactDOM.unmountComponentAtNode(this.node);
     }
     this.node = node;
-    ReactDOM.render(
-      <ListContainerComponent embeddable={this} embeddableServices={this.embeddableServices} />,
-      node
-    );
+    ReactDOM.render(<ListContainerComponent embeddable={this} />, node);
   }
 
   public destroy() {

examples/embeddable_examples/public/list_container/list_container_component.tsx

@@ -14,22 +14,16 @@ import {
   withEmbeddableSubscription,
   ContainerInput,
   ContainerOutput,
-  EmbeddableStart,
-  EmbeddableChildPanel,
+  EmbeddablePanel,
 } from '@kbn/embeddable-plugin/public';
 
 interface Props {
   embeddable: IContainer;
   input: ContainerInput;
   output: ContainerOutput;
-  embeddableServices: EmbeddableStart;
 }
 
-function renderList(
-  embeddable: IContainer,
-  panels: ContainerInput['panels'],
-  embeddableServices: EmbeddableStart
-) {
+function renderList(embeddable: IContainer, panels: ContainerInput['panels']) {
   let number = 0;
   const list = Object.values(panels).map((panel) => {
     number++;
@@ -42,10 +36,8 @@ function renderList(
             </EuiText>
           </EuiFlexItem>
           <EuiFlexItem>
-            <EmbeddableChildPanel
-              PanelComponent={embeddableServices.EmbeddablePanel}
-              embeddableId={panel.explicitInput.id}
-              container={embeddable}
+            <EmbeddablePanel
+              embeddable={() => embeddable.untilEmbeddableLoaded(panel.explicitInput.id)}
             />
           </EuiFlexItem>
         </EuiFlexGroup>
@@ -55,12 +47,12 @@ function renderList(
   return list;
 }
 
-export function ListContainerComponentInner({ embeddable, input, embeddableServices }: Props) {
+export function ListContainerComponentInner({ embeddable, input }: Props) {
   return (
     <div>
       <h2 data-test-subj="listContainerTitle">{embeddable.getTitle()}</h2>
       <EuiSpacer size="l" />
-      {renderList(embeddable, input.panels, embeddableServices)}
+      {renderList(embeddable, input.panels)}
     </div>
   );
 }
@@ -73,6 +65,5 @@ export function ListContainerComponentInner({ embeddable, input, embeddableServi
 export const ListContainerComponent = withEmbeddableSubscription<
   ContainerInput,
   ContainerOutput,
-  IContainer,
-  { embeddableServices: EmbeddableStart }
+  IContainer
 >(ListContainerComponentInner);

examples/embeddable_examples/public/searchable_list_container/searchable_list_container_component.tsx

@@ -25,6 +25,8 @@ import {
   ContainerOutput,
   EmbeddableOutput,
   EmbeddableStart,
+  EmbeddablePanel,
+  openAddPanelFlyout,
 } from '@kbn/embeddable-plugin/public';
 import { SearchableListContainer, SearchableContainerInput } from './searchable_list_container';
 
@@ -120,7 +122,7 @@ export class SearchableListContainerComponentInner extends Component<Props, Stat
   };
 
   public renderControls() {
-    const { input } = this.props;
+    const { input, embeddable } = this.props;
     return (
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem grow={false}>
@@ -150,6 +152,17 @@ export class SearchableListContainerComponentInner extends Component<Props, Stat
             />
           </EuiFormRow>
         </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiFormRow hasEmptyLabelSpace>
+            <EuiButton
+              data-test-subj="addPanelToListContainer"
+              disabled={input.search === ''}
+              onClick={() => openAddPanelFlyout({ container: embeddable })}
+            >
+              Add panel
+            </EuiButton>
+          </EuiFormRow>
+        </EuiFlexItem>
         <EuiFlexItem />
       </EuiFlexGroup>
     );
@@ -171,7 +184,7 @@ export class SearchableListContainerComponentInner extends Component<Props, Stat
   }
 
   private renderList() {
-    const { embeddableServices, input, embeddable } = this.props;
+    const { input, embeddable } = this.props;
     let id = 0;
     const list = Object.values(input.panels).map((panel) => {
       const childEmbeddable = embeddable.getChild(panel.explicitInput.id);
@@ -189,7 +202,7 @@ export class SearchableListContainerComponentInner extends Component<Props, Stat
               />
             </EuiFlexItem>
             <EuiFlexItem>
-              <embeddableServices.EmbeddablePanel embeddable={childEmbeddable} />
+              <EmbeddablePanel embeddable={childEmbeddable} />
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiPanel>

examples/embeddable_explorer/public/app.tsx

@@ -112,7 +112,6 @@ const EmbeddableExplorerApp = ({
       id: 'embeddablePanelExample',
       component: (
         <EmbeddablePanelExample
-          embeddableServices={embeddableApi}
           searchListContainerFactory={embeddableExamples.factories.getSearchableListContainerEmbeddableFactory()}
         />
       ),

examples/embeddable_explorer/public/embeddable_panel_example.tsx

@@ -9,7 +9,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { EuiPanel, EuiText, EuiPageTemplate } from '@elastic/eui';
 import { EuiSpacer } from '@elastic/eui';
-import { EmbeddableStart, IEmbeddable } from '@kbn/embeddable-plugin/public';
+import { IEmbeddable, EmbeddablePanel } from '@kbn/embeddable-plugin/public';
 import {
   HELLO_WORLD_EMBEDDABLE,
   TODO_EMBEDDABLE,
@@ -19,11 +19,10 @@ import {
 } from '@kbn/embeddable-examples-plugin/public';
 
 interface Props {
-  embeddableServices: EmbeddableStart;
   searchListContainerFactory: SearchableListContainerFactory;
 }
 
-export function EmbeddablePanelExample({ embeddableServices, searchListContainerFactory }: Props) {
+export function EmbeddablePanelExample({ searchListContainerFactory }: Props) {
   const searchableInput = {
     id: '1',
     title: 'My searchable todo list',
@@ -120,7 +119,7 @@ export function EmbeddablePanelExample({ embeddableServices, searchListContainer
           </EuiText>
           <EuiPanel data-test-subj="embeddedPanelExample" paddingSize="none" role="figure">
             {embeddable ? (
-              <embeddableServices.EmbeddablePanel embeddable={embeddable} />
+              <EmbeddablePanel embeddable={embeddable} />
             ) : (
               <EuiText>Loading...</EuiText>
             )}

src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid_item.tsx

@@ -10,11 +10,7 @@ import React, { useState, useRef, useEffect, useLayoutEffect } from 'react';
 import { EuiLoadingChart } from '@elastic/eui';
 import classNames from 'classnames';
 
-import {
-  EmbeddableChildPanel,
-  EmbeddablePhaseEvent,
-  ViewMode,
-} from '@kbn/embeddable-plugin/public';
+import { EmbeddablePhaseEvent, EmbeddablePanel, ViewMode } from '@kbn/embeddable-plugin/public';
 
 import { DashboardPanelState } from '../../../../common';
 import { pluginServices } from '../../../services/plugin_services';
@@ -52,9 +48,6 @@ const Item = React.forwardRef<HTMLDivElement, Props>(
     },
     ref
   ) => {
-    const {
-      embeddable: { EmbeddablePanel: PanelComponent },
-    } = pluginServices.getServices();
     const container = useDashboardContainer();
     const scrollToPanelId = container.select((state) => state.componentState.scrollToPanelId);
     const highlightPanelId = container.select((state) => state.componentState.highlightPanelId);
@@ -90,13 +83,13 @@ const Item = React.forwardRef<HTMLDivElement, Props>(
       >
         {isRenderable ? (
           <>
-            <EmbeddableChildPanel
-              // This key is used to force rerendering on embeddable type change while the id remains the same
+            <EmbeddablePanel
               key={type}
-              embeddableId={id}
               index={index}
+              showBadges={true}
+              showNotifications={true}
               onPanelStatusChange={onPanelStatusChange}
-              {...{ container, PanelComponent }}
+              embeddable={() => container.untilEmbeddableLoaded(id)}
             />
             {children}
           </>

src/plugins/dashboard/public/dashboard_container/embeddable/api/add_panel_from_library.ts

@@ -6,41 +6,14 @@
  * Side Public License, v 1.
  */
 
-import { HttpStart } from '@kbn/core/public';
 import { isErrorEmbeddable, openAddPanelFlyout } from '@kbn/embeddable-plugin/public';
-import { getSavedObjectFinder } from '@kbn/saved-objects-finder-plugin/public';
-
-import { pluginServices } from '../../../services/plugin_services';
 import { DashboardContainer } from '../dashboard_container';
 
 export function addFromLibrary(this: DashboardContainer) {
-  const {
-    overlays,
-    notifications,
-    usageCollection,
-    settings: { uiSettings, theme },
-    embeddable: { getEmbeddableFactories, getEmbeddableFactory },
-    http,
-    savedObjectsManagement,
-    savedObjectsTagging,
-  } = pluginServices.getServices();
-
   if (isErrorEmbeddable(this)) return;
   this.openOverlay(
     openAddPanelFlyout({
-      SavedObjectFinder: getSavedObjectFinder(
-        uiSettings,
-        http as HttpStart,
-        savedObjectsManagement,
-        savedObjectsTagging.api
-      ),
-      reportUiCounter: usageCollection.reportUiCounter,
-      getAllFactories: getEmbeddableFactories,
-      getFactory: getEmbeddableFactory,
-      embeddable: this,
-      notifications,
-      overlays,
-      theme,
+      container: this,
       onAddPanel: (id: string) => {
         this.setScrollToPanelId(id);
         this.setHighlightPanelId(id);