[Embeddable] Refactor embeddable panel (#159837)

Update the Embeddable panel and all sub-components to be react function components & removes the embeddable panel HOC in favour of a direct import.

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>
             )}