revert embeddable changes and create stateful wrapper on the boundaries

Author: flash1293

src/legacy/core_plugins/kibana/public/dashboard/dashboard_app_controller.tsx

@@ -70,6 +70,10 @@ import { DashboardAppScope } from './dashboard_app';
 import { VISUALIZE_EMBEDDABLE_TYPE } from '../visualize/embeddable';
 import { convertSavedDashboardPanelToPanelState } from './lib/embeddable_saved_object_converters';
 import { RenderDeps } from './application';
+import {
+  SavedObjectFinderProps,
+  SavedObjectFinderUi,
+} from '../../../../../plugins/kibana_react/public';
 
 export interface DashboardAppControllerDependencies extends RenderDeps {
   $scope: DashboardAppScope;
@@ -717,14 +721,17 @@ export class DashboardAppController {
     };
     navActions[TopNavIds.ADD] = () => {
       if (dashboardContainer && !isErrorEmbeddable(dashboardContainer)) {
+        const SavedObjectFinder = (props: SavedObjectFinderProps) => (
+          <SavedObjectFinderUi {...props} savedObjects={savedObjects} uiSettings={uiSettings} />
+        );
+
         openAddPanelFlyout({
           embeddable: dashboardContainer,
           getAllFactories: embeddables.getEmbeddableFactories,
           getFactory: embeddables.getEmbeddableFactory,
           notifications,
           overlays,
-          uiSettings,
-          savedObjects,
+          SavedObjectFinder,
         });
       }
     };

src/plugins/dashboard_embeddable_container/public/actions/expand_panel_action.test.tsx

@@ -42,6 +42,7 @@ let embeddable: ContactCardEmbeddable;
 beforeEach(async () => {
   const options: DashboardOptions = {
     ExitFullScreenButton: () => null,
+    SavedObjectFinder: () => null,
     application: {} as any,
     embeddable: {
       getEmbeddableFactory: (id: string) => embeddableFactories.get(id)!,
@@ -51,8 +52,6 @@ beforeEach(async () => {
     overlays: {} as any,
     savedObjectMetaData: {} as any,
     uiActions: {} as any,
-    uiSettings: {} as any,
-    savedObjects: {} as any,
   };
   const input = getSampleDashboardInput({
     panels: {

src/plugins/dashboard_embeddable_container/public/actions/open_replace_panel_flyout.tsx

@@ -31,10 +31,19 @@ import {
 export async function openReplacePanelFlyout(options: {
   embeddable: IContainer;
   core: CoreStart;
+  savedObjectFinder: React.ComponentType<any>;
+  notifications: CoreStart['notifications'];
   panelToRemove: IEmbeddable<EmbeddableInput, EmbeddableOutput>;
   getEmbeddableFactories: IEmbeddableStart['getEmbeddableFactories'];
 }) {
-  const { embeddable, core, panelToRemove, getEmbeddableFactories } = options;
+  const {
+    embeddable,
+    core,
+    panelToRemove,
+    savedObjectFinder,
+    notifications,
+    getEmbeddableFactories,
+  } = options;
   const flyoutSession = core.overlays.openFlyout(
     toMountPoint(
       <ReplacePanelFlyout
@@ -45,9 +54,8 @@ export async function openReplacePanelFlyout(options: {
           }
         }}
         panelToRemove={panelToRemove}
-        notifications={core.notifications}
-        uiSettings={core.uiSettings}
-        savedObjects={core.savedObjects}
+        savedObjectsFinder={savedObjectFinder}
+        notifications={notifications}
         getEmbeddableFactories={getEmbeddableFactories}
       />
     ),

src/plugins/dashboard_embeddable_container/public/actions/replace_panel_action.test.tsx

@@ -45,14 +45,13 @@ beforeEach(async () => {
   coreStart = coreMock.createStart();
   const options: DashboardOptions = {
     ExitFullScreenButton: () => null,
+    SavedObjectFinder: () => null,
     application: {} as any,
     embeddable: {
       getEmbeddableFactory: (id: string) => embeddableFactories.get(id)!,
     } as any,
     inspector: {} as any,
     notifications: {} as any,
-    uiSettings: coreStart.uiSettings,
-    savedObjects: coreStart.savedObjects,
     overlays: coreStart.overlays,
     savedObjectMetaData: {} as any,
     uiActions: {} as any,
@@ -83,12 +82,26 @@ beforeEach(async () => {
 });
 
 test('Executes the replace panel action', async () => {
-  const action = new ReplacePanelAction(coreStart, getEmbeddableFactories);
+  let SavedObjectFinder: any;
+  let notifications: any;
+  const action = new ReplacePanelAction(
+    coreStart,
+    SavedObjectFinder,
+    notifications,
+    getEmbeddableFactories
+  );
   action.execute({ embeddable });
 });
 
 test('Is not compatible when embeddable is not in a dashboard container', async () => {
-  const action = new ReplacePanelAction(coreStart, getEmbeddableFactories);
+  let SavedObjectFinder: any;
+  let notifications: any;
+  const action = new ReplacePanelAction(
+    coreStart,
+    SavedObjectFinder,
+    notifications,
+    getEmbeddableFactories
+  );
   expect(
     await action.isCompatible({
       embeddable: new ContactCardEmbeddable(
@@ -100,19 +113,40 @@ test('Is not compatible when embeddable is not in a dashboard container', async
 });
 
 test('Execute throws an error when called with an embeddable not in a parent', async () => {
-  const action = new ReplacePanelAction(coreStart, getEmbeddableFactories);
+  let SavedObjectFinder: any;
+  let notifications: any;
+  const action = new ReplacePanelAction(
+    coreStart,
+    SavedObjectFinder,
+    notifications,
+    getEmbeddableFactories
+  );
   async function check() {
     await action.execute({ embeddable: container });
   }
   await expect(check()).rejects.toThrow(Error);
 });
 
 test('Returns title', async () => {
-  const action = new ReplacePanelAction(coreStart, getEmbeddableFactories);
+  let SavedObjectFinder: any;
+  let notifications: any;
+  const action = new ReplacePanelAction(
+    coreStart,
+    SavedObjectFinder,
+    notifications,
+    getEmbeddableFactories
+  );
   expect(action.getDisplayName({ embeddable })).toBeDefined();
 });
 
 test('Returns an icon', async () => {
-  const action = new ReplacePanelAction(coreStart, getEmbeddableFactories);
+  let SavedObjectFinder: any;
+  let notifications: any;
+  const action = new ReplacePanelAction(
+    coreStart,
+    SavedObjectFinder,
+    notifications,
+    getEmbeddableFactories
+  );
   expect(action.getIconType({ embeddable })).toBeDefined();
 });

src/plugins/dashboard_embeddable_container/public/actions/replace_panel_action.tsx

@@ -41,6 +41,8 @@ export class ReplacePanelAction implements IAction<ActionContext> {
 
   constructor(
     private core: CoreStart,
+    private savedobjectfinder: React.ComponentType<any>,
+    private notifications: CoreStart['notifications'],
     private getEmbeddableFactories: IEmbeddableStart['getEmbeddableFactories']
   ) {}
 
@@ -80,6 +82,8 @@ export class ReplacePanelAction implements IAction<ActionContext> {
     openReplacePanelFlyout({
       embeddable: dash,
       core: this.core,
+      savedObjectFinder: this.savedobjectfinder,
+      notifications: this.notifications,
       panelToRemove: view,
       getEmbeddableFactories: this.getEmbeddableFactories,
     });

src/plugins/dashboard_embeddable_container/public/actions/replace_panel_flyout.tsx

@@ -22,16 +22,14 @@ import React from 'react';
 import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader, EuiTitle } from '@elastic/eui';
 import { GetEmbeddableFactories } from 'src/plugins/embeddable/public';
 import { DashboardPanelState } from '../embeddable';
-import { CoreStart, NotificationsStart, Toast } from '../../../../core/public';
+import { NotificationsStart, Toast } from '../../../../core/public';
 import { IContainer, IEmbeddable, EmbeddableInput, EmbeddableOutput } from '../embeddable_plugin';
-import { SavedObjectFinderUi } from '../../../kibana_react/public';
 
 interface Props {
   container: IContainer;
+  savedObjectsFinder: React.ComponentType<any>;
   onClose: () => void;
   notifications: NotificationsStart;
-  uiSettings: CoreStart['uiSettings'];
-  savedObjects: CoreStart['savedObjects'];
   panelToRemove: IEmbeddable<EmbeddableInput, EmbeddableOutput>;
   getEmbeddableFactories: GetEmbeddableFactories;
 }
@@ -96,8 +94,9 @@ export class ReplacePanelFlyout extends React.Component<Props> {
   };
 
   public render() {
+    const SavedObjectFinder = this.props.savedObjectsFinder;
     const savedObjectsFinder = (
-      <SavedObjectFinderUi
+      <SavedObjectFinder
         noItemsMessage={i18n.translate(
           'dashboardEmbeddableContainer.addPanel.noMatchingObjectsMessage',
           {
@@ -112,8 +111,6 @@ export class ReplacePanelFlyout extends React.Component<Props> {
           .map(({ savedObjectMetaData }) => savedObjectMetaData as any)}
         showFilter={true}
         onChoose={this.onReplacePanel}
-        uiSettings={this.props.uiSettings}
-        savedObjects={this.props.savedObjects}
       />
     );
 

src/plugins/dashboard_embeddable_container/public/embeddable/dashboard_container.test.tsx

@@ -41,10 +41,9 @@ const options: DashboardContainerOptions = {
   notifications: {} as any,
   overlays: {} as any,
   inspector: {} as any,
+  SavedObjectFinder: () => null,
   ExitFullScreenButton: () => null,
   uiActions: {} as any,
-  uiSettings: {} as any,
-  savedObjects: {} as any,
 };
 
 beforeEach(() => {

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

@@ -77,10 +77,9 @@ export interface DashboardContainerOptions {
   application: CoreStart['application'];
   overlays: CoreStart['overlays'];
   notifications: CoreStart['notifications'];
-  savedObjects: CoreStart['savedObjects'];
-  uiSettings: CoreStart['uiSettings'];
   embeddable: IEmbeddableStart;
   inspector: InspectorStartContract;
+  SavedObjectFinder: React.ComponentType<any>;
   ExitFullScreenButton: React.ComponentType<any>;
   uiActions: IUiActionsStart;
 }

src/plugins/dashboard_embeddable_container/public/embeddable/grid/dashboard_grid.test.tsx

@@ -68,12 +68,11 @@ function prepare(props?: Partial<DashboardGridProps>) {
     inspector: {
       isAvailable: jest.fn(),
     } as any,
+    SavedObjectFinder: () => null,
     ExitFullScreenButton: () => null,
     uiActions: {
       getTriggerCompatibleActions: (() => []) as any,
     } as any,
-    uiSettings: {} as any,
-    savedObjects: {} as any,
   };
   dashboardContainer = new DashboardContainer(initialInput, options);
   const defaultTestProps: DashboardGridProps = {

src/plugins/dashboard_embeddable_container/public/embeddable/grid/dashboard_grid.tsx

@@ -276,8 +276,7 @@ class DashboardGridUi extends React.Component<DashboardGridProps, State> {
             overlays={this.props.kibana.services.overlays}
             notifications={this.props.kibana.services.notifications}
             inspector={this.props.kibana.services.inspector}
-            uiSettings={this.props.kibana.services.uiSettings}
-            savedObjects={this.props.kibana.services.savedObjects}
+            SavedObjectFinder={this.props.kibana.services.SavedObjectFinder}
           />
         </div>
       );