[Chore] Simplify Embeddable Panel usage (elastic#68006)

Replaced usages of the EmbeddablePanel component with a shortcut panel API
pmuellr · Jun 4, 2020 · 97a72b3 · 97a72b3
1 parent c77e9bf
commit 97a72b3
Show file tree

Hide file tree

Showing 23 changed files with 192 additions and 239 deletions.
diff --git a/src/legacy/ui/public/new_platform/set_services.ts b/src/legacy/ui/public/new_platform/set_services.ts
@@ -65,6 +65,7 @@ export function setStartServices(npStart: NpStart) {
   visualizationsServices.setCapabilities(npStart.core.application.capabilities);
   visualizationsServices.setHttp(npStart.core.http);
   visualizationsServices.setApplication(npStart.core.application);
+  visualizationsServices.setEmbeddable(npStart.plugins.embeddable);
   visualizationsServices.setSavedObjects(npStart.core.savedObjects);
   visualizationsServices.setIndexPatterns(npStart.plugins.data.indexPatterns);
   visualizationsServices.setFilterManager(npStart.plugins.data.query.filterManager);

diff --git a/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx b/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx
@@ -186,7 +186,11 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
     ReactDOM.render(
       <I18nProvider>
         <KibanaContextProvider services={this.options}>
-          <DashboardViewport renderEmpty={this.renderEmpty} container={this} />
+          <DashboardViewport
+            renderEmpty={this.renderEmpty}
+            container={this}
+            PanelComponent={this.options.embeddable.EmbeddablePanel}
+          />
         </KibanaContextProvider>
       </I18nProvider>,
       dom

diff --git a/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.test.tsx b/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.test.tsx
@@ -80,6 +80,7 @@ function prepare(props?: Partial<DashboardGridProps>) {
   dashboardContainer = new DashboardContainer(initialInput, options);
   const defaultTestProps: DashboardGridProps = {
     container: dashboardContainer,
+    PanelComponent: () => <div />,
     kibana: null as any,
     intl: null as any,
   };

diff --git a/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.tsx b/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.tsx
@@ -30,7 +30,7 @@ import React from 'react';
 import { Subscription } from 'rxjs';
 import ReactGridLayout, { Layout } from 'react-grid-layout';
 import { GridData } from '../../../../common';
-import { ViewMode, EmbeddableChildPanel } from '../../../embeddable_plugin';
+import { ViewMode, EmbeddableChildPanel, EmbeddableStart } from '../../../embeddable_plugin';
 import { DASHBOARD_GRID_COLUMN_COUNT, DASHBOARD_GRID_HEIGHT } from '../dashboard_constants';
 import { DashboardPanelState } from '../types';
 import { withKibana } from '../../../../../kibana_react/public';
@@ -115,6 +115,7 @@ const ResponsiveSizedGrid = sizeMe(config)(ResponsiveGrid);
 
 export interface DashboardGridProps extends ReactIntl.InjectedIntlProps {
   kibana: DashboardReactContextValue;
+  PanelComponent: EmbeddableStart['EmbeddablePanel'];
   container: DashboardContainer;
 }
 
@@ -271,14 +272,7 @@ class DashboardGridUi extends React.Component<DashboardGridProps, State> {
           <EmbeddableChildPanel
             embeddableId={panel.explicitInput.id}
             container={this.props.container}
-            getActions={this.props.kibana.services.uiActions.getTriggerCompatibleActions}
-            getEmbeddableFactory={this.props.kibana.services.embeddable.getEmbeddableFactory}
-            getAllEmbeddableFactories={this.props.kibana.services.embeddable.getEmbeddableFactories}
-            overlays={this.props.kibana.services.overlays}
-            application={this.props.kibana.services.application}
-            notifications={this.props.kibana.services.notifications}
-            inspector={this.props.kibana.services.inspector}
-            SavedObjectFinder={this.props.kibana.services.SavedObjectFinder}
+            PanelComponent={this.props.PanelComponent}
           />
         </div>
       );

diff --git a/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.test.tsx b/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.test.tsx
@@ -87,6 +87,7 @@ function getProps(
   dashboardContainer = new DashboardContainer(input, options);
   const defaultTestProps: DashboardViewportProps = {
     container: dashboardContainer,
+    PanelComponent: () => <div />,
   };
 
   return {

diff --git a/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx b/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx
@@ -19,14 +19,15 @@
 
 import React from 'react';
 import { Subscription } from 'rxjs';
-import { PanelState } from '../../../embeddable_plugin';
+import { PanelState, EmbeddableStart } from '../../../embeddable_plugin';
 import { DashboardContainer, DashboardReactContextValue } from '../dashboard_container';
 import { DashboardGrid } from '../grid';
 import { context } from '../../../../../kibana_react/public';
 
 export interface DashboardViewportProps {
   container: DashboardContainer;
   renderEmpty?: () => React.ReactNode;
+  PanelComponent: EmbeddableStart['EmbeddablePanel'];
 }
 
 interface State {
@@ -114,7 +115,7 @@ export class DashboardViewport extends React.Component<DashboardViewportProps, S
   }
 
   private renderContainerScreen() {
-    const { container } = this.props;
+    const { container, PanelComponent } = this.props;
     const { isFullScreenMode, panels, title, description, useMargins } = this.state;
     return (
       <div
@@ -129,7 +130,7 @@ export class DashboardViewport extends React.Component<DashboardViewportProps, S
             onExitFullScreenMode={this.onExitFullScreenMode}
           />
         )}
-        <DashboardGrid container={container} />
+        <DashboardGrid container={container} PanelComponent={PanelComponent} />
       </div>
     );
   }

diff --git a/src/plugins/embeddable/public/lib/containers/embeddable_child_panel.test.tsx b/src/plugins/embeddable/public/lib/containers/embeddable_child_panel.test.tsx
@@ -31,7 +31,7 @@ import {
 // eslint-disable-next-line
 import { inspectorPluginMock } from '../../../../inspector/public/mocks';
 import { mount } from 'enzyme';
-import { embeddablePluginMock } from '../../mocks';
+import { embeddablePluginMock, createEmbeddablePanelMock } from '../../mocks';
 
 test('EmbeddableChildPanel renders an embeddable when it is done loading', async () => {
   const inspector = inspectorPluginMock.createStartContract();
@@ -58,18 +58,17 @@ test('EmbeddableChildPanel renders an embeddable when it is done loading', async
 
   expect(newEmbeddable.id).toBeDefined();
 
+  const testPanel = createEmbeddablePanelMock({
+    getAllEmbeddableFactories: start.getEmbeddableFactories,
+    getEmbeddableFactory,
+    inspector,
+  });
+
   const component = mount(
     <EmbeddableChildPanel
       container={container}
       embeddableId={newEmbeddable.id}
-      getActions={() => Promise.resolve([])}
-      getAllEmbeddableFactories={start.getEmbeddableFactories}
-      getEmbeddableFactory={getEmbeddableFactory}
-      notifications={{} as any}
-      application={{} as any}
-      overlays={{} as any}
-      inspector={inspector}
-      SavedObjectFinder={() => null}
+      PanelComponent={testPanel}
     />
   );
 
@@ -97,19 +96,9 @@ test(`EmbeddableChildPanel renders an error message if the factory doesn't exist
     { getEmbeddableFactory } as any
   );
 
+  const testPanel = createEmbeddablePanelMock({ inspector });
   const component = mount(
-    <EmbeddableChildPanel
-      container={container}
-      embeddableId={'1'}
-      getActions={() => Promise.resolve([])}
-      getAllEmbeddableFactories={(() => []) as any}
-      getEmbeddableFactory={(() => undefined) as any}
-      notifications={{} as any}
-      overlays={{} as any}
-      application={{} as any}
-      inspector={inspector}
-      SavedObjectFinder={() => null}
-    />
+    <EmbeddableChildPanel container={container} embeddableId={'1'} PanelComponent={testPanel} />
   );
 
   await nextTick();

diff --git a/src/plugins/embeddable/public/lib/containers/embeddable_child_panel.tsx b/src/plugins/embeddable/public/lib/containers/embeddable_child_panel.tsx
@@ -22,27 +22,15 @@ import React from 'react';
 
 import { EuiLoadingChart } from '@elastic/eui';
 import { Subscription } from 'rxjs';
-import { CoreStart } from 'src/core/public';
-import { UiActionsService } from 'src/plugins/ui_actions/public';
-
-import { Start as InspectorStartContract } from 'src/plugins/inspector/public';
 import { ErrorEmbeddable, IEmbeddable } from '../embeddables';
-import { EmbeddablePanel } from '../panel';
 import { IContainer } from './i_container';
 import { EmbeddableStart } from '../../plugin';
 
 export interface EmbeddableChildPanelProps {
   embeddableId: string;
   className?: string;
   container: IContainer;
-  getActions: UiActionsService['getTriggerCompatibleActions'];
-  getEmbeddableFactory: EmbeddableStart['getEmbeddableFactory'];
-  getAllEmbeddableFactories: EmbeddableStart['getEmbeddableFactories'];
-  overlays: CoreStart['overlays'];
-  notifications: CoreStart['notifications'];
-  application: CoreStart['application'];
-  inspector: InspectorStartContract;
-  SavedObjectFinder: React.ComponentType<any>;
+  PanelComponent: EmbeddableStart['EmbeddablePanel'];
 }
 
 interface State {
@@ -87,6 +75,7 @@ export class EmbeddableChildPanel extends React.Component<EmbeddableChildPanelPr
   }
 
   public render() {
+    const { PanelComponent } = this.props;
     const classes = classNames('embPanel', {
       'embPanel-isLoading': this.state.loading,
     });
@@ -96,17 +85,7 @@ export class EmbeddableChildPanel extends React.Component<EmbeddableChildPanelPr
         {this.state.loading || !this.embeddable ? (
           <EuiLoadingChart size="l" mono />
         ) : (
-          <EmbeddablePanel
-            embeddable={this.embeddable}
-            getActions={this.props.getActions}
-            getEmbeddableFactory={this.props.getEmbeddableFactory}
-            getAllEmbeddableFactories={this.props.getAllEmbeddableFactories}
-            overlays={this.props.overlays}
-            application={this.props.application}
-            notifications={this.props.notifications}
-            inspector={this.props.inspector}
-            SavedObjectFinder={this.props.SavedObjectFinder}
-          />
+          <PanelComponent embeddable={this.embeddable} />
         )}
       </div>
     );

diff --git a/src/plugins/embeddable/public/lib/test_samples/embeddables/hello_world_container.tsx b/src/plugins/embeddable/public/lib/test_samples/embeddables/hello_world_container.tsx
@@ -19,9 +19,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { I18nProvider } from '@kbn/i18n/react';
-import { CoreStart } from 'src/core/public';
-import { UiActionsService } from 'src/plugins/ui_actions/public';
-import { Start as InspectorStartContract } from 'src/plugins/inspector/public';
 import { Container, ViewMode, ContainerInput } from '../..';
 import { HelloWorldContainerComponent } from './hello_world_container_component';
 import { EmbeddableStart } from '../../../plugin';
@@ -45,14 +42,8 @@ interface HelloWorldContainerInput extends ContainerInput {
 }
 
 interface HelloWorldContainerOptions {
-  getActions: UiActionsService['getTriggerCompatibleActions'];
   getEmbeddableFactory: EmbeddableStart['getEmbeddableFactory'];
-  getAllEmbeddableFactories: EmbeddableStart['getEmbeddableFactories'];
-  overlays: CoreStart['overlays'];
-  application: CoreStart['application'];
-  notifications: CoreStart['notifications'];
-  inspector: InspectorStartContract;
-  SavedObjectFinder: React.ComponentType<any>;
+  panelComponent: EmbeddableStart['EmbeddablePanel'];
 }
 
 export class HelloWorldContainer extends Container<InheritedInput, HelloWorldContainerInput> {
@@ -78,14 +69,7 @@ export class HelloWorldContainer extends Container<InheritedInput, HelloWorldCon
       <I18nProvider>
         <HelloWorldContainerComponent
           container={this}
-          getActions={this.options.getActions}
-          getAllEmbeddableFactories={this.options.getAllEmbeddableFactories}
-          getEmbeddableFactory={this.options.getEmbeddableFactory}
-          overlays={this.options.overlays}
-          application={this.options.application}
-          notifications={this.options.notifications}
-          inspector={this.options.inspector}
-          SavedObjectFinder={this.options.SavedObjectFinder}
+          panelComponent={this.options.panelComponent}
         />
       </I18nProvider>,
       node

diff --git a/...lugins/embeddable/public/lib/test_samples/embeddables/hello_world_container_component.tsx b/...lugins/embeddable/public/lib/test_samples/embeddables/hello_world_container_component.tsx
@@ -20,22 +20,12 @@ import React, { Component, RefObject } from 'react';
 import { Subscription } from 'rxjs';
 
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
-import { CoreStart } from 'src/core/public';
-import { UiActionsService } from 'src/plugins/ui_actions/public';
-import { Start as InspectorStartContract } from 'src/plugins/inspector/public';
 import { IContainer, PanelState, EmbeddableChildPanel } from '../..';
 import { EmbeddableStart } from '../../../plugin';
 
 interface Props {
   container: IContainer;
-  getActions: UiActionsService['getTriggerCompatibleActions'];
-  getEmbeddableFactory: EmbeddableStart['getEmbeddableFactory'];
-  getAllEmbeddableFactories: EmbeddableStart['getEmbeddableFactories'];
-  overlays: CoreStart['overlays'];
-  application: CoreStart['application'];
-  notifications: CoreStart['notifications'];
-  inspector: InspectorStartContract;
-  SavedObjectFinder: React.ComponentType<any>;
+  panelComponent: EmbeddableStart['EmbeddablePanel'];
 }
 
 interface State {
@@ -108,14 +98,7 @@ export class HelloWorldContainerComponent extends Component<Props, State> {
           <EmbeddableChildPanel
             container={this.props.container}
             embeddableId={panelState.explicitInput.id}
-            getActions={this.props.getActions}
-            getEmbeddableFactory={this.props.getEmbeddableFactory}
-            getAllEmbeddableFactories={this.props.getAllEmbeddableFactories}
-            overlays={this.props.overlays}
-            notifications={this.props.notifications}
-            application={this.props.application}
-            inspector={this.props.inspector}
-            SavedObjectFinder={this.props.SavedObjectFinder}
+            PanelComponent={this.props.panelComponent}
           />
         </EuiFlexItem>
       );

diff --git a/src/plugins/embeddable/public/mocks.ts → src/plugins/embeddable/public/mocks.tsx b/src/plugins/embeddable/public/mocks.ts → src/plugins/embeddable/public/mocks.tsx
@@ -16,14 +16,20 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import React from 'react';
 import {
   EmbeddableStart,
   EmbeddableSetup,
   EmbeddableSetupDependencies,
   EmbeddableStartDependencies,
+  IEmbeddable,
+  EmbeddablePanel,
 } from '.';
 import { EmbeddablePublicPlugin } from './plugin';
 import { coreMock } from '../../../core/public/mocks';
+import { UiActionsService } from './lib/ui_actions';
+import { CoreStart } from '../../../core/public';
+import { Start as InspectorStart } from '../../inspector/public';
 
 // eslint-disable-next-line
 import { inspectorPluginMock } from '../../inspector/public/mocks';
@@ -33,6 +39,42 @@ import { uiActionsPluginMock } from '../../ui_actions/public/mocks';
 export type Setup = jest.Mocked<EmbeddableSetup>;
 export type Start = jest.Mocked<EmbeddableStart>;
 
+interface CreateEmbeddablePanelMockArgs {
+  getActions: UiActionsService['getTriggerCompatibleActions'];
+  getEmbeddableFactory: EmbeddableStart['getEmbeddableFactory'];
+  getAllEmbeddableFactories: EmbeddableStart['getEmbeddableFactories'];
+  overlays: CoreStart['overlays'];
+  notifications: CoreStart['notifications'];
+  application: CoreStart['application'];
+  inspector: InspectorStart;
+  SavedObjectFinder: React.ComponentType<any>;
+}
+
+export const createEmbeddablePanelMock = ({
+  getActions,
+  getEmbeddableFactory,
+  getAllEmbeddableFactories,
+  overlays,
+  notifications,
+  application,
+  inspector,
+  SavedObjectFinder,
+}: Partial<CreateEmbeddablePanelMockArgs>) => {
+  return ({ embeddable }: { embeddable: IEmbeddable }) => (
+    <EmbeddablePanel
+      embeddable={embeddable}
+      getActions={getActions || (() => Promise.resolve([]))}
+      getAllEmbeddableFactories={getAllEmbeddableFactories || ((() => []) as any)}
+      getEmbeddableFactory={getEmbeddableFactory || ((() => undefined) as any)}
+      notifications={notifications || ({} as any)}
+      application={application || ({} as any)}
+      overlays={overlays || ({} as any)}
+      inspector={inspector || ({} as any)}
+      SavedObjectFinder={SavedObjectFinder || (() => null)}
+    />
+  );
+};
+
 const createSetupContract = (): Setup => {
   const setupContract: Setup = {
     registerEmbeddableFactory: jest.fn(),