From 16c751d93081ac3a62a3adb107ef8353fea2963f Mon Sep 17 00:00:00 2001
From: Alison Goryachev <alisonmllr20@gmail.com>
Date: Wed, 30 Oct 2019 11:14:05 -0400
Subject: [PATCH] use i18n context from core

---
 .../public/app/constants/index.ts             |  2 ++
 .../index_management/public/app/index.tsx     | 34 +++++++++++++++++++
 .../plugins/index_management/public/plugin.ts |  2 +-
 .../public/register_routes.tsx                | 31 ++++++-----------
 4 files changed, 47 insertions(+), 22 deletions(-)
 create mode 100644 x-pack/legacy/plugins/index_management/public/app/index.tsx

diff --git a/x-pack/legacy/plugins/index_management/public/app/constants/index.ts b/x-pack/legacy/plugins/index_management/public/app/constants/index.ts
index 4369194c49ad5b..d55d28dce70032 100644
--- a/x-pack/legacy/plugins/index_management/public/app/constants/index.ts
+++ b/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';
diff --git a/x-pack/legacy/plugins/index_management/public/app/index.tsx b/x-pack/legacy/plugins/index_management/public/app/index.tsx
new file mode 100644
index 00000000000000..923e92affd2dd1
--- /dev/null
+++ b/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);
+  }
+};
diff --git a/x-pack/legacy/plugins/index_management/public/plugin.ts b/x-pack/legacy/plugins/index_management/public/plugin.ts
index 98d5f25d1203bc..9728c0822e8304 100644
--- a/x-pack/legacy/plugins/index_management/public/plugin.ts
+++ b/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);
   }
 }
diff --git a/x-pack/legacy/plugins/index_management/public/register_routes.tsx b/x-pack/legacy/plugins/index_management/public/register_routes.tsx
index 6f11f30d470982..8781c55dc8fb58 100644
--- a/x-pack/legacy/plugins/index_management/public/register_routes.tsx
+++ b/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);
       });
     },