use i18n context from core

Author: alisonelizabeth

x-pack/legacy/plugins/index_management/public/app/constants/index.ts

@@ -13,3 +13,5 @@ export {
   TAB_STATS,
   TAB_EDIT_SETTINGS,
 } from './detail_panel_tabs';
+
+export const REACT_ROOT_ID = 'indexManagementReactRoot';

x-pack/legacy/plugins/index_management/public/app/index.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { Provider } from 'react-redux';
+import { render, unmountComponentAtNode } from 'react-dom';
+
+import { App } from './app';
+import { indexManagementStore } from './store';
+
+export const mountReactApp = (elem: HTMLElement | null, { core }: { core: Core }): void => {
+  if (elem) {
+    const { notifications, i18n } = core;
+    const { Context: I18nContext } = i18n;
+
+    render(
+      <I18nContext>
+        <Provider store={indexManagementStore()}>
+          <App />
+        </Provider>
+      </I18nContext>,
+      elem
+    );
+  }
+};
+
+export const unmountReactApp = (elem: HTMLElement | null) => {
+  if (elem) {
+    unmountComponentAtNode(elem);
+  }
+};

x-pack/legacy/plugins/index_management/public/plugin.ts

@@ -27,6 +27,6 @@ export class IndexMgmtPlugin {
 
     // Register management section and Angular route
     registerManagementSection(management.getSection('elasticsearch'));
-    registerRoutes();
+    registerRoutes(core as CoreStart);
   }
 }

x-pack/legacy/plugins/index_management/public/register_routes.tsx

@@ -7,42 +7,31 @@
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { Provider } from 'react-redux';
+
 import routes from 'ui/routes';
-import { I18nContext } from 'ui/i18n';
 
-import { App } from './app/app';
-import { BASE_PATH } from '../common/constants/base_path';
+import { CoreStart } from '../../../../../src/core/public';
+
+import { mountReactApp, unmountReactApp } from './app';
+import { REACT_ROOT_ID } from './app/constants';
+import { BASE_PATH } from '../common/constants';
 
 import template from './index.html';
 import { manageAngularLifecycle } from './app/lib/manage_angular_lifecycle';
-import { indexManagementStore } from './app/store';
 
 let elem: HTMLElement | null;
 
-const renderReact = async () => {
-  render(
-    <I18nContext>
-      <Provider store={indexManagementStore()}>
-        <App />
-      </Provider>
-    </I18nContext>,
-    elem
-  );
-};
-
-export const registerRoutes = () => {
+export const registerRoutes = (core: CoreStart) => {
   routes.when(`${BASE_PATH}:view?/:action?/:id?`, {
     template,
     controller: ($scope: any, $route: any) => {
       // clean up previously rendered React app if one exists
       // this happens because of React Router redirects
-      if (elem) {
-        unmountComponentAtNode(elem);
-      }
+      unmountReactApp(elem);
 
       $scope.$$postDigest(() => {
-        elem = document.getElementById('indexManagementReactRoot');
-        renderReact();
+        elem = document.getElementById(REACT_ROOT_ID);
+        mountReactApp(elem, { core });
         manageAngularLifecycle($scope, $route, elem);
       });
     },