plugin.start now does reactdom.render vs returning react element

John Schulz · John Schulz · commit 65c271c49bce · 2019-11-08T15:00:44.000-05:00
export plugin function from public/index
diff --git a/x-pack/legacy/plugins/integrations_manager/public/index.ts b/x-pack/legacy/plugins/integrations_manager/public/index.ts
@@ -3,14 +3,13 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import ReactDOM from 'react-dom';
 import euiLight from '@elastic/eui/dist/eui_theme_light.json';
 import euiDark from '@elastic/eui/dist/eui_theme_dark.json';
 import 'ui/autoload/all';
 import 'ui/autoload/styles';
 import chrome from 'ui/chrome';
 import { npSetup, npStart } from 'ui/new_platform';
-import { Plugin, PluginInitializerContext, PluginStart } from './plugin';
+import { Plugin, PluginInitializerContext } from './plugin';
 import { routes } from './routes';
 
 // create './types' later and move there?
@@ -20,35 +19,32 @@ const REACT_APP_ROOT_ID = 'epm__root';
 const template = `<div id="${REACT_APP_ROOT_ID}" style="flex-grow: 1; display: flex; flex-direction: column"></div>`;
 const getRootEl = () => document.getElementById(REACT_APP_ROOT_ID);
 
-main();
+export const plugin = (initializerContext: PluginInitializerContext = {}) =>
+  new Plugin(initializerContext);
 
-async function main(): Promise<void> {
-  const initializerContext: PluginInitializerContext = {};
-  const plugin = new Plugin(initializerContext);
-  plugin.setup(npSetup.core);
+const epmPlugin = plugin();
+epmPlugin.setup(npSetup.core);
 
-  // @ts-ignore
-  chrome.setRootTemplate(template);
-
-  await waitFor(getRootEl);
+// @ts-ignore
+chrome.setRootTemplate(template);
 
   const isDarkMode = npStart.core.uiSettings.get('theme:darkMode');
-  const { root }: PluginStart = plugin.start({
+waitForElement(getRootEl).then(element => {
+  epmPlugin.start({
     ...npStart.core,
     routes,
     theme: { eui: isDarkMode ? euiDark : euiLight },
+    renderTo: element,
   });
+});
 
-  const container = getRootEl();
-  ReactDOM.render(root, container);
-}
-
-function waitFor(fn: () => any) {
+function waitForElement(fn: () => HTMLElement | null): Promise<HTMLElement> {
   return new Promise(resolve => {
-    if (fn()) {
-      resolve();
+    const element = fn();
+    if (element) {
+      resolve(element);
     } else {
-      setTimeout(() => resolve(waitFor(fn)), 10);
+      setTimeout(() => resolve(waitForElement(fn)), 10);
     }
   });
 }
diff --git a/x-pack/legacy/plugins/integrations_manager/public/plugin.tsx b/x-pack/legacy/plugins/integrations_manager/public/plugin.tsx
@@ -5,6 +5,7 @@
  */
 
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { HashRouter, Switch } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 import { EuiErrorBoundary } from '@elastic/eui';
@@ -29,6 +30,7 @@ export interface PluginCore {
   i18n: I18nStart;
   routes: JSX.Element[];
   theme: PluginTheme;
+  renderTo: HTMLElement;
 }
 
 export class Plugin {
@@ -38,14 +40,11 @@ export class Plugin {
   // called after all plugins are set up
   public start(core: PluginCore) {
     setClient(core.http.fetch);
-
-    return {
-      root: <Root core={core} />,
-    };
+    ReactDOM.render(<App core={core} />, core.renderTo);
   }
 }
 
-function Root(props: { core: PluginCore }) {
+function App(props: { core: PluginCore }) {
   const { i18n, routes } = props.core;
 
   return (
