From d05437703d53f5f71a553d0f19c9c2853aac57ac Mon Sep 17 00:00:00 2001
From: Aleh Zasypkin <aleh.zasypkin@gmail.com>
Date: Mon, 4 Feb 2019 13:38:00 +0100
Subject: [PATCH] Introduce `I18nService` core service and `I18nContext`.
 (#29379)

---
 packages/kbn-i18n/README.md                   |   15 +-
 .../inject_i18n_provider.test.tsx.snap        |  110 -
 packages/kbn-i18n/src/react/index.tsx         |    1 -
 .../src/react/inject_i18n_provider.test.tsx   |   47 -
 src/core/public/core_system.test.ts           |   33 +-
 src/core/public/core_system.ts                |   11 +-
 .../fatal_errors_service.test.ts.snap         |   25 +-
 .../fatal_errors/fatal_errors_service.test.ts |   33 +-
 .../fatal_errors/fatal_errors_service.tsx     |   20 +-
 .../__snapshots__/i18n_service.test.tsx.snap  |   17 +
 .../core/public/i18n/i18n_service.test.tsx    |   47 +-
 src/core/public/i18n/i18n_service.tsx         |   57 +
 .../index.js => core/public/i18n/index.ts}    |   12 +-
 .../legacy_platform_service.test.ts.snap      |    2 +
 .../legacy_platform_service.test.ts           |   21 +
 .../legacy_platform_service.ts                |    6 +-
 .../notifications/notifications_service.ts    |    9 +-
 .../toasts_service.test.tsx.snap              |    4 +-
 .../toasts/toasts_service.test.tsx            |   12 +-
 .../notifications/toasts/toasts_service.tsx   |   12 +-
 src/dev/precommit_hook/casing_check_config.js |    1 -
 .../public/vis_controller.js                  |    7 +-
 .../kibana/public/dashboard/dashboard_app.js  |    3 +-
 .../kibana/public/dashboard/index.js          |    4 +-
 .../dashboard/top_nav/show_add_panel.js       |    6 +-
 .../dashboard/top_nav/show_clone_modal.js     |    6 +-
 .../dashboard/top_nav/show_options_popover.js |    6 +-
 .../viewport/dashboard_viewport_provider.js   |    5 +-
 .../components/fetch_error/fetch_error.js     |    5 +-
 .../public/discover/directives/index.js       |    6 +-
 .../top_nav/show_open_search_panel.js         |    6 +-
 .../kibana/public/home/components/home_app.js |   65 +-
 .../core_plugins/kibana/public/home/index.js  |    3 +-
 .../kibana/public/management/index.js         |   11 +-
 .../__jest__/render.test.js                   |    4 +
 .../create_index_pattern_wizard/render.js     |    6 +-
 .../create_edit_field/create_edit_field.js    |    6 +-
 .../edit_index_pattern/edit_index_pattern.js  |   14 +-
 .../indexed_fields_table.test.js.snap         |  184 +-
 .../indexed_fields_table.js                   |   18 +-
 .../scripted_field_table.test.js.snap         |  336 +-
 .../__jest__/scripted_field_table.test.js     |   14 +-
 .../scripted_fields_table.js                  |   47 +-
 .../sections/index_patterns/index.js          |    6 +-
 .../components/header/header.js               |   16 +-
 .../management/sections/objects/_objects.js   |    6 +-
 .../advanced_settings.test.js.snap            |  948 +++--
 .../sections/settings/advanced_settings.js    |   60 +-
 .../management/sections/settings/index.js     |   11 +-
 .../embeddable/disabled_lab_embeddable.tsx    |    6 +-
 .../visualize/listing/visualize_listing.js    |    6 +-
 .../__snapshots__/new_vis_modal.test.tsx.snap | 3108 ++++++++---------
 .../visualize/wizard/new_vis_modal.test.tsx   |   39 +-
 .../public/visualize/wizard/show_new_vis.tsx  |    6 +-
 .../metrics/public/components/vis_editor.js   |   25 +-
 .../public/kbn_vis_types/editor_controller.js |    6 +-
 .../status_page/public/components/render.js   |    6 +-
 .../public/tag_cloud_visualization.js         |    4 +-
 .../header_global_nav/header_global_nav.js    |    4 +-
 src/ui/public/chrome/directives/kbn_chrome.js |    6 +-
 src/ui/public/filter_bar/directive.js         |    4 +-
 .../i18n/__snapshots__/index.test.tsx.snap    |   10 +
 src/ui/public/i18n/index.test.tsx             |   54 +
 src/ui/public/i18n/index.tsx                  |   57 +
 src/ui/public/inspector/inspector.tsx         |   14 +-
 src/ui/public/query_bar/directive/index.js    |    4 +-
 .../show_saved_object_save_modal.js           |    4 +-
 src/ui/public/search_bar/directive/index.js   |    4 +-
 .../public/share/show_share_context_menu.tsx  |    6 +-
 .../public/vis/editors/default/vis_options.js |    6 +-
 src/ui/public/vis/vis_types/react_vis_type.js |   18 +-
 x-pack/plugins/apm/public/index.js            |    6 +-
 .../plugins/beats_management/public/index.tsx |    6 +-
 .../public/app/index.js                       |    6 +-
 .../directives/grokdebugger/grokdebugger.js   |    4 +-
 .../public/register_routes.js                 |    6 +-
 .../public/register_routes.js                 |    6 +-
 .../plugins/infra/public/apps/start_app.tsx   |    6 +-
 .../public/register_route.js                  |    6 +-
 .../components/pipeline_edit/pipeline_edit.js |    6 +-
 .../upgrade_failure/upgrade_failure.js        |    6 +-
 .../components/pipeline_list/pipeline_list.js |    6 +-
 .../maps/public/angular/map_controller.js     |    6 +-
 .../annotations_table_directive.js            |    6 +-
 .../anomalies_table_directive.js              |    4 +-
 .../select_severity_directive.js              |    4 +-
 .../field_title_bar_directive.js              |    6 +-
 .../field_type_icon_directive.js              |    6 +-
 .../validate_job/validate_job_directive.js    |    4 +-
 .../datavisualizer/selector/directive.js      |    5 +-
 .../explorer_react_wrapper_directive.js       |    4 +-
 .../file_datavisualizer_directive.js          |    4 +-
 .../ml/public/jobs/jobs_list/directive.js     |    6 +-
 .../enable_model_plot_callout_directive.js    |    4 +-
 .../bucket_span_estimator_directive.js        |    6 +-
 .../enable_model_plot_checkbox_directive.js   |    6 +-
 .../settings/calendars/edit/directive.js      |    6 +-
 .../settings/calendars/list/directive.js      |    6 +-
 .../settings/filter_lists/edit/directive.js   |    6 +-
 .../settings/filter_lists/list/directive.js   |    6 +-
 .../ml/public/settings/settings.test.js       |    8 +-
 .../ml/public/settings/settings_directive.js  |    6 +-
 .../forecasting_modal_directive.js            |    5 +-
 .../timeseries_chart_directive.js             |    6 +-
 .../components/cluster/listing/listing.js     |   78 +-
 .../public/directives/beats/beat/index.js     |    6 +-
 .../public/directives/beats/listing/index.js  |    6 +-
 .../public/directives/beats/overview/index.js |    6 +-
 .../public/directives/chart/index.js          |    6 +-
 .../elasticsearch/cluster_status/index.js     |    4 +-
 .../elasticsearch/index_summary/index.js      |    4 +-
 .../elasticsearch/ml_job_listing/index.js     |    7 +-
 .../elasticsearch/node_summary/index.js       |    4 +-
 .../directives/kibana/cluster_status/index.js |    4 +-
 .../public/directives/kibana/listing/index.js |    7 +-
 .../public/directives/kibana/summary/index.js |    4 +-
 .../monitoring/public/views/alerts/index.js   |    7 +-
 .../public/views/apm/instance/index.js        |    6 +-
 .../public/views/apm/instances/index.js       |    6 +-
 .../public/views/apm/overview/index.js        |    6 +-
 .../public/views/base_controller.js           |    4 +-
 .../public/views/cluster/listing/index.js     |    6 +-
 .../public/views/cluster/overview/index.js    |    6 +-
 .../public/views/elasticsearch/ccr/index.js   |    6 +-
 .../views/elasticsearch/ccr/shard/index.js    |    6 +-
 .../elasticsearch/index/advanced/index.js     |    6 +-
 .../public/views/elasticsearch/index/index.js |    6 +-
 .../views/elasticsearch/indices/index.js      |    6 +-
 .../elasticsearch/node/advanced/index.js      |    6 +-
 .../public/views/elasticsearch/node/index.js  |    6 +-
 .../public/views/elasticsearch/nodes/index.js |    6 +-
 .../elasticsearch/overview/controller.js      |    6 +-
 .../public/views/kibana/instance/index.js     |    6 +-
 .../public/views/kibana/instances/index.js    |    7 +-
 .../public/views/kibana/overview/index.js     |    6 +-
 .../public/views/license/controller.js        |    6 +-
 .../views/logstash/node/advanced/index.js     |    6 +-
 .../public/views/logstash/node/index.js       |    6 +-
 .../views/logstash/node/pipelines/index.js    |    6 +-
 .../public/views/logstash/nodes/index.js      |    6 +-
 .../public/views/logstash/overview/index.js   |    6 +-
 .../public/views/logstash/pipeline/index.js   |    6 +-
 .../public/views/logstash/pipelines/index.js  |    6 +-
 .../public/views/no_data/controller.js        |    6 +-
 .../plugins/remote_clusters/public/index.js   |    6 +-
 .../reporting/public/views/management/jobs.js |    6 +-
 .../plugins/rollup/public/crud_app/index.js   |    6 +-
 .../logged_out/components/logged_out_page.tsx |   46 +-
 .../public/views/logged_out/logged_out.tsx    |    8 +-
 .../__snapshots__/login_page.test.tsx.snap    |  824 +++--
 .../components/login_page/login_page.tsx      |   65 +-
 .../security/public/views/login/login.tsx     |   21 +-
 .../elasticsearch_privileges.test.tsx.snap    |  384 +-
 .../es/elasticsearch_privileges.test.tsx      |   12 +-
 .../es/elasticsearch_privileges.tsx           |   26 +-
 .../es/index_privilege_form.test.tsx          |   22 +-
 .../privileges/es/index_privilege_form.tsx    |   18 +-
 .../views/management/edit_role/index.js       |    6 +-
 .../public/views/management/edit_user.js      |    6 +-
 .../security/public/views/management/users.js |    4 +-
 .../public/views/nav_control/nav_control.js   |    6 +-
 .../public/views/management/page_routes.tsx   |   14 +-
 .../public/views/nav_control/nav_control.tsx  |   10 +-
 .../public/views/space_selector/index.tsx     |    6 +-
 .../plugins/upgrade_assistant/public/app.tsx  |    6 +-
 .../upgrade_assistant/public/index.tsx        |    3 +-
 x-pack/plugins/uptime/public/uptime_app.tsx   |    7 +-
 167 files changed, 3807 insertions(+), 3894 deletions(-)
 delete mode 100644 packages/kbn-i18n/src/react/__snapshots__/inject_i18n_provider.test.tsx.snap
 delete mode 100644 packages/kbn-i18n/src/react/inject_i18n_provider.test.tsx
 create mode 100644 src/core/public/i18n/__snapshots__/i18n_service.test.tsx.snap
 rename packages/kbn-i18n/src/react/inject_i18n_provider.tsx => src/core/public/i18n/i18n_service.test.tsx (56%)
 create mode 100644 src/core/public/i18n/i18n_service.tsx
 rename src/{ui/public/i18n/index.js => core/public/i18n/index.ts} (76%)
 create mode 100644 src/ui/public/i18n/__snapshots__/index.test.tsx.snap
 create mode 100644 src/ui/public/i18n/index.test.tsx
 create mode 100644 src/ui/public/i18n/index.tsx

diff --git a/packages/kbn-i18n/README.md b/packages/kbn-i18n/README.md
index 5ddd1266d9ee..a78e2ef39012 100644
--- a/packages/kbn-i18n/README.md
+++ b/packages/kbn-i18n/README.md
@@ -163,7 +163,7 @@ import { i18n } from '@kbn/i18n';
 
 export const HELLO_WORLD = i18n.translate('hello.wonderful.world', {
   defaultMessage: 'Greetings, planet Earth!',
-}),
+});
 ```
 
 One more example with a parameter:
@@ -254,18 +254,7 @@ Optionally we can pass `description` prop into `FormattedMessage` component.
 This prop is optional context comment that will be extracted by i18n tools
 and added as a comment next to translation message at `defaultMessages.json`
 
-In case when ReactJS component is rendered with the help of `reactDirective` AngularJS service, it's necessary to use React HOC `injectI18nProvider` to pass `intl` object to `FormattedMessage` component via context.
-
-```js
-import { injectI18nProvider } from '@kbn/i18n/react';
-import { Header } from './components/header';
-
-module.directive('headerGlobalNav', (reactDirective) => {
-  return reactDirective(injectI18nProvider(Header));
-});
-```
-
-**NOTE:** To minimize the chance of having multiple `I18nProvider` components in the React tree, try to use `injectI18nProvider` or `I18nProvider` only to wrap the topmost component that you render, e.g. the one that's passed to `reactDirective` or `ReactDOM.render`.
+**NOTE:** To minimize the chance of having multiple `I18nProvider` components in the React tree, try to use `I18nProvider` only to wrap the topmost component that you render, e.g. the one that's passed to `reactDirective` or `ReactDOM.render`.
 
 ### FormattedRelative
 
diff --git a/packages/kbn-i18n/src/react/__snapshots__/inject_i18n_provider.test.tsx.snap b/packages/kbn-i18n/src/react/__snapshots__/inject_i18n_provider.test.tsx.snap
deleted file mode 100644
index ea77c1bfe597..000000000000
--- a/packages/kbn-i18n/src/react/__snapshots__/inject_i18n_provider.test.tsx.snap
+++ /dev/null
@@ -1,110 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`injectI18nProvider provides with context 1`] = `
-Object {
-  "defaultFormats": Object {},
-  "defaultLocale": "en",
-  "formatDate": [Function],
-  "formatHTMLMessage": [Function],
-  "formatMessage": [Function],
-  "formatNumber": [Function],
-  "formatPlural": [Function],
-  "formatRelative": [Function],
-  "formatTime": [Function],
-  "formats": Object {
-    "date": Object {
-      "full": Object {
-        "day": "numeric",
-        "month": "long",
-        "weekday": "long",
-        "year": "numeric",
-      },
-      "long": Object {
-        "day": "numeric",
-        "month": "long",
-        "year": "numeric",
-      },
-      "medium": Object {
-        "day": "numeric",
-        "month": "short",
-        "year": "numeric",
-      },
-      "short": Object {
-        "day": "numeric",
-        "month": "numeric",
-        "year": "2-digit",
-      },
-    },
-    "number": Object {
-      "currency": Object {
-        "style": "currency",
-      },
-      "percent": Object {
-        "style": "percent",
-      },
-    },
-    "relative": Object {
-      "days": Object {
-        "units": "day",
-      },
-      "hours": Object {
-        "units": "hour",
-      },
-      "minutes": Object {
-        "units": "minute",
-      },
-      "months": Object {
-        "units": "month",
-      },
-      "seconds": Object {
-        "units": "second",
-      },
-      "years": Object {
-        "units": "year",
-      },
-    },
-    "time": Object {
-      "full": Object {
-        "hour": "numeric",
-        "minute": "numeric",
-        "second": "numeric",
-        "timeZoneName": "short",
-      },
-      "long": Object {
-        "hour": "numeric",
-        "minute": "numeric",
-        "second": "numeric",
-        "timeZoneName": "short",
-      },
-      "medium": Object {
-        "hour": "numeric",
-        "minute": "numeric",
-        "second": "numeric",
-      },
-      "short": Object {
-        "hour": "numeric",
-        "minute": "numeric",
-      },
-    },
-  },
-  "formatters": Object {
-    "getDateTimeFormat": [Function],
-    "getMessageFormat": [Function],
-    "getNumberFormat": [Function],
-    "getPluralFormat": [Function],
-    "getRelativeFormat": [Function],
-  },
-  "locale": "en",
-  "messages": Object {},
-  "now": [Function],
-  "onError": [Function],
-  "textComponent": Symbol(react.fragment),
-  "timeZone": null,
-}
-`;
-
-exports[`injectI18nProvider renders children 1`] = `
-<I18nProvider>
-  <ChildrenMock />
-</I18nProvider>
-`;
diff --git a/packages/kbn-i18n/src/react/index.tsx b/packages/kbn-i18n/src/react/index.tsx
index 646c3608a7cd..b3c6bbe7befb 100644
--- a/packages/kbn-i18n/src/react/index.tsx
+++ b/packages/kbn-i18n/src/react/index.tsx
@@ -30,5 +30,4 @@ export {
 } from 'react-intl';
 
 export { I18nProvider } from './provider';
-export { injectI18nProvider } from './inject_i18n_provider';
 export { injectI18n } from './inject';
diff --git a/packages/kbn-i18n/src/react/inject_i18n_provider.test.tsx b/packages/kbn-i18n/src/react/inject_i18n_provider.test.tsx
deleted file mode 100644
index 13080510f0b5..000000000000
--- a/packages/kbn-i18n/src/react/inject_i18n_provider.test.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { mount, shallow } from 'enzyme';
-import * as React from 'react';
-import { intlShape } from 'react-intl';
-
-import { injectI18n } from './inject';
-import { injectI18nProvider } from './inject_i18n_provider';
-
-describe('injectI18nProvider', () => {
-  test('renders children', () => {
-    const ChildrenMock = () => null;
-    const Injected = injectI18nProvider(ChildrenMock);
-
-    expect(shallow(<Injected />)).toMatchSnapshot();
-  });
-
-  test('provides with context', () => {
-    const ChildrenMock = () => <div />;
-    const WithIntl = injectI18n(ChildrenMock);
-    const Injected = injectI18nProvider(WithIntl);
-
-    const wrapper = mount(<Injected />, {
-      childContextTypes: {
-        intl: intlShape,
-      },
-    });
-
-    expect(wrapper.find(ChildrenMock).prop('intl')).toMatchSnapshot();
-  });
-});
diff --git a/src/core/public/core_system.test.ts b/src/core/public/core_system.test.ts
index 72f0408daf1f..b4182a28365e 100644
--- a/src/core/public/core_system.test.ts
+++ b/src/core/public/core_system.test.ts
@@ -20,6 +20,7 @@
 import { BasePathService } from './base_path';
 import { ChromeService } from './chrome';
 import { FatalErrorsService } from './fatal_errors';
+import { I18nService } from './i18n';
 import { InjectedMetadataService } from './injected_metadata';
 import { LegacyPlatformService } from './legacy_platform';
 import { LoadingCountService } from './loading_count';
@@ -57,6 +58,15 @@ jest.mock('./fatal_errors', () => ({
   FatalErrorsService: MockFatalErrorsService,
 }));
 
+const mockI18nStartContract = {};
+const MockI18nService = jest.fn<I18nService>(function _MockI18nService(this: any) {
+  this.start = jest.fn().mockReturnValue(mockI18nStartContract);
+  this.stop = jest.fn();
+});
+jest.mock('./i18n', () => ({
+  I18nService: MockI18nService,
+}));
+
 const mockNotificationStartContract = {};
 const MockNotificationsService = jest.fn<NotificationsService>(function _MockNotificationsService(
   this: any
@@ -130,6 +140,7 @@ describe('constructor', () => {
 
     expect(MockInjectedMetadataService).toHaveBeenCalledTimes(1);
     expect(MockLegacyPlatformService).toHaveBeenCalledTimes(1);
+    expect(MockI18nService).toHaveBeenCalledTimes(1);
     expect(MockFatalErrorsService).toHaveBeenCalledTimes(1);
     expect(MockNotificationsService).toHaveBeenCalledTimes(1);
     expect(MockLoadingCountService).toHaveBeenCalledTimes(1);
@@ -265,6 +276,17 @@ describe('#stop', () => {
     expect(uiSettings.stop).toHaveBeenCalled();
   });
 
+  it('calls i18n.stop()', () => {
+    const coreSystem = new CoreSystem({
+      ...defaultCoreSystemParams,
+    });
+
+    const [i18n] = MockI18nService.mock.instances;
+    expect(i18n.stop).not.toHaveBeenCalled();
+    coreSystem.stop();
+    expect(i18n.stop).toHaveBeenCalled();
+  });
+
   it('clears the rootDomElement', () => {
     const rootDomElement = document.createElement('div');
     const coreSystem = new CoreSystem({
@@ -333,18 +355,25 @@ describe('#start()', () => {
     });
   });
 
+  it('calls i18n#start()', () => {
+    startCore();
+    const [mockInstance] = MockI18nService.mock.instances;
+    expect(mockInstance.start).toHaveBeenCalledTimes(1);
+    expect(mockInstance.start).toHaveBeenCalledWith();
+  });
+
   it('calls fatalErrors#start()', () => {
     startCore();
     const [mockInstance] = MockFatalErrorsService.mock.instances;
     expect(mockInstance.start).toHaveBeenCalledTimes(1);
-    expect(mockInstance.start).toHaveBeenCalledWith();
+    expect(mockInstance.start).toHaveBeenCalledWith({ i18n: mockI18nStartContract });
   });
 
   it('calls notifications#start()', () => {
     startCore();
     const [mockInstance] = MockNotificationsService.mock.instances;
     expect(mockInstance.start).toHaveBeenCalledTimes(1);
-    expect(mockInstance.start).toHaveBeenCalledWith();
+    expect(mockInstance.start).toHaveBeenCalledWith({ i18n: mockI18nStartContract });
   });
 
   it('calls chrome#start()', () => {
diff --git a/src/core/public/core_system.ts b/src/core/public/core_system.ts
index a5239ed9b548..5a71815c91c3 100644
--- a/src/core/public/core_system.ts
+++ b/src/core/public/core_system.ts
@@ -22,6 +22,7 @@ import './core.css';
 import { BasePathService } from './base_path';
 import { ChromeService } from './chrome';
 import { FatalErrorsService } from './fatal_errors';
+import { I18nService } from './i18n';
 import { InjectedMetadataParams, InjectedMetadataService } from './injected_metadata';
 import { LegacyPlatformParams, LegacyPlatformService } from './legacy_platform';
 import { LoadingCountService } from './loading_count';
@@ -50,6 +51,7 @@ export class CoreSystem {
   private readonly uiSettings: UiSettingsService;
   private readonly basePath: BasePathService;
   private readonly chrome: ChromeService;
+  private readonly i18n: I18nService;
 
   private readonly rootDomElement: HTMLElement;
   private readonly notificationsTargetDomElement: HTMLDivElement;
@@ -60,6 +62,8 @@ export class CoreSystem {
 
     this.rootDomElement = rootDomElement;
 
+    this.i18n = new I18nService();
+
     this.injectedMetadata = new InjectedMetadataService({
       injectedMetadata,
     });
@@ -98,9 +102,10 @@ export class CoreSystem {
       this.rootDomElement.appendChild(this.notificationsTargetDomElement);
       this.rootDomElement.appendChild(this.legacyPlatformTargetDomElement);
 
-      const notifications = this.notifications.start();
+      const i18n = this.i18n.start();
+      const notifications = this.notifications.start({ i18n });
       const injectedMetadata = this.injectedMetadata.start();
-      const fatalErrors = this.fatalErrors.start();
+      const fatalErrors = this.fatalErrors.start({ i18n });
       const loadingCount = this.loadingCount.start({ fatalErrors });
       const basePath = this.basePath.start({ injectedMetadata });
       const uiSettings = this.uiSettings.start({
@@ -112,6 +117,7 @@ export class CoreSystem {
       const chrome = this.chrome.start();
 
       this.legacyPlatform.start({
+        i18n,
         injectedMetadata,
         fatalErrors,
         notifications,
@@ -133,6 +139,7 @@ export class CoreSystem {
     this.loadingCount.stop();
     this.uiSettings.stop();
     this.chrome.stop();
+    this.i18n.stop();
     this.rootDomElement.textContent = '';
   }
 }
diff --git a/src/core/public/fatal_errors/__snapshots__/fatal_errors_service.test.ts.snap b/src/core/public/fatal_errors/__snapshots__/fatal_errors_service.test.ts.snap
index 9210ca50fbe8..be0da79c5539 100644
--- a/src/core/public/fatal_errors/__snapshots__/fatal_errors_service.test.ts.snap
+++ b/src/core/public/fatal_errors/__snapshots__/fatal_errors_service.test.ts.snap
@@ -3,13 +3,13 @@
 exports[`#add() deletes all children of rootDomElement and renders <FatalErrorScreen /> into it: fatal error screen component 1`] = `
 Array [
   Array [
-    <I18nProvider>
+    <React.Fragment>
       <FatalErrorsScreen
         buildNumber="kibanaBuildNumber"
         errorInfo$={Rx.Observable}
         kibanaVersion="kibanaVersion"
       />
-    </I18nProvider>,
+    </React.Fragment>,
     <div />,
   ],
 ]
@@ -20,3 +20,24 @@ exports[`#add() deletes all children of rootDomElement and renders <FatalErrorSc
   <div />
 </div>
 `;
+
+exports[`start.add() deletes all children of rootDomElement and renders <FatalErrorScreen /> into it: fatal error screen component 1`] = `
+Array [
+  Array [
+    <I18nContext>
+      <FatalErrorsScreen
+        buildNumber="kibanaBuildNumber"
+        errorInfo$={Rx.Observable}
+        kibanaVersion="kibanaVersion"
+      />
+    </I18nContext>,
+    <div />,
+  ],
+]
+`;
+
+exports[`start.add() deletes all children of rootDomElement and renders <FatalErrorScreen /> into it: fatal error screen container 1`] = `
+<div>
+  <div />
+</div>
+`;
diff --git a/src/core/public/fatal_errors/fatal_errors_service.test.ts b/src/core/public/fatal_errors/fatal_errors_service.test.ts
index 15859bc9cbc2..9edf5a449115 100644
--- a/src/core/public/fatal_errors/fatal_errors_service.test.ts
+++ b/src/core/public/fatal_errors/fatal_errors_service.test.ts
@@ -43,9 +43,16 @@ function setup() {
 
   const stopCoreSystem = jest.fn();
 
+  const i18n: any = {
+    Context: function I18nContext() {
+      return '';
+    },
+  };
+
   return {
     rootDomElement,
     injectedMetadata,
+    i18n,
     stopCoreSystem,
     fatalErrors: new FatalErrorsService({
       injectedMetadata: injectedMetadata as any,
@@ -91,25 +98,43 @@ describe('#add()', () => {
 
 describe('start.add()', () => {
   it('exposes a function that passes its two arguments to fatalErrors.add()', () => {
-    const { fatalErrors } = setup();
+    const { fatalErrors, i18n } = setup();
 
     jest.spyOn(fatalErrors, 'add').mockImplementation(() => {
       /* noop */
     });
 
     expect(fatalErrors.add).not.toHaveBeenCalled();
-    const { add } = fatalErrors.start();
+    const { add } = fatalErrors.start({ i18n });
     add('foo', 'bar');
     expect(fatalErrors.add).toHaveBeenCalledTimes(1);
     expect(fatalErrors.add).toHaveBeenCalledWith('foo', 'bar');
   });
+
+  it('deletes all children of rootDomElement and renders <FatalErrorScreen /> into it', () => {
+    const { fatalErrors, i18n, rootDomElement } = setup();
+
+    rootDomElement.innerHTML = `
+      <h1>Loading...</h1>
+      <div class="someSpinner"></div>
+    `;
+
+    expect(mockRender).not.toHaveBeenCalled();
+    expect(rootDomElement.children).toHaveLength(2);
+
+    const { add } = fatalErrors.start({ i18n });
+
+    expect(() => add(new Error('foo'))).toThrowError();
+    expect(rootDomElement).toMatchSnapshot('fatal error screen container');
+    expect(mockRender.mock.calls).toMatchSnapshot('fatal error screen component');
+  });
 });
 
 describe('start.get$()', () => {
   it('provides info about the errors passed to fatalErrors.add()', () => {
-    const { fatalErrors } = setup();
+    const { fatalErrors, i18n } = setup();
 
-    const startContract = fatalErrors.start();
+    const startContract = fatalErrors.start({ i18n });
 
     const onError = jest.fn();
     startContract.get$().subscribe(onError);
diff --git a/src/core/public/fatal_errors/fatal_errors_service.tsx b/src/core/public/fatal_errors/fatal_errors_service.tsx
index c4a5478d42a3..b48b48f04d85 100644
--- a/src/core/public/fatal_errors/fatal_errors_service.tsx
+++ b/src/core/public/fatal_errors/fatal_errors_service.tsx
@@ -22,20 +22,24 @@ import { render } from 'react-dom';
 import * as Rx from 'rxjs';
 import { first, tap } from 'rxjs/operators';
 
+import { I18nStartContract } from '../i18n';
 import { InjectedMetadataService } from '../injected_metadata';
 import { FatalErrorsScreen } from './fatal_errors_screen';
 import { ErrorInfo, getErrorInfo } from './get_error_info';
 
-import { I18nProvider } from '@kbn/i18n/react';
-
 export interface FatalErrorsParams {
   rootDomElement: HTMLElement;
   injectedMetadata: InjectedMetadataService;
   stopCoreSystem: () => void;
 }
 
+interface Deps {
+  i18n: I18nStartContract;
+}
+
 export class FatalErrorsService {
   private readonly errorInfo$ = new Rx.ReplaySubject<ErrorInfo>();
+  private i18n?: I18nStartContract;
 
   constructor(private params: FatalErrorsParams) {
     this.errorInfo$
@@ -65,7 +69,9 @@ export class FatalErrorsService {
     throw error;
   };
 
-  public start() {
+  public start({ i18n }: Deps) {
+    this.i18n = i18n;
+
     return {
       add: this.add,
       get$: () => {
@@ -86,14 +92,18 @@ export class FatalErrorsService {
     const container = document.createElement('div');
     this.params.rootDomElement.appendChild(container);
 
+    // If error occurred before I18nService has been started we don't have any
+    // i18n context to provide.
+    const I18nContext = this.i18n ? this.i18n.Context : React.Fragment;
+
     render(
-      <I18nProvider>
+      <I18nContext>
         <FatalErrorsScreen
           buildNumber={this.params.injectedMetadata.getKibanaBuildNumber()}
           kibanaVersion={this.params.injectedMetadata.getKibanaVersion()}
           errorInfo$={this.errorInfo$}
         />
-      </I18nProvider>,
+      </I18nContext>,
       container
     );
   }
diff --git a/src/core/public/i18n/__snapshots__/i18n_service.test.tsx.snap b/src/core/public/i18n/__snapshots__/i18n_service.test.tsx.snap
new file mode 100644
index 000000000000..2ce4fde0ae16
--- /dev/null
+++ b/src/core/public/i18n/__snapshots__/i18n_service.test.tsx.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#start() returns \`Context\` component 1`] = `
+<MockI18nProvider>
+  <MockEuiContext
+    i18n={
+      Object {
+        "mapping": Object {
+          "euiTablePagination.rowsPerPage": "Rows per page",
+        },
+      }
+    }
+  >
+    content
+  </MockEuiContext>
+</MockI18nProvider>
+`;
diff --git a/packages/kbn-i18n/src/react/inject_i18n_provider.tsx b/src/core/public/i18n/i18n_service.test.tsx
similarity index 56%
rename from packages/kbn-i18n/src/react/inject_i18n_provider.tsx
rename to src/core/public/i18n/i18n_service.test.tsx
index e6301c5916a7..38d1201f6362 100644
--- a/packages/kbn-i18n/src/react/inject_i18n_provider.tsx
+++ b/src/core/public/i18n/i18n_service.test.tsx
@@ -16,23 +16,40 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
+import { shallow } from 'enzyme';
+
+jest.mock('@elastic/eui', () => {
+  return {
+    EuiContext: function MockEuiContext() {
+      // no-op
+    },
+  };
+});
+
+jest.mock('@kbn/i18n/react', () => {
+  return {
+    I18nProvider: function MockI18nProvider() {
+      // no-op
+    },
+  };
+});
+
 import React from 'react';
 
-import { I18nProvider } from './provider';
+import { I18nService } from './i18n_service';
 
-export function injectI18nProvider<P>(WrappedComponent: React.ComponentType<P>) {
-  const I18nProviderWrapper: React.SFC<P> = props => {
-    return (
-      <I18nProvider>
-        <WrappedComponent {...props} />
-      </I18nProvider>
-    );
-  };
+afterEach(() => {
+  jest.clearAllMocks();
+  jest.resetModules();
+});
 
-  // Original propTypes from the wrapped component should be re-exposed
-  // since it will be used by reactDirective Angular service
-  // that will rely on propTypes to watch attributes with these names
-  I18nProviderWrapper.propTypes = WrappedComponent.propTypes;
+describe('#start()', () => {
+  it('returns `Context` component', () => {
+    const i18nService = new I18nService();
 
-  return I18nProviderWrapper;
-}
+    const i18n = i18nService.start();
+
+    expect(shallow(<i18n.Context>content</i18n.Context>)).toMatchSnapshot();
+  });
+});
diff --git a/src/core/public/i18n/i18n_service.tsx b/src/core/public/i18n/i18n_service.tsx
new file mode 100644
index 000000000000..4044248f0ff9
--- /dev/null
+++ b/src/core/public/i18n/i18n_service.tsx
@@ -0,0 +1,57 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+
+import { EuiContext } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { I18nProvider } from '@kbn/i18n/react';
+
+/**
+ * Service that is responsible for i18n capabilities.
+ */
+export class I18nService {
+  public start() {
+    const mapping = {
+      'euiTablePagination.rowsPerPage': i18n.translate('core.euiTablePagination.rowsPerPage', {
+        defaultMessage: 'Rows per page',
+      }),
+    };
+
+    return {
+      /**
+       * I18n context is required by any localizable React component from @kbn/i18n and @elastic/eui packages
+       * and is supposed to be used as the topmost component for any i18n-compatible React tree.
+       */
+      Context: function I18nContext({ children }: { children: React.ReactNode }) {
+        return (
+          <I18nProvider>
+            <EuiContext i18n={{ mapping }}>{children}</EuiContext>
+          </I18nProvider>
+        );
+      },
+    };
+  }
+
+  public stop() {
+    // nothing to do here currently
+  }
+}
+
+export type I18nStartContract = ReturnType<I18nService['start']>;
diff --git a/src/ui/public/i18n/index.js b/src/core/public/i18n/index.ts
similarity index 76%
rename from src/ui/public/i18n/index.js
rename to src/core/public/i18n/index.ts
index 5def86410e34..8824cc37ba56 100644
--- a/src/ui/public/i18n/index.js
+++ b/src/core/public/i18n/index.ts
@@ -17,14 +17,4 @@
  * under the License.
  */
 
-import { uiModules } from 'ui/modules';
-import {
-  I18nProvider,
-  i18nFilter,
-  i18nDirective,
-} from '@kbn/i18n/angular';
-
-uiModules.get('i18n')
-  .provider('i18n', I18nProvider)
-  .filter('i18n', i18nFilter)
-  .directive('i18nId', i18nDirective);
+export { I18nService, I18nStartContract } from './i18n_service';
diff --git a/src/core/public/legacy_platform/__snapshots__/legacy_platform_service.test.ts.snap b/src/core/public/legacy_platform/__snapshots__/legacy_platform_service.test.ts.snap
index 6ccc0ee1d2c2..84d2ba6c9fca 100644
--- a/src/core/public/legacy_platform/__snapshots__/legacy_platform_service.test.ts.snap
+++ b/src/core/public/legacy_platform/__snapshots__/legacy_platform_service.test.ts.snap
@@ -3,6 +3,7 @@
 exports[`#start() load order useLegacyTestHarness = false loads ui/modules before ui/chrome, and both before legacy files 1`] = `
 Array [
   "ui/metadata",
+  "ui/i18n",
   "ui/notify/fatal_error",
   "ui/notify/toasts",
   "ui/chrome/api/loading_count",
@@ -22,6 +23,7 @@ Array [
 exports[`#start() load order useLegacyTestHarness = true loads ui/modules before ui/test_harness, and both before legacy files 1`] = `
 Array [
   "ui/metadata",
+  "ui/i18n",
   "ui/notify/fatal_error",
   "ui/notify/toasts",
   "ui/chrome/api/loading_count",
diff --git a/src/core/public/legacy_platform/legacy_platform_service.test.ts b/src/core/public/legacy_platform/legacy_platform_service.test.ts
index 1c559169ea3e..aa9900d4a621 100644
--- a/src/core/public/legacy_platform/legacy_platform_service.test.ts
+++ b/src/core/public/legacy_platform/legacy_platform_service.test.ts
@@ -46,6 +46,14 @@ jest.mock('ui/test_harness', () => {
   };
 });
 
+const mockI18nContextInit = jest.fn();
+jest.mock('ui/i18n', () => {
+  mockLoadOrder.push('ui/i18n');
+  return {
+    __newPlatformInit__: mockI18nContextInit,
+  };
+});
+
 const mockFatalErrorInit = jest.fn();
 jest.mock('ui/notify/fatal_error', () => {
   mockLoadOrder.push('ui/notify/fatal_error');
@@ -159,6 +167,7 @@ const basePathStartContract = {
 
 const uiSettingsStartContract: any = {};
 const chromeStartContract: any = {};
+const i18nStartContract: any = { Context: () => '' };
 
 const defaultParams = {
   targetDomElement: document.createElement('div'),
@@ -168,6 +177,7 @@ const defaultParams = {
 };
 
 const defaultStartDeps = {
+  i18n: i18nStartContract,
   fatalErrors: fatalErrorsStartContract,
   injectedMetadata: injectedMetadataStartContract,
   notifications: notificationsStartContract,
@@ -200,6 +210,17 @@ describe('#start()', () => {
       expect(mockUiMetadataInit).toHaveBeenCalledWith(legacyMetadata);
     });
 
+    it('passes i18n.Context to ui/i18n', () => {
+      const legacyPlatform = new LegacyPlatformService({
+        ...defaultParams,
+      });
+
+      legacyPlatform.start(defaultStartDeps);
+
+      expect(mockI18nContextInit).toHaveBeenCalledTimes(1);
+      expect(mockI18nContextInit).toHaveBeenCalledWith(i18nStartContract.Context);
+    });
+
     it('passes fatalErrors service to ui/notify/fatal_errors', () => {
       const legacyPlatform = new LegacyPlatformService({
         ...defaultParams,
diff --git a/src/core/public/legacy_platform/legacy_platform_service.ts b/src/core/public/legacy_platform/legacy_platform_service.ts
index 8c2fb6cd21d4..296efec1e5e7 100644
--- a/src/core/public/legacy_platform/legacy_platform_service.ts
+++ b/src/core/public/legacy_platform/legacy_platform_service.ts
@@ -21,12 +21,14 @@ import angular from 'angular';
 import { BasePathStartContract } from '../base_path';
 import { ChromeStartContract } from '../chrome';
 import { FatalErrorsStartContract } from '../fatal_errors';
+import { I18nStartContract } from '../i18n';
 import { InjectedMetadataStartContract } from '../injected_metadata';
 import { LoadingCountStartContract } from '../loading_count';
 import { NotificationsStartContract } from '../notifications';
 import { UiSettingsClient } from '../ui_settings';
 
 interface Deps {
+  i18n: I18nStartContract;
   injectedMetadata: InjectedMetadataStartContract;
   fatalErrors: FatalErrorsStartContract;
   notifications: NotificationsStartContract;
@@ -46,13 +48,14 @@ export interface LegacyPlatformParams {
  * The LegacyPlatformService is responsible for initializing
  * the legacy platform by injecting parts of the new platform
  * services into the legacy platform modules, like ui/modules,
- * and then bootstraping the ui/chrome or ui/test_harness to
+ * and then bootstrapping the ui/chrome or ui/test_harness to
  * start either the app or browser tests.
  */
 export class LegacyPlatformService {
   constructor(private readonly params: LegacyPlatformParams) {}
 
   public start({
+    i18n,
     injectedMetadata,
     fatalErrors,
     notifications,
@@ -64,6 +67,7 @@ export class LegacyPlatformService {
     // Inject parts of the new platform into parts of the legacy platform
     // so that legacy APIs/modules can mimic their new platform counterparts
     require('ui/metadata').__newPlatformInit__(injectedMetadata.getLegacyMetadata());
+    require('ui/i18n').__newPlatformInit__(i18n.Context);
     require('ui/notify/fatal_error').__newPlatformInit__(fatalErrors);
     require('ui/notify/toasts').__newPlatformInit__(notifications.toasts);
     require('ui/chrome/api/loading_count').__newPlatformInit__(loadingCount);
diff --git a/src/core/public/notifications/notifications_service.ts b/src/core/public/notifications/notifications_service.ts
index b1f50497aec7..236372ca86e8 100644
--- a/src/core/public/notifications/notifications_service.ts
+++ b/src/core/public/notifications/notifications_service.ts
@@ -17,12 +17,17 @@
  * under the License.
  */
 
+import { I18nStartContract } from '../i18n';
 import { ToastsService } from './toasts';
 
 interface Params {
   targetDomElement: HTMLElement;
 }
 
+interface Deps {
+  i18n: I18nStartContract;
+}
+
 export class NotificationsService {
   private readonly toasts: ToastsService;
 
@@ -35,11 +40,11 @@ export class NotificationsService {
     });
   }
 
-  public start() {
+  public start({ i18n }: Deps) {
     this.params.targetDomElement.appendChild(this.toastsContainer);
 
     return {
-      toasts: this.toasts.start(),
+      toasts: this.toasts.start({ i18n }),
     };
   }
 
diff --git a/src/core/public/notifications/toasts/__snapshots__/toasts_service.test.tsx.snap b/src/core/public/notifications/toasts/__snapshots__/toasts_service.test.tsx.snap
index d30bdead88c3..75d456dd87f7 100644
--- a/src/core/public/notifications/toasts/__snapshots__/toasts_service.test.tsx.snap
+++ b/src/core/public/notifications/toasts/__snapshots__/toasts_service.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`#start() renders the GlobalToastList into the targetDomElement param 1`] = `
 Array [
   Array [
-    <I18nProvider>
+    <I18nContext>
       <GlobalToastList
         dismissToast={[Function]}
         toasts$={
@@ -21,7 +21,7 @@ Array [
           }
         }
       />
-    </I18nProvider>,
+    </I18nContext>,
     <div
       test="target-dom-element"
     />,
diff --git a/src/core/public/notifications/toasts/toasts_service.test.tsx b/src/core/public/notifications/toasts/toasts_service.test.tsx
index 68f2eae6093a..fd0c0e6d8a10 100644
--- a/src/core/public/notifications/toasts/toasts_service.test.tsx
+++ b/src/core/public/notifications/toasts/toasts_service.test.tsx
@@ -27,6 +27,12 @@ jest.mock('react-dom', () => ({
 import { ToastsService } from './toasts_service';
 import { ToastsStartContract } from './toasts_start_contract';
 
+const mockI18nContract: any = {
+  Context: function I18nContext() {
+    return '';
+  },
+};
+
 describe('#start()', () => {
   it('renders the GlobalToastList into the targetDomElement param', async () => {
     const targetDomElement = document.createElement('div');
@@ -34,7 +40,7 @@ describe('#start()', () => {
     const toasts = new ToastsService({ targetDomElement });
 
     expect(mockReactDomRender).not.toHaveBeenCalled();
-    toasts.start();
+    toasts.start({ i18n: mockI18nContract });
     expect(mockReactDomRender.mock.calls).toMatchSnapshot();
   });
 
@@ -43,7 +49,7 @@ describe('#start()', () => {
       targetDomElement: document.createElement('div'),
     });
 
-    expect(toasts.start()).toBeInstanceOf(ToastsStartContract);
+    expect(toasts.start({ i18n: mockI18nContract })).toBeInstanceOf(ToastsStartContract);
   });
 });
 
@@ -53,7 +59,7 @@ describe('#stop()', () => {
     targetDomElement.setAttribute('test', 'target-dom-element');
     const toasts = new ToastsService({ targetDomElement });
 
-    toasts.start();
+    toasts.start({ i18n: mockI18nContract });
 
     expect(mockReactDomUnmount).not.toHaveBeenCalled();
     toasts.stop();
diff --git a/src/core/public/notifications/toasts/toasts_service.tsx b/src/core/public/notifications/toasts/toasts_service.tsx
index fd2fd29ce978..575b63cf1f1a 100644
--- a/src/core/public/notifications/toasts/toasts_service.tsx
+++ b/src/core/public/notifications/toasts/toasts_service.tsx
@@ -21,7 +21,7 @@ import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 
 import { Toast } from '@elastic/eui';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nStartContract } from '../../i18n';
 import { GlobalToastList } from './global_toast_list';
 import { ToastsStartContract } from './toasts_start_contract';
 
@@ -29,19 +29,23 @@ interface Params {
   targetDomElement: HTMLElement;
 }
 
+interface Deps {
+  i18n: I18nStartContract;
+}
+
 export class ToastsService {
   constructor(private readonly params: Params) {}
 
-  public start() {
+  public start({ i18n }: Deps) {
     const toasts = new ToastsStartContract();
 
     render(
-      <I18nProvider>
+      <i18n.Context>
         <GlobalToastList
           dismissToast={(toast: Toast) => toasts.remove(toast)}
           toasts$={toasts.get$()}
         />
-      </I18nProvider>,
+      </i18n.Context>,
       this.params.targetDomElement
     );
 
diff --git a/src/dev/precommit_hook/casing_check_config.js b/src/dev/precommit_hook/casing_check_config.js
index cf6ae03d5033..37aaf662ac38 100644
--- a/src/dev/precommit_hook/casing_check_config.js
+++ b/src/dev/precommit_hook/casing_check_config.js
@@ -127,7 +127,6 @@ export const TEMPORARILY_IGNORED_PATHS = [
   'src/legacy/core_plugins/timelion/server/series_functions/__tests__/fixtures/tlConfig.js',
   'src/fixtures/config_upgrade_from_4.0.0_to_4.0.1-snapshot.json',
   'src/fixtures/vislib/mock_data/terms/_seriesMultiple.js',
-  'src/ui/i18n/__tests__/fixtures/translations/test_plugin_1/es-ES.json',
   'src/ui/public/angular-bootstrap/accordion/accordion-group.html',
   'src/ui/public/angular-bootstrap/bindHtml/bindHtml.js',
   'src/ui/public/angular-bootstrap/tooltip/tooltip-html-unsafe-popup.html',
diff --git a/src/legacy/core_plugins/input_control_vis/public/vis_controller.js b/src/legacy/core_plugins/input_control_vis/public/vis_controller.js
index 1327cd51a4ba..18e638862029 100644
--- a/src/legacy/core_plugins/input_control_vis/public/vis_controller.js
+++ b/src/legacy/core_plugins/input_control_vis/public/vis_controller.js
@@ -19,12 +19,11 @@
 
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
+import { I18nContext } from 'ui/i18n';
 import { InputControlVis } from './components/vis/input_control_vis';
 import { controlFactory } from './control/control_factory';
 import { getLineageMap } from './lineage';
 
-import { I18nProvider } from '@kbn/i18n/react';
-
 class VisController {
   constructor(el, vis) {
     this.el = el;
@@ -52,7 +51,7 @@ class VisController {
 
   drawVis = () => {
     render(
-      <I18nProvider>
+      <I18nContext>
         <InputControlVis
           updateFiltersOnChange={this.vis.params.updateFiltersOnChange}
           controls={this.controls}
@@ -64,7 +63,7 @@ class VisController {
           hasValues={this.hasValues}
           refreshControl={this.refreshControl}
         />
-      </I18nProvider>,
+      </I18nContext>,
       this.el);
   }
 
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.js b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.js
index f559e6718889..a1a405dc93ca 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.js
+++ b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.js
@@ -22,6 +22,7 @@ import React from 'react';
 import angular from 'angular';
 import { uiModules } from 'ui/modules';
 import chrome from 'ui/chrome';
+import { wrapInI18nContext } from 'ui/i18n';
 import { toastNotifications } from 'ui/notify';
 
 import 'ui/search_bar';
@@ -66,7 +67,7 @@ const app = uiModules.get('app/dashboard', [
 ]);
 
 app.directive('dashboardViewportProvider', function (reactDirective) {
-  return reactDirective(DashboardViewportProvider);
+  return reactDirective(wrapInI18nContext(DashboardViewportProvider));
 });
 
 app.directive('dashboardApp', function ($injector) {
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/index.js b/src/legacy/core_plugins/kibana/public/dashboard/index.js
index 72280b7bc9d7..b30ed38c0e09 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/index.js
+++ b/src/legacy/core_plugins/kibana/public/dashboard/index.js
@@ -17,12 +17,12 @@
  * under the License.
  */
 
-import { injectI18nProvider } from '@kbn/i18n/react';
 import './dashboard_app';
 import './saved_dashboard/saved_dashboards';
 import './dashboard_config';
 import uiRoutes from 'ui/routes';
 import chrome from 'ui/chrome';
+import { wrapInI18nContext } from 'ui/i18n';
 import { toastNotifications } from 'ui/notify';
 
 import dashboardTemplate from './dashboard_app.html';
@@ -43,7 +43,7 @@ const app = uiModules.get('app/dashboard', [
 ]);
 
 app.directive('dashboardListing', function (reactDirective) {
-  return reactDirective(injectI18nProvider(DashboardListing));
+  return reactDirective(wrapInI18nContext(DashboardListing));
 });
 
 function createNewDashboardCtrl($scope, i18n) {
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/show_add_panel.js b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/show_add_panel.js
index d4d8b1a0e404..adb0908a623e 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/show_add_panel.js
+++ b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/show_add_panel.js
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { DashboardAddPanel } from './add_panel';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -44,14 +44,14 @@ export function showAddPanel(addNewPanel, addNewVis, visTypes) {
 
   document.body.appendChild(container);
   const element = (
-    <I18nProvider>
+    <I18nContext>
       <DashboardAddPanel
         onClose={onClose}
         visTypes={visTypes}
         addNewPanel={addNewPanel}
         addNewVis={addNewVisWithCleanup}
       />
-    </I18nProvider>
+    </I18nContext>
   );
   ReactDOM.render(element, container);
 }
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/show_clone_modal.js b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/show_clone_modal.js
index 08163a9a3595..a3f55aceeac6 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/show_clone_modal.js
+++ b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/show_clone_modal.js
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { DashboardCloneModal } from './clone_modal';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -39,7 +39,7 @@ export function showCloneModal(onClone, title) {
   };
   document.body.appendChild(container);
   const element = (
-    <I18nProvider>
+    <I18nContext>
       <DashboardCloneModal
         onClone={onCloneConfirmed}
         onClose={closeModal}
@@ -48,7 +48,7 @@ export function showCloneModal(onClone, title) {
           values: { title },
         })}
       />
-    </I18nProvider>
+    </I18nContext>
   );
   ReactDOM.render(element, container);
 }
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/show_options_popover.js b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/show_options_popover.js
index d472413b0c1d..ea816e497d2b 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/show_options_popover.js
+++ b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/show_options_popover.js
@@ -19,7 +19,7 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 import { OptionsMenu } from './options';
 
@@ -52,7 +52,7 @@ export function showOptionsPopover({
 
   document.body.appendChild(container);
   const element = (
-    <I18nProvider>
+    <I18nContext>
       <EuiWrappingPopover
         id="popover"
         button={anchorElement}
@@ -66,7 +66,7 @@ export function showOptionsPopover({
           onHidePanelTitlesChange={onHidePanelTitlesChange}
         />
       </EuiWrappingPopover>
-    </I18nProvider>
+    </I18nContext>
   );
   ReactDOM.render(element, container);
 }
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/viewport/dashboard_viewport_provider.js b/src/legacy/core_plugins/kibana/public/dashboard/viewport/dashboard_viewport_provider.js
index 95b66cc1c4c5..a219f763dac2 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/viewport/dashboard_viewport_provider.js
+++ b/src/legacy/core_plugins/kibana/public/dashboard/viewport/dashboard_viewport_provider.js
@@ -19,7 +19,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { I18nProvider } from '@kbn/i18n/react';
 import { store } from '../../store';
 import { Provider } from 'react-redux';
 import { DashboardViewportContainer } from './dashboard_viewport_container';
@@ -27,9 +26,7 @@ import { DashboardViewportContainer } from './dashboard_viewport_container';
 export function DashboardViewportProvider(props) {
   return (
     <Provider store={store}>
-      <I18nProvider>
-        <DashboardViewportContainer {...props} />
-      </I18nProvider>
+      <DashboardViewportContainer {...props} />
     </Provider>
   );
 }
diff --git a/src/legacy/core_plugins/kibana/public/discover/components/fetch_error/fetch_error.js b/src/legacy/core_plugins/kibana/public/discover/components/fetch_error/fetch_error.js
index a0f297010389..80285d3d534a 100644
--- a/src/legacy/core_plugins/kibana/public/discover/components/fetch_error/fetch_error.js
+++ b/src/legacy/core_plugins/kibana/public/discover/components/fetch_error/fetch_error.js
@@ -21,7 +21,8 @@ import 'ngreact';
 import React, { Fragment } from 'react';
 import { uiModules } from 'ui/modules';
 import chrome from 'ui/chrome';
-import { FormattedMessage, injectI18nProvider } from '@kbn/i18n/react';
+import { wrapInI18nContext } from 'ui/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import {
   EuiFlexGroup,
@@ -95,4 +96,4 @@ const DiscoverFetchError = ({ fetchError }) => {
 
 const app = uiModules.get('apps/discover', ['react']);
 
-app.directive('discoverFetchError', reactDirective => reactDirective(injectI18nProvider(DiscoverFetchError)));
+app.directive('discoverFetchError', reactDirective => reactDirective(wrapInI18nContext(DiscoverFetchError)));
diff --git a/src/legacy/core_plugins/kibana/public/discover/directives/index.js b/src/legacy/core_plugins/kibana/public/discover/directives/index.js
index c92e2224a0f8..30e8bf5a07c2 100644
--- a/src/legacy/core_plugins/kibana/public/discover/directives/index.js
+++ b/src/legacy/core_plugins/kibana/public/discover/directives/index.js
@@ -18,8 +18,8 @@
  */
 
 import 'ngreact';
+import { wrapInI18nContext } from 'ui/i18n';
 import { uiModules } from 'ui/modules';
-import { injectI18nProvider } from '@kbn/i18n/react';
 
 import {
   DiscoverNoResults,
@@ -33,9 +33,9 @@ import './timechart';
 
 const app = uiModules.get('apps/discover', ['react']);
 
-app.directive('discoverNoResults', reactDirective => reactDirective(injectI18nProvider(DiscoverNoResults)));
+app.directive('discoverNoResults', reactDirective => reactDirective(wrapInI18nContext(DiscoverNoResults)));
 
 app.directive(
   'discoverUnsupportedIndexPattern',
-  reactDirective => reactDirective(injectI18nProvider(DiscoverUnsupportedIndexPattern), ['unsupportedType'])
+  reactDirective => reactDirective(wrapInI18nContext(DiscoverUnsupportedIndexPattern), ['unsupportedType'])
 );
diff --git a/src/legacy/core_plugins/kibana/public/discover/top_nav/show_open_search_panel.js b/src/legacy/core_plugins/kibana/public/discover/top_nav/show_open_search_panel.js
index febfd5551491..b38ce06b6305 100644
--- a/src/legacy/core_plugins/kibana/public/discover/top_nav/show_open_search_panel.js
+++ b/src/legacy/core_plugins/kibana/public/discover/top_nav/show_open_search_panel.js
@@ -20,7 +20,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { OpenSearchPanel } from './open_search_panel';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 let isOpen = false;
 
@@ -39,12 +39,12 @@ export function showOpenSearchPanel({ makeUrl }) {
 
   document.body.appendChild(container);
   const element = (
-    <I18nProvider>
+    <I18nContext>
       <OpenSearchPanel
         onClose={onClose}
         makeUrl={makeUrl}
       />
-    </I18nProvider>
+    </I18nContext>
   );
   ReactDOM.render(element, container);
 }
diff --git a/src/legacy/core_plugins/kibana/public/home/components/home_app.js b/src/legacy/core_plugins/kibana/public/home/components/home_app.js
index 798c543c59af..0a844e0ab1a9 100644
--- a/src/legacy/core_plugins/kibana/public/home/components/home_app.js
+++ b/src/legacy/core_plugins/kibana/public/home/components/home_app.js
@@ -31,7 +31,6 @@ import {
 import { getTutorial } from '../load_tutorials';
 import { replaceTemplateStrings } from './tutorial/replace_template_strings';
 import chrome from 'ui/chrome';
-import { I18nProvider } from '@kbn/i18n/react';
 
 export function HomeApp({
   directories,
@@ -69,41 +68,39 @@ export function HomeApp({
   };
 
   return (
-    <I18nProvider>
-      <Router>
-        <Switch>
-          <Route
-            path="/home/tutorial/:id"
-            render={renderTutorial}
+    <Router>
+      <Switch>
+        <Route
+          path="/home/tutorial/:id"
+          render={renderTutorial}
+        />
+        <Route
+          path="/home/tutorial_directory/:tab?"
+          render={renderTutorialDirectory}
+        />
+        <Route
+          path="/home/feature_directory"
+        >
+          <FeatureDirectory
+            addBasePath={chrome.addBasePath}
+            directories={directories}
           />
-          <Route
-            path="/home/tutorial_directory/:tab?"
-            render={renderTutorialDirectory}
+        </Route>
+        <Route
+          path="/home"
+        >
+          <Home
+            addBasePath={chrome.addBasePath}
+            directories={directories}
+            apmUiEnabled={apmUiEnabled}
+            mlEnabled={mlEnabled}
+            find={savedObjectsClient.find}
+            localStorage={localStorage}
+            urlBasePath={chrome.getBasePath()}
           />
-          <Route
-            path="/home/feature_directory"
-          >
-            <FeatureDirectory
-              addBasePath={chrome.addBasePath}
-              directories={directories}
-            />
-          </Route>
-          <Route
-            path="/home"
-          >
-            <Home
-              addBasePath={chrome.addBasePath}
-              directories={directories}
-              apmUiEnabled={apmUiEnabled}
-              mlEnabled={mlEnabled}
-              find={savedObjectsClient.find}
-              localStorage={localStorage}
-              urlBasePath={chrome.getBasePath()}
-            />
-          </Route>
-        </Switch>
-      </Router>
-    </I18nProvider>
+        </Route>
+      </Switch>
+    </Router>
   );
 }
 
diff --git a/src/legacy/core_plugins/kibana/public/home/index.js b/src/legacy/core_plugins/kibana/public/home/index.js
index 30822c1a3bec..0b886f7c6785 100644
--- a/src/legacy/core_plugins/kibana/public/home/index.js
+++ b/src/legacy/core_plugins/kibana/public/home/index.js
@@ -21,6 +21,7 @@ import chrome from 'ui/chrome';
 import routes from 'ui/routes';
 import template from './home_ng_wrapper.html';
 import { FeatureCatalogueRegistryProvider } from 'ui/registry/feature_catalogue';
+import { wrapInI18nContext } from 'ui/i18n';
 import { uiModules } from 'ui/modules';
 import {
   HomeApp
@@ -30,7 +31,7 @@ import { i18n } from '@kbn/i18n';
 
 const app = uiModules.get('apps/home', []);
 app.directive('homeApp', function (reactDirective) {
-  return reactDirective(HomeApp);
+  return reactDirective(wrapInI18nContext(HomeApp));
 });
 
 const homeTitle = i18n.translate('kbn.home.breadcrumbs.homeTitle', { defaultMessage: 'Home' });
diff --git a/src/legacy/core_plugins/kibana/public/management/index.js b/src/legacy/core_plugins/kibana/public/management/index.js
index 66d9fadcd61d..0045eaa4aca3 100644
--- a/src/legacy/core_plugins/kibana/public/management/index.js
+++ b/src/legacy/core_plugins/kibana/public/management/index.js
@@ -19,12 +19,13 @@
 
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
-import { I18nProvider, FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import './sections';
 import 'ui/filters/start_from';
 import 'ui/field_editor';
 import uiRoutes from 'ui/routes';
+import { I18nContext } from 'ui/i18n';
 import { uiModules } from 'ui/modules';
 import appTemplate from './app.html';
 import landingTemplate from './landing.html';
@@ -62,7 +63,7 @@ export function updateLandingPage(version) {
 
   render(
     <EuiPageContent horizontalPosition="center">
-      <I18nProvider>
+      <I18nContext>
         <div>
           <div className="eui-textCenter">
             <EuiIcon type="managementApp" size="xxl" />
@@ -95,7 +96,7 @@ export function updateLandingPage(version) {
             </p>
           </EuiText>
         </div>
-      </I18nProvider>
+      </I18nContext>
     </EuiPageContent>,
     node,
   );
@@ -110,13 +111,13 @@ export function updateSidebar(
   }
 
   render(
-    <I18nProvider>
+    <I18nContext>
       <SidebarNav
         sections={items}
         selectedId={id}
         className="mgtSideNav"
       />
-    </I18nProvider>,
+    </I18nContext>,
     node,
   );
 }
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/__jest__/render.test.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/__jest__/render.test.js
index dd9ac07c5199..241e1bf671a4 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/__jest__/render.test.js
+++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/__jest__/render.test.js
@@ -35,6 +35,10 @@ jest.mock('ui/chrome', () => ({
   addBasePath: () => { },
 }));
 
+jest.mock('ui/i18n', () => ({
+  I18nContext: () => {},
+}));
+
 const { renderCreateIndexPatternWizard, destroyCreateIndexPatternWizard } = require('../render');
 
 describe('CreateIndexPatternWizardRender', () => {
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/render.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/render.js
index f6bae5911355..03c150a8af6b 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/render.js
+++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/render.js
@@ -21,7 +21,7 @@ import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { CreateIndexPatternWizard } from './create_index_pattern_wizard';
 
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 const CREATE_INDEX_PATTERN_DOM_ELEMENT_ID = 'createIndexPatternReact';
 
@@ -35,12 +35,12 @@ export function renderCreateIndexPatternWizard(
   }
 
   render(
-    <I18nProvider>
+    <I18nContext>
       <CreateIndexPatternWizard
         initialQuery={initialQuery}
         services={services}
       />
-    </I18nProvider>,
+    </I18nContext>,
     node,
   );
 }
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/create_edit_field/create_edit_field.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/create_edit_field/create_edit_field.js
index cfa5020a1b02..82d459238f52 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/create_edit_field/create_edit_field.js
+++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/create_edit_field/create_edit_field.js
@@ -29,7 +29,7 @@ import { getEditFieldBreadcrumbs, getCreateFieldBreadcrumbs } from '../../breadc
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { FieldEditor } from 'ui/field_editor';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { i18n } from '@kbn/i18n';
 
 const REACT_FIELD_EDITOR_ID = 'reactFieldEditor';
@@ -47,7 +47,7 @@ const renderFieldEditor = ($scope, indexPattern, field, {
     }
 
     render(
-      <I18nProvider>
+      <I18nContext>
         <FieldEditor
           indexPattern={indexPattern}
           field={field}
@@ -59,7 +59,7 @@ const renderFieldEditor = ($scope, indexPattern, field, {
             redirectAway,
           }}
         />
-      </I18nProvider>,
+      </I18nContext>,
       node,
     );
   });
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/edit_index_pattern.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/edit_index_pattern.js
index 39501aca1e7f..f33e74018cb3 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/edit_index_pattern.js
+++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/edit_index_pattern.js
@@ -33,9 +33,9 @@ import { render, unmountComponentAtNode } from 'react-dom';
 import { SourceFiltersTable } from './source_filters_table';
 import { IndexedFieldsTable } from './indexed_fields_table';
 import { ScriptedFieldsTable } from './scripted_fields_table';
-import { I18nProvider } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import chrome from 'ui/chrome';
+import { I18nContext } from 'ui/i18n';
 
 import { getEditBreadcrumbs } from '../breadcrumbs';
 
@@ -52,7 +52,7 @@ function updateSourceFiltersTable($scope, $state) {
       }
 
       render(
-        <I18nProvider>
+        <I18nContext>
           <SourceFiltersTable
             indexPattern={$scope.indexPattern}
             filterFilter={$scope.fieldFilter}
@@ -63,7 +63,7 @@ function updateSourceFiltersTable($scope, $state) {
               $scope.$apply();
             }}
           />
-        </I18nProvider>,
+        </I18nContext>,
         node,
       );
     });
@@ -87,7 +87,7 @@ function updateScriptedFieldsTable($scope, $state) {
       }
 
       render(
-        <I18nProvider>
+        <I18nContext>
           <ScriptedFieldsTable
             indexPattern={$scope.indexPattern}
             fieldFilter={$scope.fieldFilter}
@@ -104,7 +104,7 @@ function updateScriptedFieldsTable($scope, $state) {
               $scope.refreshFilters();
             }}
           />
-        </I18nProvider>,
+        </I18nContext>,
         node,
       );
     });
@@ -127,7 +127,7 @@ function updateIndexedFieldsTable($scope, $state) {
       }
 
       render(
-        <I18nProvider>
+        <I18nContext>
           <IndexedFieldsTable
             fields={$scope.fields}
             indexPattern={$scope.indexPattern}
@@ -142,7 +142,7 @@ function updateIndexedFieldsTable($scope, $state) {
               getFieldInfo: $scope.getFieldInfo,
             }}
           />
-        </I18nProvider>,
+        </I18nContext>,
         node,
       );
     });
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/indexed_fields_table/__jest__/__snapshots__/indexed_fields_table.test.js.snap b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/indexed_fields_table/__jest__/__snapshots__/indexed_fields_table.test.js.snap
index 277ad1248ff3..dc77fe6c8a69 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/indexed_fields_table/__jest__/__snapshots__/indexed_fields_table.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/indexed_fields_table/__jest__/__snapshots__/indexed_fields_table.test.js.snap
@@ -1,108 +1,102 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`IndexedFieldsTable should filter based on the query bar 1`] = `
-<I18nProvider>
-  <div>
-    <Table
-      editField={[Function]}
-      indexPattern={
+<div>
+  <Table
+    editField={[Function]}
+    indexPattern={
+      Object {
+        "getNonScriptedFields": [Function],
+      }
+    }
+    items={
+      Array [
         Object {
-          "getNonScriptedFields": [Function],
-        }
-      }
-      items={
-        Array [
-          Object {
-            "displayName": "Elastic",
-            "excluded": false,
-            "format": undefined,
-            "indexPattern": undefined,
-            "info": undefined,
-            "name": "Elastic",
-            "routes": undefined,
-            "searchable": true,
-          },
-        ]
-      }
-    />
-  </div>
-</I18nProvider>
+          "displayName": "Elastic",
+          "excluded": false,
+          "format": undefined,
+          "indexPattern": undefined,
+          "info": undefined,
+          "name": "Elastic",
+          "routes": undefined,
+          "searchable": true,
+        },
+      ]
+    }
+  />
+</div>
 `;
 
 exports[`IndexedFieldsTable should filter based on the type filter 1`] = `
-<I18nProvider>
-  <div>
-    <Table
-      editField={[Function]}
-      indexPattern={
+<div>
+  <Table
+    editField={[Function]}
+    indexPattern={
+      Object {
+        "getNonScriptedFields": [Function],
+      }
+    }
+    items={
+      Array [
         Object {
-          "getNonScriptedFields": [Function],
-        }
-      }
-      items={
-        Array [
-          Object {
-            "displayName": "timestamp",
-            "excluded": false,
-            "format": undefined,
-            "indexPattern": undefined,
-            "info": undefined,
-            "name": "timestamp",
-            "routes": undefined,
-            "type": "date",
-          },
-        ]
-      }
-    />
-  </div>
-</I18nProvider>
+          "displayName": "timestamp",
+          "excluded": false,
+          "format": undefined,
+          "indexPattern": undefined,
+          "info": undefined,
+          "name": "timestamp",
+          "routes": undefined,
+          "type": "date",
+        },
+      ]
+    }
+  />
+</div>
 `;
 
 exports[`IndexedFieldsTable should render normally 1`] = `
-<I18nProvider>
-  <div>
-    <Table
-      editField={[Function]}
-      indexPattern={
+<div>
+  <Table
+    editField={[Function]}
+    indexPattern={
+      Object {
+        "getNonScriptedFields": [Function],
+      }
+    }
+    items={
+      Array [
         Object {
-          "getNonScriptedFields": [Function],
-        }
-      }
-      items={
-        Array [
-          Object {
-            "displayName": "Elastic",
-            "excluded": false,
-            "format": undefined,
-            "indexPattern": undefined,
-            "info": undefined,
-            "name": "Elastic",
-            "routes": undefined,
-            "searchable": true,
-          },
-          Object {
-            "displayName": "timestamp",
-            "excluded": false,
-            "format": undefined,
-            "indexPattern": undefined,
-            "info": undefined,
-            "name": "timestamp",
-            "routes": undefined,
-            "type": "date",
-          },
-          Object {
-            "displayName": "conflictingField",
-            "excluded": false,
-            "format": undefined,
-            "indexPattern": undefined,
-            "info": undefined,
-            "name": "conflictingField",
-            "routes": undefined,
-            "type": "conflict",
-          },
-        ]
-      }
-    />
-  </div>
-</I18nProvider>
+          "displayName": "Elastic",
+          "excluded": false,
+          "format": undefined,
+          "indexPattern": undefined,
+          "info": undefined,
+          "name": "Elastic",
+          "routes": undefined,
+          "searchable": true,
+        },
+        Object {
+          "displayName": "timestamp",
+          "excluded": false,
+          "format": undefined,
+          "indexPattern": undefined,
+          "info": undefined,
+          "name": "timestamp",
+          "routes": undefined,
+          "type": "date",
+        },
+        Object {
+          "displayName": "conflictingField",
+          "excluded": false,
+          "format": undefined,
+          "indexPattern": undefined,
+          "info": undefined,
+          "name": "conflictingField",
+          "routes": undefined,
+          "type": "conflict",
+        },
+      ]
+    }
+  />
+</div>
 `;
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/indexed_fields_table/indexed_fields_table.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/indexed_fields_table/indexed_fields_table.js
index 607e7fa66242..cb1c316c8af9 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/indexed_fields_table/indexed_fields_table.js
+++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/indexed_fields_table/indexed_fields_table.js
@@ -26,8 +26,6 @@ import {
   getFieldFormat
 } from './lib';
 
-import { I18nProvider } from '@kbn/i18n/react';
-
 export class IndexedFieldsTable extends Component {
   static propTypes = {
     fields: PropTypes.array.isRequired,
@@ -102,15 +100,13 @@ export class IndexedFieldsTable extends Component {
     const fields = this.getFilteredFields(this.state, this.props);
 
     return (
-      <I18nProvider>
-        <div>
-          <Table
-            indexPattern={indexPattern}
-            items={fields}
-            editField={field => this.props.helpers.redirectToRoute(field, 'edit')}
-          />
-        </div>
-      </I18nProvider>
+      <div>
+        <Table
+          indexPattern={indexPattern}
+          items={fields}
+          editField={field => this.props.helpers.redirectToRoute(field, 'edit')}
+        />
+      </div>
     );
   }
 }
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/__jest__/__snapshots__/scripted_field_table.test.js.snap b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/__jest__/__snapshots__/scripted_field_table.test.js.snap
index c5466b22eb07..a53f4d7f609c 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/__jest__/__snapshots__/scripted_field_table.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/__jest__/__snapshots__/scripted_field_table.test.js.snap
@@ -1,196 +1,186 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ScriptedFieldsTable should filter based on the lang filter 1`] = `
-<I18nProvider>
-  <div>
-    <header
-      addScriptedFieldUrl="#"
-    />
-    <call-outs
-      deprecatedLangsInUse={
-        Array [
-          "somethingElse",
-        ]
+<div>
+  <header
+    addScriptedFieldUrl="#"
+  />
+  <call-outs
+    deprecatedLangsInUse={
+      Array [
+        "somethingElse",
+      ]
+    }
+    painlessDocLink="painlessDocs"
+  />
+  <eui-spacer
+    size="l"
+  />
+  <Table
+    deleteField={[Function]}
+    editField={[Function]}
+    indexPattern={
+      Object {
+        "getScriptedFields": [Function],
       }
-      painlessDocLink="painlessDocs"
-    />
-    <eui-spacer
-      size="l"
-    />
-    <Table
-      deleteField={[Function]}
-      editField={[Function]}
-      indexPattern={
+    }
+    items={
+      Array [
         Object {
-          "getScriptedFields": [Function],
-        }
-      }
-      items={
-        Array [
-          Object {
-            "lang": "painless",
-            "name": "ScriptedField",
-            "script": "x++",
-          },
-          Object {
-            "lang": "painless",
-            "name": "JustATest",
-            "script": "z++",
-          },
-        ]
-      }
-    />
-  </div>
-</I18nProvider>
+          "lang": "painless",
+          "name": "ScriptedField",
+          "script": "x++",
+        },
+        Object {
+          "lang": "painless",
+          "name": "JustATest",
+          "script": "z++",
+        },
+      ]
+    }
+  />
+</div>
 `;
 
 exports[`ScriptedFieldsTable should filter based on the query bar 1`] = `
-<I18nProvider>
-  <div>
-    <header
-      addScriptedFieldUrl="#"
-    />
-    <call-outs
-      deprecatedLangsInUse={Array []}
-      painlessDocLink="painlessDocs"
-    />
-    <eui-spacer
-      size="l"
-    />
-    <Table
-      deleteField={[Function]}
-      editField={[Function]}
-      indexPattern={
+<div>
+  <header
+    addScriptedFieldUrl="#"
+  />
+  <call-outs
+    deprecatedLangsInUse={Array []}
+    painlessDocLink="painlessDocs"
+  />
+  <eui-spacer
+    size="l"
+  />
+  <Table
+    deleteField={[Function]}
+    editField={[Function]}
+    indexPattern={
+      Object {
+        "getScriptedFields": [Function],
+      }
+    }
+    items={
+      Array [
         Object {
-          "getScriptedFields": [Function],
-        }
-      }
-      items={
-        Array [
-          Object {
-            "lang": "painless",
-            "name": "JustATest",
-            "script": "z++",
-          },
-        ]
-      }
-    />
-  </div>
-</I18nProvider>
+          "lang": "painless",
+          "name": "JustATest",
+          "script": "z++",
+        },
+      ]
+    }
+  />
+</div>
 `;
 
 exports[`ScriptedFieldsTable should hide the table if there are no scripted fields 1`] = `
-<I18nProvider>
-  <div>
-    <header
-      addScriptedFieldUrl="#"
-    />
-    <call-outs
-      deprecatedLangsInUse={Array []}
-      painlessDocLink="painlessDocs"
-    />
-    <eui-spacer
-      size="l"
-    />
-    <Table
-      deleteField={[Function]}
-      editField={[Function]}
-      indexPattern={
-        Object {
-          "getScriptedFields": [Function],
-        }
+<div>
+  <header
+    addScriptedFieldUrl="#"
+  />
+  <call-outs
+    deprecatedLangsInUse={Array []}
+    painlessDocLink="painlessDocs"
+  />
+  <eui-spacer
+    size="l"
+  />
+  <Table
+    deleteField={[Function]}
+    editField={[Function]}
+    indexPattern={
+      Object {
+        "getScriptedFields": [Function],
       }
-      items={Array []}
-    />
-  </div>
-</I18nProvider>
+    }
+    items={Array []}
+  />
+</div>
 `;
 
 exports[`ScriptedFieldsTable should render normally 1`] = `
-<I18nProvider>
-  <div>
-    <header
-      addScriptedFieldUrl="#"
-    />
-    <call-outs
-      deprecatedLangsInUse={Array []}
-      painlessDocLink="painlessDocs"
-    />
-    <eui-spacer
-      size="l"
-    />
-    <Table
-      deleteField={[Function]}
-      editField={[Function]}
-      indexPattern={
+<div>
+  <header
+    addScriptedFieldUrl="#"
+  />
+  <call-outs
+    deprecatedLangsInUse={Array []}
+    painlessDocLink="painlessDocs"
+  />
+  <eui-spacer
+    size="l"
+  />
+  <Table
+    deleteField={[Function]}
+    editField={[Function]}
+    indexPattern={
+      Object {
+        "getScriptedFields": [Function],
+      }
+    }
+    items={
+      Array [
         Object {
-          "getScriptedFields": [Function],
-        }
-      }
-      items={
-        Array [
-          Object {
-            "lang": "painless",
-            "name": "ScriptedField",
-            "script": "x++",
-          },
-          Object {
-            "lang": "painless",
-            "name": "JustATest",
-            "script": "z++",
-          },
-        ]
-      }
-    />
-  </div>
-</I18nProvider>
+          "lang": "painless",
+          "name": "ScriptedField",
+          "script": "x++",
+        },
+        Object {
+          "lang": "painless",
+          "name": "JustATest",
+          "script": "z++",
+        },
+      ]
+    }
+  />
+</div>
 `;
 
 exports[`ScriptedFieldsTable should show a delete modal 1`] = `
-<I18nProvider>
-  <div>
-    <header
-      addScriptedFieldUrl="#"
-    />
-    <call-outs
-      deprecatedLangsInUse={Array []}
-      painlessDocLink="painlessDocs"
-    />
-    <eui-spacer
-      size="l"
-    />
-    <Table
-      deleteField={[Function]}
-      editField={[Function]}
-      indexPattern={
+<div>
+  <header
+    addScriptedFieldUrl="#"
+  />
+  <call-outs
+    deprecatedLangsInUse={Array []}
+    painlessDocLink="painlessDocs"
+  />
+  <eui-spacer
+    size="l"
+  />
+  <Table
+    deleteField={[Function]}
+    editField={[Function]}
+    indexPattern={
+      Object {
+        "getScriptedFields": [Function],
+      }
+    }
+    items={
+      Array [
         Object {
-          "getScriptedFields": [Function],
-        }
-      }
-      items={
-        Array [
-          Object {
-            "lang": "painless",
-            "name": "ScriptedField",
-            "script": "x++",
-          },
-          Object {
-            "lang": "painless",
-            "name": "JustATest",
-            "script": "z++",
-          },
-        ]
-      }
+          "lang": "painless",
+          "name": "ScriptedField",
+          "script": "x++",
+        },
+        Object {
+          "lang": "painless",
+          "name": "JustATest",
+          "script": "z++",
+        },
+      ]
+    }
+  />
+  <eui-overlay-mask>
+    <eui-confirm-modal
+      cancelButtonText="Cancel"
+      confirmButtonText="Delete"
+      onCancel={[Function]}
+      onConfirm={[Function]}
+      title="Delete scripted field 'ScriptedField'?"
     />
-    <eui-overlay-mask>
-      <eui-confirm-modal
-        cancelButtonText="Cancel"
-        confirmButtonText="Delete"
-        onCancel={[Function]}
-        onConfirm={[Function]}
-        title="Delete scripted field 'ScriptedField'?"
-      />
-    </eui-overlay-mask>
-  </div>
-</I18nProvider>
+  </eui-overlay-mask>
+</div>
 `;
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/__jest__/scripted_field_table.test.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/__jest__/scripted_field_table.test.js
index 132811db286a..e0da7e287d08 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/__jest__/scripted_field_table.test.js
+++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/__jest__/scripted_field_table.test.js
@@ -20,7 +20,7 @@
 import React from 'react';
 import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 
-import { ScriptedFieldsTableComponent } from '../scripted_fields_table';
+import { ScriptedFieldsTable } from '../scripted_fields_table';
 
 jest.mock('@elastic/eui', () => ({
   EuiTitle: 'eui-title',
@@ -71,7 +71,7 @@ const indexPattern = {
 describe('ScriptedFieldsTable', () => {
   it('should render normally', async () => {
     const component = shallowWithIntl(
-      <ScriptedFieldsTableComponent
+      <ScriptedFieldsTable
         indexPattern={indexPattern}
         helpers={helpers}
       />
@@ -87,7 +87,7 @@ describe('ScriptedFieldsTable', () => {
 
   it('should filter based on the query bar', async () => {
     const component = shallowWithIntl(
-      <ScriptedFieldsTableComponent
+      <ScriptedFieldsTable
         indexPattern={indexPattern}
         helpers={helpers}
       />
@@ -106,7 +106,7 @@ describe('ScriptedFieldsTable', () => {
 
   it('should filter based on the lang filter', async () => {
     const component = shallowWithIntl(
-      <ScriptedFieldsTableComponent
+      <ScriptedFieldsTable
         indexPattern={{
           getScriptedFields: () => ([
             { name: 'ScriptedField', lang: 'painless', script: 'x++' },
@@ -131,7 +131,7 @@ describe('ScriptedFieldsTable', () => {
 
   it('should hide the table if there are no scripted fields', async () => {
     const component = shallowWithIntl(
-      <ScriptedFieldsTableComponent
+      <ScriptedFieldsTable
         indexPattern={{
           getScriptedFields: () => ([])
         }}
@@ -149,7 +149,7 @@ describe('ScriptedFieldsTable', () => {
 
   it('should show a delete modal', async () => {
     const component = shallowWithIntl(
-      <ScriptedFieldsTableComponent
+      <ScriptedFieldsTable
         indexPattern={indexPattern}
         helpers={helpers}
       />
@@ -166,7 +166,7 @@ describe('ScriptedFieldsTable', () => {
   it('should delete a field', async () => {
     const removeScriptedField = jest.fn();
     const component = shallowWithIntl(
-      <ScriptedFieldsTableComponent
+      <ScriptedFieldsTable
         indexPattern={{
           ...indexPattern,
           removeScriptedField,
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/scripted_fields_table.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/scripted_fields_table.js
index 8eca69628b45..b574cda971f0 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/scripted_fields_table.js
+++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/scripted_fields_table.js
@@ -28,6 +28,7 @@ import {
   EuiConfirmModal,
   EUI_MODAL_CONFIRM_BUTTON,
 } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 
 import {
   Table,
@@ -35,9 +36,7 @@ import {
   CallOuts,
 } from './components';
 
-import { I18nProvider, injectI18n } from '@kbn/i18n/react';
-
-export class ScriptedFieldsTableComponent extends Component {
+export class ScriptedFieldsTable extends Component {
   static propTypes = {
     indexPattern: PropTypes.object.isRequired,
     fieldFilter: PropTypes.string,
@@ -143,14 +142,12 @@ export class ScriptedFieldsTableComponent extends Component {
       return null;
     }
 
-    const { intl } = this.props;
-    const title = intl.formatMessage(
-      { id: 'kbn.management.editIndexPattern.scripted.deleteFieldLabel', defaultMessage: 'Delete scripted field \'{fieldName}\'?' },
-      { fieldName: fieldToDelete.name });
-    const cancelButtonText = intl.formatMessage(
-      { id: 'kbn.management.editIndexPattern.scripted.deleteField.cancelButton', defaultMessage: 'Cancel' });
-    const confirmButtonText = intl.formatMessage(
-      { id: 'kbn.management.editIndexPattern.scripted.deleteField.deleteButton', defaultMessage: 'Delete' });
+    const title = i18n.translate('kbn.management.editIndexPattern.scripted.deleteFieldLabel',
+      { defaultMessage: 'Delete scripted field \'{fieldName}\'?', values: { fieldName: fieldToDelete.name } });
+    const cancelButtonText = i18n.translate('kbn.management.editIndexPattern.scripted.deleteField.cancelButton',
+      { defaultMessage: 'Cancel' });
+    const confirmButtonText = i18n.translate('kbn.management.editIndexPattern.scripted.deleteField.deleteButton',
+      { defaultMessage: 'Delete' });
 
     return (
       <EuiOverlayMask>
@@ -175,26 +172,22 @@ export class ScriptedFieldsTableComponent extends Component {
     const items = this.getFilteredItems();
 
     return (
-      <I18nProvider>
-        <div>
-          <Header addScriptedFieldUrl={helpers.getRouteHref(indexPattern, 'addField')} />
+      <div>
+        <Header addScriptedFieldUrl={helpers.getRouteHref(indexPattern, 'addField')} />
 
-          {this.renderCallOuts()}
+        {this.renderCallOuts()}
 
-          <EuiSpacer size="l" />
+        <EuiSpacer size="l" />
 
-          <Table
-            indexPattern={indexPattern}
-            items={items}
-            editField={field => this.props.helpers.redirectToRoute(field, 'edit')}
-            deleteField={this.startDeleteField}
-          />
+        <Table
+          indexPattern={indexPattern}
+          items={items}
+          editField={field => this.props.helpers.redirectToRoute(field, 'edit')}
+          deleteField={this.startDeleteField}
+        />
 
-          {this.renderDeleteConfirmationModal()}
-        </div>
-      </I18nProvider>
+        {this.renderDeleteConfirmationModal()}
+      </div>
     );
   }
 }
-
-export const ScriptedFieldsTable = injectI18n(ScriptedFieldsTableComponent);
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/index.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/index.js
index 02fa21d8af12..db1476ad9962 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/index.js
+++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/index.js
@@ -28,7 +28,7 @@ import indexTemplate from './index.html';
 import { SavedObjectsClientProvider } from 'ui/saved_objects';
 import { FeatureCatalogueRegistryProvider, FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
 import { i18n } from '@kbn/i18n';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
@@ -48,13 +48,13 @@ export function updateIndexPatternList(
   }
 
   render(
-    <I18nProvider>
+    <I18nContext>
       <IndexPatternList
         indexPatternCreationOptions={indexPatternCreationOptions}
         defaultIndex={defaultIndex}
         indexPatterns={indexPatterns}
       />
-    </I18nProvider>,
+    </I18nContext>,
     node,
   );
 }
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/index_pattern_list/components/header/header.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/index_pattern_list/components/header/header.js
index 5e16c641e039..954c1fa7ddf5 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/index_pattern_list/components/header/header.js
+++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/index_pattern_list/components/header/header.js
@@ -19,17 +19,15 @@
 
 import React from 'react';
 import { CreateButton } from '../create_button';
-import { I18nProvider, FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 export const Header = ({
   indexPatternCreationOptions
 }) => (
-  <I18nProvider>
-    <CreateButton options={indexPatternCreationOptions}>
-      <FormattedMessage
-        id="kbn.management.indexPatternList.header.createIndexPatternButtonLabel"
-        defaultMessage="Create index pattern"
-      />
-    </CreateButton>
-  </I18nProvider>
+  <CreateButton options={indexPatternCreationOptions}>
+    <FormattedMessage
+      id="kbn.management.indexPatternList.header.createIndexPatternButtonLabel"
+      defaultMessage="Create index pattern"
+    />
+  </CreateButton>
 );
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/objects/_objects.js b/src/legacy/core_plugins/kibana/public/management/sections/objects/_objects.js
index 59a6a2a0b9a5..fae371ed36a3 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/objects/_objects.js
+++ b/src/legacy/core_plugins/kibana/public/management/sections/objects/_objects.js
@@ -28,7 +28,7 @@ import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { ObjectsTable } from './components/objects_table';
 import { getInAppUrl } from './lib/get_in_app_url';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 import { getIndexBreadcrumbs } from './breadcrumbs';
 
@@ -55,7 +55,7 @@ function updateObjectsTable($scope, $injector, i18n) {
     }
 
     render(
-      <I18nProvider>
+      <I18nContext>
         <ObjectsTable
           savedObjectsClient={savedObjectsClient}
           services={services}
@@ -84,7 +84,7 @@ function updateObjectsTable($scope, $injector, i18n) {
             $scope.$apply();
           }}
         />
-      </I18nProvider>,
+      </I18nContext>,
       node,
     );
   });
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/settings/__snapshots__/advanced_settings.test.js.snap b/src/legacy/core_plugins/kibana/public/management/sections/settings/__snapshots__/advanced_settings.test.js.snap
index df0f5819244c..5a6e3023b24a 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/settings/__snapshots__/advanced_settings.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/management/sections/settings/__snapshots__/advanced_settings.test.js.snap
@@ -1,501 +1,497 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AdvancedSettings should render normally 1`] = `
-<I18nProvider>
-  <div>
-    <EuiFlexGroup
-      alignItems="stretch"
+<div>
+  <EuiFlexGroup
+    alignItems="stretch"
+    component="div"
+    direction="row"
+    gutterSize="none"
+    justifyContent="flexStart"
+    responsive={true}
+    wrap={false}
+  >
+    <EuiFlexItem
       component="div"
-      direction="row"
-      gutterSize="none"
-      justifyContent="flexStart"
-      responsive={true}
-      wrap={false}
+      grow={true}
     >
-      <EuiFlexItem
-        component="div"
-        grow={true}
-      >
-        <advanced_settings_page_title />
-      </EuiFlexItem>
-      <EuiFlexItem
-        component="div"
-        grow={true}
-      >
-        <Search
-          categories={
-            Array [
-              "general",
-              "elasticsearch",
-            ]
-          }
-          onQueryChange={[Function]}
-          query={
-            Query {
-              "ast": _AST {
-                "_clauses": Array [],
-                "_indexedClauses": Object {
-                  "field": Object {},
-                  "is": Object {},
-                  "term": Array [],
-                },
-              },
-              "syntax": Object {
-                "parse": [Function],
-                "print": [Function],
-              },
-              "text": "",
-            }
-          }
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-    <advanced_settings_page_subtitle />
-    <EuiSpacer
-      size="m"
-    />
-    <CallOuts />
-    <EuiSpacer
-      size="m"
-    />
-    <InjectIntl(FormUI)
-      categories={
-        Array [
-          "general",
-          "elasticsearch",
-        ]
-      }
-      categoryCounts={
-        Object {
-          "elasticsearch": 2,
-          "general": 11,
+      <advanced_settings_page_title />
+    </EuiFlexItem>
+    <EuiFlexItem
+      component="div"
+      grow={true}
+    >
+      <Search
+        categories={
+          Array [
+            "general",
+            "elasticsearch",
+          ]
         }
+        onQueryChange={[Function]}
+        query={
+          Query {
+            "ast": _AST {
+              "_clauses": Array [],
+              "_indexedClauses": Object {
+                "field": Object {},
+                "is": Object {},
+                "term": Array [],
+              },
+            },
+            "syntax": Object {
+              "parse": [Function],
+              "print": [Function],
+            },
+            "text": "",
+          }
+        }
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <advanced_settings_page_subtitle />
+  <EuiSpacer
+    size="m"
+  />
+  <CallOuts />
+  <EuiSpacer
+    size="m"
+  />
+  <InjectIntl(FormUI)
+    categories={
+      Array [
+        "general",
+        "elasticsearch",
+      ]
+    }
+    categoryCounts={
+      Object {
+        "elasticsearch": 2,
+        "general": 11,
       }
-      clear={[Function]}
-      clearQuery={[Function]}
-      save={[Function]}
-      settings={
-        Object {
-          "elasticsearch": Array [
-            Object {
-              "ariaName": "Test array setting",
-              "category": Array [
-                "elasticsearch",
-              ],
-              "defVal": Array [
-                "default_value",
-              ],
-              "description": "Description for Test array setting",
-              "displayName": "Test array setting",
-              "isCustom": undefined,
-              "isOverridden": false,
-              "name": "test:array:setting",
-              "optionLabels": undefined,
-              "options": undefined,
-              "readonly": false,
-              "type": "array",
-              "value": undefined,
-            },
-            Object {
-              "ariaName": "Test boolean setting",
-              "category": Array [
-                "elasticsearch",
-              ],
-              "defVal": true,
-              "description": "Description for Test boolean setting",
-              "displayName": "Test boolean setting",
-              "isCustom": undefined,
-              "isOverridden": false,
-              "name": "test:boolean:setting",
-              "optionLabels": undefined,
-              "options": undefined,
-              "readonly": false,
-              "type": "boolean",
-              "value": undefined,
-            },
-          ],
-          "general": Array [
-            Object {
-              "ariaName": "Test custom string setting",
-              "category": Array [
-                "general",
-              ],
-              "defVal": null,
-              "description": "Description for Test custom string setting",
-              "displayName": "Test custom string setting",
-              "isCustom": undefined,
-              "isOverridden": false,
-              "name": "test:customstring:setting",
-              "optionLabels": undefined,
-              "options": undefined,
-              "readonly": false,
-              "type": "string",
-              "value": undefined,
-            },
-            Object {
-              "ariaName": "Test image setting",
-              "category": Array [
-                "general",
-              ],
-              "defVal": null,
-              "description": "Description for Test image setting",
-              "displayName": "Test image setting",
-              "isCustom": undefined,
-              "isOverridden": false,
-              "name": "test:image:setting",
-              "optionLabels": undefined,
-              "options": undefined,
-              "readonly": false,
-              "type": "image",
-              "value": undefined,
-            },
-            Object {
-              "ariaName": "An overridden json",
-              "category": Array [
-                "general",
-              ],
-              "defVal": "{
+    }
+    clear={[Function]}
+    clearQuery={[Function]}
+    save={[Function]}
+    settings={
+      Object {
+        "elasticsearch": Array [
+          Object {
+            "ariaName": "Test array setting",
+            "category": Array [
+              "elasticsearch",
+            ],
+            "defVal": Array [
+              "default_value",
+            ],
+            "description": "Description for Test array setting",
+            "displayName": "Test array setting",
+            "isCustom": undefined,
+            "isOverridden": false,
+            "name": "test:array:setting",
+            "optionLabels": undefined,
+            "options": undefined,
+            "readonly": false,
+            "type": "array",
+            "value": undefined,
+          },
+          Object {
+            "ariaName": "Test boolean setting",
+            "category": Array [
+              "elasticsearch",
+            ],
+            "defVal": true,
+            "description": "Description for Test boolean setting",
+            "displayName": "Test boolean setting",
+            "isCustom": undefined,
+            "isOverridden": false,
+            "name": "test:boolean:setting",
+            "optionLabels": undefined,
+            "options": undefined,
+            "readonly": false,
+            "type": "boolean",
+            "value": undefined,
+          },
+        ],
+        "general": Array [
+          Object {
+            "ariaName": "Test custom string setting",
+            "category": Array [
+              "general",
+            ],
+            "defVal": null,
+            "description": "Description for Test custom string setting",
+            "displayName": "Test custom string setting",
+            "isCustom": undefined,
+            "isOverridden": false,
+            "name": "test:customstring:setting",
+            "optionLabels": undefined,
+            "options": undefined,
+            "readonly": false,
+            "type": "string",
+            "value": undefined,
+          },
+          Object {
+            "ariaName": "Test image setting",
+            "category": Array [
+              "general",
+            ],
+            "defVal": null,
+            "description": "Description for Test image setting",
+            "displayName": "Test image setting",
+            "isCustom": undefined,
+            "isOverridden": false,
+            "name": "test:image:setting",
+            "optionLabels": undefined,
+            "options": undefined,
+            "readonly": false,
+            "type": "image",
+            "value": undefined,
+          },
+          Object {
+            "ariaName": "An overridden json",
+            "category": Array [
+              "general",
+            ],
+            "defVal": "{
   \\"foo\\": \\"bar\\"
 }",
-              "description": "Description for overridden json",
-              "displayName": "An overridden json",
-              "isCustom": undefined,
-              "isOverridden": true,
-              "name": "test:isOverridden:json",
-              "optionLabels": undefined,
-              "options": undefined,
-              "readonly": false,
-              "type": "json",
-              "value": undefined,
-            },
-            Object {
-              "ariaName": "An overridden number",
-              "category": Array [
-                "general",
-              ],
-              "defVal": 1234,
-              "description": "Description for overridden number",
-              "displayName": "An overridden number",
-              "isCustom": undefined,
-              "isOverridden": true,
-              "name": "test:isOverridden:number",
-              "optionLabels": undefined,
-              "options": undefined,
-              "readonly": false,
-              "type": "number",
-              "value": undefined,
-            },
-            Object {
-              "ariaName": "Test overridden select setting",
-              "category": Array [
-                "general",
-              ],
-              "defVal": "orange",
-              "description": "Description for overridden select setting",
-              "displayName": "Test overridden select setting",
-              "isCustom": undefined,
-              "isOverridden": true,
-              "name": "test:isOverridden:select",
-              "optionLabels": undefined,
-              "options": Array [
-                "apple",
-                "orange",
-                "banana",
-              ],
-              "readonly": false,
-              "type": "select",
-              "value": undefined,
-            },
-            Object {
-              "ariaName": "An overridden string",
-              "category": Array [
-                "general",
-              ],
-              "defVal": "foo",
-              "description": "Description for overridden string",
-              "displayName": "An overridden string",
-              "isCustom": undefined,
-              "isOverridden": true,
-              "name": "test:isOverridden:string",
-              "optionLabels": undefined,
-              "options": undefined,
-              "readonly": false,
-              "type": "string",
-              "value": undefined,
-            },
-            Object {
-              "ariaName": "Test json setting",
-              "category": Array [
-                "general",
-              ],
-              "defVal": "{\\"foo\\": \\"bar\\"}",
-              "description": "Description for Test json setting",
-              "displayName": "Test json setting",
-              "isCustom": undefined,
-              "isOverridden": false,
-              "name": "test:json:setting",
-              "optionLabels": undefined,
-              "options": undefined,
-              "readonly": false,
-              "type": "json",
-              "value": undefined,
-            },
-            Object {
-              "ariaName": "Test markdown setting",
-              "category": Array [
-                "general",
-              ],
-              "defVal": "",
-              "description": "Description for Test markdown setting",
-              "displayName": "Test markdown setting",
-              "isCustom": undefined,
-              "isOverridden": false,
-              "name": "test:markdown:setting",
-              "optionLabels": undefined,
-              "options": undefined,
-              "readonly": false,
-              "type": "markdown",
-              "value": undefined,
-            },
-            Object {
-              "ariaName": "Test number setting",
-              "category": Array [
-                "general",
-              ],
-              "defVal": 5,
-              "description": "Description for Test number setting",
-              "displayName": "Test number setting",
-              "isCustom": undefined,
-              "isOverridden": false,
-              "name": "test:number:setting",
-              "optionLabels": undefined,
-              "options": undefined,
-              "readonly": false,
-              "type": "number",
-              "value": undefined,
-            },
-            Object {
-              "ariaName": "Test select setting",
-              "category": Array [
-                "general",
-              ],
-              "defVal": "orange",
-              "description": "Description for Test select setting",
-              "displayName": "Test select setting",
-              "isCustom": undefined,
-              "isOverridden": false,
-              "name": "test:select:setting",
-              "optionLabels": undefined,
-              "options": Array [
-                "apple",
-                "orange",
-                "banana",
-              ],
-              "readonly": false,
-              "type": "select",
-              "value": undefined,
-            },
-            Object {
-              "ariaName": "Test string setting",
-              "category": Array [
-                "general",
-              ],
-              "defVal": null,
-              "description": "Description for Test string setting",
-              "displayName": "Test string setting",
-              "isCustom": undefined,
-              "isOverridden": false,
-              "name": "test:string:setting",
-              "optionLabels": undefined,
-              "options": undefined,
-              "readonly": false,
-              "type": "string",
-              "value": undefined,
-            },
-          ],
-        }
-      }
-      showNoResultsMessage={true}
-    />
-    <advanced_settings_page_footer
-      onQueryMatchChange={[Function]}
-      query={
-        Query {
-          "ast": _AST {
-            "_clauses": Array [],
-            "_indexedClauses": Object {
-              "field": Object {},
-              "is": Object {},
-              "term": Array [],
-            },
+            "description": "Description for overridden json",
+            "displayName": "An overridden json",
+            "isCustom": undefined,
+            "isOverridden": true,
+            "name": "test:isOverridden:json",
+            "optionLabels": undefined,
+            "options": undefined,
+            "readonly": false,
+            "type": "json",
+            "value": undefined,
           },
-          "syntax": Object {
-            "parse": [Function],
-            "print": [Function],
+          Object {
+            "ariaName": "An overridden number",
+            "category": Array [
+              "general",
+            ],
+            "defVal": 1234,
+            "description": "Description for overridden number",
+            "displayName": "An overridden number",
+            "isCustom": undefined,
+            "isOverridden": true,
+            "name": "test:isOverridden:number",
+            "optionLabels": undefined,
+            "options": undefined,
+            "readonly": false,
+            "type": "number",
+            "value": undefined,
           },
-          "text": "",
-        }
+          Object {
+            "ariaName": "Test overridden select setting",
+            "category": Array [
+              "general",
+            ],
+            "defVal": "orange",
+            "description": "Description for overridden select setting",
+            "displayName": "Test overridden select setting",
+            "isCustom": undefined,
+            "isOverridden": true,
+            "name": "test:isOverridden:select",
+            "optionLabels": undefined,
+            "options": Array [
+              "apple",
+              "orange",
+              "banana",
+            ],
+            "readonly": false,
+            "type": "select",
+            "value": undefined,
+          },
+          Object {
+            "ariaName": "An overridden string",
+            "category": Array [
+              "general",
+            ],
+            "defVal": "foo",
+            "description": "Description for overridden string",
+            "displayName": "An overridden string",
+            "isCustom": undefined,
+            "isOverridden": true,
+            "name": "test:isOverridden:string",
+            "optionLabels": undefined,
+            "options": undefined,
+            "readonly": false,
+            "type": "string",
+            "value": undefined,
+          },
+          Object {
+            "ariaName": "Test json setting",
+            "category": Array [
+              "general",
+            ],
+            "defVal": "{\\"foo\\": \\"bar\\"}",
+            "description": "Description for Test json setting",
+            "displayName": "Test json setting",
+            "isCustom": undefined,
+            "isOverridden": false,
+            "name": "test:json:setting",
+            "optionLabels": undefined,
+            "options": undefined,
+            "readonly": false,
+            "type": "json",
+            "value": undefined,
+          },
+          Object {
+            "ariaName": "Test markdown setting",
+            "category": Array [
+              "general",
+            ],
+            "defVal": "",
+            "description": "Description for Test markdown setting",
+            "displayName": "Test markdown setting",
+            "isCustom": undefined,
+            "isOverridden": false,
+            "name": "test:markdown:setting",
+            "optionLabels": undefined,
+            "options": undefined,
+            "readonly": false,
+            "type": "markdown",
+            "value": undefined,
+          },
+          Object {
+            "ariaName": "Test number setting",
+            "category": Array [
+              "general",
+            ],
+            "defVal": 5,
+            "description": "Description for Test number setting",
+            "displayName": "Test number setting",
+            "isCustom": undefined,
+            "isOverridden": false,
+            "name": "test:number:setting",
+            "optionLabels": undefined,
+            "options": undefined,
+            "readonly": false,
+            "type": "number",
+            "value": undefined,
+          },
+          Object {
+            "ariaName": "Test select setting",
+            "category": Array [
+              "general",
+            ],
+            "defVal": "orange",
+            "description": "Description for Test select setting",
+            "displayName": "Test select setting",
+            "isCustom": undefined,
+            "isOverridden": false,
+            "name": "test:select:setting",
+            "optionLabels": undefined,
+            "options": Array [
+              "apple",
+              "orange",
+              "banana",
+            ],
+            "readonly": false,
+            "type": "select",
+            "value": undefined,
+          },
+          Object {
+            "ariaName": "Test string setting",
+            "category": Array [
+              "general",
+            ],
+            "defVal": null,
+            "description": "Description for Test string setting",
+            "displayName": "Test string setting",
+            "isCustom": undefined,
+            "isOverridden": false,
+            "name": "test:string:setting",
+            "optionLabels": undefined,
+            "options": undefined,
+            "readonly": false,
+            "type": "string",
+            "value": undefined,
+          },
+        ],
       }
-    />
-  </div>
-</I18nProvider>
+    }
+    showNoResultsMessage={true}
+  />
+  <advanced_settings_page_footer
+    onQueryMatchChange={[Function]}
+    query={
+      Query {
+        "ast": _AST {
+          "_clauses": Array [],
+          "_indexedClauses": Object {
+            "field": Object {},
+            "is": Object {},
+            "term": Array [],
+          },
+        },
+        "syntax": Object {
+          "parse": [Function],
+          "print": [Function],
+        },
+        "text": "",
+      }
+    }
+  />
+</div>
 `;
 
 exports[`AdvancedSettings should render specific setting if given setting key 1`] = `
-<I18nProvider>
-  <div>
-    <EuiFlexGroup
-      alignItems="stretch"
+<div>
+  <EuiFlexGroup
+    alignItems="stretch"
+    component="div"
+    direction="row"
+    gutterSize="none"
+    justifyContent="flexStart"
+    responsive={true}
+    wrap={false}
+  >
+    <EuiFlexItem
       component="div"
-      direction="row"
-      gutterSize="none"
-      justifyContent="flexStart"
-      responsive={true}
-      wrap={false}
+      grow={true}
     >
-      <EuiFlexItem
-        component="div"
-        grow={true}
-      >
-        <advanced_settings_page_title />
-      </EuiFlexItem>
-      <EuiFlexItem
-        component="div"
-        grow={true}
-      >
-        <Search
-          categories={
-            Array [
-              "general",
-              "elasticsearch",
-            ]
-          }
-          onQueryChange={[Function]}
-          query={
-            Query {
-              "ast": _AST {
-                "_clauses": Array [
-                  Object {
-                    "field": "ariaName",
-                    "match": "must",
-                    "operator": "eq",
-                    "type": "field",
-                    "value": "test string setting",
-                  },
-                ],
-                "_indexedClauses": Object {
-                  "field": Object {
-                    "ariaName": Array [
-                      Object {
-                        "field": "ariaName",
-                        "match": "must",
-                        "operator": "eq",
-                        "type": "field",
-                        "value": "test string setting",
-                      },
-                    ],
-                  },
-                  "is": Object {},
-                  "term": Array [],
-                },
-              },
-              "syntax": Object {
-                "parse": [Function],
-                "print": [Function],
-              },
-              "text": "ariaName:\\"test string setting\\"",
-            }
-          }
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-    <advanced_settings_page_subtitle />
-    <EuiSpacer
-      size="m"
-    />
-    <CallOuts />
-    <EuiSpacer
-      size="m"
-    />
-    <InjectIntl(FormUI)
-      categories={
-        Array [
-          "general",
-          "elasticsearch",
-        ]
-      }
-      categoryCounts={
-        Object {
-          "elasticsearch": 2,
-          "general": 11,
+      <advanced_settings_page_title />
+    </EuiFlexItem>
+    <EuiFlexItem
+      component="div"
+      grow={true}
+    >
+      <Search
+        categories={
+          Array [
+            "general",
+            "elasticsearch",
+          ]
         }
-      }
-      clear={[Function]}
-      clearQuery={[Function]}
-      save={[Function]}
-      settings={
-        Object {
-          "general": Array [
-            Object {
-              "ariaName": "Test string setting",
-              "category": Array [
-                "general",
+        onQueryChange={[Function]}
+        query={
+          Query {
+            "ast": _AST {
+              "_clauses": Array [
+                Object {
+                  "field": "ariaName",
+                  "match": "must",
+                  "operator": "eq",
+                  "type": "field",
+                  "value": "test string setting",
+                },
               ],
-              "defVal": null,
-              "description": "Description for Test string setting",
-              "displayName": "Test string setting",
-              "isCustom": undefined,
-              "isOverridden": false,
-              "name": "test:string:setting",
-              "optionLabels": undefined,
-              "options": undefined,
-              "readonly": false,
-              "type": "string",
-              "value": undefined,
+              "_indexedClauses": Object {
+                "field": Object {
+                  "ariaName": Array [
+                    Object {
+                      "field": "ariaName",
+                      "match": "must",
+                      "operator": "eq",
+                      "type": "field",
+                      "value": "test string setting",
+                    },
+                  ],
+                },
+                "is": Object {},
+                "term": Array [],
+              },
+            },
+            "syntax": Object {
+              "parse": [Function],
+              "print": [Function],
+            },
+            "text": "ariaName:\\"test string setting\\"",
+          }
+        }
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <advanced_settings_page_subtitle />
+  <EuiSpacer
+    size="m"
+  />
+  <CallOuts />
+  <EuiSpacer
+    size="m"
+  />
+  <InjectIntl(FormUI)
+    categories={
+      Array [
+        "general",
+        "elasticsearch",
+      ]
+    }
+    categoryCounts={
+      Object {
+        "elasticsearch": 2,
+        "general": 11,
+      }
+    }
+    clear={[Function]}
+    clearQuery={[Function]}
+    save={[Function]}
+    settings={
+      Object {
+        "general": Array [
+          Object {
+            "ariaName": "Test string setting",
+            "category": Array [
+              "general",
+            ],
+            "defVal": null,
+            "description": "Description for Test string setting",
+            "displayName": "Test string setting",
+            "isCustom": undefined,
+            "isOverridden": false,
+            "name": "test:string:setting",
+            "optionLabels": undefined,
+            "options": undefined,
+            "readonly": false,
+            "type": "string",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    showNoResultsMessage={true}
+  />
+  <advanced_settings_page_footer
+    onQueryMatchChange={[Function]}
+    query={
+      Query {
+        "ast": _AST {
+          "_clauses": Array [
+            Object {
+              "field": "ariaName",
+              "match": "must",
+              "operator": "eq",
+              "type": "field",
+              "value": "test string setting",
             },
           ],
-        }
-      }
-      showNoResultsMessage={true}
-    />
-    <advanced_settings_page_footer
-      onQueryMatchChange={[Function]}
-      query={
-        Query {
-          "ast": _AST {
-            "_clauses": Array [
-              Object {
-                "field": "ariaName",
-                "match": "must",
-                "operator": "eq",
-                "type": "field",
-                "value": "test string setting",
-              },
-            ],
-            "_indexedClauses": Object {
-              "field": Object {
-                "ariaName": Array [
-                  Object {
-                    "field": "ariaName",
-                    "match": "must",
-                    "operator": "eq",
-                    "type": "field",
-                    "value": "test string setting",
-                  },
-                ],
-              },
-              "is": Object {},
-              "term": Array [],
+          "_indexedClauses": Object {
+            "field": Object {
+              "ariaName": Array [
+                Object {
+                  "field": "ariaName",
+                  "match": "must",
+                  "operator": "eq",
+                  "type": "field",
+                  "value": "test string setting",
+                },
+              ],
             },
+            "is": Object {},
+            "term": Array [],
           },
-          "syntax": Object {
-            "parse": [Function],
-            "print": [Function],
-          },
-          "text": "ariaName:\\"test string setting\\"",
-        }
+        },
+        "syntax": Object {
+          "parse": [Function],
+          "print": [Function],
+        },
+        "text": "ariaName:\\"test string setting\\"",
       }
-    />
-  </div>
-</I18nProvider>
+    }
+  />
+</div>
 `;
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/settings/advanced_settings.js b/src/legacy/core_plugins/kibana/public/management/sections/settings/advanced_settings.js
index e509e1f053c0..17c90b5cfa75 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/settings/advanced_settings.js
+++ b/src/legacy/core_plugins/kibana/public/management/sections/settings/advanced_settings.js
@@ -42,8 +42,6 @@ import {
 } from './components/default_component_registry';
 import { getSettingsComponent } from './components/component_registry';
 
-import { I18nProvider } from '@kbn/i18n/react';
-
 export class AdvancedSettings extends Component {
   static propTypes = {
     config: PropTypes.object.isRequired,
@@ -155,36 +153,34 @@ export class AdvancedSettings extends Component {
     const PageFooter = getSettingsComponent(PAGE_FOOTER_COMPONENT);
 
     return (
-      <I18nProvider>
-        <div>
-          <EuiFlexGroup gutterSize="none">
-            <EuiFlexItem>
-              <PageTitle />
-            </EuiFlexItem>
-            <EuiFlexItem>
-              <Search
-                query={query}
-                categories={this.categories}
-                onQueryChange={this.onQueryChange}
-              />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-          <PageSubtitle />
-          <EuiSpacer size="m" />
-          <CallOuts />
-          <EuiSpacer size="m" />
-          <Form
-            settings={filteredSettings}
-            categories={this.categories}
-            categoryCounts={this.categoryCounts}
-            clearQuery={this.clearQuery}
-            save={this.saveConfig}
-            clear={this.clearConfig}
-            showNoResultsMessage={!footerQueryMatched}
-          />
-          <PageFooter query={query} onQueryMatchChange={this.onFooterQueryMatchChange} />
-        </div>
-      </I18nProvider>
+      <div>
+        <EuiFlexGroup gutterSize="none">
+          <EuiFlexItem>
+            <PageTitle />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <Search
+              query={query}
+              categories={this.categories}
+              onQueryChange={this.onQueryChange}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <PageSubtitle />
+        <EuiSpacer size="m" />
+        <CallOuts />
+        <EuiSpacer size="m" />
+        <Form
+          settings={filteredSettings}
+          categories={this.categories}
+          categoryCounts={this.categoryCounts}
+          clearQuery={this.clearQuery}
+          save={this.saveConfig}
+          clear={this.clearConfig}
+          showNoResultsMessage={!footerQueryMatched}
+        />
+        <PageFooter query={query} onQueryMatchChange={this.onFooterQueryMatchChange} />
+      </div>
     );
   }
 }
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/settings/index.js b/src/legacy/core_plugins/kibana/public/management/sections/settings/index.js
index 764ae7532f60..930f1dfa9b7a 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/settings/index.js
+++ b/src/legacy/core_plugins/kibana/public/management/sections/settings/index.js
@@ -20,6 +20,7 @@
 import { management } from 'ui/management';
 import uiRoutes from 'ui/routes';
 import { uiModules } from 'ui/modules';
+import { I18nContext } from 'ui/i18n';
 import indexTemplate from './index.html';
 import { FeatureCatalogueRegistryProvider, FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
 
@@ -39,10 +40,12 @@ function updateAdvancedSettings($scope, config, query) {
     }
 
     render(
-      <AdvancedSettings
-        config={config}
-        query={query}
-      />,
+      <I18nContext>
+        <AdvancedSettings
+          config={config}
+          query={query}
+        />
+      </I18nContext>,
       node,
     );
   });
diff --git a/src/legacy/core_plugins/kibana/public/visualize/embeddable/disabled_lab_embeddable.tsx b/src/legacy/core_plugins/kibana/public/visualize/embeddable/disabled_lab_embeddable.tsx
index 1c6a2270be8e..e119f7cfcf25 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/embeddable/disabled_lab_embeddable.tsx
+++ b/src/legacy/core_plugins/kibana/public/visualize/embeddable/disabled_lab_embeddable.tsx
@@ -17,10 +17,10 @@
  * under the License.
  */
 
-import { I18nProvider } from '@kbn/i18n/react';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Embeddable } from 'ui/embeddable';
+import { I18nContext } from 'ui/i18n';
 import { DisabledLabVisualization } from './disabled_lab_visualization';
 
 export class DisabledLabEmbeddable extends Embeddable {
@@ -34,9 +34,9 @@ export class DisabledLabEmbeddable extends Embeddable {
     if (this.metadata.title) {
       this.domNode = domNode;
       ReactDOM.render(
-        <I18nProvider>
+        <I18nContext>
           <DisabledLabVisualization title={this.metadata.title} />
-        </I18nProvider>,
+        </I18nContext>,
         domNode
       );
     }
diff --git a/src/legacy/core_plugins/kibana/public/visualize/listing/visualize_listing.js b/src/legacy/core_plugins/kibana/public/visualize/listing/visualize_listing.js
index b47d15cfa430..94d4165f2e5a 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/listing/visualize_listing.js
+++ b/src/legacy/core_plugins/kibana/public/visualize/listing/visualize_listing.js
@@ -24,17 +24,17 @@ import { uiModules } from 'ui/modules';
 import { timefilter } from 'ui/timefilter';
 import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
 import chrome from 'ui/chrome';
+import { wrapInI18nContext } from 'ui/i18n';
 
 import { VisualizeListingTable } from './visualize_listing_table';
 import { NewVisModal } from '../wizard/new_vis_modal';
 import { VisualizeConstants } from '../visualize_constants';
 
 import { i18n } from '@kbn/i18n';
-import { injectI18nProvider } from '@kbn/i18n/react';
 
 const app = uiModules.get('app/visualize', ['ngRoute', 'react']);
-app.directive('visualizeListingTable', reactDirective => reactDirective(injectI18nProvider(VisualizeListingTable)));
-app.directive('newVisModal', reactDirective => reactDirective(injectI18nProvider(NewVisModal)));
+app.directive('visualizeListingTable', reactDirective => reactDirective(wrapInI18nContext(VisualizeListingTable)));
+app.directive('newVisModal', reactDirective => reactDirective(wrapInI18nContext(NewVisModal)));
 
 export function VisualizeListingController($injector, createNewVis) {
   const Notifier = $injector.get('Notifier');
diff --git a/src/legacy/core_plugins/kibana/public/visualize/wizard/__snapshots__/new_vis_modal.test.tsx.snap b/src/legacy/core_plugins/kibana/public/visualize/wizard/__snapshots__/new_vis_modal.test.tsx.snap
index aff7e965315f..cd90c6561d9f 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/wizard/__snapshots__/new_vis_modal.test.tsx.snap
+++ b/src/legacy/core_plugins/kibana/public/visualize/wizard/__snapshots__/new_vis_modal.test.tsx.snap
@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NewVisModal filter for visualization types should render as expected 1`] = `
-<I18nProvider
+<NewVisModal
+  editorParams={Array []}
   intl={
     Object {
       "defaultFormats": Object {},
@@ -104,933 +105,845 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
       "timeZone": null,
     }
   }
->
-  <IntlProvider
-    defaultLocale="en"
-    formats={
+  isOpen={true}
+  onClose={[Function]}
+  visTypesRegistry={
+    Array [
       Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      }
-    }
-    locale="en"
-    messages={Object {}}
-    textComponent={Symbol(react.fragment)}
-  >
-    <NewVisModal
-      editorParams={Array []}
-      isOpen={true}
-      onClose={[Function]}
-      visTypesRegistry={
-        Array [
-          Object {
-            "hidden": false,
-            "name": "vis",
-            "requestHandler": "none",
-            "requiresSearch": false,
-            "responseHandler": "none",
-            "stage": "production",
-            "title": "Vis Type 1",
-            "visualization": [Function],
-          },
-          Object {
-            "hidden": false,
-            "name": "visExp",
-            "requestHandler": "none",
-            "requiresSearch": false,
-            "responseHandler": "none",
-            "stage": "experimental",
-            "title": "Experimental Vis",
-            "visualization": [Function],
-          },
-          Object {
-            "hidden": false,
-            "name": "visWithSearch",
-            "requestHandler": "none",
-            "requiresSearch": false,
-            "responseHandler": "none",
-            "stage": "production",
-            "title": "Vis with search",
-            "visualization": [Function],
-          },
-        ]
-      }
-    >
-      <EuiOverlayMask>
-        <Portal
-          containerInfo={
+        "hidden": false,
+        "name": "vis",
+        "requestHandler": "none",
+        "requiresSearch": false,
+        "responseHandler": "none",
+        "stage": "production",
+        "title": "Vis Type 1",
+        "visualization": [Function],
+      },
+      Object {
+        "hidden": false,
+        "name": "visExp",
+        "requestHandler": "none",
+        "requiresSearch": false,
+        "responseHandler": "none",
+        "stage": "experimental",
+        "title": "Experimental Vis",
+        "visualization": [Function],
+      },
+      Object {
+        "hidden": false,
+        "name": "visWithSearch",
+        "requestHandler": "none",
+        "requiresSearch": false,
+        "responseHandler": "none",
+        "stage": "production",
+        "title": "Vis with search",
+        "visualization": [Function],
+      },
+    ]
+  }
+>
+  <EuiOverlayMask>
+    <Portal
+      containerInfo={
+        <div
+          class="euiOverlayMask"
+        >
+          <div>
             <div
-              class="euiOverlayMask"
+              class="euiModal visNewVisDialog"
+              style="max-width: 100vw;"
+              tabindex="0"
             >
-              <div>
-                <div
-                  class="euiModal visNewVisDialog"
-                  style="max-width: 100vw;"
-                  tabindex="0"
+              <button
+                aria-label="Closes this modal window"
+                class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                type="button"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="euiIcon euiIcon--medium euiButtonIcon__icon"
+                  focusable="false"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
+                  />
+                </svg>
+              </button>
+              <div
+                class="euiModal__flex"
+              >
+                <div
+                  class="euiModalHeader"
                 >
-                  <button
-                    aria-label="Closes this modal window"
-                    class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="euiIcon euiIcon--medium euiButtonIcon__icon"
-                      focusable="false"
-                      height="16"
-                      viewBox="0 0 16 16"
-                      width="16"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
-                      />
-                    </svg>
-                  </button>
                   <div
-                    class="euiModal__flex"
+                    class="euiModalHeader__title"
+                  >
+                    New Visualization
+                  </div>
+                </div>
+                <div
+                  class="visNewVisDialog__body"
+                >
+                  <div
+                    class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
                   >
                     <div
-                      class="euiModalHeader"
+                      class="euiFlexItem"
                     >
                       <div
-                        class="euiModalHeader__title"
+                        class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
                       >
-                        New Visualization
+                        <div
+                          class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
+                        >
+                          <div
+                            class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                          >
+                            <div
+                              class="euiFormControlLayout__childrenWrapper"
+                            >
+                              <input
+                                aria-label="Filter for a visualization type"
+                                class="euiFieldSearch euiFieldSearch--fullWidth"
+                                data-test-subj="filterVisType"
+                                placeholder="Filter"
+                                type="search"
+                                value="with"
+                              />
+                              <div
+                                class="euiFormControlLayoutIcons"
+                              >
+                                <span
+                                  class="euiFormControlLayoutCustomIcon"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    height="16"
+                                    viewBox="0 0 16 16"
+                                    width="16"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                                  >
+                                    <defs>
+                                      <path
+                                        d="M11.271 11.978l3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738z"
+                                        id="search-a"
+                                      />
+                                    </defs>
+                                    <use
+                                      xlink:href="#search-a"
+                                    />
+                                  </svg>
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
+                        >
+                          <span
+                            aria-live="polite"
+                            class="euiScreenReaderOnly"
+                          >
+                            1 type found
+                          </span>
+                          <div
+                            class="euiKeyPadMenu visNewVisDialog__types"
+                            data-test-subj="visNewDialogTypes"
+                            role="menu"
+                          >
+                            <button
+                              aria-describedby="visTypeDescription-visWithSearch"
+                              class="euiKeyPadMenuItem visNewVisDialog__type"
+                              data-test-subj="visType-visWithSearch"
+                              data-vis-stage="production"
+                              type="button"
+                            >
+                              <div
+                                class="euiKeyPadMenuItem__inner"
+                              >
+                                <div
+                                  class="euiKeyPadMenuItem__icon"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    class="euiIcon euiIcon--large euiIcon--secondary"
+                                    focusable="false"
+                                    height="16"
+                                    viewBox="0 0 16 16"
+                                    width="16"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </div>
+                                <p
+                                  class="euiKeyPadMenuItem__label"
+                                >
+                                  <span
+                                    data-test-subj="visTypeTitle"
+                                  >
+                                    Vis with search
+                                  </span>
+                                </p>
+                              </div>
+                            </button>
+                            <button
+                              aria-describedby="visTypeDescription-vis"
+                              class="euiKeyPadMenuItem visNewVisDialog__type"
+                              data-test-subj="visType-vis"
+                              data-vis-stage="production"
+                              disabled=""
+                              type="button"
+                            >
+                              <div
+                                class="euiKeyPadMenuItem__inner"
+                              >
+                                <div
+                                  class="euiKeyPadMenuItem__icon"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    class="euiIcon euiIcon--large euiIcon--secondary"
+                                    focusable="false"
+                                    height="16"
+                                    viewBox="0 0 16 16"
+                                    width="16"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </div>
+                                <p
+                                  class="euiKeyPadMenuItem__label"
+                                >
+                                  <span
+                                    data-test-subj="visTypeTitle"
+                                  >
+                                    Vis Type 1
+                                  </span>
+                                </p>
+                              </div>
+                            </button>
+                          </div>
+                        </div>
                       </div>
                     </div>
                     <div
-                      class="visNewVisDialog__body"
+                      class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
                     >
-                      <div
-                        class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                      <h2
+                        class="euiTitle euiTitle--small"
                       >
-                        <div
-                          class="euiFlexItem"
-                        >
-                          <div
-                            class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
-                          >
-                            <div
-                              class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
-                            >
-                              <div
-                                class="euiFormControlLayout euiFormControlLayout--fullWidth"
-                              >
-                                <div
-                                  class="euiFormControlLayout__childrenWrapper"
-                                >
-                                  <input
-                                    aria-label="Filter for a visualization type"
-                                    class="euiFieldSearch euiFieldSearch--fullWidth"
-                                    data-test-subj="filterVisType"
-                                    placeholder="Filter"
-                                    type="search"
-                                    value="with"
-                                  />
-                                  <div
-                                    class="euiFormControlLayoutIcons"
-                                  >
-                                    <span
-                                      class="euiFormControlLayoutCustomIcon"
-                                    >
-                                      <svg
-                                        aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                        focusable="false"
-                                        height="16"
-                                        viewBox="0 0 16 16"
-                                        width="16"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        xmlns:xlink="http://www.w3.org/1999/xlink"
-                                      >
-                                        <defs>
-                                          <path
-                                            d="M11.271 11.978l3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738z"
-                                            id="search-a"
-                                          />
-                                        </defs>
-                                        <use
-                                          xlink:href="#search-a"
-                                        />
-                                      </svg>
-                                    </span>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                            <div
-                              class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
-                            >
-                              <span
-                                aria-live="polite"
-                                class="euiScreenReaderOnly"
-                              >
-                                1 type found
-                              </span>
-                              <div
-                                class="euiKeyPadMenu visNewVisDialog__types"
-                                data-test-subj="visNewDialogTypes"
-                                role="menu"
-                              >
-                                <button
-                                  aria-describedby="visTypeDescription-visWithSearch"
-                                  class="euiKeyPadMenuItem visNewVisDialog__type"
-                                  data-test-subj="visType-visWithSearch"
-                                  data-vis-stage="production"
-                                  type="button"
-                                >
-                                  <div
-                                    class="euiKeyPadMenuItem__inner"
-                                  >
-                                    <div
-                                      class="euiKeyPadMenuItem__icon"
-                                    >
-                                      <svg
-                                        aria-hidden="true"
-                                        class="euiIcon euiIcon--large euiIcon--secondary"
-                                        focusable="false"
-                                        height="16"
-                                        viewBox="0 0 16 16"
-                                        width="16"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      />
-                                    </div>
-                                    <p
-                                      class="euiKeyPadMenuItem__label"
-                                    >
-                                      <span
-                                        data-test-subj="visTypeTitle"
-                                      >
-                                        Vis with search
-                                      </span>
-                                    </p>
-                                  </div>
-                                </button>
-                                <button
-                                  aria-describedby="visTypeDescription-vis"
-                                  class="euiKeyPadMenuItem visNewVisDialog__type"
-                                  data-test-subj="visType-vis"
-                                  data-vis-stage="production"
-                                  disabled=""
-                                  type="button"
-                                >
-                                  <div
-                                    class="euiKeyPadMenuItem__inner"
-                                  >
-                                    <div
-                                      class="euiKeyPadMenuItem__icon"
-                                    >
-                                      <svg
-                                        aria-hidden="true"
-                                        class="euiIcon euiIcon--large euiIcon--secondary"
-                                        focusable="false"
-                                        height="16"
-                                        viewBox="0 0 16 16"
-                                        width="16"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      />
-                                    </div>
-                                    <p
-                                      class="euiKeyPadMenuItem__label"
-                                    >
-                                      <span
-                                        data-test-subj="visTypeTitle"
-                                      >
-                                        Vis Type 1
-                                      </span>
-                                    </p>
-                                  </div>
-                                </button>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                        <div
-                          class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
-                        >
-                          <h2
-                            class="euiTitle euiTitle--small"
-                          >
-                            Select a visualization type
-                          </h2>
-                          <div
-                            class="euiSpacer euiSpacer--m"
-                          />
-                          <div
-                            class="euiText euiText--medium"
-                          >
-                            <p>
-                              Start creating your visualization by selecting a type for that visualization.
-                            </p>
-                          </div>
-                        </div>
+                        Select a visualization type
+                      </h2>
+                      <div
+                        class="euiSpacer euiSpacer--m"
+                      />
+                      <div
+                        class="euiText euiText--medium"
+                      >
+                        <p>
+                          Start creating your visualization by selecting a type for that visualization.
+                        </p>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
+          </div>
+        </div>
+      }
+    >
+      <EuiModal
+        className="visNewVisDialog"
+        maxWidth="100vw"
+        onClose={[Function]}
+      >
+        <FocusTrap
+          _createFocusTrap={[Function]}
+          active={true}
+          focusTrapOptions={
+            Object {
+              "fallbackFocus": [Function],
+              "initialFocus": undefined,
+            }
           }
+          paused={false}
+          tag="div"
         >
-          <EuiModal
-            className="visNewVisDialog"
-            maxWidth="100vw"
-            onClose={[Function]}
-          >
-            <FocusTrap
-              _createFocusTrap={[Function]}
-              active={true}
-              focusTrapOptions={
+          <div>
+            <div
+              className="euiModal visNewVisDialog"
+              onKeyDown={[Function]}
+              style={
                 Object {
-                  "fallbackFocus": [Function],
-                  "initialFocus": undefined,
+                  "maxWidth": "100vw",
                 }
               }
-              paused={false}
-              tag="div"
+              tabIndex={0}
             >
-              <div>
-                <div
-                  className="euiModal visNewVisDialog"
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "maxWidth": "100vw",
-                    }
-                  }
-                  tabIndex={0}
+              <EuiButtonIcon
+                aria-label="Closes this modal window"
+                className="euiModal__closeIcon"
+                color="text"
+                iconSize="m"
+                iconType="cross"
+                onClick={[Function]}
+                type="button"
+              >
+                <button
+                  aria-label="Closes this modal window"
+                  className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <EuiButtonIcon
-                    aria-label="Closes this modal window"
-                    className="euiModal__closeIcon"
-                    color="text"
-                    iconSize="m"
-                    iconType="cross"
-                    onClick={[Function]}
-                    type="button"
+                  <EuiIcon
+                    aria-hidden="true"
+                    className="euiButtonIcon__icon"
+                    size="m"
+                    type="cross"
                   >
-                    <button
-                      aria-label="Closes this modal window"
-                      className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                      onClick={[Function]}
-                      type="button"
+                    <cross
+                      aria-hidden="true"
+                      className="euiIcon euiIcon--medium euiButtonIcon__icon"
+                      focusable="false"
+                      height="16"
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <EuiIcon
+                      <svg
                         aria-hidden="true"
-                        className="euiButtonIcon__icon"
-                        size="m"
-                        type="cross"
+                        className="euiIcon euiIcon--medium euiButtonIcon__icon"
+                        focusable="false"
+                        height="16"
+                        style={null}
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
                       >
-                        <cross
-                          aria-hidden="true"
-                          className="euiIcon euiIcon--medium euiButtonIcon__icon"
-                          focusable="false"
-                          height="16"
-                          style={null}
-                          viewBox="0 0 16 16"
-                          width="16"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            className="euiIcon euiIcon--medium euiButtonIcon__icon"
-                            focusable="false"
-                            height="16"
-                            style={null}
-                            viewBox="0 0 16 16"
-                            width="16"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
-                            />
-                          </svg>
-                        </cross>
-                      </EuiIcon>
-                    </button>
-                  </EuiButtonIcon>
-                  <div
-                    className="euiModal__flex"
-                  >
-                    <TypeSelection
-                      onVisTypeSelected={[Function]}
-                      visTypesRegistry={
-                        Array [
-                          Object {
-                            "hidden": false,
-                            "name": "vis",
-                            "requestHandler": "none",
-                            "requiresSearch": false,
-                            "responseHandler": "none",
-                            "stage": "production",
-                            "title": "Vis Type 1",
-                            "visualization": [Function],
-                          },
-                          Object {
-                            "hidden": false,
-                            "name": "visExp",
-                            "requestHandler": "none",
-                            "requiresSearch": false,
-                            "responseHandler": "none",
-                            "stage": "experimental",
-                            "title": "Experimental Vis",
-                            "visualization": [Function],
-                          },
-                          Object {
-                            "hidden": false,
-                            "name": "visWithSearch",
-                            "requestHandler": "none",
-                            "requiresSearch": false,
-                            "responseHandler": "none",
-                            "stage": "production",
-                            "title": "Vis with search",
-                            "visualization": [Function],
-                          },
-                        ]
-                      }
+                        <path
+                          d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
+                        />
+                      </svg>
+                    </cross>
+                  </EuiIcon>
+                </button>
+              </EuiButtonIcon>
+              <div
+                className="euiModal__flex"
+              >
+                <TypeSelection
+                  onVisTypeSelected={[Function]}
+                  visTypesRegistry={
+                    Array [
+                      Object {
+                        "hidden": false,
+                        "name": "vis",
+                        "requestHandler": "none",
+                        "requiresSearch": false,
+                        "responseHandler": "none",
+                        "stage": "production",
+                        "title": "Vis Type 1",
+                        "visualization": [Function],
+                      },
+                      Object {
+                        "hidden": false,
+                        "name": "visExp",
+                        "requestHandler": "none",
+                        "requiresSearch": false,
+                        "responseHandler": "none",
+                        "stage": "experimental",
+                        "title": "Experimental Vis",
+                        "visualization": [Function],
+                      },
+                      Object {
+                        "hidden": false,
+                        "name": "visWithSearch",
+                        "requestHandler": "none",
+                        "requiresSearch": false,
+                        "responseHandler": "none",
+                        "stage": "production",
+                        "title": "Vis with search",
+                        "visualization": [Function],
+                      },
+                    ]
+                  }
+                >
+                  <EuiModalHeader>
+                    <div
+                      className="euiModalHeader"
                     >
-                      <EuiModalHeader>
+                      <EuiModalHeaderTitle>
                         <div
-                          className="euiModalHeader"
+                          className="euiModalHeader__title"
                         >
-                          <EuiModalHeaderTitle>
-                            <div
-                              className="euiModalHeader__title"
-                            >
-                              <FormattedMessage
-                                defaultMessage="New Visualization"
-                                id="kbn.visualize.newVisWizard.title"
-                                values={Object {}}
-                              >
-                                New Visualization
-                              </FormattedMessage>
-                            </div>
-                          </EuiModalHeaderTitle>
+                          <FormattedMessage
+                            defaultMessage="New Visualization"
+                            id="kbn.visualize.newVisWizard.title"
+                            values={Object {}}
+                          >
+                            New Visualization
+                          </FormattedMessage>
                         </div>
-                      </EuiModalHeader>
+                      </EuiModalHeaderTitle>
+                    </div>
+                  </EuiModalHeader>
+                  <div
+                    className="visNewVisDialog__body"
+                  >
+                    <EuiFlexGroup
+                      alignItems="stretch"
+                      component="div"
+                      direction="row"
+                      gutterSize="xl"
+                      justifyContent="flexStart"
+                      responsive={true}
+                      wrap={false}
+                    >
                       <div
-                        className="visNewVisDialog__body"
+                        className="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
                       >
-                        <EuiFlexGroup
-                          alignItems="stretch"
+                        <EuiFlexItem
                           component="div"
-                          direction="row"
-                          gutterSize="xl"
-                          justifyContent="flexStart"
-                          responsive={true}
-                          wrap={false}
+                          grow={true}
                         >
                           <div
-                            className="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                            className="euiFlexItem"
                           >
-                            <EuiFlexItem
+                            <EuiFlexGroup
+                              alignItems="stretch"
+                              className="visNewVisDialog__list"
                               component="div"
-                              grow={true}
+                              direction="column"
+                              gutterSize="none"
+                              justifyContent="flexStart"
+                              responsive={false}
+                              wrap={false}
                             >
                               <div
-                                className="euiFlexItem"
+                                className="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
                               >
-                                <EuiFlexGroup
-                                  alignItems="stretch"
-                                  className="visNewVisDialog__list"
+                                <EuiFlexItem
+                                  className="visNewVisDialog__searchWrapper"
                                   component="div"
-                                  direction="column"
-                                  gutterSize="none"
-                                  justifyContent="flexStart"
-                                  responsive={false}
-                                  wrap={false}
+                                  grow={false}
                                 >
                                   <div
-                                    className="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
+                                    className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
                                   >
-                                    <EuiFlexItem
-                                      className="visNewVisDialog__searchWrapper"
-                                      component="div"
-                                      grow={false}
+                                    <EuiFieldSearch
+                                      aria-label="Filter for a visualization type"
+                                      compressed={false}
+                                      data-test-subj="filterVisType"
+                                      fullWidth={true}
+                                      incremental={false}
+                                      isLoading={false}
+                                      onChange={[Function]}
+                                      placeholder="Filter"
+                                      value="with"
                                     >
-                                      <div
-                                        className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
+                                      <EuiFormControlLayout
+                                        compressed={false}
+                                        fullWidth={true}
+                                        icon="search"
+                                        isLoading={false}
                                       >
-                                        <EuiFieldSearch
-                                          aria-label="Filter for a visualization type"
-                                          compressed={false}
-                                          data-test-subj="filterVisType"
-                                          fullWidth={true}
-                                          incremental={false}
-                                          isLoading={false}
-                                          onChange={[Function]}
-                                          placeholder="Filter"
-                                          value="with"
+                                        <div
+                                          className="euiFormControlLayout euiFormControlLayout--fullWidth"
                                         >
-                                          <EuiFormControlLayout
-                                            compressed={false}
-                                            fullWidth={true}
-                                            icon="search"
-                                            isLoading={false}
+                                          <div
+                                            className="euiFormControlLayout__childrenWrapper"
                                           >
-                                            <div
-                                              className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                            <EuiValidatableControl>
+                                              <input
+                                                aria-label="Filter for a visualization type"
+                                                className="euiFieldSearch euiFieldSearch--fullWidth"
+                                                data-test-subj="filterVisType"
+                                                onChange={[Function]}
+                                                onKeyUp={[Function]}
+                                                placeholder="Filter"
+                                                type="search"
+                                                value="with"
+                                              />
+                                            </EuiValidatableControl>
+                                            <EuiFormControlLayoutIcons
+                                              icon="search"
+                                              isLoading={false}
                                             >
                                               <div
-                                                className="euiFormControlLayout__childrenWrapper"
+                                                className="euiFormControlLayoutIcons"
                                               >
-                                                <EuiValidatableControl>
-                                                  <input
-                                                    aria-label="Filter for a visualization type"
-                                                    className="euiFieldSearch euiFieldSearch--fullWidth"
-                                                    data-test-subj="filterVisType"
-                                                    onChange={[Function]}
-                                                    onKeyUp={[Function]}
-                                                    placeholder="Filter"
-                                                    type="search"
-                                                    value="with"
-                                                  />
-                                                </EuiValidatableControl>
-                                                <EuiFormControlLayoutIcons
-                                                  icon="search"
-                                                  isLoading={false}
+                                                <EuiFormControlLayoutCustomIcon
+                                                  type="search"
                                                 >
-                                                  <div
-                                                    className="euiFormControlLayoutIcons"
+                                                  <span
+                                                    className="euiFormControlLayoutCustomIcon"
                                                   >
-                                                    <EuiFormControlLayoutCustomIcon
+                                                    <EuiIcon
+                                                      aria-hidden="true"
+                                                      className="euiFormControlLayoutCustomIcon__icon"
+                                                      size="m"
                                                       type="search"
                                                     >
-                                                      <span
-                                                        className="euiFormControlLayoutCustomIcon"
+                                                      <search
+                                                        aria-hidden="true"
+                                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                        focusable="false"
+                                                        height="16"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width="16"
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                        xmlnsXlink="http://www.w3.org/1999/xlink"
                                                       >
-                                                        <EuiIcon
+                                                        <svg
                                                           aria-hidden="true"
-                                                          className="euiFormControlLayoutCustomIcon__icon"
-                                                          size="m"
-                                                          type="search"
+                                                          className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                          focusable="false"
+                                                          height="16"
+                                                          style={null}
+                                                          viewBox="0 0 16 16"
+                                                          width="16"
+                                                          xmlns="http://www.w3.org/2000/svg"
+                                                          xmlnsXlink="http://www.w3.org/1999/xlink"
                                                         >
-                                                          <search
-                                                            aria-hidden="true"
-                                                            className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                                            focusable="false"
-                                                            height="16"
-                                                            style={null}
-                                                            viewBox="0 0 16 16"
-                                                            width="16"
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                            xmlnsXlink="http://www.w3.org/1999/xlink"
-                                                          >
-                                                            <svg
-                                                              aria-hidden="true"
-                                                              className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                                              focusable="false"
-                                                              height="16"
-                                                              style={null}
-                                                              viewBox="0 0 16 16"
-                                                              width="16"
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                              xmlnsXlink="http://www.w3.org/1999/xlink"
-                                                            >
-                                                              <defs>
-                                                                <path
-                                                                  d="M11.271 11.978l3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738z"
-                                                                  id="search-a"
-                                                                />
-                                                              </defs>
-                                                              <use
-                                                                xlinkHref="#search-a"
-                                                              />
-                                                            </svg>
-                                                          </search>
-                                                        </EuiIcon>
-                                                      </span>
-                                                    </EuiFormControlLayoutCustomIcon>
-                                                  </div>
-                                                </EuiFormControlLayoutIcons>
+                                                          <defs>
+                                                            <path
+                                                              d="M11.271 11.978l3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738z"
+                                                              id="search-a"
+                                                            />
+                                                          </defs>
+                                                          <use
+                                                            xlinkHref="#search-a"
+                                                          />
+                                                        </svg>
+                                                      </search>
+                                                    </EuiIcon>
+                                                  </span>
+                                                </EuiFormControlLayoutCustomIcon>
                                               </div>
-                                            </div>
-                                          </EuiFormControlLayout>
-                                        </EuiFieldSearch>
-                                      </div>
-                                    </EuiFlexItem>
-                                    <EuiFlexItem
-                                      className="visNewVisDialog__typesWrapper"
-                                      component="div"
-                                      grow={1}
-                                    >
-                                      <div
-                                        className="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
+                                            </EuiFormControlLayoutIcons>
+                                          </div>
+                                        </div>
+                                      </EuiFormControlLayout>
+                                    </EuiFieldSearch>
+                                  </div>
+                                </EuiFlexItem>
+                                <EuiFlexItem
+                                  className="visNewVisDialog__typesWrapper"
+                                  component="div"
+                                  grow={1}
+                                >
+                                  <div
+                                    className="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
+                                  >
+                                    <EuiScreenReaderOnly>
+                                      <span
+                                        aria-live="polite"
+                                        className="euiScreenReaderOnly"
                                       >
-                                        <EuiScreenReaderOnly>
-                                          <span
-                                            aria-live="polite"
-                                            className="euiScreenReaderOnly"
-                                          >
-                                            <FormattedMessage
-                                              defaultMessage="{resultCount} {resultCount, plural,
+                                        <FormattedMessage
+                                          defaultMessage="{resultCount} {resultCount, plural,
                             one {type}
                             other {types}
                           } found"
-                                              id="kbn.visualize.newVisWizard.resultsFound"
-                                              values={
-                                                Object {
-                                                  "resultCount": 1,
-                                                }
-                                              }
-                                            >
-                                              1 type found
-                                            </FormattedMessage>
-                                          </span>
-                                        </EuiScreenReaderOnly>
-                                        <EuiKeyPadMenu
-                                          className="visNewVisDialog__types"
-                                          data-test-subj="visNewDialogTypes"
+                                          id="kbn.visualize.newVisWizard.resultsFound"
+                                          values={
+                                            Object {
+                                              "resultCount": 1,
+                                            }
+                                          }
                                         >
-                                          <div
-                                            className="euiKeyPadMenu visNewVisDialog__types"
-                                            data-test-subj="visNewDialogTypes"
-                                            role="menu"
+                                          1 type found
+                                        </FormattedMessage>
+                                      </span>
+                                    </EuiScreenReaderOnly>
+                                    <EuiKeyPadMenu
+                                      className="visNewVisDialog__types"
+                                      data-test-subj="visNewDialogTypes"
+                                    >
+                                      <div
+                                        className="euiKeyPadMenu visNewVisDialog__types"
+                                        data-test-subj="visNewDialogTypes"
+                                        role="menu"
+                                      >
+                                        <EuiKeyPadMenuItemButton
+                                          aria-describedby="visTypeDescription-visWithSearch"
+                                          className="visNewVisDialog__type"
+                                          data-test-subj="visType-visWithSearch"
+                                          data-vis-stage="production"
+                                          disabled={false}
+                                          key="visWithSearch"
+                                          label={
+                                            <span
+                                              data-test-subj="visTypeTitle"
+                                            >
+                                              Vis with search
+                                            </span>
+                                          }
+                                          onBlur={[Function]}
+                                          onClick={[Function]}
+                                          onFocus={[Function]}
+                                          onMouseEnter={[Function]}
+                                          onMouseLeave={[Function]}
+                                        >
+                                          <button
+                                            aria-describedby="visTypeDescription-visWithSearch"
+                                            className="euiKeyPadMenuItem visNewVisDialog__type"
+                                            data-test-subj="visType-visWithSearch"
+                                            data-vis-stage="production"
+                                            disabled={false}
+                                            onBlur={[Function]}
+                                            onClick={[Function]}
+                                            onFocus={[Function]}
+                                            onMouseEnter={[Function]}
+                                            onMouseLeave={[Function]}
+                                            type="button"
                                           >
-                                            <EuiKeyPadMenuItemButton
-                                              aria-describedby="visTypeDescription-visWithSearch"
-                                              className="visNewVisDialog__type"
-                                              data-test-subj="visType-visWithSearch"
-                                              data-vis-stage="production"
-                                              disabled={false}
-                                              key="visWithSearch"
-                                              label={
+                                            <div
+                                              className="euiKeyPadMenuItem__inner"
+                                            >
+                                              <div
+                                                className="euiKeyPadMenuItem__icon"
+                                              >
+                                                <Component
+                                                  visType={
+                                                    Object {
+                                                      "hidden": false,
+                                                      "highlighted": true,
+                                                      "name": "visWithSearch",
+                                                      "requestHandler": "none",
+                                                      "requiresSearch": false,
+                                                      "responseHandler": "none",
+                                                      "stage": "production",
+                                                      "title": "Vis with search",
+                                                      "visualization": [Function],
+                                                    }
+                                                  }
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    color="secondary"
+                                                    size="l"
+                                                    type="empty"
+                                                  >
+                                                    <empty
+                                                      aria-hidden="true"
+                                                      className="euiIcon euiIcon--large euiIcon--secondary"
+                                                      focusable="false"
+                                                      height="16"
+                                                      style={null}
+                                                      viewBox="0 0 16 16"
+                                                      width="16"
+                                                      xmlns="http://www.w3.org/2000/svg"
+                                                    >
+                                                      <svg
+                                                        aria-hidden="true"
+                                                        className="euiIcon euiIcon--large euiIcon--secondary"
+                                                        focusable="false"
+                                                        height="16"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width="16"
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </empty>
+                                                  </EuiIcon>
+                                                </Component>
+                                              </div>
+                                              <p
+                                                className="euiKeyPadMenuItem__label"
+                                              >
                                                 <span
                                                   data-test-subj="visTypeTitle"
                                                 >
                                                   Vis with search
                                                 </span>
-                                              }
-                                              onBlur={[Function]}
-                                              onClick={[Function]}
-                                              onFocus={[Function]}
-                                              onMouseEnter={[Function]}
-                                              onMouseLeave={[Function]}
+                                              </p>
+                                            </div>
+                                          </button>
+                                        </EuiKeyPadMenuItemButton>
+                                        <EuiKeyPadMenuItemButton
+                                          aria-describedby="visTypeDescription-vis"
+                                          className="visNewVisDialog__type"
+                                          data-test-subj="visType-vis"
+                                          data-vis-stage="production"
+                                          disabled={true}
+                                          key="vis"
+                                          label={
+                                            <span
+                                              data-test-subj="visTypeTitle"
                                             >
-                                              <button
-                                                aria-describedby="visTypeDescription-visWithSearch"
-                                                className="euiKeyPadMenuItem visNewVisDialog__type"
-                                                data-test-subj="visType-visWithSearch"
-                                                data-vis-stage="production"
-                                                disabled={false}
-                                                onBlur={[Function]}
-                                                onClick={[Function]}
-                                                onFocus={[Function]}
-                                                onMouseEnter={[Function]}
-                                                onMouseLeave={[Function]}
-                                                type="button"
+                                              Vis Type 1
+                                            </span>
+                                          }
+                                          onBlur={[Function]}
+                                          onClick={[Function]}
+                                          onFocus={[Function]}
+                                          onMouseEnter={[Function]}
+                                          onMouseLeave={[Function]}
+                                        >
+                                          <button
+                                            aria-describedby="visTypeDescription-vis"
+                                            className="euiKeyPadMenuItem visNewVisDialog__type"
+                                            data-test-subj="visType-vis"
+                                            data-vis-stage="production"
+                                            disabled={true}
+                                            onBlur={[Function]}
+                                            onClick={[Function]}
+                                            onFocus={[Function]}
+                                            onMouseEnter={[Function]}
+                                            onMouseLeave={[Function]}
+                                            type="button"
+                                          >
+                                            <div
+                                              className="euiKeyPadMenuItem__inner"
+                                            >
+                                              <div
+                                                className="euiKeyPadMenuItem__icon"
                                               >
-                                                <div
-                                                  className="euiKeyPadMenuItem__inner"
+                                                <Component
+                                                  visType={
+                                                    Object {
+                                                      "hidden": false,
+                                                      "highlighted": false,
+                                                      "name": "vis",
+                                                      "requestHandler": "none",
+                                                      "requiresSearch": false,
+                                                      "responseHandler": "none",
+                                                      "stage": "production",
+                                                      "title": "Vis Type 1",
+                                                      "visualization": [Function],
+                                                    }
+                                                  }
                                                 >
-                                                  <div
-                                                    className="euiKeyPadMenuItem__icon"
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    color="secondary"
+                                                    size="l"
+                                                    type="empty"
                                                   >
-                                                    <Component
-                                                      visType={
-                                                        Object {
-                                                          "hidden": false,
-                                                          "highlighted": true,
-                                                          "name": "visWithSearch",
-                                                          "requestHandler": "none",
-                                                          "requiresSearch": false,
-                                                          "responseHandler": "none",
-                                                          "stage": "production",
-                                                          "title": "Vis with search",
-                                                          "visualization": [Function],
-                                                        }
-                                                      }
+                                                    <empty
+                                                      aria-hidden="true"
+                                                      className="euiIcon euiIcon--large euiIcon--secondary"
+                                                      focusable="false"
+                                                      height="16"
+                                                      style={null}
+                                                      viewBox="0 0 16 16"
+                                                      width="16"
+                                                      xmlns="http://www.w3.org/2000/svg"
                                                     >
-                                                      <EuiIcon
+                                                      <svg
                                                         aria-hidden="true"
-                                                        color="secondary"
-                                                        size="l"
-                                                        type="empty"
-                                                      >
-                                                        <empty
-                                                          aria-hidden="true"
-                                                          className="euiIcon euiIcon--large euiIcon--secondary"
-                                                          focusable="false"
-                                                          height="16"
-                                                          style={null}
-                                                          viewBox="0 0 16 16"
-                                                          width="16"
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden="true"
-                                                            className="euiIcon euiIcon--large euiIcon--secondary"
-                                                            focusable="false"
-                                                            height="16"
-                                                            style={null}
-                                                            viewBox="0 0 16 16"
-                                                            width="16"
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          />
-                                                        </empty>
-                                                      </EuiIcon>
-                                                    </Component>
-                                                  </div>
-                                                  <p
-                                                    className="euiKeyPadMenuItem__label"
-                                                  >
-                                                    <span
-                                                      data-test-subj="visTypeTitle"
-                                                    >
-                                                      Vis with search
-                                                    </span>
-                                                  </p>
-                                                </div>
-                                              </button>
-                                            </EuiKeyPadMenuItemButton>
-                                            <EuiKeyPadMenuItemButton
-                                              aria-describedby="visTypeDescription-vis"
-                                              className="visNewVisDialog__type"
-                                              data-test-subj="visType-vis"
-                                              data-vis-stage="production"
-                                              disabled={true}
-                                              key="vis"
-                                              label={
+                                                        className="euiIcon euiIcon--large euiIcon--secondary"
+                                                        focusable="false"
+                                                        height="16"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width="16"
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </empty>
+                                                  </EuiIcon>
+                                                </Component>
+                                              </div>
+                                              <p
+                                                className="euiKeyPadMenuItem__label"
+                                              >
                                                 <span
                                                   data-test-subj="visTypeTitle"
                                                 >
                                                   Vis Type 1
                                                 </span>
-                                              }
-                                              onBlur={[Function]}
-                                              onClick={[Function]}
-                                              onFocus={[Function]}
-                                              onMouseEnter={[Function]}
-                                              onMouseLeave={[Function]}
-                                            >
-                                              <button
-                                                aria-describedby="visTypeDescription-vis"
-                                                className="euiKeyPadMenuItem visNewVisDialog__type"
-                                                data-test-subj="visType-vis"
-                                                data-vis-stage="production"
-                                                disabled={true}
-                                                onBlur={[Function]}
-                                                onClick={[Function]}
-                                                onFocus={[Function]}
-                                                onMouseEnter={[Function]}
-                                                onMouseLeave={[Function]}
-                                                type="button"
-                                              >
-                                                <div
-                                                  className="euiKeyPadMenuItem__inner"
-                                                >
-                                                  <div
-                                                    className="euiKeyPadMenuItem__icon"
-                                                  >
-                                                    <Component
-                                                      visType={
-                                                        Object {
-                                                          "hidden": false,
-                                                          "highlighted": false,
-                                                          "name": "vis",
-                                                          "requestHandler": "none",
-                                                          "requiresSearch": false,
-                                                          "responseHandler": "none",
-                                                          "stage": "production",
-                                                          "title": "Vis Type 1",
-                                                          "visualization": [Function],
-                                                        }
-                                                      }
-                                                    >
-                                                      <EuiIcon
-                                                        aria-hidden="true"
-                                                        color="secondary"
-                                                        size="l"
-                                                        type="empty"
-                                                      >
-                                                        <empty
-                                                          aria-hidden="true"
-                                                          className="euiIcon euiIcon--large euiIcon--secondary"
-                                                          focusable="false"
-                                                          height="16"
-                                                          style={null}
-                                                          viewBox="0 0 16 16"
-                                                          width="16"
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden="true"
-                                                            className="euiIcon euiIcon--large euiIcon--secondary"
-                                                            focusable="false"
-                                                            height="16"
-                                                            style={null}
-                                                            viewBox="0 0 16 16"
-                                                            width="16"
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          />
-                                                        </empty>
-                                                      </EuiIcon>
-                                                    </Component>
-                                                  </div>
-                                                  <p
-                                                    className="euiKeyPadMenuItem__label"
-                                                  >
-                                                    <span
-                                                      data-test-subj="visTypeTitle"
-                                                    >
-                                                      Vis Type 1
-                                                    </span>
-                                                  </p>
-                                                </div>
-                                              </button>
-                                            </EuiKeyPadMenuItemButton>
-                                          </div>
-                                        </EuiKeyPadMenu>
+                                              </p>
+                                            </div>
+                                          </button>
+                                        </EuiKeyPadMenuItemButton>
                                       </div>
-                                    </EuiFlexItem>
+                                    </EuiKeyPadMenu>
                                   </div>
-                                </EuiFlexGroup>
+                                </EuiFlexItem>
                               </div>
-                            </EuiFlexItem>
-                            <EuiFlexItem
-                              className="visNewVisDialog__description"
-                              component="div"
-                              grow={false}
+                            </EuiFlexGroup>
+                          </div>
+                        </EuiFlexItem>
+                        <EuiFlexItem
+                          className="visNewVisDialog__description"
+                          component="div"
+                          grow={false}
+                        >
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
+                          >
+                            <EuiTitle
+                              size="s"
+                              textTransform="none"
+                            >
+                              <h2
+                                className="euiTitle euiTitle--small"
+                              >
+                                <FormattedMessage
+                                  defaultMessage="Select a visualization type"
+                                  id="kbn.visualize.newVisWizard.selectVisType"
+                                  values={Object {}}
+                                >
+                                  Select a visualization type
+                                </FormattedMessage>
+                              </h2>
+                            </EuiTitle>
+                            <EuiSpacer
+                              size="m"
                             >
                               <div
-                                className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
+                                className="euiSpacer euiSpacer--m"
+                              />
+                            </EuiSpacer>
+                            <Component>
+                              <EuiText
+                                grow={true}
+                                size="m"
                               >
-                                <EuiTitle
-                                  size="s"
-                                  textTransform="none"
+                                <div
+                                  className="euiText euiText--medium"
                                 >
-                                  <h2
-                                    className="euiTitle euiTitle--small"
-                                  >
+                                  <p>
                                     <FormattedMessage
-                                      defaultMessage="Select a visualization type"
-                                      id="kbn.visualize.newVisWizard.selectVisType"
+                                      defaultMessage="Start creating your visualization by selecting a type for that visualization."
+                                      id="kbn.visualize.newVisWizard.helpText"
                                       values={Object {}}
                                     >
-                                      Select a visualization type
+                                      Start creating your visualization by selecting a type for that visualization.
                                     </FormattedMessage>
-                                  </h2>
-                                </EuiTitle>
-                                <EuiSpacer
-                                  size="m"
-                                >
-                                  <div
-                                    className="euiSpacer euiSpacer--m"
-                                  />
-                                </EuiSpacer>
-                                <Component>
-                                  <EuiText
-                                    grow={true}
-                                    size="m"
-                                  >
-                                    <div
-                                      className="euiText euiText--medium"
-                                    >
-                                      <p>
-                                        <FormattedMessage
-                                          defaultMessage="Start creating your visualization by selecting a type for that visualization."
-                                          id="kbn.visualize.newVisWizard.helpText"
-                                          values={Object {}}
-                                        >
-                                          Start creating your visualization by selecting a type for that visualization.
-                                        </FormattedMessage>
-                                      </p>
-                                    </div>
-                                  </EuiText>
-                                </Component>
-                              </div>
-                            </EuiFlexItem>
+                                  </p>
+                                </div>
+                              </EuiText>
+                            </Component>
                           </div>
-                        </EuiFlexGroup>
+                        </EuiFlexItem>
                       </div>
-                    </TypeSelection>
+                    </EuiFlexGroup>
                   </div>
-                </div>
+                </TypeSelection>
               </div>
-            </FocusTrap>
-          </EuiModal>
-        </Portal>
-      </EuiOverlayMask>
-    </NewVisModal>
-  </IntlProvider>
-</I18nProvider>
+            </div>
+          </div>
+        </FocusTrap>
+      </EuiModal>
+    </Portal>
+  </EuiOverlayMask>
+</NewVisModal>
 `;
 
 exports[`NewVisModal should render as expected 1`] = `
-<I18nProvider
+<NewVisModal
+  editorParams={Array []}
   intl={
     Object {
       "defaultFormats": Object {},
@@ -1133,909 +1046,820 @@ exports[`NewVisModal should render as expected 1`] = `
       "timeZone": null,
     }
   }
->
-  <IntlProvider
-    defaultLocale="en"
-    formats={
+  isOpen={true}
+  onClose={[Function]}
+  visTypesRegistry={
+    Array [
       Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      }
-    }
-    locale="en"
-    messages={Object {}}
-    textComponent={Symbol(react.fragment)}
-  >
-    <NewVisModal
-      editorParams={Array []}
-      isOpen={true}
-      onClose={[Function]}
-      visTypesRegistry={
-        Array [
-          Object {
-            "hidden": false,
-            "name": "vis",
-            "requestHandler": "none",
-            "requiresSearch": false,
-            "responseHandler": "none",
-            "stage": "production",
-            "title": "Vis Type 1",
-            "visualization": [Function],
-          },
-          Object {
-            "hidden": false,
-            "name": "visExp",
-            "requestHandler": "none",
-            "requiresSearch": false,
-            "responseHandler": "none",
-            "stage": "experimental",
-            "title": "Experimental Vis",
-            "visualization": [Function],
-          },
-          Object {
-            "hidden": false,
-            "name": "visWithSearch",
-            "requestHandler": "none",
-            "requiresSearch": false,
-            "responseHandler": "none",
-            "stage": "production",
-            "title": "Vis with search",
-            "visualization": [Function],
-          },
-        ]
-      }
-    >
-      <EuiOverlayMask>
-        <Portal
-          containerInfo={
+        "hidden": false,
+        "name": "vis",
+        "requestHandler": "none",
+        "requiresSearch": false,
+        "responseHandler": "none",
+        "stage": "production",
+        "title": "Vis Type 1",
+        "visualization": [Function],
+      },
+      Object {
+        "hidden": false,
+        "name": "visExp",
+        "requestHandler": "none",
+        "requiresSearch": false,
+        "responseHandler": "none",
+        "stage": "experimental",
+        "title": "Experimental Vis",
+        "visualization": [Function],
+      },
+      Object {
+        "hidden": false,
+        "name": "visWithSearch",
+        "requestHandler": "none",
+        "requiresSearch": false,
+        "responseHandler": "none",
+        "stage": "production",
+        "title": "Vis with search",
+        "visualization": [Function],
+      },
+    ]
+  }
+>
+  <EuiOverlayMask>
+    <Portal
+      containerInfo={
+        <div
+          class="euiOverlayMask"
+        >
+          <div>
             <div
-              class="euiOverlayMask"
+              class="euiModal visNewVisDialog"
+              style="max-width: 100vw;"
+              tabindex="0"
             >
-              <div>
-                <div
-                  class="euiModal visNewVisDialog"
-                  style="max-width: 100vw;"
-                  tabindex="0"
+              <button
+                aria-label="Closes this modal window"
+                class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                type="button"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="euiIcon euiIcon--medium euiButtonIcon__icon"
+                  focusable="false"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
+                  />
+                </svg>
+              </button>
+              <div
+                class="euiModal__flex"
+              >
+                <div
+                  class="euiModalHeader"
                 >
-                  <button
-                    aria-label="Closes this modal window"
-                    class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="euiIcon euiIcon--medium euiButtonIcon__icon"
-                      focusable="false"
-                      height="16"
-                      viewBox="0 0 16 16"
-                      width="16"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
-                      />
-                    </svg>
-                  </button>
                   <div
-                    class="euiModal__flex"
+                    class="euiModalHeader__title"
+                  >
+                    New Visualization
+                  </div>
+                </div>
+                <div
+                  class="visNewVisDialog__body"
+                >
+                  <div
+                    class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
                   >
                     <div
-                      class="euiModalHeader"
+                      class="euiFlexItem"
                     >
                       <div
-                        class="euiModalHeader__title"
+                        class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
                       >
-                        New Visualization
+                        <div
+                          class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
+                        >
+                          <div
+                            class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                          >
+                            <div
+                              class="euiFormControlLayout__childrenWrapper"
+                            >
+                              <input
+                                aria-label="Filter for a visualization type"
+                                class="euiFieldSearch euiFieldSearch--fullWidth"
+                                data-test-subj="filterVisType"
+                                placeholder="Filter"
+                                type="search"
+                                value=""
+                              />
+                              <div
+                                class="euiFormControlLayoutIcons"
+                              >
+                                <span
+                                  class="euiFormControlLayoutCustomIcon"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    height="16"
+                                    viewBox="0 0 16 16"
+                                    width="16"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                                  >
+                                    <defs>
+                                      <path
+                                        d="M11.271 11.978l3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738z"
+                                        id="search-a"
+                                      />
+                                    </defs>
+                                    <use
+                                      xlink:href="#search-a"
+                                    />
+                                  </svg>
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
+                        >
+                          <span
+                            aria-live="polite"
+                            class="euiScreenReaderOnly"
+                          />
+                          <div
+                            class="euiKeyPadMenu visNewVisDialog__types"
+                            data-test-subj="visNewDialogTypes"
+                            role="menu"
+                          >
+                            <button
+                              aria-describedby="visTypeDescription-vis"
+                              class="euiKeyPadMenuItem visNewVisDialog__type"
+                              data-test-subj="visType-vis"
+                              data-vis-stage="production"
+                              type="button"
+                            >
+                              <div
+                                class="euiKeyPadMenuItem__inner"
+                              >
+                                <div
+                                  class="euiKeyPadMenuItem__icon"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    class="euiIcon euiIcon--large euiIcon--secondary"
+                                    focusable="false"
+                                    height="16"
+                                    viewBox="0 0 16 16"
+                                    width="16"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </div>
+                                <p
+                                  class="euiKeyPadMenuItem__label"
+                                >
+                                  <span
+                                    data-test-subj="visTypeTitle"
+                                  >
+                                    Vis Type 1
+                                  </span>
+                                </p>
+                              </div>
+                            </button>
+                            <button
+                              aria-describedby="visTypeDescription-visWithSearch"
+                              class="euiKeyPadMenuItem visNewVisDialog__type"
+                              data-test-subj="visType-visWithSearch"
+                              data-vis-stage="production"
+                              type="button"
+                            >
+                              <div
+                                class="euiKeyPadMenuItem__inner"
+                              >
+                                <div
+                                  class="euiKeyPadMenuItem__icon"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    class="euiIcon euiIcon--large euiIcon--secondary"
+                                    focusable="false"
+                                    height="16"
+                                    viewBox="0 0 16 16"
+                                    width="16"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </div>
+                                <p
+                                  class="euiKeyPadMenuItem__label"
+                                >
+                                  <span
+                                    data-test-subj="visTypeTitle"
+                                  >
+                                    Vis with search
+                                  </span>
+                                </p>
+                              </div>
+                            </button>
+                          </div>
+                        </div>
                       </div>
                     </div>
                     <div
-                      class="visNewVisDialog__body"
+                      class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
                     >
-                      <div
-                        class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                      <h2
+                        class="euiTitle euiTitle--small"
                       >
-                        <div
-                          class="euiFlexItem"
-                        >
-                          <div
-                            class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
-                          >
-                            <div
-                              class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
-                            >
-                              <div
-                                class="euiFormControlLayout euiFormControlLayout--fullWidth"
-                              >
-                                <div
-                                  class="euiFormControlLayout__childrenWrapper"
-                                >
-                                  <input
-                                    aria-label="Filter for a visualization type"
-                                    class="euiFieldSearch euiFieldSearch--fullWidth"
-                                    data-test-subj="filterVisType"
-                                    placeholder="Filter"
-                                    type="search"
-                                    value=""
-                                  />
-                                  <div
-                                    class="euiFormControlLayoutIcons"
-                                  >
-                                    <span
-                                      class="euiFormControlLayoutCustomIcon"
-                                    >
-                                      <svg
-                                        aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                        focusable="false"
-                                        height="16"
-                                        viewBox="0 0 16 16"
-                                        width="16"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        xmlns:xlink="http://www.w3.org/1999/xlink"
-                                      >
-                                        <defs>
-                                          <path
-                                            d="M11.271 11.978l3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738z"
-                                            id="search-a"
-                                          />
-                                        </defs>
-                                        <use
-                                          xlink:href="#search-a"
-                                        />
-                                      </svg>
-                                    </span>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                            <div
-                              class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
-                            >
-                              <span
-                                aria-live="polite"
-                                class="euiScreenReaderOnly"
-                              />
-                              <div
-                                class="euiKeyPadMenu visNewVisDialog__types"
-                                data-test-subj="visNewDialogTypes"
-                                role="menu"
-                              >
-                                <button
-                                  aria-describedby="visTypeDescription-vis"
-                                  class="euiKeyPadMenuItem visNewVisDialog__type"
-                                  data-test-subj="visType-vis"
-                                  data-vis-stage="production"
-                                  type="button"
-                                >
-                                  <div
-                                    class="euiKeyPadMenuItem__inner"
-                                  >
-                                    <div
-                                      class="euiKeyPadMenuItem__icon"
-                                    >
-                                      <svg
-                                        aria-hidden="true"
-                                        class="euiIcon euiIcon--large euiIcon--secondary"
-                                        focusable="false"
-                                        height="16"
-                                        viewBox="0 0 16 16"
-                                        width="16"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      />
-                                    </div>
-                                    <p
-                                      class="euiKeyPadMenuItem__label"
-                                    >
-                                      <span
-                                        data-test-subj="visTypeTitle"
-                                      >
-                                        Vis Type 1
-                                      </span>
-                                    </p>
-                                  </div>
-                                </button>
-                                <button
-                                  aria-describedby="visTypeDescription-visWithSearch"
-                                  class="euiKeyPadMenuItem visNewVisDialog__type"
-                                  data-test-subj="visType-visWithSearch"
-                                  data-vis-stage="production"
-                                  type="button"
-                                >
-                                  <div
-                                    class="euiKeyPadMenuItem__inner"
-                                  >
-                                    <div
-                                      class="euiKeyPadMenuItem__icon"
-                                    >
-                                      <svg
-                                        aria-hidden="true"
-                                        class="euiIcon euiIcon--large euiIcon--secondary"
-                                        focusable="false"
-                                        height="16"
-                                        viewBox="0 0 16 16"
-                                        width="16"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      />
-                                    </div>
-                                    <p
-                                      class="euiKeyPadMenuItem__label"
-                                    >
-                                      <span
-                                        data-test-subj="visTypeTitle"
-                                      >
-                                        Vis with search
-                                      </span>
-                                    </p>
-                                  </div>
-                                </button>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                        <div
-                          class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
-                        >
-                          <h2
-                            class="euiTitle euiTitle--small"
-                          >
-                            Select a visualization type
-                          </h2>
-                          <div
-                            class="euiSpacer euiSpacer--m"
-                          />
-                          <div
-                            class="euiText euiText--medium"
-                          >
-                            <p>
-                              Start creating your visualization by selecting a type for that visualization.
-                            </p>
-                          </div>
-                        </div>
+                        Select a visualization type
+                      </h2>
+                      <div
+                        class="euiSpacer euiSpacer--m"
+                      />
+                      <div
+                        class="euiText euiText--medium"
+                      >
+                        <p>
+                          Start creating your visualization by selecting a type for that visualization.
+                        </p>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
+          </div>
+        </div>
+      }
+    >
+      <EuiModal
+        className="visNewVisDialog"
+        maxWidth="100vw"
+        onClose={[Function]}
+      >
+        <FocusTrap
+          _createFocusTrap={[Function]}
+          active={true}
+          focusTrapOptions={
+            Object {
+              "fallbackFocus": [Function],
+              "initialFocus": undefined,
+            }
           }
+          paused={false}
+          tag="div"
         >
-          <EuiModal
-            className="visNewVisDialog"
-            maxWidth="100vw"
-            onClose={[Function]}
-          >
-            <FocusTrap
-              _createFocusTrap={[Function]}
-              active={true}
-              focusTrapOptions={
+          <div>
+            <div
+              className="euiModal visNewVisDialog"
+              onKeyDown={[Function]}
+              style={
                 Object {
-                  "fallbackFocus": [Function],
-                  "initialFocus": undefined,
+                  "maxWidth": "100vw",
                 }
               }
-              paused={false}
-              tag="div"
+              tabIndex={0}
             >
-              <div>
-                <div
-                  className="euiModal visNewVisDialog"
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "maxWidth": "100vw",
-                    }
-                  }
-                  tabIndex={0}
+              <EuiButtonIcon
+                aria-label="Closes this modal window"
+                className="euiModal__closeIcon"
+                color="text"
+                iconSize="m"
+                iconType="cross"
+                onClick={[Function]}
+                type="button"
+              >
+                <button
+                  aria-label="Closes this modal window"
+                  className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <EuiButtonIcon
-                    aria-label="Closes this modal window"
-                    className="euiModal__closeIcon"
-                    color="text"
-                    iconSize="m"
-                    iconType="cross"
-                    onClick={[Function]}
-                    type="button"
+                  <EuiIcon
+                    aria-hidden="true"
+                    className="euiButtonIcon__icon"
+                    size="m"
+                    type="cross"
                   >
-                    <button
-                      aria-label="Closes this modal window"
-                      className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                      onClick={[Function]}
-                      type="button"
+                    <cross
+                      aria-hidden="true"
+                      className="euiIcon euiIcon--medium euiButtonIcon__icon"
+                      focusable="false"
+                      height="16"
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <EuiIcon
+                      <svg
                         aria-hidden="true"
-                        className="euiButtonIcon__icon"
-                        size="m"
-                        type="cross"
+                        className="euiIcon euiIcon--medium euiButtonIcon__icon"
+                        focusable="false"
+                        height="16"
+                        style={null}
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
                       >
-                        <cross
-                          aria-hidden="true"
-                          className="euiIcon euiIcon--medium euiButtonIcon__icon"
-                          focusable="false"
-                          height="16"
-                          style={null}
-                          viewBox="0 0 16 16"
-                          width="16"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            className="euiIcon euiIcon--medium euiButtonIcon__icon"
-                            focusable="false"
-                            height="16"
-                            style={null}
-                            viewBox="0 0 16 16"
-                            width="16"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
-                            />
-                          </svg>
-                        </cross>
-                      </EuiIcon>
-                    </button>
-                  </EuiButtonIcon>
-                  <div
-                    className="euiModal__flex"
-                  >
-                    <TypeSelection
-                      onVisTypeSelected={[Function]}
-                      visTypesRegistry={
-                        Array [
-                          Object {
-                            "hidden": false,
-                            "name": "vis",
-                            "requestHandler": "none",
-                            "requiresSearch": false,
-                            "responseHandler": "none",
-                            "stage": "production",
-                            "title": "Vis Type 1",
-                            "visualization": [Function],
-                          },
-                          Object {
-                            "hidden": false,
-                            "name": "visExp",
-                            "requestHandler": "none",
-                            "requiresSearch": false,
-                            "responseHandler": "none",
-                            "stage": "experimental",
-                            "title": "Experimental Vis",
-                            "visualization": [Function],
-                          },
-                          Object {
-                            "hidden": false,
-                            "name": "visWithSearch",
-                            "requestHandler": "none",
-                            "requiresSearch": false,
-                            "responseHandler": "none",
-                            "stage": "production",
-                            "title": "Vis with search",
-                            "visualization": [Function],
-                          },
-                        ]
-                      }
+                        <path
+                          d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
+                        />
+                      </svg>
+                    </cross>
+                  </EuiIcon>
+                </button>
+              </EuiButtonIcon>
+              <div
+                className="euiModal__flex"
+              >
+                <TypeSelection
+                  onVisTypeSelected={[Function]}
+                  visTypesRegistry={
+                    Array [
+                      Object {
+                        "hidden": false,
+                        "name": "vis",
+                        "requestHandler": "none",
+                        "requiresSearch": false,
+                        "responseHandler": "none",
+                        "stage": "production",
+                        "title": "Vis Type 1",
+                        "visualization": [Function],
+                      },
+                      Object {
+                        "hidden": false,
+                        "name": "visExp",
+                        "requestHandler": "none",
+                        "requiresSearch": false,
+                        "responseHandler": "none",
+                        "stage": "experimental",
+                        "title": "Experimental Vis",
+                        "visualization": [Function],
+                      },
+                      Object {
+                        "hidden": false,
+                        "name": "visWithSearch",
+                        "requestHandler": "none",
+                        "requiresSearch": false,
+                        "responseHandler": "none",
+                        "stage": "production",
+                        "title": "Vis with search",
+                        "visualization": [Function],
+                      },
+                    ]
+                  }
+                >
+                  <EuiModalHeader>
+                    <div
+                      className="euiModalHeader"
                     >
-                      <EuiModalHeader>
+                      <EuiModalHeaderTitle>
                         <div
-                          className="euiModalHeader"
+                          className="euiModalHeader__title"
                         >
-                          <EuiModalHeaderTitle>
-                            <div
-                              className="euiModalHeader__title"
-                            >
-                              <FormattedMessage
-                                defaultMessage="New Visualization"
-                                id="kbn.visualize.newVisWizard.title"
-                                values={Object {}}
-                              >
-                                New Visualization
-                              </FormattedMessage>
-                            </div>
-                          </EuiModalHeaderTitle>
+                          <FormattedMessage
+                            defaultMessage="New Visualization"
+                            id="kbn.visualize.newVisWizard.title"
+                            values={Object {}}
+                          >
+                            New Visualization
+                          </FormattedMessage>
                         </div>
-                      </EuiModalHeader>
+                      </EuiModalHeaderTitle>
+                    </div>
+                  </EuiModalHeader>
+                  <div
+                    className="visNewVisDialog__body"
+                  >
+                    <EuiFlexGroup
+                      alignItems="stretch"
+                      component="div"
+                      direction="row"
+                      gutterSize="xl"
+                      justifyContent="flexStart"
+                      responsive={true}
+                      wrap={false}
+                    >
                       <div
-                        className="visNewVisDialog__body"
+                        className="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
                       >
-                        <EuiFlexGroup
-                          alignItems="stretch"
+                        <EuiFlexItem
                           component="div"
-                          direction="row"
-                          gutterSize="xl"
-                          justifyContent="flexStart"
-                          responsive={true}
-                          wrap={false}
+                          grow={true}
                         >
                           <div
-                            className="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                            className="euiFlexItem"
                           >
-                            <EuiFlexItem
+                            <EuiFlexGroup
+                              alignItems="stretch"
+                              className="visNewVisDialog__list"
                               component="div"
-                              grow={true}
+                              direction="column"
+                              gutterSize="none"
+                              justifyContent="flexStart"
+                              responsive={false}
+                              wrap={false}
                             >
                               <div
-                                className="euiFlexItem"
+                                className="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
                               >
-                                <EuiFlexGroup
-                                  alignItems="stretch"
-                                  className="visNewVisDialog__list"
+                                <EuiFlexItem
+                                  className="visNewVisDialog__searchWrapper"
                                   component="div"
-                                  direction="column"
-                                  gutterSize="none"
-                                  justifyContent="flexStart"
-                                  responsive={false}
-                                  wrap={false}
+                                  grow={false}
                                 >
                                   <div
-                                    className="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
+                                    className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
                                   >
-                                    <EuiFlexItem
-                                      className="visNewVisDialog__searchWrapper"
-                                      component="div"
-                                      grow={false}
+                                    <EuiFieldSearch
+                                      aria-label="Filter for a visualization type"
+                                      compressed={false}
+                                      data-test-subj="filterVisType"
+                                      fullWidth={true}
+                                      incremental={false}
+                                      isLoading={false}
+                                      onChange={[Function]}
+                                      placeholder="Filter"
+                                      value=""
                                     >
-                                      <div
-                                        className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
+                                      <EuiFormControlLayout
+                                        compressed={false}
+                                        fullWidth={true}
+                                        icon="search"
+                                        isLoading={false}
                                       >
-                                        <EuiFieldSearch
-                                          aria-label="Filter for a visualization type"
-                                          compressed={false}
-                                          data-test-subj="filterVisType"
-                                          fullWidth={true}
-                                          incremental={false}
-                                          isLoading={false}
-                                          onChange={[Function]}
-                                          placeholder="Filter"
-                                          value=""
-                                        >
-                                          <EuiFormControlLayout
-                                            compressed={false}
-                                            fullWidth={true}
-                                            icon="search"
-                                            isLoading={false}
-                                          >
-                                            <div
-                                              className="euiFormControlLayout euiFormControlLayout--fullWidth"
-                                            >
-                                              <div
-                                                className="euiFormControlLayout__childrenWrapper"
-                                              >
-                                                <EuiValidatableControl>
-                                                  <input
-                                                    aria-label="Filter for a visualization type"
-                                                    className="euiFieldSearch euiFieldSearch--fullWidth"
-                                                    data-test-subj="filterVisType"
-                                                    onChange={[Function]}
-                                                    onKeyUp={[Function]}
-                                                    placeholder="Filter"
-                                                    type="search"
-                                                    value=""
-                                                  />
-                                                </EuiValidatableControl>
-                                                <EuiFormControlLayoutIcons
-                                                  icon="search"
-                                                  isLoading={false}
-                                                >
-                                                  <div
-                                                    className="euiFormControlLayoutIcons"
-                                                  >
-                                                    <EuiFormControlLayoutCustomIcon
-                                                      type="search"
-                                                    >
-                                                      <span
-                                                        className="euiFormControlLayoutCustomIcon"
-                                                      >
-                                                        <EuiIcon
-                                                          aria-hidden="true"
-                                                          className="euiFormControlLayoutCustomIcon__icon"
-                                                          size="m"
-                                                          type="search"
-                                                        >
-                                                          <search
-                                                            aria-hidden="true"
-                                                            className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                                            focusable="false"
-                                                            height="16"
-                                                            style={null}
-                                                            viewBox="0 0 16 16"
-                                                            width="16"
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                            xmlnsXlink="http://www.w3.org/1999/xlink"
-                                                          >
-                                                            <svg
-                                                              aria-hidden="true"
-                                                              className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                                              focusable="false"
-                                                              height="16"
-                                                              style={null}
-                                                              viewBox="0 0 16 16"
-                                                              width="16"
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                              xmlnsXlink="http://www.w3.org/1999/xlink"
-                                                            >
-                                                              <defs>
-                                                                <path
-                                                                  d="M11.271 11.978l3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738z"
-                                                                  id="search-a"
-                                                                />
-                                                              </defs>
-                                                              <use
-                                                                xlinkHref="#search-a"
-                                                              />
-                                                            </svg>
-                                                          </search>
-                                                        </EuiIcon>
-                                                      </span>
-                                                    </EuiFormControlLayoutCustomIcon>
-                                                  </div>
-                                                </EuiFormControlLayoutIcons>
-                                              </div>
-                                            </div>
-                                          </EuiFormControlLayout>
-                                        </EuiFieldSearch>
-                                      </div>
-                                    </EuiFlexItem>
-                                    <EuiFlexItem
-                                      className="visNewVisDialog__typesWrapper"
-                                      component="div"
-                                      grow={1}
-                                    >
-                                      <div
-                                        className="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
-                                      >
-                                        <EuiScreenReaderOnly>
-                                          <span
-                                            aria-live="polite"
-                                            className="euiScreenReaderOnly"
-                                          />
-                                        </EuiScreenReaderOnly>
-                                        <EuiKeyPadMenu
-                                          className="visNewVisDialog__types"
-                                          data-test-subj="visNewDialogTypes"
+                                        <div
+                                          className="euiFormControlLayout euiFormControlLayout--fullWidth"
                                         >
                                           <div
-                                            className="euiKeyPadMenu visNewVisDialog__types"
-                                            data-test-subj="visNewDialogTypes"
-                                            role="menu"
+                                            className="euiFormControlLayout__childrenWrapper"
                                           >
-                                            <EuiKeyPadMenuItemButton
-                                              aria-describedby="visTypeDescription-vis"
-                                              className="visNewVisDialog__type"
-                                              data-test-subj="visType-vis"
-                                              data-vis-stage="production"
-                                              disabled={false}
-                                              key="vis"
-                                              label={
+                                            <EuiValidatableControl>
+                                              <input
+                                                aria-label="Filter for a visualization type"
+                                                className="euiFieldSearch euiFieldSearch--fullWidth"
+                                                data-test-subj="filterVisType"
+                                                onChange={[Function]}
+                                                onKeyUp={[Function]}
+                                                placeholder="Filter"
+                                                type="search"
+                                                value=""
+                                              />
+                                            </EuiValidatableControl>
+                                            <EuiFormControlLayoutIcons
+                                              icon="search"
+                                              isLoading={false}
+                                            >
+                                              <div
+                                                className="euiFormControlLayoutIcons"
+                                              >
+                                                <EuiFormControlLayoutCustomIcon
+                                                  type="search"
+                                                >
+                                                  <span
+                                                    className="euiFormControlLayoutCustomIcon"
+                                                  >
+                                                    <EuiIcon
+                                                      aria-hidden="true"
+                                                      className="euiFormControlLayoutCustomIcon__icon"
+                                                      size="m"
+                                                      type="search"
+                                                    >
+                                                      <search
+                                                        aria-hidden="true"
+                                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                        focusable="false"
+                                                        height="16"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width="16"
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                        xmlnsXlink="http://www.w3.org/1999/xlink"
+                                                      >
+                                                        <svg
+                                                          aria-hidden="true"
+                                                          className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                          focusable="false"
+                                                          height="16"
+                                                          style={null}
+                                                          viewBox="0 0 16 16"
+                                                          width="16"
+                                                          xmlns="http://www.w3.org/2000/svg"
+                                                          xmlnsXlink="http://www.w3.org/1999/xlink"
+                                                        >
+                                                          <defs>
+                                                            <path
+                                                              d="M11.271 11.978l3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738z"
+                                                              id="search-a"
+                                                            />
+                                                          </defs>
+                                                          <use
+                                                            xlinkHref="#search-a"
+                                                          />
+                                                        </svg>
+                                                      </search>
+                                                    </EuiIcon>
+                                                  </span>
+                                                </EuiFormControlLayoutCustomIcon>
+                                              </div>
+                                            </EuiFormControlLayoutIcons>
+                                          </div>
+                                        </div>
+                                      </EuiFormControlLayout>
+                                    </EuiFieldSearch>
+                                  </div>
+                                </EuiFlexItem>
+                                <EuiFlexItem
+                                  className="visNewVisDialog__typesWrapper"
+                                  component="div"
+                                  grow={1}
+                                >
+                                  <div
+                                    className="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
+                                  >
+                                    <EuiScreenReaderOnly>
+                                      <span
+                                        aria-live="polite"
+                                        className="euiScreenReaderOnly"
+                                      />
+                                    </EuiScreenReaderOnly>
+                                    <EuiKeyPadMenu
+                                      className="visNewVisDialog__types"
+                                      data-test-subj="visNewDialogTypes"
+                                    >
+                                      <div
+                                        className="euiKeyPadMenu visNewVisDialog__types"
+                                        data-test-subj="visNewDialogTypes"
+                                        role="menu"
+                                      >
+                                        <EuiKeyPadMenuItemButton
+                                          aria-describedby="visTypeDescription-vis"
+                                          className="visNewVisDialog__type"
+                                          data-test-subj="visType-vis"
+                                          data-vis-stage="production"
+                                          disabled={false}
+                                          key="vis"
+                                          label={
+                                            <span
+                                              data-test-subj="visTypeTitle"
+                                            >
+                                              Vis Type 1
+                                            </span>
+                                          }
+                                          onBlur={[Function]}
+                                          onClick={[Function]}
+                                          onFocus={[Function]}
+                                          onMouseEnter={[Function]}
+                                          onMouseLeave={[Function]}
+                                        >
+                                          <button
+                                            aria-describedby="visTypeDescription-vis"
+                                            className="euiKeyPadMenuItem visNewVisDialog__type"
+                                            data-test-subj="visType-vis"
+                                            data-vis-stage="production"
+                                            disabled={false}
+                                            onBlur={[Function]}
+                                            onClick={[Function]}
+                                            onFocus={[Function]}
+                                            onMouseEnter={[Function]}
+                                            onMouseLeave={[Function]}
+                                            type="button"
+                                          >
+                                            <div
+                                              className="euiKeyPadMenuItem__inner"
+                                            >
+                                              <div
+                                                className="euiKeyPadMenuItem__icon"
+                                              >
+                                                <Component
+                                                  visType={
+                                                    Object {
+                                                      "hidden": false,
+                                                      "highlighted": false,
+                                                      "name": "vis",
+                                                      "requestHandler": "none",
+                                                      "requiresSearch": false,
+                                                      "responseHandler": "none",
+                                                      "stage": "production",
+                                                      "title": "Vis Type 1",
+                                                      "visualization": [Function],
+                                                    }
+                                                  }
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    color="secondary"
+                                                    size="l"
+                                                    type="empty"
+                                                  >
+                                                    <empty
+                                                      aria-hidden="true"
+                                                      className="euiIcon euiIcon--large euiIcon--secondary"
+                                                      focusable="false"
+                                                      height="16"
+                                                      style={null}
+                                                      viewBox="0 0 16 16"
+                                                      width="16"
+                                                      xmlns="http://www.w3.org/2000/svg"
+                                                    >
+                                                      <svg
+                                                        aria-hidden="true"
+                                                        className="euiIcon euiIcon--large euiIcon--secondary"
+                                                        focusable="false"
+                                                        height="16"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width="16"
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </empty>
+                                                  </EuiIcon>
+                                                </Component>
+                                              </div>
+                                              <p
+                                                className="euiKeyPadMenuItem__label"
+                                              >
                                                 <span
                                                   data-test-subj="visTypeTitle"
                                                 >
                                                   Vis Type 1
                                                 </span>
-                                              }
-                                              onBlur={[Function]}
-                                              onClick={[Function]}
-                                              onFocus={[Function]}
-                                              onMouseEnter={[Function]}
-                                              onMouseLeave={[Function]}
+                                              </p>
+                                            </div>
+                                          </button>
+                                        </EuiKeyPadMenuItemButton>
+                                        <EuiKeyPadMenuItemButton
+                                          aria-describedby="visTypeDescription-visWithSearch"
+                                          className="visNewVisDialog__type"
+                                          data-test-subj="visType-visWithSearch"
+                                          data-vis-stage="production"
+                                          disabled={false}
+                                          key="visWithSearch"
+                                          label={
+                                            <span
+                                              data-test-subj="visTypeTitle"
                                             >
-                                              <button
-                                                aria-describedby="visTypeDescription-vis"
-                                                className="euiKeyPadMenuItem visNewVisDialog__type"
-                                                data-test-subj="visType-vis"
-                                                data-vis-stage="production"
-                                                disabled={false}
-                                                onBlur={[Function]}
-                                                onClick={[Function]}
-                                                onFocus={[Function]}
-                                                onMouseEnter={[Function]}
-                                                onMouseLeave={[Function]}
-                                                type="button"
+                                              Vis with search
+                                            </span>
+                                          }
+                                          onBlur={[Function]}
+                                          onClick={[Function]}
+                                          onFocus={[Function]}
+                                          onMouseEnter={[Function]}
+                                          onMouseLeave={[Function]}
+                                        >
+                                          <button
+                                            aria-describedby="visTypeDescription-visWithSearch"
+                                            className="euiKeyPadMenuItem visNewVisDialog__type"
+                                            data-test-subj="visType-visWithSearch"
+                                            data-vis-stage="production"
+                                            disabled={false}
+                                            onBlur={[Function]}
+                                            onClick={[Function]}
+                                            onFocus={[Function]}
+                                            onMouseEnter={[Function]}
+                                            onMouseLeave={[Function]}
+                                            type="button"
+                                          >
+                                            <div
+                                              className="euiKeyPadMenuItem__inner"
+                                            >
+                                              <div
+                                                className="euiKeyPadMenuItem__icon"
                                               >
-                                                <div
-                                                  className="euiKeyPadMenuItem__inner"
+                                                <Component
+                                                  visType={
+                                                    Object {
+                                                      "hidden": false,
+                                                      "highlighted": false,
+                                                      "name": "visWithSearch",
+                                                      "requestHandler": "none",
+                                                      "requiresSearch": false,
+                                                      "responseHandler": "none",
+                                                      "stage": "production",
+                                                      "title": "Vis with search",
+                                                      "visualization": [Function],
+                                                    }
+                                                  }
                                                 >
-                                                  <div
-                                                    className="euiKeyPadMenuItem__icon"
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    color="secondary"
+                                                    size="l"
+                                                    type="empty"
                                                   >
-                                                    <Component
-                                                      visType={
-                                                        Object {
-                                                          "hidden": false,
-                                                          "highlighted": false,
-                                                          "name": "vis",
-                                                          "requestHandler": "none",
-                                                          "requiresSearch": false,
-                                                          "responseHandler": "none",
-                                                          "stage": "production",
-                                                          "title": "Vis Type 1",
-                                                          "visualization": [Function],
-                                                        }
-                                                      }
+                                                    <empty
+                                                      aria-hidden="true"
+                                                      className="euiIcon euiIcon--large euiIcon--secondary"
+                                                      focusable="false"
+                                                      height="16"
+                                                      style={null}
+                                                      viewBox="0 0 16 16"
+                                                      width="16"
+                                                      xmlns="http://www.w3.org/2000/svg"
                                                     >
-                                                      <EuiIcon
+                                                      <svg
                                                         aria-hidden="true"
-                                                        color="secondary"
-                                                        size="l"
-                                                        type="empty"
-                                                      >
-                                                        <empty
-                                                          aria-hidden="true"
-                                                          className="euiIcon euiIcon--large euiIcon--secondary"
-                                                          focusable="false"
-                                                          height="16"
-                                                          style={null}
-                                                          viewBox="0 0 16 16"
-                                                          width="16"
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden="true"
-                                                            className="euiIcon euiIcon--large euiIcon--secondary"
-                                                            focusable="false"
-                                                            height="16"
-                                                            style={null}
-                                                            viewBox="0 0 16 16"
-                                                            width="16"
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          />
-                                                        </empty>
-                                                      </EuiIcon>
-                                                    </Component>
-                                                  </div>
-                                                  <p
-                                                    className="euiKeyPadMenuItem__label"
-                                                  >
-                                                    <span
-                                                      data-test-subj="visTypeTitle"
-                                                    >
-                                                      Vis Type 1
-                                                    </span>
-                                                  </p>
-                                                </div>
-                                              </button>
-                                            </EuiKeyPadMenuItemButton>
-                                            <EuiKeyPadMenuItemButton
-                                              aria-describedby="visTypeDescription-visWithSearch"
-                                              className="visNewVisDialog__type"
-                                              data-test-subj="visType-visWithSearch"
-                                              data-vis-stage="production"
-                                              disabled={false}
-                                              key="visWithSearch"
-                                              label={
+                                                        className="euiIcon euiIcon--large euiIcon--secondary"
+                                                        focusable="false"
+                                                        height="16"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width="16"
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </empty>
+                                                  </EuiIcon>
+                                                </Component>
+                                              </div>
+                                              <p
+                                                className="euiKeyPadMenuItem__label"
+                                              >
                                                 <span
                                                   data-test-subj="visTypeTitle"
                                                 >
                                                   Vis with search
                                                 </span>
-                                              }
-                                              onBlur={[Function]}
-                                              onClick={[Function]}
-                                              onFocus={[Function]}
-                                              onMouseEnter={[Function]}
-                                              onMouseLeave={[Function]}
-                                            >
-                                              <button
-                                                aria-describedby="visTypeDescription-visWithSearch"
-                                                className="euiKeyPadMenuItem visNewVisDialog__type"
-                                                data-test-subj="visType-visWithSearch"
-                                                data-vis-stage="production"
-                                                disabled={false}
-                                                onBlur={[Function]}
-                                                onClick={[Function]}
-                                                onFocus={[Function]}
-                                                onMouseEnter={[Function]}
-                                                onMouseLeave={[Function]}
-                                                type="button"
-                                              >
-                                                <div
-                                                  className="euiKeyPadMenuItem__inner"
-                                                >
-                                                  <div
-                                                    className="euiKeyPadMenuItem__icon"
-                                                  >
-                                                    <Component
-                                                      visType={
-                                                        Object {
-                                                          "hidden": false,
-                                                          "highlighted": false,
-                                                          "name": "visWithSearch",
-                                                          "requestHandler": "none",
-                                                          "requiresSearch": false,
-                                                          "responseHandler": "none",
-                                                          "stage": "production",
-                                                          "title": "Vis with search",
-                                                          "visualization": [Function],
-                                                        }
-                                                      }
-                                                    >
-                                                      <EuiIcon
-                                                        aria-hidden="true"
-                                                        color="secondary"
-                                                        size="l"
-                                                        type="empty"
-                                                      >
-                                                        <empty
-                                                          aria-hidden="true"
-                                                          className="euiIcon euiIcon--large euiIcon--secondary"
-                                                          focusable="false"
-                                                          height="16"
-                                                          style={null}
-                                                          viewBox="0 0 16 16"
-                                                          width="16"
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden="true"
-                                                            className="euiIcon euiIcon--large euiIcon--secondary"
-                                                            focusable="false"
-                                                            height="16"
-                                                            style={null}
-                                                            viewBox="0 0 16 16"
-                                                            width="16"
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          />
-                                                        </empty>
-                                                      </EuiIcon>
-                                                    </Component>
-                                                  </div>
-                                                  <p
-                                                    className="euiKeyPadMenuItem__label"
-                                                  >
-                                                    <span
-                                                      data-test-subj="visTypeTitle"
-                                                    >
-                                                      Vis with search
-                                                    </span>
-                                                  </p>
-                                                </div>
-                                              </button>
-                                            </EuiKeyPadMenuItemButton>
-                                          </div>
-                                        </EuiKeyPadMenu>
+                                              </p>
+                                            </div>
+                                          </button>
+                                        </EuiKeyPadMenuItemButton>
                                       </div>
-                                    </EuiFlexItem>
+                                    </EuiKeyPadMenu>
                                   </div>
-                                </EuiFlexGroup>
+                                </EuiFlexItem>
                               </div>
-                            </EuiFlexItem>
-                            <EuiFlexItem
-                              className="visNewVisDialog__description"
-                              component="div"
-                              grow={false}
+                            </EuiFlexGroup>
+                          </div>
+                        </EuiFlexItem>
+                        <EuiFlexItem
+                          className="visNewVisDialog__description"
+                          component="div"
+                          grow={false}
+                        >
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
+                          >
+                            <EuiTitle
+                              size="s"
+                              textTransform="none"
+                            >
+                              <h2
+                                className="euiTitle euiTitle--small"
+                              >
+                                <FormattedMessage
+                                  defaultMessage="Select a visualization type"
+                                  id="kbn.visualize.newVisWizard.selectVisType"
+                                  values={Object {}}
+                                >
+                                  Select a visualization type
+                                </FormattedMessage>
+                              </h2>
+                            </EuiTitle>
+                            <EuiSpacer
+                              size="m"
                             >
                               <div
-                                className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
+                                className="euiSpacer euiSpacer--m"
+                              />
+                            </EuiSpacer>
+                            <Component>
+                              <EuiText
+                                grow={true}
+                                size="m"
                               >
-                                <EuiTitle
-                                  size="s"
-                                  textTransform="none"
+                                <div
+                                  className="euiText euiText--medium"
                                 >
-                                  <h2
-                                    className="euiTitle euiTitle--small"
-                                  >
+                                  <p>
                                     <FormattedMessage
-                                      defaultMessage="Select a visualization type"
-                                      id="kbn.visualize.newVisWizard.selectVisType"
+                                      defaultMessage="Start creating your visualization by selecting a type for that visualization."
+                                      id="kbn.visualize.newVisWizard.helpText"
                                       values={Object {}}
                                     >
-                                      Select a visualization type
+                                      Start creating your visualization by selecting a type for that visualization.
                                     </FormattedMessage>
-                                  </h2>
-                                </EuiTitle>
-                                <EuiSpacer
-                                  size="m"
-                                >
-                                  <div
-                                    className="euiSpacer euiSpacer--m"
-                                  />
-                                </EuiSpacer>
-                                <Component>
-                                  <EuiText
-                                    grow={true}
-                                    size="m"
-                                  >
-                                    <div
-                                      className="euiText euiText--medium"
-                                    >
-                                      <p>
-                                        <FormattedMessage
-                                          defaultMessage="Start creating your visualization by selecting a type for that visualization."
-                                          id="kbn.visualize.newVisWizard.helpText"
-                                          values={Object {}}
-                                        >
-                                          Start creating your visualization by selecting a type for that visualization.
-                                        </FormattedMessage>
-                                      </p>
-                                    </div>
-                                  </EuiText>
-                                </Component>
-                              </div>
-                            </EuiFlexItem>
+                                  </p>
+                                </div>
+                              </EuiText>
+                            </Component>
                           </div>
-                        </EuiFlexGroup>
+                        </EuiFlexItem>
                       </div>
-                    </TypeSelection>
+                    </EuiFlexGroup>
                   </div>
-                </div>
+                </TypeSelection>
               </div>
-            </FocusTrap>
-          </EuiModal>
-        </Portal>
-      </EuiOverlayMask>
-    </NewVisModal>
-  </IntlProvider>
-</I18nProvider>
+            </div>
+          </div>
+        </FocusTrap>
+      </EuiModal>
+    </Portal>
+  </EuiOverlayMask>
+</NewVisModal>
 `;
diff --git a/src/legacy/core_plugins/kibana/public/visualize/wizard/new_vis_modal.test.tsx b/src/legacy/core_plugins/kibana/public/visualize/wizard/new_vis_modal.test.tsx
index 399f5257063a..dd357d70f8a0 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/wizard/new_vis_modal.test.tsx
+++ b/src/legacy/core_plugins/kibana/public/visualize/wizard/new_vis_modal.test.tsx
@@ -17,7 +17,6 @@
  * under the License.
  */
 
-import { I18nProvider } from '@kbn/i18n/react';
 import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 
@@ -57,18 +56,14 @@ describe('NewVisModal', () => {
 
   it('should render as expected', () => {
     const wrapper = mountWithIntl(
-      <I18nProvider>
-        <NewVisModal isOpen={true} onClose={() => null} visTypesRegistry={visTypes} />
-      </I18nProvider>
+      <NewVisModal isOpen={true} onClose={() => null} visTypesRegistry={visTypes} />
     );
     expect(wrapper).toMatchSnapshot();
   });
 
   it('should show a button for regular visualizations', () => {
     const wrapper = mountWithIntl(
-      <I18nProvider>
-        <NewVisModal isOpen={true} onClose={() => null} visTypesRegistry={visTypes} />
-      </I18nProvider>
+      <NewVisModal isOpen={true} onClose={() => null} visTypesRegistry={visTypes} />
     );
     expect(wrapper.find('[data-test-subj="visType-vis"]').exists()).toBe(true);
   });
@@ -77,9 +72,7 @@ describe('NewVisModal', () => {
     it('should open the editor for visualizations without search', () => {
       window.location.assign = jest.fn();
       const wrapper = mountWithIntl(
-        <I18nProvider>
-          <NewVisModal isOpen={true} onClose={() => null} visTypesRegistry={visTypes} />
-        </I18nProvider>
+        <NewVisModal isOpen={true} onClose={() => null} visTypesRegistry={visTypes} />
       );
       const visButton = wrapper.find('button[data-test-subj="visType-vis"]');
       visButton.simulate('click');
@@ -89,14 +82,12 @@ describe('NewVisModal', () => {
     it('passes through editor params to the editor URL', () => {
       window.location.assign = jest.fn();
       const wrapper = mountWithIntl(
-        <I18nProvider>
-          <NewVisModal
-            isOpen={true}
-            onClose={() => null}
-            visTypesRegistry={visTypes}
-            editorParams={['foo=true', 'bar=42']}
-          />
-        </I18nProvider>
+        <NewVisModal
+          isOpen={true}
+          onClose={() => null}
+          visTypesRegistry={visTypes}
+          editorParams={['foo=true', 'bar=42']}
+        />
       );
       const visButton = wrapper.find('button[data-test-subj="visType-vis"]');
       visButton.simulate('click');
@@ -107,9 +98,7 @@ describe('NewVisModal', () => {
   describe('filter for visualization types', () => {
     it('should render as expected', () => {
       const wrapper = mountWithIntl(
-        <I18nProvider>
-          <NewVisModal isOpen={true} onClose={() => null} visTypesRegistry={visTypes} />
-        </I18nProvider>
+        <NewVisModal isOpen={true} onClose={() => null} visTypesRegistry={visTypes} />
       );
       const searchBox = wrapper.find('input[data-test-subj="filterVisType"]');
       searchBox.simulate('change', { target: { value: 'with' } });
@@ -121,9 +110,7 @@ describe('NewVisModal', () => {
     it('should not show experimental visualizations if visualize:enableLabs is false', () => {
       settingsGet.mockReturnValue(false);
       const wrapper = mountWithIntl(
-        <I18nProvider>
-          <NewVisModal isOpen={true} onClose={() => null} visTypesRegistry={visTypes} />
-        </I18nProvider>
+        <NewVisModal isOpen={true} onClose={() => null} visTypesRegistry={visTypes} />
       );
       expect(wrapper.find('[data-test-subj="visType-visExp"]').exists()).toBe(false);
     });
@@ -131,9 +118,7 @@ describe('NewVisModal', () => {
     it('should show experimental visualizations if visualize:enableLabs is true', () => {
       settingsGet.mockReturnValue(true);
       const wrapper = mountWithIntl(
-        <I18nProvider>
-          <NewVisModal isOpen={true} onClose={() => null} visTypesRegistry={visTypes} />
-        </I18nProvider>
+        <NewVisModal isOpen={true} onClose={() => null} visTypesRegistry={visTypes} />
       );
       expect(wrapper.find('[data-test-subj="visType-visExp"]').exists()).toBe(true);
     });
diff --git a/src/legacy/core_plugins/kibana/public/visualize/wizard/show_new_vis.tsx b/src/legacy/core_plugins/kibana/public/visualize/wizard/show_new_vis.tsx
index fe4d28900c11..3b67330a9c96 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/wizard/show_new_vis.tsx
+++ b/src/legacy/core_plugins/kibana/public/visualize/wizard/show_new_vis.tsx
@@ -20,7 +20,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { VisType } from 'ui/vis';
 import { NewVisModal } from './new_vis_modal';
 
@@ -40,14 +40,14 @@ export function showNewVisModal(
 
   document.body.appendChild(container);
   const element = (
-    <I18nProvider>
+    <I18nContext>
       <NewVisModal
         isOpen={true}
         onClose={onClose}
         visTypesRegistry={visTypeRegistry}
         editorParams={editorParams}
       />
-    </I18nProvider>
+    </I18nContext>
   );
   ReactDOM.render(element, container);
 }
diff --git a/src/legacy/core_plugins/metrics/public/components/vis_editor.js b/src/legacy/core_plugins/metrics/public/components/vis_editor.js
index 65981130921e..667dff481f9d 100644
--- a/src/legacy/core_plugins/metrics/public/components/vis_editor.js
+++ b/src/legacy/core_plugins/metrics/public/components/vis_editor.js
@@ -29,7 +29,6 @@ import brushHandler from '../lib/create_brush_handler';
 import { extractIndexPatterns } from '../lib/extract_index_patterns';
 import { fetchFields } from '../lib/fetch_fields';
 import chrome from 'ui/chrome';
-import { I18nProvider } from '@kbn/i18n/react';
 
 const IS_DARK_THEME = chrome.getUiSettingsClient().get('theme:darkMode');
 
@@ -116,19 +115,17 @@ class VisEditor extends Component {
         return null;
       }
       return (
-        <I18nProvider>
-          <Visualization
-            dateFormat={this.props.config.get('dateFormat')}
-            reversed={IS_DARK_THEME}
-            onBrush={this.onBrush}
-            onUiState={this.handleUiState}
-            uiState={this.props.vis.getUiState()}
-            fields={this.state.visFields}
-            model={this.props.vis.params}
-            visData={this.props.visData}
-            getConfig={this.getConfig}
-          />
-        </I18nProvider>
+        <Visualization
+          dateFormat={this.props.config.get('dateFormat')}
+          reversed={IS_DARK_THEME}
+          onBrush={this.onBrush}
+          onUiState={this.handleUiState}
+          uiState={this.props.vis.getUiState()}
+          fields={this.state.visFields}
+          model={this.props.vis.params}
+          visData={this.props.visData}
+          getConfig={this.getConfig}
+        />
       );
     }
 
diff --git a/src/legacy/core_plugins/metrics/public/kbn_vis_types/editor_controller.js b/src/legacy/core_plugins/metrics/public/kbn_vis_types/editor_controller.js
index af40856fb20d..cccc898dd661 100644
--- a/src/legacy/core_plugins/metrics/public/kbn_vis_types/editor_controller.js
+++ b/src/legacy/core_plugins/metrics/public/kbn_vis_types/editor_controller.js
@@ -19,7 +19,7 @@
 
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 function ReactEditorControllerProvider(Private, config) {
   class ReactEditorController {
@@ -32,7 +32,7 @@ function ReactEditorControllerProvider(Private, config) {
     async render(params) {
       const Component = this.vis.type.editorConfig.component;
       render(
-        <I18nProvider>
+        <I18nContext>
           <Component
             config={config}
             vis={this.vis}
@@ -42,7 +42,7 @@ function ReactEditorControllerProvider(Private, config) {
             isEditorMode={true}
             appState={params.appState}
           />
-        </I18nProvider>,
+        </I18nContext>,
         this.el);
     }
 
diff --git a/src/legacy/core_plugins/status_page/public/components/render.js b/src/legacy/core_plugins/status_page/public/components/render.js
index d5077af08e6c..427a76c40fbf 100644
--- a/src/legacy/core_plugins/status_page/public/components/render.js
+++ b/src/legacy/core_plugins/status_page/public/components/render.js
@@ -19,7 +19,7 @@
 
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 import StatusApp from './status_app';
 
@@ -33,12 +33,12 @@ export function renderStatusPage(buildNum, buildSha) {
   }
 
   render(
-    <I18nProvider>
+    <I18nContext>
       <StatusApp
         buildNum={buildNum}
         buildSha={buildSha}
       />
-    </I18nProvider>,
+    </I18nContext>,
     node,
   );
 }
diff --git a/src/legacy/core_plugins/tagcloud/public/tag_cloud_visualization.js b/src/legacy/core_plugins/tagcloud/public/tag_cloud_visualization.js
index 1eaab048a12f..78307cd75ad7 100644
--- a/src/legacy/core_plugins/tagcloud/public/tag_cloud_visualization.js
+++ b/src/legacy/core_plugins/tagcloud/public/tag_cloud_visualization.js
@@ -24,7 +24,7 @@ import { render, unmountComponentAtNode } from 'react-dom';
 import React from 'react';
 import { getFormat } from 'ui/visualize/loader/pipeline_helpers/utilities';
 
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { Label } from './label';
 import { FeedbackMessage } from './feedback_message';
 
@@ -57,7 +57,7 @@ export class TagCloudVisualization {
     this._feedbackNode = document.createElement('div');
     this._containerNode.appendChild(this._feedbackNode);
     this._feedbackMessage = React.createRef();
-    render(<I18nProvider><FeedbackMessage ref={this._feedbackMessage} /></I18nProvider>, this._feedbackNode);
+    render(<I18nContext><FeedbackMessage ref={this._feedbackMessage} /></I18nContext>, this._feedbackNode);
 
     this._labelNode = document.createElement('div');
     this._containerNode.appendChild(this._labelNode);
diff --git a/src/ui/public/chrome/directives/header_global_nav/header_global_nav.js b/src/ui/public/chrome/directives/header_global_nav/header_global_nav.js
index 3603c724549b..66b34b38df6c 100644
--- a/src/ui/public/chrome/directives/header_global_nav/header_global_nav.js
+++ b/src/ui/public/chrome/directives/header_global_nav/header_global_nav.js
@@ -20,8 +20,8 @@
 
 import { uiModules } from '../../../modules';
 import { Header } from './components/header';
+import { wrapInI18nContext } from 'ui/i18n';
 import { chromeHeaderNavControlsRegistry } from 'ui/registry/chrome_header_nav_controls';
-import { injectI18nProvider } from '@kbn/i18n/react';
 
 const module = uiModules.get('kibana');
 
@@ -30,7 +30,7 @@ module.directive('headerGlobalNav', (reactDirective, chrome, Private) => {
   const navControls = Private(chromeHeaderNavControlsRegistry);
   const homeHref = chrome.addBasePath('/app/kibana#/home');
 
-  return reactDirective(injectI18nProvider(Header), [
+  return reactDirective(wrapInI18nContext(Header), [
     // scope accepted by directive, passed in as React props
     'appTitle',
     'isVisible',
diff --git a/src/ui/public/chrome/directives/kbn_chrome.js b/src/ui/public/chrome/directives/kbn_chrome.js
index bbd0e4189f45..96c829cdba2e 100644
--- a/src/ui/public/chrome/directives/kbn_chrome.js
+++ b/src/ui/public/chrome/directives/kbn_chrome.js
@@ -32,7 +32,7 @@ import {
   banners,
 } from '../../notify';
 import { SubUrlRouteFilterProvider } from './sub_url_route_filter';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from '../../i18n';
 
 export function kbnChromeProvider(chrome, internals) {
 
@@ -86,12 +86,12 @@ export function kbnChromeProvider(chrome, internals) {
 
           // Banners
           ReactDOM.render(
-            <I18nProvider>
+            <I18nContext>
               <GlobalBannerList
                 banners={banners.list}
                 subscribe={banners.onChange}
               />
-            </I18nProvider>,
+            </I18nContext>,
             document.getElementById('globalBannerList')
           );
 
diff --git a/src/ui/public/filter_bar/directive.js b/src/ui/public/filter_bar/directive.js
index afb598de5a7b..1178e69df2c3 100644
--- a/src/ui/public/filter_bar/directive.js
+++ b/src/ui/public/filter_bar/directive.js
@@ -18,12 +18,12 @@
  */
 
 import 'ngreact';
+import { wrapInI18nContext } from 'ui/i18n';
 import { uiModules } from '../modules';
 import { FilterBar } from './filter_bar';
-import { injectI18nProvider } from '@kbn/i18n/react';
 
 const app = uiModules.get('app/kibana', ['react']);
 
 app.directive('filterBar', reactDirective => {
-  return reactDirective(injectI18nProvider(FilterBar));
+  return reactDirective(wrapInI18nContext(FilterBar));
 });
diff --git a/src/ui/public/i18n/__snapshots__/index.test.tsx.snap b/src/ui/public/i18n/__snapshots__/index.test.tsx.snap
new file mode 100644
index 000000000000..fd6a0a07ba39
--- /dev/null
+++ b/src/ui/public/i18n/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ui/i18n renders children and forwards properties 1`] = `
+<div>
+  Context: 
+  <span>
+    Child: some prop:100500
+  </span>
+</div>
+`;
diff --git a/src/ui/public/i18n/index.test.tsx b/src/ui/public/i18n/index.test.tsx
new file mode 100644
index 000000000000..198940bc55a9
--- /dev/null
+++ b/src/ui/public/i18n/index.test.tsx
@@ -0,0 +1,54 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { render } from 'enzyme';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { __newPlatformInit__, wrapInI18nContext } from '.';
+
+describe('ui/i18n', () => {
+  test('renders children and forwards properties', () => {
+    __newPlatformInit__(({ children }) => <div>Context: {children}</div>);
+
+    const mockPropTypes = {
+      stringProp: PropTypes.string.isRequired,
+      numberProp: PropTypes.number,
+    };
+
+    const WrappedComponent = wrapInI18nContext(
+      class extends React.PureComponent<{ [P in keyof typeof mockPropTypes]: unknown }> {
+        public static propTypes = mockPropTypes;
+
+        public render() {
+          return (
+            <span>
+              Child: {this.props.stringProp}:{this.props.numberProp}
+            </span>
+          );
+        }
+      }
+    );
+
+    expect(WrappedComponent.propTypes).toBe(mockPropTypes);
+    expect(
+      render(<WrappedComponent stringProp={'some prop'} numberProp={100500} />)
+    ).toMatchSnapshot();
+  });
+});
diff --git a/src/ui/public/i18n/index.tsx b/src/ui/public/i18n/index.tsx
new file mode 100644
index 000000000000..adbc281913e5
--- /dev/null
+++ b/src/ui/public/i18n/index.tsx
@@ -0,0 +1,57 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+
+import { i18nDirective, i18nFilter, I18nProvider } from '@kbn/i18n/angular';
+// @ts-ignore
+import { uiModules } from 'ui/modules';
+import { I18nStartContract } from '../../../core/public/i18n';
+
+export let I18nContext: I18nStartContract['Context'] = null!;
+export function __newPlatformInit__(context: typeof I18nContext) {
+  if (I18nContext) {
+    throw new Error('ui/i18n already initialized with new platform apis');
+  }
+
+  I18nContext = context;
+}
+
+export function wrapInI18nContext<P>(ComponentToWrap: React.ComponentType<P>) {
+  const ContextWrapper: React.SFC<P> = props => {
+    return (
+      <I18nContext>
+        <ComponentToWrap {...props} />
+      </I18nContext>
+    );
+  };
+
+  // Original propTypes from the wrapped component should be re-exposed
+  // since it will be used by reactDirective Angular service
+  // that will rely on propTypes to watch attributes with these names
+  ContextWrapper.propTypes = ComponentToWrap.propTypes;
+
+  return ContextWrapper;
+}
+
+uiModules
+  .get('i18n')
+  .provider('i18n', I18nProvider)
+  .filter('i18n', i18nFilter)
+  .directive('i18nId', i18nDirective);
diff --git a/src/ui/public/inspector/inspector.tsx b/src/ui/public/inspector/inspector.tsx
index f97382451b89..c0bae0a050f4 100644
--- a/src/ui/public/inspector/inspector.tsx
+++ b/src/ui/public/inspector/inspector.tsx
@@ -19,7 +19,6 @@
 import React from 'react';
 
 import { i18n } from '@kbn/i18n';
-import { I18nProvider } from '@kbn/i18n/react';
 import { FlyoutSession, openFlyout } from 'ui/flyout';
 import { Adapters } from './types';
 import { InspectorPanel } from './ui/inspector_panel';
@@ -73,15 +72,10 @@ function open(adapters: Adapters, options: InspectorOptions = {}): InspectorSess
       if an inspector can be shown.`);
   }
 
-  return openFlyout(
-    <I18nProvider>
-      <InspectorPanel views={views} adapters={adapters} title={options.title} />
-    </I18nProvider>,
-    {
-      'data-test-subj': 'inspectorPanel',
-      closeButtonAriaLabel: closeButtonLabel,
-    }
-  );
+  return openFlyout(<InspectorPanel views={views} adapters={adapters} title={options.title} />, {
+    'data-test-subj': 'inspectorPanel',
+    closeButtonAriaLabel: closeButtonLabel,
+  });
 }
 
 const Inspector = {
diff --git a/src/ui/public/query_bar/directive/index.js b/src/ui/public/query_bar/directive/index.js
index 347f3aeb12c0..9c42e59ec8e0 100644
--- a/src/ui/public/query_bar/directive/index.js
+++ b/src/ui/public/query_bar/directive/index.js
@@ -20,15 +20,15 @@
 
 
 import 'ngreact';
+import { wrapInI18nContext } from 'ui/i18n';
 import { uiModules } from '../../modules';
 import { QueryBar } from '../components';
-import { injectI18nProvider } from '@kbn/i18n/react';
 
 const app = uiModules.get('app/kibana', ['react']);
 
 app.directive('queryBar', (reactDirective, localStorage) => {
   return reactDirective(
-    injectI18nProvider(QueryBar),
+    wrapInI18nContext(QueryBar),
     undefined,
     {},
     {
diff --git a/src/ui/public/saved_objects/show_saved_object_save_modal.js b/src/ui/public/saved_objects/show_saved_object_save_modal.js
index 5cb1681c0828..bd2fbba3aa14 100644
--- a/src/ui/public/saved_objects/show_saved_object_save_modal.js
+++ b/src/ui/public/saved_objects/show_saved_object_save_modal.js
@@ -19,7 +19,7 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 export function showSaveModal(saveModal) {
   const container = document.createElement('div');
@@ -46,5 +46,5 @@ export function showSaveModal(saveModal) {
     }
   );
 
-  ReactDOM.render(<I18nProvider>{element}</I18nProvider>, container);
+  ReactDOM.render(<I18nContext>{element}</I18nContext>, container);
 }
diff --git a/src/ui/public/search_bar/directive/index.js b/src/ui/public/search_bar/directive/index.js
index f03624dd189a..7c162c133410 100644
--- a/src/ui/public/search_bar/directive/index.js
+++ b/src/ui/public/search_bar/directive/index.js
@@ -18,15 +18,15 @@
  */
 
 import 'ngreact';
+import { wrapInI18nContext } from 'ui/i18n';
 import { uiModules } from '../../modules';
 import { SearchBar } from '../components';
-import { injectI18nProvider } from '@kbn/i18n/react';
 
 const app = uiModules.get('app/kibana', ['react']);
 
 app.directive('searchBar', (reactDirective, localStorage) => {
   return reactDirective(
-    injectI18nProvider(SearchBar),
+    wrapInI18nContext(SearchBar),
     undefined,
     {},
     {
diff --git a/src/ui/public/share/show_share_context_menu.tsx b/src/ui/public/share/show_share_context_menu.tsx
index de2eba3e362e..7b39c2e1d444 100644
--- a/src/ui/public/share/show_share_context_menu.tsx
+++ b/src/ui/public/share/show_share_context_menu.tsx
@@ -25,7 +25,7 @@ import { ShareActionProvider } from './share_action';
 
 import { EuiWrappingPopover } from '@elastic/eui';
 
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 let isOpen = false;
 
@@ -66,7 +66,7 @@ export function showShareContextMenu({
 
   document.body.appendChild(container);
   const element = (
-    <I18nProvider>
+    <I18nContext>
       <EuiWrappingPopover
         id="sharePopover"
         button={anchorElement}
@@ -86,7 +86,7 @@ export function showShareContextMenu({
           onClose={onClose}
         />
       </EuiWrappingPopover>
-    </I18nProvider>
+    </I18nContext>
   );
   ReactDOM.render(element, container);
 }
diff --git a/src/ui/public/vis/editors/default/vis_options.js b/src/ui/public/vis/editors/default/vis_options.js
index cb1e3131cce0..7a1b64ec18ca 100644
--- a/src/ui/public/vis/editors/default/vis_options.js
+++ b/src/ui/public/vis/editors/default/vis_options.js
@@ -22,7 +22,7 @@ import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { uiModules } from '../../../modules';
 import visOptionsTemplate from './vis_options.html';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 /**
  * This directive sort of "transcludes" in whatever template you pass in via the `editor` attribute.
@@ -55,9 +55,9 @@ uiModules
         const renderReactComponent = () => {
           const Component = $scope.editor;
           render(
-            <I18nProvider>
+            <I18nContext>
               <Component scope={$scope} editorState={$scope.editorState} stageEditorParams={stageEditorParams} />
-            </I18nProvider>, $el[0]);
+            </I18nContext>, $el[0]);
         };
         // Bind the `editor` template with the scope.
         if (reactOptionsComponent) {
diff --git a/src/ui/public/vis/vis_types/react_vis_type.js b/src/ui/public/vis/vis_types/react_vis_type.js
index 6d3f391c3b9f..f9784f6a8b1b 100644
--- a/src/ui/public/vis/vis_types/react_vis_type.js
+++ b/src/ui/public/vis/vis_types/react_vis_type.js
@@ -20,6 +20,7 @@
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import chrome from '../../chrome';
+import { I18nContext } from '../../i18n';
 import { BaseVisTypeProvider } from './base_vis_type';
 
 export function ReactVisTypeProvider(Private) {
@@ -37,13 +38,16 @@ export function ReactVisTypeProvider(Private) {
       return new Promise((resolve) => {
         const Component = this.vis.type.visConfig.component;
         const config = chrome.getUiSettingsClient();
-        render(<Component
-          config={config}
-          vis={this.vis}
-          visData={visData}
-          renderComplete={resolve}
-          updateStatus={updateStatus}
-        />, this.el);
+        render(
+          <I18nContext>
+            <Component
+              config={config}
+              vis={this.vis}
+              visData={visData}
+              renderComplete={resolve}
+              updateStatus={updateStatus}
+            />
+          </I18nContext>, this.el);
       });
     }
 
diff --git a/x-pack/plugins/apm/public/index.js b/x-pack/plugins/apm/public/index.js
index 74b246fab948..99caa514bade 100644
--- a/x-pack/plugins/apm/public/index.js
+++ b/x-pack/plugins/apm/public/index.js
@@ -26,14 +26,14 @@ import LicenseChecker from './components/app/Main/LicenseChecker';
 
 import { history } from './components/shared/Links/url_helpers';
 
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 chrome.setRootTemplate(template);
 const store = configureStore();
 
 initTimepicker(history, store.dispatch).then(() => {
   ReactDOM.render(
-    <I18nProvider>
+    <I18nContext>
       <Provider store={store}>
         <Fragment>
           <GlobalProgress />
@@ -43,7 +43,7 @@ initTimepicker(history, store.dispatch).then(() => {
           </Router>
         </Fragment>
       </Provider>
-    </I18nProvider>,
+    </I18nContext>,
     document.getElementById('react-apm-root')
   );
 });
diff --git a/x-pack/plugins/beats_management/public/index.tsx b/x-pack/plugins/beats_management/public/index.tsx
index 535d984c103a..3bbd1d496e2b 100644
--- a/x-pack/plugins/beats_management/public/index.tsx
+++ b/x-pack/plugins/beats_management/public/index.tsx
@@ -6,10 +6,10 @@
 
 import * as euiVars from '@elastic/eui/dist/eui_theme_k6_light.json';
 import { i18n } from '@kbn/i18n';
-import { I18nProvider } from '@kbn/i18n/react';
 import React from 'react';
 import { HashRouter } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
+import { I18nContext } from 'ui/i18n';
 import { Provider as UnstatedProvider, Subscribe } from 'unstated';
 import { BASE_PATH } from '../common/constants';
 import { Background } from './components/layouts/background';
@@ -25,7 +25,7 @@ async function startApp(libs: FrontendLibs) {
   libs.framework.renderUIAtPath(
     BASE_PATH,
     <ThemeProvider theme={{ eui: euiVars }}>
-      <I18nProvider>
+      <I18nContext>
         <HashRouter basename="/management/beats_management">
           <UnstatedProvider inject={[new BeatsContainer(libs), new TagsContainer(libs)]}>
             <BreadcrumbProvider useGlobalBreadcrumbs={libs.framework.versionGreaterThen('6.7.0')}>
@@ -44,7 +44,7 @@ async function startApp(libs: FrontendLibs) {
             </BreadcrumbProvider>
           </UnstatedProvider>
         </HashRouter>
-      </I18nProvider>
+      </I18nContext>
     </ThemeProvider>,
     libs.framework.versionGreaterThen('6.7.0') ? 'management' : 'self'
   );
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/index.js b/x-pack/plugins/cross_cluster_replication/public/app/index.js
index 1400dcdb19e1..2755ebf07dca 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/index.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/index.js
@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
@@ -14,13 +14,13 @@ import { ccrStore } from './store';
 
 export const renderReact = async (elem) => {
   render(
-    <I18nProvider>
+    <I18nContext>
       <Provider store={ccrStore}>
         <HashRouter>
           <App />
         </HashRouter>
       </Provider>
-    </I18nProvider>,
+    </I18nContext>,
     elem
   );
 };
diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.js b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.js
index 33e5c561d63a..a07ba56057b4 100644
--- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.js
+++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.js
@@ -9,7 +9,7 @@ import 'plugins/grokdebugger/services/grokdebugger';
 import { GrokDebugger } from '../../components/grok_debugger';
 import { render } from 'react-dom';
 import React from 'react';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 const app = uiModules.get('xpack/grokdebugger');
 
@@ -19,7 +19,7 @@ app.directive('grokdebugger', function ($injector) {
   return {
     restrict: 'E',
     link: (scope, el) => {
-      render(<I18nProvider><GrokDebugger grokdebuggerService={grokdebuggerService} /></I18nProvider>, el[0]);
+      render(<I18nContext><GrokDebugger grokdebuggerService={grokdebuggerService} /></I18nContext>, el[0]);
     }
   };
 });
diff --git a/x-pack/plugins/index_lifecycle_management/public/register_routes.js b/x-pack/plugins/index_lifecycle_management/public/register_routes.js
index 643ac68af613..41072e4c6e69 100644
--- a/x-pack/plugins/index_lifecycle_management/public/register_routes.js
+++ b/x-pack/plugins/index_lifecycle_management/public/register_routes.js
@@ -12,7 +12,7 @@ import chrome from 'ui/chrome';
 import { App } from './app';
 import { BASE_PATH } from '../common/constants';
 import { indexLifecycleManagementStore } from './store';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { setUrlService } from './services/navigation';
 
 import routes from 'ui/routes';
@@ -22,11 +22,11 @@ import { manageAngularLifecycle } from './services/manage_angular_lifecycle';
 let elem;
 const renderReact = async (elem) => {
   render(
-    <I18nProvider>
+    <I18nContext>
       <Provider store={indexLifecycleManagementStore()}>
         <App />
       </Provider>
-    </I18nProvider>,
+    </I18nContext>,
     elem
   );
 };
diff --git a/x-pack/plugins/index_management/public/register_routes.js b/x-pack/plugins/index_management/public/register_routes.js
index 2936664a1285..a926d64d3274 100644
--- a/x-pack/plugins/index_management/public/register_routes.js
+++ b/x-pack/plugins/index_management/public/register_routes.js
@@ -9,7 +9,6 @@ import { render, unmountComponentAtNode } from 'react-dom';
 import { Provider } from 'react-redux';
 import { HashRouter } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
-import { I18nProvider } from '@kbn/i18n/react';
 import { setHttpClient } from './services/api';
 import { setUrlService } from './services/navigation';
 
@@ -17,6 +16,7 @@ import { App } from './app';
 import { BASE_PATH } from '../common/constants/base_path';
 
 import routes from 'ui/routes';
+import { I18nContext } from 'ui/i18n';
 import { MANAGEMENT_BREADCRUMB } from 'ui/management';
 
 import template from './main.html';
@@ -26,13 +26,13 @@ import { indexManagementStore } from './store';
 let elem;
 const renderReact = async (elem) => {
   render(
-    <I18nProvider>
+    <I18nContext>
       <Provider store={indexManagementStore()}>
         <HashRouter>
           <App />
         </HashRouter>
       </Provider>
-    </I18nProvider>,
+    </I18nContext>,
     elem
   );
 };
diff --git a/x-pack/plugins/infra/public/apps/start_app.tsx b/x-pack/plugins/infra/public/apps/start_app.tsx
index 4227f58dd634..b3d67511a617 100644
--- a/x-pack/plugins/infra/public/apps/start_app.tsx
+++ b/x-pack/plugins/infra/public/apps/start_app.tsx
@@ -17,7 +17,7 @@ import { ThemeProvider } from 'styled-components';
 import { EuiErrorBoundary } from '@elastic/eui';
 import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { InfraFrontendLibs } from '../lib/lib';
 import { PageRouter } from '../routes';
 import { createStore } from '../store';
@@ -32,7 +32,7 @@ export async function startApp(libs: InfraFrontendLibs) {
   });
 
   libs.framework.render(
-    <I18nProvider>
+    <I18nContext>
       <EuiErrorBoundary>
         <ConstateProvider devtools>
           <ReduxStoreProvider store={store}>
@@ -49,6 +49,6 @@ export async function startApp(libs: InfraFrontendLibs) {
           </ReduxStoreProvider>
         </ConstateProvider>
       </EuiErrorBoundary>
-    </I18nProvider>
+    </I18nContext>
   );
 }
diff --git a/x-pack/plugins/license_management/public/register_route.js b/x-pack/plugins/license_management/public/register_route.js
index 99ff1e57b576..720be44bd5d5 100644
--- a/x-pack/plugins/license_management/public/register_route.js
+++ b/x-pack/plugins/license_management/public/register_route.js
@@ -9,7 +9,7 @@ import { render, unmountComponentAtNode } from 'react-dom';
 import { Provider } from 'react-redux';
 import { HashRouter } from 'react-router-dom';
 import { setTelemetryOptInService, setTelemetryEnabled, setHttpClient, TelemetryOptInProvider } from './lib/telemetry';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import chrome from 'ui/chrome';
 
 import App from './app';
@@ -24,13 +24,13 @@ import { getDashboardBreadcrumbs, getUploadBreadcrumbs } from './breadcrumbs';
 
 const renderReact = (elem, store) => {
   render(
-    <I18nProvider>
+    <I18nContext>
       <Provider store={store}>
         <HashRouter>
           <App />
         </HashRouter>
       </Provider>
-    </I18nProvider>,
+    </I18nContext>,
     elem
   );
 };
diff --git a/x-pack/plugins/logstash/public/sections/pipeline_edit/components/pipeline_edit/pipeline_edit.js b/x-pack/plugins/logstash/public/sections/pipeline_edit/components/pipeline_edit/pipeline_edit.js
index da40327e50db..4a88de6426d5 100755
--- a/x-pack/plugins/logstash/public/sections/pipeline_edit/components/pipeline_edit/pipeline_edit.js
+++ b/x-pack/plugins/logstash/public/sections/pipeline_edit/components/pipeline_edit/pipeline_edit.js
@@ -9,7 +9,7 @@ import { render } from 'react-dom';
 import { isEmpty } from 'lodash';
 import { uiModules } from 'ui/modules';
 import { Notifier, toastNotifications } from 'ui/notify';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { PipelineEditor } from '../../../../components/pipeline_editor';
 import 'plugins/logstash/services/license';
 import 'plugins/logstash/services/security';
@@ -37,7 +37,7 @@ app.directive('pipelineEdit', function ($injector) {
         : null;
 
       render(
-        <I18nProvider>
+        <I18nContext>
           <PipelineEditor
             kbnUrl={kbnUrl}
             close={close}
@@ -51,7 +51,7 @@ app.directive('pipelineEdit', function ($injector) {
             licenseService={licenseService}
             notifier={new Notifier({ location: 'Logstash' })}
           />
-        </I18nProvider>,
+        </I18nContext>,
         el[0]
       );
     },
diff --git a/x-pack/plugins/logstash/public/sections/pipeline_edit/components/upgrade_failure/upgrade_failure.js b/x-pack/plugins/logstash/public/sections/pipeline_edit/components/upgrade_failure/upgrade_failure.js
index cf67b88c1de1..2ef99d3b4767 100755
--- a/x-pack/plugins/logstash/public/sections/pipeline_edit/components/upgrade_failure/upgrade_failure.js
+++ b/x-pack/plugins/logstash/public/sections/pipeline_edit/components/upgrade_failure/upgrade_failure.js
@@ -8,7 +8,7 @@ import React from 'react';
 import { render } from 'react-dom';
 import { isEmpty } from 'lodash';
 import { uiModules } from 'ui/modules';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { UpgradeFailure } from '../../../../components/upgrade_failure';
 
 const app = uiModules.get('xpack/logstash');
@@ -30,14 +30,14 @@ app.directive('upgradeFailure', $injector => {
       const isManualUpgrade = !!$route.current.params.retry;
 
       render(
-        <I18nProvider>
+        <I18nContext>
           <UpgradeFailure
             isNewPipeline={isNewPipeline}
             isManualUpgrade={isManualUpgrade}
             onRetry={onRetry}
             onClose={onClose}
           />
-        </I18nProvider>,
+        </I18nContext>,
         el[0]
       );
     },
diff --git a/x-pack/plugins/logstash/public/sections/pipeline_list/components/pipeline_list/pipeline_list.js b/x-pack/plugins/logstash/public/sections/pipeline_list/components/pipeline_list/pipeline_list.js
index 4000fe7ef08a..d248c9b1851a 100755
--- a/x-pack/plugins/logstash/public/sections/pipeline_list/components/pipeline_list/pipeline_list.js
+++ b/x-pack/plugins/logstash/public/sections/pipeline_list/components/pipeline_list/pipeline_list.js
@@ -8,7 +8,7 @@ import React from 'react';
 import { render } from 'react-dom';
 import { uiModules } from 'ui/modules';
 import { toastNotifications } from 'ui/notify';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { PipelineList } from '../../../../components/pipeline_list';
 import 'plugins/logstash/services/pipelines';
 import 'plugins/logstash/services/license';
@@ -34,7 +34,7 @@ app.directive('pipelineList', function ($injector) {
       const clonePipeline = id =>
         scope.$evalAsync(kbnUrl.change(`management/logstash/pipelines/pipeline/${id}/edit?clone`));
       render(
-        <I18nProvider>
+        <I18nContext>
           <PipelineList
             clonePipeline={clonePipeline}
             clusterService={clusterService}
@@ -48,7 +48,7 @@ app.directive('pipelineList', function ($injector) {
             pipelinesService={pipelinesService}
             toastNotifications={toastNotifications}
           />
-        </I18nProvider>,
+        </I18nContext>,
         el[0]
       );
     },
diff --git a/x-pack/plugins/maps/public/angular/map_controller.js b/x-pack/plugins/maps/public/angular/map_controller.js
index e246ec20a3a6..c483c3cbac07 100644
--- a/x-pack/plugins/maps/public/angular/map_controller.js
+++ b/x-pack/plugins/maps/public/angular/map_controller.js
@@ -6,7 +6,7 @@
 
 import chrome from 'ui/chrome';
 import React from 'react';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { uiModules } from 'ui/modules';
 import { timefilter } from 'ui/timefilter';
@@ -142,9 +142,9 @@ app.controller('GisMapController', ($scope, $route, config, kbnUrl, localStorage
     const root = document.getElementById(REACT_ANCHOR_DOM_ELEMENT_ID);
     render(
       <Provider store={store}>
-        <I18nProvider>
+        <I18nContext>
           <GisMap/>
-        </I18nProvider>
+        </I18nContext>
       </Provider>,
       root
     );
diff --git a/x-pack/plugins/ml/public/components/annotations_table/annotations_table_directive.js b/x-pack/plugins/ml/public/components/annotations_table/annotations_table_directive.js
index 29d8dcb87595..5e8cece16299 100644
--- a/x-pack/plugins/ml/public/components/annotations_table/annotations_table_directive.js
+++ b/x-pack/plugins/ml/public/components/annotations_table/annotations_table_directive.js
@@ -23,7 +23,7 @@ const module = uiModules.get('apps/ml');
 import chrome from 'ui/chrome';
 const mlAnnotationsEnabled = chrome.getInjected('mlAnnotationsEnabled', false);
 
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 module.directive('mlAnnotationTable', function () {
 
@@ -41,9 +41,9 @@ module.directive('mlAnnotationTable', function () {
       };
 
       ReactDOM.render(
-        <I18nProvider>
+        <I18nContext>
           {React.createElement(AnnotationsTable, props)}
-        </I18nProvider>,
+        </I18nContext>,
         element[0]
       );
     }
diff --git a/x-pack/plugins/ml/public/components/anomalies_table/anomalies_table_directive.js b/x-pack/plugins/ml/public/components/anomalies_table/anomalies_table_directive.js
index da855ebea053..5772bc98959e 100644
--- a/x-pack/plugins/ml/public/components/anomalies_table/anomalies_table_directive.js
+++ b/x-pack/plugins/ml/public/components/anomalies_table/anomalies_table_directive.js
@@ -7,9 +7,9 @@
 
 import 'ngreact';
 
+import { wrapInI18nContext } from 'ui/i18n';
 import { uiModules } from 'ui/modules';
 import { timefilter } from 'ui/timefilter';
-import { injectI18nProvider } from '@kbn/i18n/react';
 const module = uiModules.get('apps/ml', ['react']);
 
 import { AnomaliesTable } from './anomalies_table';
@@ -18,7 +18,7 @@ module.directive('mlAnomaliesTable', function ($injector) {
   const reactDirective = $injector.get('reactDirective');
 
   return reactDirective(
-    injectI18nProvider(AnomaliesTable),
+    wrapInI18nContext(AnomaliesTable),
     [
       ['filter', { watchDepth: 'reference' }],
       ['tableData', { watchDepth: 'reference' }]
diff --git a/x-pack/plugins/ml/public/components/controls/select_severity/select_severity_directive.js b/x-pack/plugins/ml/public/components/controls/select_severity/select_severity_directive.js
index 58e0da263d29..ef168fa0f0e8 100644
--- a/x-pack/plugins/ml/public/components/controls/select_severity/select_severity_directive.js
+++ b/x-pack/plugins/ml/public/components/controls/select_severity/select_severity_directive.js
@@ -7,13 +7,13 @@
 
 import 'ngreact';
 
+import { wrapInI18nContext } from 'ui/i18n';
 import { stateFactoryProvider } from 'plugins/ml/factories/state_factory';
 
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml', ['react']);
 
 import { SelectSeverity, mlSelectSeverityService } from './select_severity';
-import { injectI18nProvider } from '@kbn/i18n/react';
 
 module.service('mlSelectSeverityService', function (Private, i18n) {
   const stateFactory = Private(stateFactoryProvider);
@@ -29,7 +29,7 @@ module.service('mlSelectSeverityService', function (Private, i18n) {
     const reactDirective = $injector.get('reactDirective');
 
     return reactDirective(
-      injectI18nProvider(SelectSeverity),
+      wrapInI18nContext(SelectSeverity),
       undefined,
       { restrict: 'E' },
     );
diff --git a/x-pack/plugins/ml/public/components/field_title_bar/field_title_bar_directive.js b/x-pack/plugins/ml/public/components/field_title_bar/field_title_bar_directive.js
index 18f18a5949f1..96ea2e7e27c3 100644
--- a/x-pack/plugins/ml/public/components/field_title_bar/field_title_bar_directive.js
+++ b/x-pack/plugins/ml/public/components/field_title_bar/field_title_bar_directive.js
@@ -10,7 +10,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import { FieldTitleBar } from './field_title_bar';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml');
@@ -33,9 +33,9 @@ module.directive('mlFieldTitleBar', function () {
         };
 
         ReactDOM.render(
-          <I18nProvider>
+          <I18nContext>
             {React.createElement(FieldTitleBar, props)}
-          </I18nProvider>,
+          </I18nContext>,
           element[0]
         );
       }
diff --git a/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon_directive.js b/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon_directive.js
index a134ebfcb691..2be9129df6f7 100644
--- a/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon_directive.js
+++ b/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon_directive.js
@@ -10,7 +10,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import { FieldTypeIcon } from './field_type_icon.js';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml');
@@ -35,9 +35,9 @@ module.directive('mlFieldTypeIcon', function () {
         };
 
         ReactDOM.render(
-          <I18nProvider>
+          <I18nContext>
             {React.createElement(FieldTypeIcon, props)}
-          </I18nProvider>,
+          </I18nContext>,
           element[0]
         );
       }
diff --git a/x-pack/plugins/ml/public/components/validate_job/validate_job_directive.js b/x-pack/plugins/ml/public/components/validate_job/validate_job_directive.js
index e2d8ce214179..29455f394915 100644
--- a/x-pack/plugins/ml/public/components/validate_job/validate_job_directive.js
+++ b/x-pack/plugins/ml/public/components/validate_job/validate_job_directive.js
@@ -9,16 +9,16 @@
 
 import 'ngreact';
 
+import { wrapInI18nContext } from 'ui/i18n';
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml', ['react']);
 
 import { ValidateJob } from './validate_job_view';
 import { mlJobService } from 'plugins/ml/services/job_service';
-import { injectI18nProvider } from '@kbn/i18n/react';
 
 module.directive('mlValidateJob', function (reactDirective) {
   return reactDirective(
-    injectI18nProvider(ValidateJob),
+    wrapInI18nContext(ValidateJob),
     undefined,
     { restrict: 'E' },
     { mlJobService }
diff --git a/x-pack/plugins/ml/public/datavisualizer/selector/directive.js b/x-pack/plugins/ml/public/datavisualizer/selector/directive.js
index 603a5f8f1b85..3b00bf7430e7 100644
--- a/x-pack/plugins/ml/public/datavisualizer/selector/directive.js
+++ b/x-pack/plugins/ml/public/datavisualizer/selector/directive.js
@@ -6,8 +6,7 @@
 
 import 'ngreact';
 
-import { injectI18nProvider } from '@kbn/i18n/react';
-
+import { wrapInI18nContext } from 'ui/i18n';
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml', ['react']);
 
@@ -35,5 +34,5 @@ import { DatavisualizerSelector } from './datavisualizer_selector';
 module.directive('datavisualizerSelector', function ($injector) {
   const reactDirective = $injector.get('reactDirective');
 
-  return reactDirective(injectI18nProvider(DatavisualizerSelector), undefined, { restrict: 'E' }, { });
+  return reactDirective(wrapInI18nContext(DatavisualizerSelector), undefined, { restrict: 'E' }, { });
 });
diff --git a/x-pack/plugins/ml/public/explorer/explorer_react_wrapper_directive.js b/x-pack/plugins/ml/public/explorer/explorer_react_wrapper_directive.js
index b1cbf9bb554d..dc2618c992b8 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_react_wrapper_directive.js
+++ b/x-pack/plugins/ml/public/explorer/explorer_react_wrapper_directive.js
@@ -16,7 +16,7 @@ import { Explorer } from './explorer';
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml');
 
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { mapScopeToProps } from './explorer_utils';
 
 import { EXPLORER_ACTION } from './explorer_constants';
@@ -25,7 +25,7 @@ import { mlExplorerDashboardService } from './explorer_dashboard_service';
 module.directive('mlExplorerReactWrapper', function () {
   function link(scope, element) {
     ReactDOM.render(
-      <I18nProvider>{React.createElement(Explorer, mapScopeToProps(scope))}</I18nProvider>,
+      <I18nContext>{React.createElement(Explorer, mapScopeToProps(scope))}</I18nContext>,
       element[0]
     );
 
diff --git a/x-pack/plugins/ml/public/file_datavisualizer/file_datavisualizer_directive.js b/x-pack/plugins/ml/public/file_datavisualizer/file_datavisualizer_directive.js
index 5452ab036eb7..7ba3c83f3b31 100644
--- a/x-pack/plugins/ml/public/file_datavisualizer/file_datavisualizer_directive.js
+++ b/x-pack/plugins/ml/public/file_datavisualizer/file_datavisualizer_directive.js
@@ -6,8 +6,8 @@
 
 
 import 'ngreact';
-import { injectI18nProvider } from '@kbn/i18n/react';
 
+import { wrapInI18nContext } from 'ui/i18n';
 import { uiModules } from 'ui/modules';
 
 const module = uiModules.get('apps/ml', ['react']);
@@ -42,5 +42,5 @@ module.directive('fileDatavisualizerPage', function ($injector) {
   const indexPatterns = $injector.get('indexPatterns');
   const kibanaConfig = $injector.get('config');
 
-  return reactDirective(injectI18nProvider(FileDataVisualizerPage), undefined, { restrict: 'E' }, { indexPatterns, kibanaConfig });
+  return reactDirective(wrapInI18nContext(FileDataVisualizerPage), undefined, { restrict: 'E' }, { indexPatterns, kibanaConfig });
 });
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/directive.js b/x-pack/plugins/ml/public/jobs/jobs_list/directive.js
index 0025cc0d4cae..f02bd920529e 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/directive.js
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/directive.js
@@ -36,7 +36,7 @@ uiRoutes
   });
 
 import { JobsPage } from './jobs';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 module.directive('jobsPage', function () {
   return {
@@ -44,9 +44,9 @@ module.directive('jobsPage', function () {
     restrict: 'E',
     link: (scope, element) => {
       ReactDOM.render(
-        <I18nProvider>
+        <I18nContext>
           {React.createElement(JobsPage, { angularWrapperScope: scope })}
-        </I18nProvider>,
+        </I18nContext>,
         element[0]
       );
     }
diff --git a/x-pack/plugins/ml/public/jobs/new_job/advanced/enable_model_plot_callout/enable_model_plot_callout_directive.js b/x-pack/plugins/ml/public/jobs/new_job/advanced/enable_model_plot_callout/enable_model_plot_callout_directive.js
index 2284624570cc..fadb32a2c459 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/advanced/enable_model_plot_callout/enable_model_plot_callout_directive.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/advanced/enable_model_plot_callout/enable_model_plot_callout_directive.js
@@ -8,15 +8,15 @@
 
 import 'ngreact';
 
+import { wrapInI18nContext } from 'ui/i18n';
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml', ['react']);
 
 import { EnableModelPlotCallout } from './enable_model_plot_callout_view.js';
-import { injectI18nProvider } from '@kbn/i18n/react';
 
 module.directive('mlEnableModelPlotCallout', function (reactDirective) {
   return reactDirective(
-    injectI18nProvider(
+    wrapInI18nContext(
       EnableModelPlotCallout,
       undefined,
       { restrict: 'E' }
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_estimator/bucket_span_estimator_directive.js b/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_estimator/bucket_span_estimator_directive.js
index 91c41b0fcf71..7bb6238354c5 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_estimator/bucket_span_estimator_directive.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_estimator/bucket_span_estimator_directive.js
@@ -11,7 +11,7 @@ import { BucketSpanEstimator } from './bucket_span_estimator_view';
 import { EVENT_RATE_COUNT_FIELD } from 'plugins/ml/jobs/new_job/simple/components/constants/general';
 import { ml } from 'plugins/ml/services/ml_api_service';
 
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml');
@@ -138,9 +138,9 @@ module.directive('mlBucketSpanEstimator', function (i18n) {
         };
 
         ReactDOM.render(
-          <I18nProvider>
+          <I18nContext>
             {React.createElement(BucketSpanEstimator, props)}
-          </I18nProvider>,
+          </I18nContext>,
           $element[0]
         );
       }
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/enable_model_plot_checkbox/enable_model_plot_checkbox_directive.js b/x-pack/plugins/ml/public/jobs/new_job/simple/components/enable_model_plot_checkbox/enable_model_plot_checkbox_directive.js
index 82773e9e4e62..3fc1bb85d193 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/enable_model_plot_checkbox/enable_model_plot_checkbox_directive.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/enable_model_plot_checkbox/enable_model_plot_checkbox_directive.js
@@ -11,7 +11,7 @@ import { EnableModelPlotCheckbox } from './enable_model_plot_checkbox_view.js';
 import { ml } from '../../../../../services/ml_api_service';
 import { checkCardinalitySuccess } from '../../../utils/new_job_utils';
 
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml');
@@ -142,9 +142,9 @@ module.directive('mlEnableModelPlotCheckbox', function (i18n) {
         };
 
         ReactDOM.render(
-          <I18nProvider>
+          <I18nContext>
             {React.createElement(EnableModelPlotCheckbox, props)}
-          </I18nProvider>,
+          </I18nContext>,
           $element[0]
         );
       }
diff --git a/x-pack/plugins/ml/public/settings/calendars/edit/directive.js b/x-pack/plugins/ml/public/settings/calendars/edit/directive.js
index 5baa0de1421d..9819dacde9ca 100644
--- a/x-pack/plugins/ml/public/settings/calendars/edit/directive.js
+++ b/x-pack/plugins/ml/public/settings/calendars/edit/directive.js
@@ -19,7 +19,7 @@ import { getCreateCalendarBreadcrumbs, getEditCalendarBreadcrumbs } from '../../
 
 import uiRoutes from 'ui/routes';
 
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 const template = `
   <ml-nav-menu name="settings" />
@@ -63,9 +63,9 @@ module.directive('mlNewCalendar', function ($route) {
       };
 
       ReactDOM.render(
-        <I18nProvider>
+        <I18nContext>
           {React.createElement(NewCalendar, props)}
-        </I18nProvider>,
+        </I18nContext>,
         element[0]
       );
     }
diff --git a/x-pack/plugins/ml/public/settings/calendars/list/directive.js b/x-pack/plugins/ml/public/settings/calendars/list/directive.js
index 251ddafae448..cd142f85de62 100644
--- a/x-pack/plugins/ml/public/settings/calendars/list/directive.js
+++ b/x-pack/plugins/ml/public/settings/calendars/list/directive.js
@@ -19,7 +19,7 @@ import { getCalendarManagementBreadcrumbs } from '../../breadcrumbs';
 
 import uiRoutes from 'ui/routes';
 
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 const template = `
   <ml-nav-menu name="settings" />
@@ -54,9 +54,9 @@ module.directive('mlCalendarsList', function () {
       };
 
       ReactDOM.render(
-        <I18nProvider>
+        <I18nContext>
           {React.createElement(CalendarsList, props)}
-        </I18nProvider>,
+        </I18nContext>,
         element[0]
       );
     }
diff --git a/x-pack/plugins/ml/public/settings/filter_lists/edit/directive.js b/x-pack/plugins/ml/public/settings/filter_lists/edit/directive.js
index 7878d1cdb0ca..eabf0575f67d 100644
--- a/x-pack/plugins/ml/public/settings/filter_lists/edit/directive.js
+++ b/x-pack/plugins/ml/public/settings/filter_lists/edit/directive.js
@@ -9,7 +9,7 @@ import 'ngreact';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml', ['react']);
@@ -62,9 +62,9 @@ module.directive('mlEditFilterList', function ($route) {
       };
 
       ReactDOM.render(
-        <I18nProvider>
+        <I18nContext>
           {React.createElement(EditFilterList, props)}
-        </I18nProvider>,
+        </I18nContext>,
         element[0]
       );
     }
diff --git a/x-pack/plugins/ml/public/settings/filter_lists/list/directive.js b/x-pack/plugins/ml/public/settings/filter_lists/list/directive.js
index e1c5c586f3b4..7e5b90add912 100644
--- a/x-pack/plugins/ml/public/settings/filter_lists/list/directive.js
+++ b/x-pack/plugins/ml/public/settings/filter_lists/list/directive.js
@@ -9,7 +9,7 @@ import 'ngreact';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml', ['react']);
@@ -52,9 +52,9 @@ module.directive('mlFilterLists', function () {
       };
 
       ReactDOM.render(
-        <I18nProvider>
+        <I18nContext>
           {React.createElement(FilterLists, props)}
-        </I18nProvider>,
+        </I18nContext>,
         element[0]
       );
     }
diff --git a/x-pack/plugins/ml/public/settings/settings.test.js b/x-pack/plugins/ml/public/settings/settings.test.js
index 207537ea089b..3e41aba37a26 100644
--- a/x-pack/plugins/ml/public/settings/settings.test.js
+++ b/x-pack/plugins/ml/public/settings/settings.test.js
@@ -10,7 +10,7 @@ jest.mock('ui/chrome', () => ({
   getBasePath: jest.fn()
 }));
 
-import { shallow, mount } from 'enzyme';
+import { shallowWithIntl, mountWithIntl } from 'test_utils/enzyme_helpers';
 import React from 'react';
 
 import { Settings } from './settings';
@@ -19,7 +19,7 @@ import { Settings } from './settings';
 describe('Settings', () => {
 
   test('Renders settings page', () => {
-    const wrapper = shallow(
+    const wrapper = shallowWithIntl(
       <Settings canGetFilters={true} canGetCalendars={true}/>
     );
 
@@ -27,7 +27,7 @@ describe('Settings', () => {
   });
 
   test('Filter Lists button disabled if canGetFilters is false', () => {
-    const wrapper = mount(
+    const wrapper = mountWithIntl(
       <Settings canGetFilters={false} canGetCalendars={true}/>
     );
 
@@ -37,7 +37,7 @@ describe('Settings', () => {
   });
 
   test('Calendar management button disabled if canGetCalendars is false', () => {
-    const wrapper = mount(
+    const wrapper = mountWithIntl(
       <Settings canGetFilters={true} canGetCalendars={false} />
     );
 
diff --git a/x-pack/plugins/ml/public/settings/settings_directive.js b/x-pack/plugins/ml/public/settings/settings_directive.js
index d9272cda344f..b82a03f45ee1 100644
--- a/x-pack/plugins/ml/public/settings/settings_directive.js
+++ b/x-pack/plugins/ml/public/settings/settings_directive.js
@@ -17,9 +17,9 @@ import { checkGetJobsPrivilege, checkPermission } from '../privilege/check_privi
 import { getMlNodeCount } from '../ml_nodes_check/check_ml_nodes';
 import { getSettingsBreadcrumbs } from './breadcrumbs';
 
+import { I18nContext } from 'ui/i18n';
 import uiRoutes from 'ui/routes';
 import { timefilter } from 'ui/timefilter';
-import { I18nProvider } from '@kbn/i18n/react';
 
 const template = `
   <ml-nav-menu name="settings" />
@@ -56,14 +56,14 @@ module.directive('mlSettings', function () {
     scope: {},
     link: function (scope, element) {
       ReactDOM.render(
-        <I18nProvider>
+        <I18nContext>
           {React.createElement(
             Settings, {
               canGetFilters,
               canGetCalendars
             })
           }
-        </I18nProvider>,
+        </I18nContext>,
         element[0]
       );
     }
diff --git a/x-pack/plugins/ml/public/timeseriesexplorer/components/forecasting_modal/forecasting_modal_directive.js b/x-pack/plugins/ml/public/timeseriesexplorer/components/forecasting_modal/forecasting_modal_directive.js
index 6b1c74ec8fa5..cf101256724e 100644
--- a/x-pack/plugins/ml/public/timeseriesexplorer/components/forecasting_modal/forecasting_modal_directive.js
+++ b/x-pack/plugins/ml/public/timeseriesexplorer/components/forecasting_modal/forecasting_modal_directive.js
@@ -7,18 +7,17 @@
 
 import 'ngreact';
 
+import { wrapInI18nContext } from 'ui/i18n';
 import { timefilter } from 'ui/timefilter';
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml', ['react']);
 
 import { ForecastingModal } from './forecasting_modal';
 
-import { injectI18nProvider } from '@kbn/i18n/react';
-
 module.directive('mlForecastingModal', function ($injector) {
   const reactDirective = $injector.get('reactDirective');
   return reactDirective(
-    injectI18nProvider(ForecastingModal),
+    wrapInI18nContext(ForecastingModal),
     // reactDirective service requires for react component to have propTypes, but injectI18n doesn't copy propTypes from wrapped component.
     // That's why we pass propTypes directly to reactDirective service.
     Object.keys(ForecastingModal.WrappedComponent.propTypes || {}),
diff --git a/x-pack/plugins/ml/public/timeseriesexplorer/components/timeseries_chart/timeseries_chart_directive.js b/x-pack/plugins/ml/public/timeseriesexplorer/components/timeseries_chart/timeseries_chart_directive.js
index 5f3c8c1fec46..d5464680fb6d 100644
--- a/x-pack/plugins/ml/public/timeseriesexplorer/components/timeseries_chart/timeseries_chart_directive.js
+++ b/x-pack/plugins/ml/public/timeseriesexplorer/components/timeseries_chart/timeseries_chart_directive.js
@@ -27,7 +27,7 @@ const module = uiModules.get('apps/ml');
 
 import { ml } from 'plugins/ml/services/ml_api_service';
 
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 import chrome from 'ui/chrome';
 const mlAnnotationsEnabled = chrome.getInjected('mlAnnotationsEnabled', false);
@@ -75,9 +75,9 @@ module.directive('mlTimeseriesChart', function ($timeout) {
       };
 
       ReactDOM.render(
-        <I18nProvider>
+        <I18nContext>
           {React.createElement(TimeseriesChart, props)}
-        </I18nProvider>,
+        </I18nContext>,
         element[0]
       );
     }
diff --git a/x-pack/plugins/monitoring/public/components/cluster/listing/listing.js b/x-pack/plugins/monitoring/public/components/cluster/listing/listing.js
index e36f2aa0d0bb..4cebf48a01a1 100644
--- a/x-pack/plugins/monitoring/public/components/cluster/listing/listing.js
+++ b/x-pack/plugins/monitoring/public/components/cluster/listing/listing.js
@@ -22,7 +22,7 @@ import {
 import { toastNotifications } from 'ui/notify';
 import { EuiMonitoringTable } from 'plugins/monitoring/components/table';
 import { AlertsIndicator } from 'plugins/monitoring/components/cluster/listing/alerts_indicator';
-import { I18nProvider, FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { STANDALONE_CLUSTER_CLUSTER_UUID } from '../../../../common/constants';
 
@@ -422,45 +422,43 @@ export class Listing extends Component {
     const hasStandaloneCluster = !!clusters.find(cluster => cluster.cluster_uuid === STANDALONE_CLUSTER_CLUSTER_UUID);
 
     return (
-      <I18nProvider>
-        <EuiPage>
-          <EuiPageBody>
-            <EuiPageContent>
-              {hasStandaloneCluster ? this.renderStandaloneClusterCallout(_changeCluster, angular.storage) : null}
-              <EuiMonitoringTable
-                className="clusterTable"
-                rows={clusters}
-                columns={getColumns(
-                  angular.showLicenseExpiration,
-                  _changeCluster,
-                  _handleClickIncompatibleLicense,
-                  _handleClickInvalidLicense
-                )}
-                rowProps={item => {
-                  return {
-                    'data-test-subj': `clusterRow_${item.cluster_uuid}`
-                  };
-                }}
-                sorting={{
-                  ...sorting,
-                  sort: {
-                    ...sorting.sort,
-                    field: 'cluster_name'
-                  }
-                }}
-                pagination={pagination}
-                search={{
-                  box: {
-                    incremental: true,
-                    placeholder: angular.scope.filterText
-                  },
-                }}
-                onTableChange={onTableChange}
-              />
-            </EuiPageContent>
-          </EuiPageBody>
-        </EuiPage>
-      </I18nProvider>
+      <EuiPage>
+        <EuiPageBody>
+          <EuiPageContent>
+            {hasStandaloneCluster ? this.renderStandaloneClusterCallout(_changeCluster, angular.storage) : null}
+            <EuiMonitoringTable
+              className="clusterTable"
+              rows={clusters}
+              columns={getColumns(
+                angular.showLicenseExpiration,
+                _changeCluster,
+                _handleClickIncompatibleLicense,
+                _handleClickInvalidLicense
+              )}
+              rowProps={item => {
+                return {
+                  'data-test-subj': `clusterRow_${item.cluster_uuid}`
+                };
+              }}
+              sorting={{
+                ...sorting,
+                sort: {
+                  ...sorting.sort,
+                  field: 'cluster_name'
+                }
+              }}
+              pagination={pagination}
+              search={{
+                box: {
+                  incremental: true,
+                  placeholder: angular.scope.filterText
+                },
+              }}
+              onTableChange={onTableChange}
+            />
+          </EuiPageContent>
+        </EuiPageBody>
+      </EuiPage>
     );
   }
 }
diff --git a/x-pack/plugins/monitoring/public/directives/beats/beat/index.js b/x-pack/plugins/monitoring/public/directives/beats/beat/index.js
index e7f0fc291c68..4532190c942d 100644
--- a/x-pack/plugins/monitoring/public/directives/beats/beat/index.js
+++ b/x-pack/plugins/monitoring/public/directives/beats/beat/index.js
@@ -10,7 +10,7 @@ import { render } from 'react-dom';
 import { uiModules } from 'ui/modules';
 import { Beat } from 'plugins/monitoring/components/beats/beat';
 import { timefilter } from 'ui/timefilter';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 const uiModule = uiModules.get('monitoring/directives', []);
 uiModule.directive('monitoringBeatsBeat', () => {
@@ -31,13 +31,13 @@ uiModule.directive('monitoringBeatsBeat', () => {
 
       scope.$watch('data', (data = {}) => {
         render((
-          <I18nProvider>
+          <I18nContext>
             <Beat
               summary={data.summary}
               metrics={data.metrics}
               onBrush={onBrush}
             />
-          </I18nProvider>
+          </I18nContext>
         ), $el[0]);
       });
 
diff --git a/x-pack/plugins/monitoring/public/directives/beats/listing/index.js b/x-pack/plugins/monitoring/public/directives/beats/listing/index.js
index b2964a28574f..64da148f6324 100644
--- a/x-pack/plugins/monitoring/public/directives/beats/listing/index.js
+++ b/x-pack/plugins/monitoring/public/directives/beats/listing/index.js
@@ -7,7 +7,7 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { uiModules } from 'ui/modules';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { Listing } from '../../../components/beats/listing/listing';
 
 const uiModule = uiModules.get('monitoring/directives', []);
@@ -23,7 +23,7 @@ uiModule.directive('monitoringBeatsListing', (kbnUrl) => {
     link(scope, $el) {
       function renderReact(data) {
         render((
-          <I18nProvider>
+          <I18nContext>
             <Listing
               stats={data.stats}
               data={data.listing}
@@ -35,7 +35,7 @@ uiModule.directive('monitoringBeatsListing', (kbnUrl) => {
                 scope,
               }}
             />
-          </I18nProvider>
+          </I18nContext>
         ), $el[0]);
       }
       scope.$watch('data', (data = {}) => {
diff --git a/x-pack/plugins/monitoring/public/directives/beats/overview/index.js b/x-pack/plugins/monitoring/public/directives/beats/overview/index.js
index e99433c741d4..051088e3af7f 100644
--- a/x-pack/plugins/monitoring/public/directives/beats/overview/index.js
+++ b/x-pack/plugins/monitoring/public/directives/beats/overview/index.js
@@ -10,7 +10,7 @@ import { render } from 'react-dom';
 import { uiModules } from 'ui/modules';
 import { BeatsOverview } from 'plugins/monitoring/components/beats/overview';
 import { timefilter } from 'ui/timefilter';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 const uiModule = uiModules.get('monitoring/directives', []);
 uiModule.directive('monitoringBeatsOverview', () => {
@@ -31,12 +31,12 @@ uiModule.directive('monitoringBeatsOverview', () => {
 
       scope.$watch('data', (data = {}) => {
         render((
-          <I18nProvider>
+          <I18nContext>
             <BeatsOverview
               {...data}
               onBrush={onBrush}
             />
-          </I18nProvider>
+          </I18nContext>
         ), $el[0]);
       });
 
diff --git a/x-pack/plugins/monitoring/public/directives/chart/index.js b/x-pack/plugins/monitoring/public/directives/chart/index.js
index 48912e7ecba7..713f3d29921c 100644
--- a/x-pack/plugins/monitoring/public/directives/chart/index.js
+++ b/x-pack/plugins/monitoring/public/directives/chart/index.js
@@ -11,7 +11,7 @@ import { uiModules } from 'ui/modules';
 import { timefilter } from 'ui/timefilter';
 import { MonitoringTimeseriesContainer } from '../../components/chart/monitoring_timeseries_container';
 import { EuiSpacer } from '@elastic/eui';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 const uiModule = uiModules.get('plugins/monitoring/directives', []);
 uiModule.directive('monitoringChart', () => {
@@ -31,7 +31,7 @@ uiModule.directive('monitoringChart', () => {
 
       scope.$watch('series', series => {
         render(
-          <I18nProvider>
+          <I18nContext>
             <Fragment>
               <MonitoringTimeseriesContainer
                 series={series}
@@ -39,7 +39,7 @@ uiModule.directive('monitoringChart', () => {
               />
               <EuiSpacer size="m"/>
             </Fragment>
-          </I18nProvider>,
+          </I18nContext>,
           $elem[0]
         );
       });
diff --git a/x-pack/plugins/monitoring/public/directives/elasticsearch/cluster_status/index.js b/x-pack/plugins/monitoring/public/directives/elasticsearch/cluster_status/index.js
index 7f0d5a665c33..a9a2abea4e85 100644
--- a/x-pack/plugins/monitoring/public/directives/elasticsearch/cluster_status/index.js
+++ b/x-pack/plugins/monitoring/public/directives/elasticsearch/cluster_status/index.js
@@ -8,7 +8,7 @@ import React from 'react';
 import { render } from 'react-dom';
 import { uiModules } from 'ui/modules';
 import { ClusterStatus } from 'plugins/monitoring/components/elasticsearch/cluster_status';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 const uiModule = uiModules.get('monitoring/directives', []);
 uiModule.directive('monitoringClusterStatusElasticsearch', () => {
@@ -19,7 +19,7 @@ uiModule.directive('monitoringClusterStatusElasticsearch', () => {
     },
     link(scope, $el) {
       scope.$watch('status', status => {
-        render(<I18nProvider><ClusterStatus stats={status} /></I18nProvider>, $el[0]);
+        render(<I18nContext><ClusterStatus stats={status} /></I18nContext>, $el[0]);
       });
     }
   };
diff --git a/x-pack/plugins/monitoring/public/directives/elasticsearch/index_summary/index.js b/x-pack/plugins/monitoring/public/directives/elasticsearch/index_summary/index.js
index 24e48609c478..234d0753f160 100644
--- a/x-pack/plugins/monitoring/public/directives/elasticsearch/index_summary/index.js
+++ b/x-pack/plugins/monitoring/public/directives/elasticsearch/index_summary/index.js
@@ -8,7 +8,7 @@ import React from 'react';
 import { render } from 'react-dom';
 import { uiModules } from 'ui/modules';
 import { IndexDetailStatus } from 'plugins/monitoring/components/elasticsearch/index_detail_status';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 const uiModule = uiModules.get('monitoring/directives', []);
 uiModule.directive('monitoringIndexSummary', () => {
@@ -17,7 +17,7 @@ uiModule.directive('monitoringIndexSummary', () => {
     scope: { summary: '=' },
     link(scope, $el) {
       scope.$watch('summary', summary => {
-        render(<I18nProvider><IndexDetailStatus stats={summary} /></I18nProvider>, $el[0]);
+        render(<I18nContext><IndexDetailStatus stats={summary} /></I18nContext>, $el[0]);
       });
     }
   };
diff --git a/x-pack/plugins/monitoring/public/directives/elasticsearch/ml_job_listing/index.js b/x-pack/plugins/monitoring/public/directives/elasticsearch/ml_job_listing/index.js
index 78a04c8c9f4f..b7d6987163b5 100644
--- a/x-pack/plugins/monitoring/public/directives/elasticsearch/ml_job_listing/index.js
+++ b/x-pack/plugins/monitoring/public/directives/elasticsearch/ml_job_listing/index.js
@@ -8,6 +8,7 @@ import { capitalize } from 'lodash';
 import numeral from '@elastic/numeral';
 import React from 'react';
 import { render } from 'react-dom';
+import { I18nContext } from 'ui/i18n';
 import { uiModules } from 'ui/modules';
 import { EuiMonitoringTable } from 'plugins/monitoring/components/table';
 import { MachineLearningJobStatusIcon } from 'plugins/monitoring/components/elasticsearch/ml_job_listing/status_icon';
@@ -22,7 +23,7 @@ import {
 } from '@elastic/eui';
 import { ClusterStatus } from '../../../components/elasticsearch/cluster_status';
 import { i18n } from '@kbn/i18n';
-import { I18nProvider, FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 const getColumns = (kbnUrl, scope) => ([
   {
@@ -130,7 +131,7 @@ uiModule.directive('monitoringMlListing', kbnUrl => {
 
       scope.$watch('jobs', (jobs = []) => {
         const mlTable = (
-          <I18nProvider>
+          <I18nContext>
             <EuiPage>
               <EuiPageBody>
                 <EuiPanel>
@@ -164,7 +165,7 @@ uiModule.directive('monitoringMlListing', kbnUrl => {
                 </EuiPageContent>
               </EuiPageBody>
             </EuiPage>
-          </I18nProvider>
+          </I18nContext>
         );
         render(mlTable, $el[0]);
       });
diff --git a/x-pack/plugins/monitoring/public/directives/elasticsearch/node_summary/index.js b/x-pack/plugins/monitoring/public/directives/elasticsearch/node_summary/index.js
index 81a8a55f58b0..030ba5c62126 100644
--- a/x-pack/plugins/monitoring/public/directives/elasticsearch/node_summary/index.js
+++ b/x-pack/plugins/monitoring/public/directives/elasticsearch/node_summary/index.js
@@ -8,7 +8,7 @@ import React from 'react';
 import { render } from 'react-dom';
 import { uiModules } from 'ui/modules';
 import { NodeDetailStatus } from 'plugins/monitoring/components/elasticsearch/node_detail_status';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 const uiModule = uiModules.get('monitoring/directives', []);
 uiModule.directive('monitoringNodeSummary', () => {
@@ -19,7 +19,7 @@ uiModule.directive('monitoringNodeSummary', () => {
     },
     link(scope, $el) {
       scope.$watch('node', node => {
-        render(<I18nProvider><NodeDetailStatus stats={node} /></I18nProvider>, $el[0]);
+        render(<I18nContext><NodeDetailStatus stats={node} /></I18nContext>, $el[0]);
       });
     }
   };
diff --git a/x-pack/plugins/monitoring/public/directives/kibana/cluster_status/index.js b/x-pack/plugins/monitoring/public/directives/kibana/cluster_status/index.js
index 1fd57f1b5c2c..c1daf984e8f8 100644
--- a/x-pack/plugins/monitoring/public/directives/kibana/cluster_status/index.js
+++ b/x-pack/plugins/monitoring/public/directives/kibana/cluster_status/index.js
@@ -8,7 +8,7 @@ import React from 'react';
 import { render } from 'react-dom';
 import { uiModules } from 'ui/modules';
 import { ClusterStatus } from 'plugins/monitoring/components/kibana/cluster_status';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 const uiModule = uiModules.get('monitoring/directives', []);
 uiModule.directive('monitoringClusterStatusKibana', () => {
@@ -19,7 +19,7 @@ uiModule.directive('monitoringClusterStatusKibana', () => {
     },
     link(scope, $el) {
       scope.$watch('status', status => {
-        render(<I18nProvider><ClusterStatus stats={status} /></I18nProvider>, $el[0]);
+        render(<I18nContext><ClusterStatus stats={status} /></I18nContext>, $el[0]);
       });
     },
   };
diff --git a/x-pack/plugins/monitoring/public/directives/kibana/listing/index.js b/x-pack/plugins/monitoring/public/directives/kibana/listing/index.js
index 46c2dca3468d..6c71517382dd 100644
--- a/x-pack/plugins/monitoring/public/directives/kibana/listing/index.js
+++ b/x-pack/plugins/monitoring/public/directives/kibana/listing/index.js
@@ -23,7 +23,8 @@ import {
   EuiLink,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage, injectI18n, I18nProvider } from '@kbn/i18n/react';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 const filterFields = [ 'kibana.name', 'kibana.host', 'kibana.status', 'kibana.transport_address' ];
 const columns = [
@@ -155,7 +156,7 @@ uiModule.directive('monitoringKibanaListing', (kbnUrl, i18n) => {
 
       scope.$watch('instances', (instances = []) => {
         const kibanasTable = (
-          <I18nProvider>
+          <I18nContext>
             <MonitoringTable
               className="kibanaInstancesTable"
               rows={instances}
@@ -169,7 +170,7 @@ uiModule.directive('monitoringKibanaListing', (kbnUrl, i18n) => {
               columns={columns}
               rowComponent={instanceRowFactory(scope, kbnUrl)}
             />
-          </I18nProvider>
+          </I18nContext>
         );
         render(kibanasTable, $el[0]);
       });
diff --git a/x-pack/plugins/monitoring/public/directives/kibana/summary/index.js b/x-pack/plugins/monitoring/public/directives/kibana/summary/index.js
index 521fc37a650c..e6411ccf67c4 100644
--- a/x-pack/plugins/monitoring/public/directives/kibana/summary/index.js
+++ b/x-pack/plugins/monitoring/public/directives/kibana/summary/index.js
@@ -8,7 +8,7 @@ import React from 'react';
 import { render } from 'react-dom';
 import { uiModules } from 'ui/modules';
 import { DetailStatus } from 'plugins/monitoring/components/kibana/detail_status';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 const uiModule = uiModules.get('monitoring/directives', []);
 uiModule.directive('monitoringKibanaSummary', () => {
@@ -19,7 +19,7 @@ uiModule.directive('monitoringKibanaSummary', () => {
     },
     link(scope, $el) {
       scope.$watch('kibana', kibana => {
-        render(<I18nProvider><DetailStatus stats={kibana} /></I18nProvider>, $el[0]);
+        render(<I18nContext><DetailStatus stats={kibana} /></I18nContext>, $el[0]);
       });
     }
   };
diff --git a/x-pack/plugins/monitoring/public/views/alerts/index.js b/x-pack/plugins/monitoring/public/views/alerts/index.js
index ab8b57bff072..944df36b2750 100644
--- a/x-pack/plugins/monitoring/public/views/alerts/index.js
+++ b/x-pack/plugins/monitoring/public/views/alerts/index.js
@@ -11,10 +11,11 @@ import uiRoutes from 'ui/routes';
 import template from './index.html';
 import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
 import { ajaxErrorHandlersProvider } from 'plugins/monitoring/lib/ajax_error_handler';
+import { I18nContext } from 'ui/i18n';
 import { timefilter } from 'ui/timefilter';
 import { Alerts } from '../../components/alerts';
 import { MonitoringViewBaseEuiTableController } from '../base_eui_table_controller';
-import { I18nProvider, FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiPage, EuiPageBody, EuiPageContent, EuiSpacer, EuiLink } from '@elastic/eui';
 
 function getPageData($injector) {
@@ -79,7 +80,7 @@ uiRoutes.when('/alerts', {
           />);
 
         render(
-          <I18nProvider>
+          <I18nContext>
             <EuiPage>
               <EuiPageBody>
                 <EuiPageContent>
@@ -96,7 +97,7 @@ uiRoutes.when('/alerts', {
                 </EuiPageContent>
               </EuiPageBody>
             </EuiPage>
-          </I18nProvider>,
+          </I18nContext>,
           document.getElementById('monitoringAlertsApp')
         );
       };
diff --git a/x-pack/plugins/monitoring/public/views/apm/instance/index.js b/x-pack/plugins/monitoring/public/views/apm/instance/index.js
index a9afb883ae72..ec662d7c96aa 100644
--- a/x-pack/plugins/monitoring/public/views/apm/instance/index.js
+++ b/x-pack/plugins/monitoring/public/views/apm/instance/index.js
@@ -19,7 +19,7 @@ import template from './index.html';
 import { MonitoringViewBaseController } from '../../base_controller';
 import { ApmServerInstance } from '../../../components/apm/instance';
 import { timefilter } from 'ui/timefilter';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 uiRoutes.when('/apm/instances/:uuid', {
   template,
@@ -69,13 +69,13 @@ uiRoutes.when('/apm/instances/:uuid', {
 
     renderReact(data, onBrush) {
       const component = (
-        <I18nProvider>
+        <I18nContext>
           <ApmServerInstance
             summary={data.apmSummary || {}}
             metrics={data.metrics || {}}
             onBrush={onBrush}
           />
-        </I18nProvider>
+        </I18nContext>
       );
       super.renderReact(component);
     }
diff --git a/x-pack/plugins/monitoring/public/views/apm/instances/index.js b/x-pack/plugins/monitoring/public/views/apm/instances/index.js
index 4c6c7ef784f0..3a104452076b 100644
--- a/x-pack/plugins/monitoring/public/views/apm/instances/index.js
+++ b/x-pack/plugins/monitoring/public/views/apm/instances/index.js
@@ -11,7 +11,7 @@ import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
 import template from './index.html';
 import { ApmServerInstances } from '../../../components/apm/instances';
 import { MonitoringViewBaseEuiTableController } from '../..';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 uiRoutes.when('/apm/instances', {
   template,
@@ -57,7 +57,7 @@ uiRoutes.when('/apm/instances', {
       } = this;
 
       const component = (
-        <I18nProvider>
+        <I18nContext>
           <ApmServerInstances
             apms={{
               pagination,
@@ -66,7 +66,7 @@ uiRoutes.when('/apm/instances', {
               data,
             }}
           />
-        </I18nProvider>
+        </I18nContext>
       );
       super.renderReact(component);
     }
diff --git a/x-pack/plugins/monitoring/public/views/apm/overview/index.js b/x-pack/plugins/monitoring/public/views/apm/overview/index.js
index f06a60d43c1d..ccb5ed38fbee 100644
--- a/x-pack/plugins/monitoring/public/views/apm/overview/index.js
+++ b/x-pack/plugins/monitoring/public/views/apm/overview/index.js
@@ -13,7 +13,7 @@ import template from './index.html';
 import { MonitoringViewBaseController } from '../../base_controller';
 import { ApmOverview } from '../../../components/apm/overview';
 import { timefilter } from 'ui/timefilter';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 uiRoutes.when('/apm', {
   template,
@@ -55,12 +55,12 @@ uiRoutes.when('/apm', {
 
     renderReact(data, onBrush) {
       const component = (
-        <I18nProvider>
+        <I18nContext>
           <ApmOverview
             {...data}
             onBrush={onBrush}
           />
-        </I18nProvider>
+        </I18nContext>
       );
       super.renderReact(component);
     }
diff --git a/x-pack/plugins/monitoring/public/views/base_controller.js b/x-pack/plugins/monitoring/public/views/base_controller.js
index ee69d53b8bd1..3c49dfa81f1e 100644
--- a/x-pack/plugins/monitoring/public/views/base_controller.js
+++ b/x-pack/plugins/monitoring/public/views/base_controller.js
@@ -10,7 +10,7 @@ import { render, unmountComponentAtNode } from 'react-dom';
 import { getPageData } from '../lib/get_page_data';
 import { PageLoading } from 'plugins/monitoring/components';
 import { timefilter } from 'ui/timefilter';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 /**
  * Class to manage common instantiation behaviors in a view controller
@@ -142,7 +142,7 @@ export class MonitoringViewBaseController {
 
   renderReact(component) {
     if (this._isDataInitialized === false) {
-      render(<I18nProvider><PageLoading /></I18nProvider>, document.getElementById(this.reactNodeId));
+      render(<I18nContext><PageLoading /></I18nContext>, document.getElementById(this.reactNodeId));
     } else {
       render(component, document.getElementById(this.reactNodeId));
     }
diff --git a/x-pack/plugins/monitoring/public/views/cluster/listing/index.js b/x-pack/plugins/monitoring/public/views/cluster/listing/index.js
index a7b59634e200..06250e517395 100644
--- a/x-pack/plugins/monitoring/public/views/cluster/listing/index.js
+++ b/x-pack/plugins/monitoring/public/views/cluster/listing/index.js
@@ -8,7 +8,7 @@ import React from 'react';
 import uiRoutes from 'ui/routes';
 import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
 import { MonitoringViewBaseEuiTableController } from '../../';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import template from './index.html';
 import { Listing } from '../../../components/cluster/listing';
 
@@ -59,7 +59,7 @@ uiRoutes.when('/home', {
 
       $scope.$watch(() => this.data, data => {
         this.renderReact(
-          <I18nProvider>
+          <I18nContext>
             <Listing
               clusters={data}
               angular={{
@@ -73,7 +73,7 @@ uiRoutes.when('/home', {
               pagination={this.pagination}
               onTableChange={this.onTableChange}
             />
-          </I18nProvider>
+          </I18nContext>
         );
       });
     }
diff --git a/x-pack/plugins/monitoring/public/views/cluster/overview/index.js b/x-pack/plugins/monitoring/public/views/cluster/overview/index.js
index bdfe0d4ec3b4..e8c9e1e067d8 100644
--- a/x-pack/plugins/monitoring/public/views/cluster/overview/index.js
+++ b/x-pack/plugins/monitoring/public/views/cluster/overview/index.js
@@ -9,7 +9,7 @@ import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
 import template from './index.html';
 import { MonitoringViewBaseController } from '../../';
 import { Overview } from 'plugins/monitoring/components/cluster/overview';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 uiRoutes.when('/overview', {
   template,
@@ -48,13 +48,13 @@ uiRoutes.when('/overview', {
 
       $scope.$watch(() => this.data, data => {
         this.renderReact(
-          <I18nProvider>
+          <I18nContext>
             <Overview
               cluster={data}
               changeUrl={changeUrl}
               showLicenseExpiration={true}
             />
-          </I18nProvider>
+          </I18nContext>
         );
       });
     }
diff --git a/x-pack/plugins/monitoring/public/views/elasticsearch/ccr/index.js b/x-pack/plugins/monitoring/public/views/elasticsearch/ccr/index.js
index d4f52621f372..5e8c6d265403 100644
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/ccr/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/ccr/index.js
@@ -11,7 +11,7 @@ import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
 import template from './index.html';
 import { Ccr } from '../../../components/elasticsearch/ccr';
 import { MonitoringViewBaseController } from '../../base_controller';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 uiRoutes.when('/elasticsearch/ccr', {
   template,
@@ -41,9 +41,9 @@ uiRoutes.when('/elasticsearch/ccr', {
 
       this.renderReact = ({ data }) => {
         super.renderReact(
-          <I18nProvider>
+          <I18nContext>
             <Ccr data={data} />
-          </I18nProvider>
+          </I18nContext>
         );
       };
     }
diff --git a/x-pack/plugins/monitoring/public/views/elasticsearch/ccr/shard/index.js b/x-pack/plugins/monitoring/public/views/elasticsearch/ccr/shard/index.js
index 54164b06ce09..aa4f89846eee 100644
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/ccr/shard/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/ccr/shard/index.js
@@ -12,7 +12,7 @@ import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
 import template from './index.html';
 import { MonitoringViewBaseController } from '../../../base_controller';
 import { CcrShard } from '../../../../components/elasticsearch/ccr_shard';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 uiRoutes.when('/elasticsearch/ccr/:index/shard/:shardId', {
   template,
@@ -50,9 +50,9 @@ uiRoutes.when('/elasticsearch/ccr/:index/shard/:shardId', {
 
       this.renderReact = (props) => {
         super.renderReact(
-          <I18nProvider>
+          <I18nContext>
             <CcrShard {...props} />
-          </I18nProvider>
+          </I18nContext>
         );
       };
     }
diff --git a/x-pack/plugins/monitoring/public/views/elasticsearch/index/advanced/index.js b/x-pack/plugins/monitoring/public/views/elasticsearch/index/advanced/index.js
index 1a51154beb62..48033b1fe7d5 100644
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/index/advanced/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/index/advanced/index.js
@@ -14,7 +14,7 @@ import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
 import template from './index.html';
 import { timefilter } from 'ui/timefilter';
 import { AdvancedIndex } from '../../../../components/elasticsearch/index/advanced';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { MonitoringViewBaseController } from '../../../base_controller';
 
 function getPageData($injector) {
@@ -73,13 +73,13 @@ uiRoutes.when('/elasticsearch/indices/:index/advanced', {
 
       $scope.$watch(() => this.data, data => {
         this.renderReact(
-          <I18nProvider>
+          <I18nContext>
             <AdvancedIndex
               indexSummary={data.indexSummary}
               metrics={data.metrics}
               onBrush={this.onBrush}
             />
-          </I18nProvider>
+          </I18nContext>
         );
       });
     }
diff --git a/x-pack/plugins/monitoring/public/views/elasticsearch/index/index.js b/x-pack/plugins/monitoring/public/views/elasticsearch/index/index.js
index ff93c25ce89e..da0cbec0ea08 100644
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/index/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/index/index.js
@@ -13,7 +13,7 @@ import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
 import { ajaxErrorHandlersProvider } from 'plugins/monitoring/lib/ajax_error_handler';
 import template from './index.html';
 import { timefilter } from 'ui/timefilter';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { labels } from '../../../components/elasticsearch/shard_allocation/lib/labels';
 import { indicesByNodes } from '../../../components/elasticsearch/shard_allocation/transformers/indices_by_nodes';
 import { Index } from '../../../components/elasticsearch/index/index';
@@ -90,14 +90,14 @@ uiRoutes.when('/elasticsearch/indices/:index', {
         }
 
         this.renderReact(
-          <I18nProvider>
+          <I18nContext>
             <Index
               scope={$scope}
               kbnUrl={kbnUrl}
               onBrush={this.onBrush}
               {...data}
             />
-          </I18nProvider>
+          </I18nContext>
         );
       });
     }
diff --git a/x-pack/plugins/monitoring/public/views/elasticsearch/indices/index.js b/x-pack/plugins/monitoring/public/views/elasticsearch/indices/index.js
index e91cb07169d3..67ddb7eb06ba 100644
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/indices/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/indices/index.js
@@ -11,7 +11,7 @@ import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
 import { MonitoringViewBaseEuiTableController } from '../../';
 import { ElasticsearchIndices } from '../../../components';
 import template from './index.html';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 uiRoutes.when('/elasticsearch/indices', {
   template,
@@ -63,7 +63,7 @@ uiRoutes.when('/elasticsearch/indices', {
 
       this.renderReact = ({ clusterStatus, indices }) => {
         super.renderReact(
-          <I18nProvider>
+          <I18nContext>
             <ElasticsearchIndices
               clusterStatus={clusterStatus}
               indices={indices}
@@ -73,7 +73,7 @@ uiRoutes.when('/elasticsearch/indices', {
               pagination={this.pagination}
               onTableChange={this.onTableChange}
             />
-          </I18nProvider>
+          </I18nContext>
         );
       };
     }
diff --git a/x-pack/plugins/monitoring/public/views/elasticsearch/node/advanced/index.js b/x-pack/plugins/monitoring/public/views/elasticsearch/node/advanced/index.js
index 676ea670c67c..f3f6de95956c 100644
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/node/advanced/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/node/advanced/index.js
@@ -13,7 +13,7 @@ import { ajaxErrorHandlersProvider } from 'plugins/monitoring/lib/ajax_error_han
 import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
 import template from './index.html';
 import { timefilter } from 'ui/timefilter';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { AdvancedNode } from '../../../../components/elasticsearch/node/advanced';
 import { MonitoringViewBaseController } from '../../../base_controller';
 
@@ -72,13 +72,13 @@ uiRoutes.when('/elasticsearch/nodes/:node/advanced', {
         }));
 
         this.renderReact(
-          <I18nProvider>
+          <I18nContext>
             <AdvancedNode
               nodeSummary={data.nodeSummary}
               metrics={data.metrics}
               onBrush={this.onBrush}
             />
-          </I18nProvider>
+          </I18nContext>
         );
       });
     }
diff --git a/x-pack/plugins/monitoring/public/views/elasticsearch/node/index.js b/x-pack/plugins/monitoring/public/views/elasticsearch/node/index.js
index 9c92a525e2a2..9ce4b4cb725d 100644
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/node/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/node/index.js
@@ -14,7 +14,7 @@ import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
 import { getPageData } from './get_page_data';
 import template from './index.html';
 import { Node } from '../../../components/elasticsearch/node/node';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { labels } from '../../../components/elasticsearch/shard_allocation/lib/labels';
 import { nodesByIndices } from '../../../components/elasticsearch/shard_allocation/transformers/nodes_by_indices';
 import { MonitoringViewBaseController } from '../../base_controller';
@@ -75,14 +75,14 @@ uiRoutes.when('/elasticsearch/nodes/:node', {
         $scope.labels = labels.node;
 
         this.renderReact(
-          <I18nProvider>
+          <I18nContext>
             <Node
               scope={$scope}
               kbnUrl={kbnUrl}
               onBrush={this.onBrush}
               {...data}
             />
-          </I18nProvider>
+          </I18nContext>
         );
       });
     }
diff --git a/x-pack/plugins/monitoring/public/views/elasticsearch/nodes/index.js b/x-pack/plugins/monitoring/public/views/elasticsearch/nodes/index.js
index 472be27a00cb..3a37b0fc3826 100644
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/nodes/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/nodes/index.js
@@ -11,7 +11,7 @@ import template from './index.html';
 import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
 import { MonitoringViewBaseEuiTableController } from '../../';
 import { ElasticsearchNodes } from '../../../components';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 uiRoutes.when('/elasticsearch/nodes', {
   template,
@@ -50,7 +50,7 @@ uiRoutes.when('/elasticsearch/nodes', {
 
       this.renderReact = ({ clusterStatus, nodes }) => {
         super.renderReact(
-          <I18nProvider>
+          <I18nContext>
             <ElasticsearchNodes
               clusterStatus={clusterStatus}
               nodes={nodes}
@@ -59,7 +59,7 @@ uiRoutes.when('/elasticsearch/nodes', {
               pagination={this.pagination}
               onTableChange={this.onTableChange}
             />
-          </I18nProvider>
+          </I18nContext>
         );
       };
     }
diff --git a/x-pack/plugins/monitoring/public/views/elasticsearch/overview/controller.js b/x-pack/plugins/monitoring/public/views/elasticsearch/overview/controller.js
index 6eee4e4cec09..01ef8c131974 100644
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/overview/controller.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/overview/controller.js
@@ -8,7 +8,7 @@ import React from 'react';
 import { find } from 'lodash';
 import { MonitoringViewBaseController } from '../../';
 import { ElasticsearchOverview } from 'plugins/monitoring/components';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 export class ElasticsearchOverviewController extends MonitoringViewBaseController {
   constructor($injector, $scope) {
@@ -71,7 +71,7 @@ export class ElasticsearchOverviewController extends MonitoringViewBaseControlle
     const { clusterStatus, metrics, shardActivity } = data;
     const shardActivityData = shardActivity && this.filterShardActivityData(shardActivity); // no filter on data = null
     const component = (
-      <I18nProvider>
+      <I18nContext>
         <ElasticsearchOverview
           clusterStatus={clusterStatus}
           metrics={metrics}
@@ -80,7 +80,7 @@ export class ElasticsearchOverviewController extends MonitoringViewBaseControlle
           showShardActivityHistory={this.showShardActivityHistory}
           toggleShardActivityHistory={this.toggleShardActivityHistory}
         />
-      </I18nProvider>
+      </I18nContext>
     );
 
     super.renderReact(component);
diff --git a/x-pack/plugins/monitoring/public/views/kibana/instance/index.js b/x-pack/plugins/monitoring/public/views/kibana/instance/index.js
index 9ca4c02e347c..232f607befaf 100644
--- a/x-pack/plugins/monitoring/public/views/kibana/instance/index.js
+++ b/x-pack/plugins/monitoring/public/views/kibana/instance/index.js
@@ -17,7 +17,7 @@ import { timefilter } from 'ui/timefilter';
 import { EuiPage, EuiPageBody, EuiPageContent, EuiSpacer, EuiFlexGrid, EuiFlexItem, EuiPanel } from '@elastic/eui';
 import { MonitoringTimeseriesContainer } from '../../../components/chart';
 import { DetailStatus } from 'plugins/monitoring/components/kibana/detail_status';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { MonitoringViewBaseController } from '../../base_controller';
 
 function getPageData($injector) {
@@ -71,7 +71,7 @@ uiRoutes.when('/kibana/instances/:uuid', {
         this.setTitle(`Kibana - ${get(data, 'kibanaSummary.name')}`);
 
         this.renderReact(
-          <I18nProvider>
+          <I18nContext>
             <EuiPage>
               <EuiPageBody>
                 <EuiPanel>
@@ -126,7 +126,7 @@ uiRoutes.when('/kibana/instances/:uuid', {
                 </EuiPageContent>
               </EuiPageBody>
             </EuiPage>
-          </I18nProvider>
+          </I18nContext>
         );
       });
     }
diff --git a/x-pack/plugins/monitoring/public/views/kibana/instances/index.js b/x-pack/plugins/monitoring/public/views/kibana/instances/index.js
index d2bf3c677f0f..d33fd00680a4 100644
--- a/x-pack/plugins/monitoring/public/views/kibana/instances/index.js
+++ b/x-pack/plugins/monitoring/public/views/kibana/instances/index.js
@@ -6,6 +6,7 @@
 
 import React from 'react';
 import { capitalize } from 'lodash';
+import { I18nContext } from 'ui/i18n';
 import uiRoutes from'ui/routes';
 import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
 import { MonitoringViewBaseEuiTableController } from '../../';
@@ -17,7 +18,7 @@ import { EuiMonitoringTable } from '../../../components/table';
 import { KibanaStatusIcon } from '../../../components/kibana/status_icon';
 import { formatMetric, formatNumber } from '../../../lib/format_number';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 const getColumns = (kbnUrl, scope) => ([
   {
@@ -145,7 +146,7 @@ uiRoutes.when('/kibana/instances', {
         }));
 
         this.renderReact(
-          <I18nProvider>
+          <I18nContext>
             <EuiPage>
               <EuiPageBody>
                 <EuiPanel>
@@ -173,7 +174,7 @@ uiRoutes.when('/kibana/instances', {
                 </EuiPageContent>
               </EuiPageBody>
             </EuiPage>
-          </I18nProvider>
+          </I18nContext>
         );
       });
     }
diff --git a/x-pack/plugins/monitoring/public/views/kibana/overview/index.js b/x-pack/plugins/monitoring/public/views/kibana/overview/index.js
index f2c8e636721d..f7d07d472b45 100644
--- a/x-pack/plugins/monitoring/public/views/kibana/overview/index.js
+++ b/x-pack/plugins/monitoring/public/views/kibana/overview/index.js
@@ -16,7 +16,7 @@ import template from './index.html';
 import { timefilter } from 'ui/timefilter';
 import { EuiPage, EuiPageBody, EuiPageContent, EuiPanel, EuiSpacer, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { ClusterStatus } from '../../../components/kibana/cluster_status';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { MonitoringViewBaseController } from '../../base_controller';
 
 function getPageData($injector) {
@@ -67,7 +67,7 @@ uiRoutes.when('/kibana', {
         }
 
         this.renderReact(
-          <I18nProvider>
+          <I18nContext>
             <EuiPage>
               <EuiPageBody>
                 <EuiPanel>
@@ -93,7 +93,7 @@ uiRoutes.when('/kibana', {
                 </EuiPageContent>
               </EuiPageBody>
             </EuiPage>
-          </I18nProvider>
+          </I18nContext>
         );
       });
     }
diff --git a/x-pack/plugins/monitoring/public/views/license/controller.js b/x-pack/plugins/monitoring/public/views/license/controller.js
index 21440ff0b8a1..b87d50a96823 100644
--- a/x-pack/plugins/monitoring/public/views/license/controller.js
+++ b/x-pack/plugins/monitoring/public/views/license/controller.js
@@ -12,7 +12,7 @@ import { formatDateTimeLocal } from '../../../common/formatting';
 import { MANAGEMENT_BASE_PATH } from 'plugins/xpack_main/components';
 import { License } from 'plugins/monitoring/components';
 import { timefilter } from 'ui/timefilter';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 const REACT_NODE_ID = 'licenseReact';
 
@@ -60,7 +60,7 @@ export class LicenseViewController {
 
       // Mount the React component to the template
       render(
-        <I18nProvider>
+        <I18nContext>
           <License
             isPrimaryCluster={isPrimaryCluster}
             status={license.status}
@@ -69,7 +69,7 @@ export class LicenseViewController {
             expiryDate={expiryDate}
             uploadLicensePath={uploadLicensePath}
           />
-        </I18nProvider>,
+        </I18nContext>,
         document.getElementById(REACT_NODE_ID)
       );
     });
diff --git a/x-pack/plugins/monitoring/public/views/logstash/node/advanced/index.js b/x-pack/plugins/monitoring/public/views/logstash/node/advanced/index.js
index 5066cd81dae7..4d4e5b4837b3 100644
--- a/x-pack/plugins/monitoring/public/views/logstash/node/advanced/index.js
+++ b/x-pack/plugins/monitoring/public/views/logstash/node/advanced/index.js
@@ -17,7 +17,7 @@ import { MonitoringViewBaseController } from '../../../base_controller';
 import { DetailStatus } from 'plugins/monitoring/components/logstash/detail_status';
 import { EuiPage, EuiPageBody, EuiPageContent, EuiPanel, EuiSpacer, EuiFlexGrid, EuiFlexItem } from '@elastic/eui';
 import { MonitoringTimeseriesContainer } from '../../../../components/chart';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 function getPageData($injector) {
   const $http = $injector.get('$http');
@@ -82,7 +82,7 @@ uiRoutes.when('/logstash/node/:uuid/advanced', {
         ];
 
         this.renderReact(
-          <I18nProvider>
+          <I18nContext>
             <EuiPage>
               <EuiPageBody>
                 <EuiPanel>
@@ -105,7 +105,7 @@ uiRoutes.when('/logstash/node/:uuid/advanced', {
                 </EuiPageContent>
               </EuiPageBody>
             </EuiPage>
-          </I18nProvider>
+          </I18nContext>
         );
       });
     }
diff --git a/x-pack/plugins/monitoring/public/views/logstash/node/index.js b/x-pack/plugins/monitoring/public/views/logstash/node/index.js
index 62820a42ac49..bee3e66e5bfb 100644
--- a/x-pack/plugins/monitoring/public/views/logstash/node/index.js
+++ b/x-pack/plugins/monitoring/public/views/logstash/node/index.js
@@ -16,7 +16,7 @@ import { timefilter } from 'ui/timefilter';
 import { DetailStatus } from 'plugins/monitoring/components/logstash/detail_status';
 import { EuiPage, EuiPageBody, EuiPageContent, EuiPanel, EuiSpacer, EuiFlexGrid, EuiFlexItem } from '@elastic/eui';
 import { MonitoringTimeseriesContainer } from '../../../components/chart';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { MonitoringViewBaseController } from '../../base_controller';
 
 function getPageData($injector) {
@@ -83,7 +83,7 @@ uiRoutes.when('/logstash/node/:uuid', {
         ];
 
         this.renderReact(
-          <I18nProvider>
+          <I18nContext>
             <EuiPage>
               <EuiPageBody>
                 <EuiPanel>
@@ -106,7 +106,7 @@ uiRoutes.when('/logstash/node/:uuid', {
                 </EuiPageContent>
               </EuiPageBody>
             </EuiPage>
-          </I18nProvider>
+          </I18nContext>
         );
       });
     }
diff --git a/x-pack/plugins/monitoring/public/views/logstash/node/pipelines/index.js b/x-pack/plugins/monitoring/public/views/logstash/node/pipelines/index.js
index f3adea3ecb75..194ae36a528b 100644
--- a/x-pack/plugins/monitoring/public/views/logstash/node/pipelines/index.js
+++ b/x-pack/plugins/monitoring/public/views/logstash/node/pipelines/index.js
@@ -18,7 +18,7 @@ import {
 import template from './index.html';
 import { timefilter } from 'ui/timefilter';
 import { MonitoringViewBaseEuiTableController } from '../../../';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { PipelineListing } from '../../../../components/logstash/pipeline_listing/pipeline_listing';
 
 const getPageData = ($injector) => {
@@ -95,7 +95,7 @@ uiRoutes
           }));
 
           this.renderReact(
-            <I18nProvider>
+            <I18nContext>
               <PipelineListing
                 className="monitoringLogstashPipelinesTable"
                 onBrush={this.onBrush}
@@ -111,7 +111,7 @@ uiRoutes
                   scope: $scope,
                 }}
               />
-            </I18nProvider>
+            </I18nContext>
           );
         });
       }
diff --git a/x-pack/plugins/monitoring/public/views/logstash/nodes/index.js b/x-pack/plugins/monitoring/public/views/logstash/nodes/index.js
index 867dcd404376..1d17ae7126c0 100644
--- a/x-pack/plugins/monitoring/public/views/logstash/nodes/index.js
+++ b/x-pack/plugins/monitoring/public/views/logstash/nodes/index.js
@@ -9,7 +9,7 @@ import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
 import { MonitoringViewBaseEuiTableController } from '../../';
 import { getPageData } from './get_page_data';
 import template from './index.html';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { Listing } from '../../../components/logstash/listing';
 
 uiRoutes.when('/logstash/nodes', {
@@ -38,7 +38,7 @@ uiRoutes.when('/logstash/nodes', {
 
       $scope.$watch(() => this.data, data => {
         this.renderReact(
-          <I18nProvider>
+          <I18nContext>
             <Listing
               data={data.nodes}
               stats={data.clusterStatus}
@@ -47,7 +47,7 @@ uiRoutes.when('/logstash/nodes', {
               onTableChange={this.onTableChange}
               angular={{ kbnUrl, scope: $scope }}
             />
-          </I18nProvider>
+          </I18nContext>
         );
       });
     }
diff --git a/x-pack/plugins/monitoring/public/views/logstash/overview/index.js b/x-pack/plugins/monitoring/public/views/logstash/overview/index.js
index 8da7245b157a..4bf747a16c80 100644
--- a/x-pack/plugins/monitoring/public/views/logstash/overview/index.js
+++ b/x-pack/plugins/monitoring/public/views/logstash/overview/index.js
@@ -13,7 +13,7 @@ import { ajaxErrorHandlersProvider } from 'plugins/monitoring/lib/ajax_error_han
 import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
 import template from './index.html';
 import { timefilter } from 'ui/timefilter';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { Overview } from '../../../components/logstash/overview';
 import { MonitoringViewBaseController } from '../../base_controller';
 
@@ -59,13 +59,13 @@ uiRoutes.when('/logstash', {
 
       $scope.$watch(() => this.data, data => {
         this.renderReact(
-          <I18nProvider>
+          <I18nContext>
             <Overview
               stats={data.clusterStatus}
               metrics={data.metrics}
               onBrush={this.onBrush}
             />
-          </I18nProvider>
+          </I18nContext>
         );
       });
     }
diff --git a/x-pack/plugins/monitoring/public/views/logstash/pipeline/index.js b/x-pack/plugins/monitoring/public/views/logstash/pipeline/index.js
index b6ada2684884..671cdd3a1b60 100644
--- a/x-pack/plugins/monitoring/public/views/logstash/pipeline/index.js
+++ b/x-pack/plugins/monitoring/public/views/logstash/pipeline/index.js
@@ -21,7 +21,7 @@ import { PipelineState } from 'plugins/monitoring/components/logstash/pipeline_v
 import { PipelineViewer } from 'plugins/monitoring/components/logstash/pipeline_viewer';
 import { Pipeline } from 'plugins/monitoring/components/logstash/pipeline_viewer/models/pipeline';
 import { MonitoringViewBaseController } from '../../base_controller';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import {
   EuiPageBody,
   EuiPage,
@@ -113,7 +113,7 @@ uiRoutes.when('/logstash/pipelines/:id/:hash?', {
         }
         this.pipelineState = new PipelineState(data.pipeline);
         this.renderReact(
-          <I18nProvider>
+          <I18nContext>
             <EuiPage>
               <EuiPageBody>
                 <EuiPageContent>
@@ -126,7 +126,7 @@ uiRoutes.when('/logstash/pipelines/:id/:hash?', {
                 </EuiPageContent>
               </EuiPageBody>
             </EuiPage>
-          </I18nProvider>
+          </I18nContext>
         );
       });
     }
diff --git a/x-pack/plugins/monitoring/public/views/logstash/pipelines/index.js b/x-pack/plugins/monitoring/public/views/logstash/pipelines/index.js
index d800e565ba50..058b9127c82a 100644
--- a/x-pack/plugins/monitoring/public/views/logstash/pipelines/index.js
+++ b/x-pack/plugins/monitoring/public/views/logstash/pipelines/index.js
@@ -16,7 +16,7 @@ import {
 } from 'plugins/monitoring/lib/logstash/pipelines';
 import template from './index.html';
 import { timefilter } from 'ui/timefilter';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { PipelineListing } from '../../../components/logstash/pipeline_listing/pipeline_listing';
 import { MonitoringViewBaseEuiTableController } from '../..';
 
@@ -101,7 +101,7 @@ uiRoutes
             : null;
 
           render(
-            <I18nProvider>
+            <I18nContext>
               <PipelineListing
                 className="monitoringLogstashPipelinesTable"
                 onBrush={onBrush}
@@ -117,7 +117,7 @@ uiRoutes
                   scope: $scope,
                 }}
               />
-            </I18nProvider>,
+            </I18nContext>,
             document.getElementById('monitoringLogstashPipelinesApp')
           );
         };
diff --git a/x-pack/plugins/monitoring/public/views/no_data/controller.js b/x-pack/plugins/monitoring/public/views/no_data/controller.js
index 2f5c4f2cf12d..d108678cb992 100644
--- a/x-pack/plugins/monitoring/public/views/no_data/controller.js
+++ b/x-pack/plugins/monitoring/public/views/no_data/controller.js
@@ -15,7 +15,7 @@ import { ModelUpdater } from './model_updater';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { NoData } from 'plugins/monitoring/components';
 import { timefilter } from 'ui/timefilter';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 const REACT_NODE_ID_NO_DATA = 'noDataReact';
 
@@ -70,9 +70,9 @@ export class NoDataController {
       () => model,
       props => {
         render(
-          <I18nProvider>
+          <I18nContext>
             <NoData {...props} enabler={enabler} />
-          </I18nProvider>,
+          </I18nContext>,
           document.getElementById(REACT_NODE_ID_NO_DATA)
         );
       },
diff --git a/x-pack/plugins/remote_clusters/public/index.js b/x-pack/plugins/remote_clusters/public/index.js
index 00590d906b30..623c6a8b9266 100644
--- a/x-pack/plugins/remote_clusters/public/index.js
+++ b/x-pack/plugins/remote_clusters/public/index.js
@@ -8,7 +8,7 @@ import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { Provider } from 'react-redux';
 import { HashRouter } from 'react-router-dom';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { management } from 'ui/management';
 import routes from 'ui/routes';
 import chrome from 'ui/chrome';
@@ -33,13 +33,13 @@ if (chrome.getInjected('remoteClustersUiEnabled')) {
 
   const renderReact = async (elem) => {
     render(
-      <I18nProvider>
+      <I18nContext>
         <Provider store={remoteClustersStore}>
           <HashRouter>
             <App />
           </HashRouter>
         </Provider>
-      </I18nProvider>,
+      </I18nContext>,
       elem
     );
   };
diff --git a/x-pack/plugins/reporting/public/views/management/jobs.js b/x-pack/plugins/reporting/public/views/management/jobs.js
index 3ed5cee088c9..00da4f12e03c 100644
--- a/x-pack/plugins/reporting/public/views/management/jobs.js
+++ b/x-pack/plugins/reporting/public/views/management/jobs.js
@@ -13,7 +13,7 @@ import template from 'plugins/reporting/views/management/jobs.html';
 
 import { ReportListing } from '../../components/report_listing';
 import { i18n } from '@kbn/i18n';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { MANAGEMENT_BREADCRUMB } from 'ui/management';
 
 const REACT_ANCHOR_DOM_ELEMENT_ID = 'reportListingAnchor';
@@ -39,14 +39,14 @@ routes.when('/management/kibana/reporting', {
       }
 
       render(
-        <I18nProvider>
+        <I18nContext>
           <ReportListing
             badLicenseMessage={xpackInfo.get('features.reporting.management.message')}
             showLinks={xpackInfo.get('features.reporting.management.showLinks')}
             enableLinks={xpackInfo.get('features.reporting.management.enableLinks')}
             redirect={kbnUrl.redirect}
           />
-        </I18nProvider>,
+        </I18nContext>,
         node,
       );
     });
diff --git a/x-pack/plugins/rollup/public/crud_app/index.js b/x-pack/plugins/rollup/public/crud_app/index.js
index 44edfbbdf885..b2089687b551 100644
--- a/x-pack/plugins/rollup/public/crud_app/index.js
+++ b/x-pack/plugins/rollup/public/crud_app/index.js
@@ -10,7 +10,7 @@ import { render, unmountComponentAtNode } from 'react-dom';
 import { Provider } from 'react-redux';
 import { HashRouter } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { management } from 'ui/management';
 import routes from 'ui/routes';
 
@@ -31,13 +31,13 @@ esSection.register('rollup_jobs', {
 
 const renderReact = async (elem) => {
   render(
-    <I18nProvider>
+    <I18nContext>
       <Provider store={rollupJobsStore}>
         <HashRouter>
           <App />
         </HashRouter>
       </Provider>
-    </I18nProvider>,
+    </I18nContext>,
     elem
   );
 };
diff --git a/x-pack/plugins/security/public/views/logged_out/components/logged_out_page.tsx b/x-pack/plugins/security/public/views/logged_out/components/logged_out_page.tsx
index fbe733f160a2..f73e959dd990 100644
--- a/x-pack/plugins/security/public/views/logged_out/components/logged_out_page.tsx
+++ b/x-pack/plugins/security/public/views/logged_out/components/logged_out_page.tsx
@@ -5,7 +5,7 @@
  */
 
 import { EuiButton, EuiIcon, EuiSpacer, EuiTitle } from '@elastic/eui';
-import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';
 import React, { Component } from 'react';
 
 interface Props {
@@ -15,32 +15,30 @@ interface Props {
 export class LoggedOutPage extends Component<Props, {}> {
   public render() {
     return (
-      <I18nProvider>
-        <div className="loggedOut">
-          <header className="loggedOut__header">
-            <div className="loggedOut__content eui-textCenter">
-              <EuiSpacer size="xxl" />
-              <span className="loggedOut__logo">
-                <EuiIcon type="logoKibana" size="xxl" />
-              </span>
-              <EuiTitle size="l" className="loggedOut__title">
-                <h1>
-                  <FormattedMessage
-                    id="xpack.security.loggedOut.title"
-                    defaultMessage="Successfully logged out"
-                  />
-                </h1>
-              </EuiTitle>
-              <EuiSpacer size="xl" />
-            </div>
-          </header>
+      <div className="loggedOut">
+        <header className="loggedOut__header">
           <div className="loggedOut__content eui-textCenter">
-            <EuiButton href={this.props.addBasePath('/')}>
-              <FormattedMessage id="xpack.security.loggedOut.login" defaultMessage="Login" />
-            </EuiButton>
+            <EuiSpacer size="xxl" />
+            <span className="loggedOut__logo">
+              <EuiIcon type="logoKibana" size="xxl" />
+            </span>
+            <EuiTitle size="l" className="loggedOut__title">
+              <h1>
+                <FormattedMessage
+                  id="xpack.security.loggedOut.title"
+                  defaultMessage="Successfully logged out"
+                />
+              </h1>
+            </EuiTitle>
+            <EuiSpacer size="xl" />
           </div>
+        </header>
+        <div className="loggedOut__content eui-textCenter">
+          <EuiButton href={this.props.addBasePath('/')}>
+            <FormattedMessage id="xpack.security.loggedOut.login" defaultMessage="Login" />
+          </EuiButton>
         </div>
-      </I18nProvider>
+      </div>
     );
   }
 }
diff --git a/x-pack/plugins/security/public/views/logged_out/logged_out.tsx b/x-pack/plugins/security/public/views/logged_out/logged_out.tsx
index e1b72f589b13..e7aad5099061 100644
--- a/x-pack/plugins/security/public/views/logged_out/logged_out.tsx
+++ b/x-pack/plugins/security/public/views/logged_out/logged_out.tsx
@@ -10,6 +10,7 @@ import React from 'react';
 import { render } from 'react-dom';
 import 'ui/autoload/styles';
 import chrome from 'ui/chrome';
+import { I18nContext } from 'ui/i18n';
 
 import { LoggedOutPage } from './components';
 
@@ -19,6 +20,11 @@ chrome
   .setRootController('logout', ($scope: any) => {
     $scope.$$postDigest(() => {
       const domNode = document.getElementById('reactLoggedOutRoot');
-      render(<LoggedOutPage addBasePath={chrome.addBasePath} />, domNode);
+      render(
+        <I18nContext>
+          <LoggedOutPage addBasePath={chrome.addBasePath} />
+        </I18nContext>,
+        domNode
+      );
     });
   });
diff --git a/x-pack/plugins/security/public/views/login/components/login_page/__snapshots__/login_page.test.tsx.snap b/x-pack/plugins/security/public/views/login/components/login_page/__snapshots__/login_page.test.tsx.snap
index 52ce28fd9dec..94f4f7e45655 100644
--- a/x-pack/plugins/security/public/views/login/components/login_page/__snapshots__/login_page.test.tsx.snap
+++ b/x-pack/plugins/security/public/views/login/components/login_page/__snapshots__/login_page.test.tsx.snap
@@ -1,468 +1,458 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LoginPage disabled form states renders as expected when a connection to ES is not available 1`] = `
-<I18nProvider>
-  <div
-    className="loginWelcome login-form"
+<div
+  className="loginWelcome login-form"
+>
+  <header
+    className="loginWelcome__header"
   >
-    <header
-      className="loginWelcome__header"
-    >
-      <div
-        className="loginWelcome__content eui-textCenter loginWelcome__contentDisabledForm"
-      >
-        <EuiSpacer
-          size="xxl"
-        />
-        <span
-          className="loginWelcome__logo"
-        >
-          <EuiIcon
-            size="xxl"
-            type="logoKibana"
-          />
-        </span>
-        <EuiTitle
-          className="loginWelcome__title"
-          size="l"
-          textTransform="none"
-        >
-          <h1>
-            <FormattedMessage
-              defaultMessage="Welcome to Kibana"
-              id="xpack.security.loginPage.welcomeTitle"
-              values={Object {}}
-            />
-          </h1>
-        </EuiTitle>
-        <EuiText
-          className="loginWelcome__subtitle"
-          color="subdued"
-          grow={true}
-          size="s"
-        >
-          <p>
-            <FormattedMessage
-              defaultMessage="Your window into the Elastic Stack"
-              id="xpack.security.loginPage.welcomeDescription"
-              values={Object {}}
-            />
-          </p>
-        </EuiText>
-        <EuiSpacer
-          size="xl"
-        />
-      </div>
-    </header>
     <div
-      className="loginWelcome__content loginWelcome-body loginWelcome__contentDisabledForm"
+      className="loginWelcome__content eui-textCenter loginWelcome__contentDisabledForm"
     >
-      <EuiFlexGroup
-        alignItems="stretch"
-        component="div"
-        direction="row"
-        gutterSize="l"
-        justifyContent="flexStart"
-        responsive={true}
-        wrap={false}
+      <EuiSpacer
+        size="xxl"
+      />
+      <span
+        className="loginWelcome__logo"
       >
-        <EuiFlexItem
-          component="div"
-          grow={true}
-        >
-          <DisabledLoginForm
-            message={
-              <FormattedMessage
-                defaultMessage="See the Kibana logs for details and try reloading the page."
-                id="xpack.security.loginPage.esUnavailableMessage"
-                values={Object {}}
-              />
-            }
-            title={
-              <FormattedMessage
-                defaultMessage="Cannot connect to the Elasticsearch cluster"
-                id="xpack.security.loginPage.esUnavailableTitle"
-                values={Object {}}
-              />
-            }
+        <EuiIcon
+          size="xxl"
+          type="logoKibana"
+        />
+      </span>
+      <EuiTitle
+        className="loginWelcome__title"
+        size="l"
+        textTransform="none"
+      >
+        <h1>
+          <FormattedMessage
+            defaultMessage="Welcome to Kibana"
+            id="xpack.security.loginPage.welcomeTitle"
+            values={Object {}}
           />
-        </EuiFlexItem>
-      </EuiFlexGroup>
+        </h1>
+      </EuiTitle>
+      <EuiText
+        className="loginWelcome__subtitle"
+        color="subdued"
+        grow={true}
+        size="s"
+      >
+        <p>
+          <FormattedMessage
+            defaultMessage="Your window into the Elastic Stack"
+            id="xpack.security.loginPage.welcomeDescription"
+            values={Object {}}
+          />
+        </p>
+      </EuiText>
+      <EuiSpacer
+        size="xl"
+      />
     </div>
+  </header>
+  <div
+    className="loginWelcome__content loginWelcome-body loginWelcome__contentDisabledForm"
+  >
+    <EuiFlexGroup
+      alignItems="stretch"
+      component="div"
+      direction="row"
+      gutterSize="l"
+      justifyContent="flexStart"
+      responsive={true}
+      wrap={false}
+    >
+      <EuiFlexItem
+        component="div"
+        grow={true}
+      >
+        <DisabledLoginForm
+          message={
+            <FormattedMessage
+              defaultMessage="See the Kibana logs for details and try reloading the page."
+              id="xpack.security.loginPage.esUnavailableMessage"
+              values={Object {}}
+            />
+          }
+          title={
+            <FormattedMessage
+              defaultMessage="Cannot connect to the Elasticsearch cluster"
+              id="xpack.security.loginPage.esUnavailableTitle"
+              values={Object {}}
+            />
+          }
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   </div>
-</I18nProvider>
+</div>
 `;
 
 exports[`LoginPage disabled form states renders as expected when an unknown loginState layout is provided 1`] = `
-<I18nProvider>
-  <div
-    className="loginWelcome login-form"
+<div
+  className="loginWelcome login-form"
+>
+  <header
+    className="loginWelcome__header"
   >
-    <header
-      className="loginWelcome__header"
-    >
-      <div
-        className="loginWelcome__content eui-textCenter loginWelcome__contentDisabledForm"
-      >
-        <EuiSpacer
-          size="xxl"
-        />
-        <span
-          className="loginWelcome__logo"
-        >
-          <EuiIcon
-            size="xxl"
-            type="logoKibana"
-          />
-        </span>
-        <EuiTitle
-          className="loginWelcome__title"
-          size="l"
-          textTransform="none"
-        >
-          <h1>
-            <FormattedMessage
-              defaultMessage="Welcome to Kibana"
-              id="xpack.security.loginPage.welcomeTitle"
-              values={Object {}}
-            />
-          </h1>
-        </EuiTitle>
-        <EuiText
-          className="loginWelcome__subtitle"
-          color="subdued"
-          grow={true}
-          size="s"
-        >
-          <p>
-            <FormattedMessage
-              defaultMessage="Your window into the Elastic Stack"
-              id="xpack.security.loginPage.welcomeDescription"
-              values={Object {}}
-            />
-          </p>
-        </EuiText>
-        <EuiSpacer
-          size="xl"
-        />
-      </div>
-    </header>
     <div
-      className="loginWelcome__content loginWelcome-body loginWelcome__contentDisabledForm"
+      className="loginWelcome__content eui-textCenter loginWelcome__contentDisabledForm"
     >
-      <EuiFlexGroup
-        alignItems="stretch"
-        component="div"
-        direction="row"
-        gutterSize="l"
-        justifyContent="flexStart"
-        responsive={true}
-        wrap={false}
+      <EuiSpacer
+        size="xxl"
+      />
+      <span
+        className="loginWelcome__logo"
       >
-        <EuiFlexItem
-          component="div"
-          grow={true}
-        >
-          <DisabledLoginForm
-            message={
-              <FormattedMessage
-                defaultMessage="Refer to the Kibana logs for more details and refresh to try again."
-                id="xpack.security.loginPage.unknownLayoutMessage"
-                values={Object {}}
-              />
-            }
-            title={
-              <FormattedMessage
-                defaultMessage="Unsupported login form layout."
-                id="xpack.security.loginPage.unknownLayoutTitle"
-                values={Object {}}
-              />
-            }
+        <EuiIcon
+          size="xxl"
+          type="logoKibana"
+        />
+      </span>
+      <EuiTitle
+        className="loginWelcome__title"
+        size="l"
+        textTransform="none"
+      >
+        <h1>
+          <FormattedMessage
+            defaultMessage="Welcome to Kibana"
+            id="xpack.security.loginPage.welcomeTitle"
+            values={Object {}}
           />
-        </EuiFlexItem>
-      </EuiFlexGroup>
+        </h1>
+      </EuiTitle>
+      <EuiText
+        className="loginWelcome__subtitle"
+        color="subdued"
+        grow={true}
+        size="s"
+      >
+        <p>
+          <FormattedMessage
+            defaultMessage="Your window into the Elastic Stack"
+            id="xpack.security.loginPage.welcomeDescription"
+            values={Object {}}
+          />
+        </p>
+      </EuiText>
+      <EuiSpacer
+        size="xl"
+      />
     </div>
+  </header>
+  <div
+    className="loginWelcome__content loginWelcome-body loginWelcome__contentDisabledForm"
+  >
+    <EuiFlexGroup
+      alignItems="stretch"
+      component="div"
+      direction="row"
+      gutterSize="l"
+      justifyContent="flexStart"
+      responsive={true}
+      wrap={false}
+    >
+      <EuiFlexItem
+        component="div"
+        grow={true}
+      >
+        <DisabledLoginForm
+          message={
+            <FormattedMessage
+              defaultMessage="Refer to the Kibana logs for more details and refresh to try again."
+              id="xpack.security.loginPage.unknownLayoutMessage"
+              values={Object {}}
+            />
+          }
+          title={
+            <FormattedMessage
+              defaultMessage="Unsupported login form layout."
+              id="xpack.security.loginPage.unknownLayoutTitle"
+              values={Object {}}
+            />
+          }
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   </div>
-</I18nProvider>
+</div>
 `;
 
 exports[`LoginPage disabled form states renders as expected when secure cookies are required but not present 1`] = `
-<I18nProvider>
-  <div
-    className="loginWelcome login-form"
+<div
+  className="loginWelcome login-form"
+>
+  <header
+    className="loginWelcome__header"
   >
-    <header
-      className="loginWelcome__header"
-    >
-      <div
-        className="loginWelcome__content eui-textCenter loginWelcome__contentDisabledForm"
-      >
-        <EuiSpacer
-          size="xxl"
-        />
-        <span
-          className="loginWelcome__logo"
-        >
-          <EuiIcon
-            size="xxl"
-            type="logoKibana"
-          />
-        </span>
-        <EuiTitle
-          className="loginWelcome__title"
-          size="l"
-          textTransform="none"
-        >
-          <h1>
-            <FormattedMessage
-              defaultMessage="Welcome to Kibana"
-              id="xpack.security.loginPage.welcomeTitle"
-              values={Object {}}
-            />
-          </h1>
-        </EuiTitle>
-        <EuiText
-          className="loginWelcome__subtitle"
-          color="subdued"
-          grow={true}
-          size="s"
-        >
-          <p>
-            <FormattedMessage
-              defaultMessage="Your window into the Elastic Stack"
-              id="xpack.security.loginPage.welcomeDescription"
-              values={Object {}}
-            />
-          </p>
-        </EuiText>
-        <EuiSpacer
-          size="xl"
-        />
-      </div>
-    </header>
     <div
-      className="loginWelcome__content loginWelcome-body loginWelcome__contentDisabledForm"
+      className="loginWelcome__content eui-textCenter loginWelcome__contentDisabledForm"
     >
-      <EuiFlexGroup
-        alignItems="stretch"
-        component="div"
-        direction="row"
-        gutterSize="l"
-        justifyContent="flexStart"
-        responsive={true}
-        wrap={false}
+      <EuiSpacer
+        size="xxl"
+      />
+      <span
+        className="loginWelcome__logo"
       >
-        <EuiFlexItem
-          component="div"
-          grow={true}
-        >
-          <DisabledLoginForm
-            message={
-              <FormattedMessage
-                defaultMessage="Contact your system administrator."
-                id="xpack.security.loginPage.requiresSecureConnectionMessage"
-                values={Object {}}
-              />
-            }
-            title={
-              <FormattedMessage
-                defaultMessage="A secure connection is required for log in"
-                id="xpack.security.loginPage.requiresSecureConnectionTitle"
-                values={Object {}}
-              />
-            }
+        <EuiIcon
+          size="xxl"
+          type="logoKibana"
+        />
+      </span>
+      <EuiTitle
+        className="loginWelcome__title"
+        size="l"
+        textTransform="none"
+      >
+        <h1>
+          <FormattedMessage
+            defaultMessage="Welcome to Kibana"
+            id="xpack.security.loginPage.welcomeTitle"
+            values={Object {}}
           />
-        </EuiFlexItem>
-      </EuiFlexGroup>
+        </h1>
+      </EuiTitle>
+      <EuiText
+        className="loginWelcome__subtitle"
+        color="subdued"
+        grow={true}
+        size="s"
+      >
+        <p>
+          <FormattedMessage
+            defaultMessage="Your window into the Elastic Stack"
+            id="xpack.security.loginPage.welcomeDescription"
+            values={Object {}}
+          />
+        </p>
+      </EuiText>
+      <EuiSpacer
+        size="xl"
+      />
     </div>
+  </header>
+  <div
+    className="loginWelcome__content loginWelcome-body loginWelcome__contentDisabledForm"
+  >
+    <EuiFlexGroup
+      alignItems="stretch"
+      component="div"
+      direction="row"
+      gutterSize="l"
+      justifyContent="flexStart"
+      responsive={true}
+      wrap={false}
+    >
+      <EuiFlexItem
+        component="div"
+        grow={true}
+      >
+        <DisabledLoginForm
+          message={
+            <FormattedMessage
+              defaultMessage="Contact your system administrator."
+              id="xpack.security.loginPage.requiresSecureConnectionMessage"
+              values={Object {}}
+            />
+          }
+          title={
+            <FormattedMessage
+              defaultMessage="A secure connection is required for log in"
+              id="xpack.security.loginPage.requiresSecureConnectionTitle"
+              values={Object {}}
+            />
+          }
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   </div>
-</I18nProvider>
+</div>
 `;
 
 exports[`LoginPage disabled form states renders as expected when xpack is not available 1`] = `
-<I18nProvider>
-  <div
-    className="loginWelcome login-form"
+<div
+  className="loginWelcome login-form"
+>
+  <header
+    className="loginWelcome__header"
   >
-    <header
-      className="loginWelcome__header"
-    >
-      <div
-        className="loginWelcome__content eui-textCenter loginWelcome__contentDisabledForm"
-      >
-        <EuiSpacer
-          size="xxl"
-        />
-        <span
-          className="loginWelcome__logo"
-        >
-          <EuiIcon
-            size="xxl"
-            type="logoKibana"
-          />
-        </span>
-        <EuiTitle
-          className="loginWelcome__title"
-          size="l"
-          textTransform="none"
-        >
-          <h1>
-            <FormattedMessage
-              defaultMessage="Welcome to Kibana"
-              id="xpack.security.loginPage.welcomeTitle"
-              values={Object {}}
-            />
-          </h1>
-        </EuiTitle>
-        <EuiText
-          className="loginWelcome__subtitle"
-          color="subdued"
-          grow={true}
-          size="s"
-        >
-          <p>
-            <FormattedMessage
-              defaultMessage="Your window into the Elastic Stack"
-              id="xpack.security.loginPage.welcomeDescription"
-              values={Object {}}
-            />
-          </p>
-        </EuiText>
-        <EuiSpacer
-          size="xl"
-        />
-      </div>
-    </header>
     <div
-      className="loginWelcome__content loginWelcome-body loginWelcome__contentDisabledForm"
+      className="loginWelcome__content eui-textCenter loginWelcome__contentDisabledForm"
     >
-      <EuiFlexGroup
-        alignItems="stretch"
-        component="div"
-        direction="row"
-        gutterSize="l"
-        justifyContent="flexStart"
-        responsive={true}
-        wrap={false}
+      <EuiSpacer
+        size="xxl"
+      />
+      <span
+        className="loginWelcome__logo"
       >
-        <EuiFlexItem
-          component="div"
-          grow={true}
-        >
-          <DisabledLoginForm
-            message={
-              <FormattedMessage
-                defaultMessage="To use the full set of free features in this distribution of Kibana, please update Elasticsearch to the default distribution."
-                id="xpack.security.loginPage.xpackUnavailableMessage"
-                values={Object {}}
-              />
-            }
-            title={
-              <FormattedMessage
-                defaultMessage="Cannot connect to the Elasticsearch cluster currently configured for Kibana."
-                id="xpack.security.loginPage.xpackUnavailableTitle"
-                values={Object {}}
-              />
-            }
+        <EuiIcon
+          size="xxl"
+          type="logoKibana"
+        />
+      </span>
+      <EuiTitle
+        className="loginWelcome__title"
+        size="l"
+        textTransform="none"
+      >
+        <h1>
+          <FormattedMessage
+            defaultMessage="Welcome to Kibana"
+            id="xpack.security.loginPage.welcomeTitle"
+            values={Object {}}
           />
-        </EuiFlexItem>
-      </EuiFlexGroup>
+        </h1>
+      </EuiTitle>
+      <EuiText
+        className="loginWelcome__subtitle"
+        color="subdued"
+        grow={true}
+        size="s"
+      >
+        <p>
+          <FormattedMessage
+            defaultMessage="Your window into the Elastic Stack"
+            id="xpack.security.loginPage.welcomeDescription"
+            values={Object {}}
+          />
+        </p>
+      </EuiText>
+      <EuiSpacer
+        size="xl"
+      />
     </div>
+  </header>
+  <div
+    className="loginWelcome__content loginWelcome-body loginWelcome__contentDisabledForm"
+  >
+    <EuiFlexGroup
+      alignItems="stretch"
+      component="div"
+      direction="row"
+      gutterSize="l"
+      justifyContent="flexStart"
+      responsive={true}
+      wrap={false}
+    >
+      <EuiFlexItem
+        component="div"
+        grow={true}
+      >
+        <DisabledLoginForm
+          message={
+            <FormattedMessage
+              defaultMessage="To use the full set of free features in this distribution of Kibana, please update Elasticsearch to the default distribution."
+              id="xpack.security.loginPage.xpackUnavailableMessage"
+              values={Object {}}
+            />
+          }
+          title={
+            <FormattedMessage
+              defaultMessage="Cannot connect to the Elasticsearch cluster currently configured for Kibana."
+              id="xpack.security.loginPage.xpackUnavailableTitle"
+              values={Object {}}
+            />
+          }
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   </div>
-</I18nProvider>
+</div>
 `;
 
 exports[`LoginPage enabled form state renders as expected 1`] = `
-<I18nProvider>
-  <div
-    className="loginWelcome login-form"
+<div
+  className="loginWelcome login-form"
+>
+  <header
+    className="loginWelcome__header"
   >
-    <header
-      className="loginWelcome__header"
-    >
-      <div
-        className="loginWelcome__content eui-textCenter"
-      >
-        <EuiSpacer
-          size="xxl"
-        />
-        <span
-          className="loginWelcome__logo"
-        >
-          <EuiIcon
-            size="xxl"
-            type="logoKibana"
-          />
-        </span>
-        <EuiTitle
-          className="loginWelcome__title"
-          size="l"
-          textTransform="none"
-        >
-          <h1>
-            <FormattedMessage
-              defaultMessage="Welcome to Kibana"
-              id="xpack.security.loginPage.welcomeTitle"
-              values={Object {}}
-            />
-          </h1>
-        </EuiTitle>
-        <EuiText
-          className="loginWelcome__subtitle"
-          color="subdued"
-          grow={true}
-          size="s"
-        >
-          <p>
-            <FormattedMessage
-              defaultMessage="Your window into the Elastic Stack"
-              id="xpack.security.loginPage.welcomeDescription"
-              values={Object {}}
-            />
-          </p>
-        </EuiText>
-        <EuiSpacer
-          size="xl"
-        />
-      </div>
-    </header>
     <div
-      className="loginWelcome__content loginWelcome-body"
+      className="loginWelcome__content eui-textCenter"
     >
-      <EuiFlexGroup
-        alignItems="stretch"
-        component="div"
-        direction="row"
-        gutterSize="l"
-        justifyContent="flexStart"
-        responsive={true}
-        wrap={false}
+      <EuiSpacer
+        size="xxl"
+      />
+      <span
+        className="loginWelcome__logo"
       >
-        <EuiFlexItem
-          component="div"
-          grow={true}
-        >
-          <InjectIntl(BasicLoginFormUI)
-            http={
-              Object {
-                "post": [MockFunction],
-              }
-            }
-            isSecureConnection={false}
-            loginState={
-              Object {
-                "allowLogin": true,
-                "layout": "form",
-                "loginMessage": "",
-              }
-            }
-            next=""
-            requiresSecureConnection={false}
-            window={Object {}}
+        <EuiIcon
+          size="xxl"
+          type="logoKibana"
+        />
+      </span>
+      <EuiTitle
+        className="loginWelcome__title"
+        size="l"
+        textTransform="none"
+      >
+        <h1>
+          <FormattedMessage
+            defaultMessage="Welcome to Kibana"
+            id="xpack.security.loginPage.welcomeTitle"
+            values={Object {}}
           />
-        </EuiFlexItem>
-      </EuiFlexGroup>
+        </h1>
+      </EuiTitle>
+      <EuiText
+        className="loginWelcome__subtitle"
+        color="subdued"
+        grow={true}
+        size="s"
+      >
+        <p>
+          <FormattedMessage
+            defaultMessage="Your window into the Elastic Stack"
+            id="xpack.security.loginPage.welcomeDescription"
+            values={Object {}}
+          />
+        </p>
+      </EuiText>
+      <EuiSpacer
+        size="xl"
+      />
     </div>
+  </header>
+  <div
+    className="loginWelcome__content loginWelcome-body"
+  >
+    <EuiFlexGroup
+      alignItems="stretch"
+      component="div"
+      direction="row"
+      gutterSize="l"
+      justifyContent="flexStart"
+      responsive={true}
+      wrap={false}
+    >
+      <EuiFlexItem
+        component="div"
+        grow={true}
+      >
+        <InjectIntl(BasicLoginFormUI)
+          http={
+            Object {
+              "post": [MockFunction],
+            }
+          }
+          isSecureConnection={false}
+          loginState={
+            Object {
+              "allowLogin": true,
+              "layout": "form",
+              "loginMessage": "",
+            }
+          }
+          next=""
+          requiresSecureConnection={false}
+          window={Object {}}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   </div>
-</I18nProvider>
+</div>
 `;
diff --git a/x-pack/plugins/security/public/views/login/components/login_page/login_page.tsx b/x-pack/plugins/security/public/views/login/components/login_page/login_page.tsx
index d00dacbafc11..82dd0e679a5e 100644
--- a/x-pack/plugins/security/public/views/login/components/login_page/login_page.tsx
+++ b/x-pack/plugins/security/public/views/login/components/login_page/login_page.tsx
@@ -6,8 +6,7 @@
 
 import React, { Component } from 'react';
 
-// @ts-ignore
-import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import {
   // @ts-ignore
@@ -47,40 +46,38 @@ export class LoginPage extends Component<Props, {}> {
     });
 
     return (
-      <I18nProvider>
-        <div className="loginWelcome login-form">
-          <header className="loginWelcome__header">
-            <div className={contentHeaderClasses}>
-              <EuiSpacer size="xxl" />
-              <span className="loginWelcome__logo">
-                <EuiIcon type="logoKibana" size="xxl" />
-              </span>
-              <EuiTitle size="l" className="loginWelcome__title">
-                <h1>
-                  <FormattedMessage
-                    id="xpack.security.loginPage.welcomeTitle"
-                    defaultMessage="Welcome to Kibana"
-                  />
-                </h1>
-              </EuiTitle>
-              <EuiText size="s" color="subdued" className="loginWelcome__subtitle">
-                <p>
-                  <FormattedMessage
-                    id="xpack.security.loginPage.welcomeDescription"
-                    defaultMessage="Your window into the Elastic Stack"
-                  />
-                </p>
-              </EuiText>
-              <EuiSpacer size="xl" />
-            </div>
-          </header>
-          <div className={contentBodyClasses}>
-            <EuiFlexGroup gutterSize="l">
-              <EuiFlexItem>{this.getLoginForm()}</EuiFlexItem>
-            </EuiFlexGroup>
+      <div className="loginWelcome login-form">
+        <header className="loginWelcome__header">
+          <div className={contentHeaderClasses}>
+            <EuiSpacer size="xxl" />
+            <span className="loginWelcome__logo">
+              <EuiIcon type="logoKibana" size="xxl" />
+            </span>
+            <EuiTitle size="l" className="loginWelcome__title">
+              <h1>
+                <FormattedMessage
+                  id="xpack.security.loginPage.welcomeTitle"
+                  defaultMessage="Welcome to Kibana"
+                />
+              </h1>
+            </EuiTitle>
+            <EuiText size="s" color="subdued" className="loginWelcome__subtitle">
+              <p>
+                <FormattedMessage
+                  id="xpack.security.loginPage.welcomeDescription"
+                  defaultMessage="Your window into the Elastic Stack"
+                />
+              </p>
+            </EuiText>
+            <EuiSpacer size="xl" />
           </div>
+        </header>
+        <div className={contentBodyClasses}>
+          <EuiFlexGroup gutterSize="l">
+            <EuiFlexItem>{this.getLoginForm()}</EuiFlexItem>
+          </EuiFlexGroup>
         </div>
-      </I18nProvider>
+      </div>
     );
   }
 
diff --git a/x-pack/plugins/security/public/views/login/login.tsx b/x-pack/plugins/security/public/views/login/login.tsx
index 5c799f86f9b0..4f1e786379b6 100644
--- a/x-pack/plugins/security/public/views/login/login.tsx
+++ b/x-pack/plugins/security/public/views/login/login.tsx
@@ -14,6 +14,7 @@ import React from 'react';
 import { render } from 'react-dom';
 import 'ui/autoload/styles';
 import chrome from 'ui/chrome';
+import { I18nContext } from 'ui/i18n';
 import { parse } from 'url';
 import { LoginState } from '../../../common/login_state';
 const messageMap = {
@@ -48,15 +49,17 @@ interface AnyObject {
         const msgQueryParam = parse($window.location.href, true).query.msg || '';
 
         render(
-          <LoginPage
-            http={$http}
-            window={$window}
-            infoMessage={get(messageMap, msgQueryParam)}
-            loginState={loginState}
-            isSecureConnection={isSecure}
-            requiresSecureConnection={secureCookies}
-            next={next}
-          />,
+          <I18nContext>
+            <LoginPage
+              http={$http}
+              window={$window}
+              infoMessage={get(messageMap, msgQueryParam)}
+              loginState={loginState}
+              isSecureConnection={isSecure}
+              requiresSecureConnection={secureCookies}
+              next={next}
+            />
+          </I18nContext>,
           domNode
         );
       });
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/__snapshots__/elasticsearch_privileges.test.tsx.snap b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/__snapshots__/elasticsearch_privileges.test.tsx.snap
index 31f2adabe766..3627ad8094b4 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/__snapshots__/elasticsearch_privileges.test.tsx.snap
+++ b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/__snapshots__/elasticsearch_privileges.test.tsx.snap
@@ -1,161 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`it renders without crashing 1`] = `
-<I18nProvider>
-  <CollapsiblePanel
-    iconType="logoElasticsearch"
-    title="Elasticsearch"
-  >
-    <EuiDescribedFormGroup
-      description={
-        <p>
-          <FormattedMessage
-            defaultMessage="Manage the actions this role can perform against your cluster. "
-            id="xpack.security.management.editRoles.elasticSearchPrivileges.manageRoleActionsDescription"
-            values={Object {}}
-          />
-          <EuiLink
-            className="editRole__learnMore"
-            color="primary"
-            href="undefinedguide/en/elastic-stack-overview/undefined/security-privileges.html#privileges-list-cluster"
-            target="_blank"
-            type="button"
-          >
-            <FormattedMessage
-              defaultMessage="Learn more"
-              id="xpack.security.management.editRoles.elasticSearchPrivileges.learnMoreLinkText"
-              values={Object {}}
-            />
-          </EuiLink>
-        </p>
-      }
-      fullWidth={false}
-      gutterSize="l"
-      title={
-        <h3>
-          <FormattedMessage
-            defaultMessage="Cluster privileges"
-            id="xpack.security.management.editRoles.elasticSearchPrivileges.clusterPrivilegesTitle"
-            values={Object {}}
-          />
-        </h3>
-      }
-      titleSize="xs"
-    >
-      <EuiFormRow
-        describedByIds={Array []}
-        fullWidth={true}
-        hasEmptyLabelSpace={true}
-      >
-        <ClusterPrivileges
-          onChange={[Function]}
-          role={
-            Object {
-              "elasticsearch": Object {
-                "cluster": Array [],
-                "indices": Array [],
-                "run_as": Array [],
-              },
-              "kibana": Object {
-                "global": Array [],
-                "space": Object {},
-              },
-              "name": "",
-            }
-          }
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-    <EuiSpacer
-      size="l"
-    />
-    <EuiDescribedFormGroup
-      description={
-        <p>
-          <FormattedMessage
-            defaultMessage="Allow requests to be submitted on the behalf of other users. "
-            id="xpack.security.management.editRoles.elasticSearchPrivileges.howToBeSubmittedOnBehalfOfOtherUsersDescription"
-            values={Object {}}
-          />
-          <EuiLink
-            className="editRole__learnMore"
-            color="primary"
-            href="undefinedguide/en/elastic-stack-overview/undefined/security-privileges.html#_run_as_privilege"
-            target="_blank"
-            type="button"
-          >
-            <FormattedMessage
-              defaultMessage="Learn more"
-              id="xpack.security.management.editRoles.elasticSearchPrivileges.learnMoreLinkText"
-              values={Object {}}
-            />
-          </EuiLink>
-        </p>
-      }
-      fullWidth={false}
-      gutterSize="l"
-      title={
-        <h3>
-          <FormattedMessage
-            defaultMessage="Run As privileges"
-            id="xpack.security.management.editRoles.elasticSearchPrivileges.runAsPrivilegesTitle"
-            values={Object {}}
-          />
-        </h3>
-      }
-      titleSize="xs"
-    >
-      <EuiFormRow
-        describedByIds={Array []}
-        fullWidth={false}
-        hasEmptyLabelSpace={true}
-      >
-        <EuiComboBox
-          compressed={false}
-          fullWidth={false}
-          isClearable={true}
-          isDisabled={false}
-          onChange={[Function]}
-          options={Array []}
-          placeholder="Add a user…"
-          selectedOptions={Array []}
-          singleSelection={false}
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-    <EuiSpacer
-      size="l"
-    />
-    <EuiTitle
-      size="xs"
-      textTransform="none"
-    >
-      <h3>
-        <FormattedMessage
-          defaultMessage="Index privileges"
-          id="xpack.security.management.editRoles.elasticSearchPrivileges.indexPrivilegesTitle"
-          values={Object {}}
-        />
-      </h3>
-    </EuiTitle>
-    <EuiSpacer
-      size="s"
-    />
-    <EuiText
-      color="subdued"
-      grow={true}
-      size="s"
-    >
+<CollapsiblePanel
+  iconType="logoElasticsearch"
+  title="Elasticsearch"
+>
+  <EuiDescribedFormGroup
+    description={
       <p>
         <FormattedMessage
-          defaultMessage="Control access to the data in your cluster. "
-          id="xpack.security.management.editRoles.elasticSearchPrivileges.controlAccessToClusterDataDescription"
+          defaultMessage="Manage the actions this role can perform against your cluster. "
+          id="xpack.security.management.editRoles.elasticSearchPrivileges.manageRoleActionsDescription"
           values={Object {}}
         />
         <EuiLink
           className="editRole__learnMore"
           color="primary"
-          href="undefinedguide/en/elastic-stack-overview/undefined/security-privileges.html#privileges-list-indices"
+          href="undefinedguide/en/elastic-stack-overview/undefined/security-privileges.html#privileges-list-cluster"
           target="_blank"
           type="button"
         >
@@ -166,53 +27,190 @@ exports[`it renders without crashing 1`] = `
           />
         </EuiLink>
       </p>
-    </EuiText>
-    <IndexPrivileges
-      allowDocumentLevelSecurity={true}
-      allowFieldLevelSecurity={true}
-      httpClient={[MockFunction]}
-      indexPatterns={Array []}
-      onChange={[MockFunction]}
-      role={
-        Object {
-          "elasticsearch": Object {
-            "cluster": Array [],
-            "indices": Array [],
-            "run_as": Array [],
-          },
-          "kibana": Object {
-            "global": Array [],
-            "space": Object {},
-          },
-          "name": "",
-        }
-      }
-      validator={
-        RoleValidator {
-          "inProgressSpacePrivileges": Array [],
-          "shouldValidate": undefined,
-        }
-      }
-    />
-    <EuiHorizontalRule
-      margin="l"
-      size="full"
-    />
-    <EuiButton
-      color="primary"
-      fill={false}
-      iconSide="left"
-      iconType="plusInCircle"
-      onClick={[Function]}
-      size="s"
-      type="button"
+    }
+    fullWidth={false}
+    gutterSize="l"
+    title={
+      <h3>
+        <FormattedMessage
+          defaultMessage="Cluster privileges"
+          id="xpack.security.management.editRoles.elasticSearchPrivileges.clusterPrivilegesTitle"
+          values={Object {}}
+        />
+      </h3>
+    }
+    titleSize="xs"
+  >
+    <EuiFormRow
+      describedByIds={Array []}
+      fullWidth={true}
+      hasEmptyLabelSpace={true}
     >
+      <ClusterPrivileges
+        onChange={[Function]}
+        role={
+          Object {
+            "elasticsearch": Object {
+              "cluster": Array [],
+              "indices": Array [],
+              "run_as": Array [],
+            },
+            "kibana": Object {
+              "global": Array [],
+              "space": Object {},
+            },
+            "name": "",
+          }
+        }
+      />
+    </EuiFormRow>
+  </EuiDescribedFormGroup>
+  <EuiSpacer
+    size="l"
+  />
+  <EuiDescribedFormGroup
+    description={
+      <p>
+        <FormattedMessage
+          defaultMessage="Allow requests to be submitted on the behalf of other users. "
+          id="xpack.security.management.editRoles.elasticSearchPrivileges.howToBeSubmittedOnBehalfOfOtherUsersDescription"
+          values={Object {}}
+        />
+        <EuiLink
+          className="editRole__learnMore"
+          color="primary"
+          href="undefinedguide/en/elastic-stack-overview/undefined/security-privileges.html#_run_as_privilege"
+          target="_blank"
+          type="button"
+        >
+          <FormattedMessage
+            defaultMessage="Learn more"
+            id="xpack.security.management.editRoles.elasticSearchPrivileges.learnMoreLinkText"
+            values={Object {}}
+          />
+        </EuiLink>
+      </p>
+    }
+    fullWidth={false}
+    gutterSize="l"
+    title={
+      <h3>
+        <FormattedMessage
+          defaultMessage="Run As privileges"
+          id="xpack.security.management.editRoles.elasticSearchPrivileges.runAsPrivilegesTitle"
+          values={Object {}}
+        />
+      </h3>
+    }
+    titleSize="xs"
+  >
+    <EuiFormRow
+      describedByIds={Array []}
+      fullWidth={false}
+      hasEmptyLabelSpace={true}
+    >
+      <EuiComboBox
+        compressed={false}
+        fullWidth={false}
+        isClearable={true}
+        isDisabled={false}
+        onChange={[Function]}
+        options={Array []}
+        placeholder="Add a user…"
+        selectedOptions={Array []}
+        singleSelection={false}
+      />
+    </EuiFormRow>
+  </EuiDescribedFormGroup>
+  <EuiSpacer
+    size="l"
+  />
+  <EuiTitle
+    size="xs"
+    textTransform="none"
+  >
+    <h3>
       <FormattedMessage
-        defaultMessage="Add index privilege"
-        id="xpack.security.management.editRoles.elasticSearchPrivileges.addIndexPrivilegesButtonLabel"
+        defaultMessage="Index privileges"
+        id="xpack.security.management.editRoles.elasticSearchPrivileges.indexPrivilegesTitle"
         values={Object {}}
       />
-    </EuiButton>
-  </CollapsiblePanel>
-</I18nProvider>
+    </h3>
+  </EuiTitle>
+  <EuiSpacer
+    size="s"
+  />
+  <EuiText
+    color="subdued"
+    grow={true}
+    size="s"
+  >
+    <p>
+      <FormattedMessage
+        defaultMessage="Control access to the data in your cluster. "
+        id="xpack.security.management.editRoles.elasticSearchPrivileges.controlAccessToClusterDataDescription"
+        values={Object {}}
+      />
+      <EuiLink
+        className="editRole__learnMore"
+        color="primary"
+        href="undefinedguide/en/elastic-stack-overview/undefined/security-privileges.html#privileges-list-indices"
+        target="_blank"
+        type="button"
+      >
+        <FormattedMessage
+          defaultMessage="Learn more"
+          id="xpack.security.management.editRoles.elasticSearchPrivileges.learnMoreLinkText"
+          values={Object {}}
+        />
+      </EuiLink>
+    </p>
+  </EuiText>
+  <IndexPrivileges
+    allowDocumentLevelSecurity={true}
+    allowFieldLevelSecurity={true}
+    httpClient={[MockFunction]}
+    indexPatterns={Array []}
+    onChange={[MockFunction]}
+    role={
+      Object {
+        "elasticsearch": Object {
+          "cluster": Array [],
+          "indices": Array [],
+          "run_as": Array [],
+        },
+        "kibana": Object {
+          "global": Array [],
+          "space": Object {},
+        },
+        "name": "",
+      }
+    }
+    validator={
+      RoleValidator {
+        "inProgressSpacePrivileges": Array [],
+        "shouldValidate": undefined,
+      }
+    }
+  />
+  <EuiHorizontalRule
+    margin="l"
+    size="full"
+  />
+  <EuiButton
+    color="primary"
+    fill={false}
+    iconSide="left"
+    iconType="plusInCircle"
+    onClick={[Function]}
+    size="s"
+    type="button"
+  >
+    <FormattedMessage
+      defaultMessage="Add index privilege"
+      id="xpack.security.management.editRoles.elasticSearchPrivileges.addIndexPrivilegesButtonLabel"
+      values={Object {}}
+    />
+  </EuiButton>
+</CollapsiblePanel>
 `;
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/elasticsearch_privileges.test.tsx b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/elasticsearch_privileges.test.tsx
index b58cab2197fe..37a85b2d7e3a 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/elasticsearch_privileges.test.tsx
+++ b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/elasticsearch_privileges.test.tsx
@@ -34,9 +34,7 @@ test('it renders without crashing', () => {
     allowFieldLevelSecurity: true,
     validator: new RoleValidator(),
   };
-  const wrapper = shallowWithIntl(
-    <ElasticsearchPrivileges.WrappedComponent {...props} intl={null as any} />
-  );
+  const wrapper = shallowWithIntl(<ElasticsearchPrivileges {...props} />);
   expect(wrapper).toMatchSnapshot();
 });
 
@@ -63,9 +61,7 @@ test('it renders ClusterPrivileges', () => {
     allowFieldLevelSecurity: true,
     validator: new RoleValidator(),
   };
-  const wrapper = mountWithIntl(
-    <ElasticsearchPrivileges.WrappedComponent {...props} intl={null as any} />
-  );
+  const wrapper = mountWithIntl(<ElasticsearchPrivileges {...props} />);
   expect(wrapper.find(ClusterPrivileges)).toHaveLength(1);
 });
 
@@ -92,8 +88,6 @@ test('it renders IndexPrivileges', () => {
     allowFieldLevelSecurity: true,
     validator: new RoleValidator(),
   };
-  const wrapper = mountWithIntl(
-    <ElasticsearchPrivileges.WrappedComponent {...props} intl={null as any} />
-  );
+  const wrapper = mountWithIntl(<ElasticsearchPrivileges {...props} />);
   expect(wrapper.find(IndexPrivileges)).toHaveLength(1);
 });
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/elasticsearch_privileges.tsx b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/elasticsearch_privileges.tsx
index 8da378ade28f..824a87051da2 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/elasticsearch_privileges.tsx
+++ b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/elasticsearch_privileges.tsx
@@ -16,7 +16,8 @@ import {
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
-import { FormattedMessage, I18nProvider, InjectedIntl, injectI18n } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import React, { Component, Fragment } from 'react';
 import { Role } from '../../../../../../../common/model/role';
 // @ts-ignore
@@ -37,17 +38,14 @@ interface Props {
   indexPatterns: string[];
   allowDocumentLevelSecurity: boolean;
   allowFieldLevelSecurity: boolean;
-  intl: InjectedIntl;
 }
 
-class ElasticsearchPrivilegesUI extends Component<Props, {}> {
+export class ElasticsearchPrivileges extends Component<Props, {}> {
   public render() {
     return (
-      <I18nProvider>
-        <CollapsiblePanel iconType={'logoElasticsearch'} title={'Elasticsearch'}>
-          {this.getForm()}
-        </CollapsiblePanel>
-      </I18nProvider>
+      <CollapsiblePanel iconType={'logoElasticsearch'} title={'Elasticsearch'}>
+        {this.getForm()}
+      </CollapsiblePanel>
     );
   }
 
@@ -60,7 +58,6 @@ class ElasticsearchPrivilegesUI extends Component<Props, {}> {
       indexPatterns,
       allowDocumentLevelSecurity,
       allowFieldLevelSecurity,
-      intl,
     } = this.props;
 
     const indexProps = {
@@ -124,11 +121,10 @@ class ElasticsearchPrivilegesUI extends Component<Props, {}> {
             <EuiComboBox
               placeholder={
                 this.props.editable
-                  ? intl.formatMessage({
-                      id:
-                        'xpack.security.management.editRoles.elasticSearchPrivileges.addUserTitle',
-                      defaultMessage: 'Add a user…',
-                    })
+                  ? i18n.translate(
+                      'xpack.security.management.editRoles.elasticSearchPrivileges.addUserTitle',
+                      { defaultMessage: 'Add a user…' }
+                    )
                   : undefined
               }
               options={this.props.runAsUsers.map(username => ({
@@ -236,5 +232,3 @@ class ElasticsearchPrivilegesUI extends Component<Props, {}> {
     this.props.onChange(role);
   };
 }
-
-export const ElasticsearchPrivileges = injectI18n(ElasticsearchPrivilegesUI);
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/index_privilege_form.test.tsx b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/index_privilege_form.test.tsx
index d517151a4edb..002b5daa1fb3 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/index_privilege_form.test.tsx
+++ b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/index_privilege_form.test.tsx
@@ -32,7 +32,7 @@ test('it renders without crashing', () => {
     intl: {} as any,
   };
 
-  const wrapper = shallowWithIntl(<IndexPrivilegeForm.WrappedComponent {...props} />);
+  const wrapper = shallowWithIntl(<IndexPrivilegeForm {...props} />);
   expect(wrapper).toMatchSnapshot();
 });
 
@@ -64,7 +64,7 @@ describe('delete button', () => {
       ...props,
       allowDelete: false,
     };
-    const wrapper = mountWithIntl(<IndexPrivilegeForm.WrappedComponent {...testProps} />);
+    const wrapper = mountWithIntl(<IndexPrivilegeForm {...testProps} />);
     expect(wrapper.find(EuiButtonIcon)).toHaveLength(0);
   });
 
@@ -73,7 +73,7 @@ describe('delete button', () => {
       ...props,
       allowDelete: true,
     };
-    const wrapper = mountWithIntl(<IndexPrivilegeForm.WrappedComponent {...testProps} />);
+    const wrapper = mountWithIntl(<IndexPrivilegeForm {...testProps} />);
     expect(wrapper.find(EuiButtonIcon)).toHaveLength(1);
   });
 
@@ -82,7 +82,7 @@ describe('delete button', () => {
       ...props,
       allowDelete: true,
     };
-    const wrapper = mountWithIntl(<IndexPrivilegeForm.WrappedComponent {...testProps} />);
+    const wrapper = mountWithIntl(<IndexPrivilegeForm {...testProps} />);
     wrapper.find(EuiButtonIcon).simulate('click');
     expect(testProps.onDelete).toHaveBeenCalledTimes(1);
   });
@@ -117,7 +117,7 @@ describe(`document level security`, () => {
       allowDocumentLevelSecurity: false,
     };
 
-    const wrapper = mountWithIntl(<IndexPrivilegeForm.WrappedComponent {...testProps} />);
+    const wrapper = mountWithIntl(<IndexPrivilegeForm {...testProps} />);
     expect(wrapper.find(EuiSwitch)).toHaveLength(0);
     expect(wrapper.find(EuiTextArea)).toHaveLength(0);
   });
@@ -131,7 +131,7 @@ describe(`document level security`, () => {
       },
     };
 
-    const wrapper = mountWithIntl(<IndexPrivilegeForm.WrappedComponent {...testProps} />);
+    const wrapper = mountWithIntl(<IndexPrivilegeForm {...testProps} />);
     expect(wrapper.find(EuiSwitch)).toHaveLength(1);
     expect(wrapper.find(EuiTextArea)).toHaveLength(0);
   });
@@ -141,7 +141,7 @@ describe(`document level security`, () => {
       ...props,
     };
 
-    const wrapper = mountWithIntl(<IndexPrivilegeForm.WrappedComponent {...testProps} />);
+    const wrapper = mountWithIntl(<IndexPrivilegeForm {...testProps} />);
     expect(wrapper.find(EuiSwitch)).toHaveLength(1);
     expect(wrapper.find(EuiTextArea)).toHaveLength(1);
   });
@@ -176,7 +176,7 @@ describe('field level security', () => {
       allowFieldLevelSecurity: false,
     };
 
-    const wrapper = mountWithIntl(<IndexPrivilegeForm.WrappedComponent {...testProps} />);
+    const wrapper = mountWithIntl(<IndexPrivilegeForm {...testProps} />);
     expect(wrapper.find('.indexPrivilegeForm__grantedFieldsRow')).toHaveLength(0);
   });
 
@@ -185,7 +185,7 @@ describe('field level security', () => {
       ...props,
     };
 
-    const wrapper = mountWithIntl(<IndexPrivilegeForm.WrappedComponent {...testProps} />);
+    const wrapper = mountWithIntl(<IndexPrivilegeForm {...testProps} />);
     expect(wrapper.find('div.indexPrivilegeForm__grantedFieldsRow')).toHaveLength(1);
   });
 
@@ -200,7 +200,7 @@ describe('field level security', () => {
       },
     };
 
-    const wrapper = mountWithIntl(<IndexPrivilegeForm.WrappedComponent {...testProps} />);
+    const wrapper = mountWithIntl(<IndexPrivilegeForm {...testProps} />);
     expect(wrapper.find('div.indexPrivilegeForm__grantedFieldsRow')).toHaveLength(1);
     expect(wrapper.find('.euiFormHelpText')).toHaveLength(1);
   });
@@ -210,7 +210,7 @@ describe('field level security', () => {
       ...props,
     };
 
-    const wrapper = mountWithIntl(<IndexPrivilegeForm.WrappedComponent {...testProps} />);
+    const wrapper = mountWithIntl(<IndexPrivilegeForm {...testProps} />);
     expect(wrapper.find('div.indexPrivilegeForm__grantedFieldsRow')).toHaveLength(1);
     expect(wrapper.find('.euiFormHelpText')).toHaveLength(0);
   });
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/index_privilege_form.tsx b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/index_privilege_form.tsx
index 43c6a0bd6bda..6ec7c6c7f0e8 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/index_privilege_form.tsx
+++ b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/index_privilege_form.tsx
@@ -15,7 +15,8 @@ import {
   EuiSwitch,
   EuiTextArea,
 } from '@elastic/eui';
-import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import React, { ChangeEvent, Component, Fragment } from 'react';
 import { IndexPrivilege } from '../../../../../../../common/model/index_privilege';
 // @ts-ignore
@@ -37,7 +38,6 @@ interface Props {
   allowDocumentLevelSecurity: boolean;
   allowFieldLevelSecurity: boolean;
   validator: RoleValidator;
-  intl: InjectedIntl;
 }
 
 interface State {
@@ -45,7 +45,7 @@ interface State {
   documentQuery?: string;
 }
 
-class IndexPrivilegeFormUI extends Component<Props, State> {
+export class IndexPrivilegeForm extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
@@ -55,7 +55,6 @@ class IndexPrivilegeFormUI extends Component<Props, State> {
   }
 
   public render() {
-    const { intl } = this.props;
     return (
       <Fragment>
         <EuiHorizontalRule />
@@ -65,11 +64,10 @@ class IndexPrivilegeFormUI extends Component<Props, State> {
             <EuiFlexItem grow={false}>
               <EuiFormRow hasEmptyLabelSpace>
                 <EuiButtonIcon
-                  aria-label={intl.formatMessage({
-                    id:
-                      'xpack.security.management.editRoles.indexPrivilegeForm.deleteSpacePrivilegeAriaLabel',
-                    defaultMessage: 'Delete index privilege',
-                  })}
+                  aria-label={i18n.translate(
+                    'xpack.security.management.editRoles.indexPrivilegeForm.deleteSpacePrivilegeAriaLabel',
+                    { defaultMessage: 'Delete index privilege' }
+                  )}
                   color={'danger'}
                   onClick={this.props.onDelete}
                   iconType={'trash'}
@@ -325,5 +323,3 @@ class IndexPrivilegeFormUI extends Component<Props, State> {
     });
   };
 }
-
-export const IndexPrivilegeForm = injectI18n(IndexPrivilegeFormUI);
diff --git a/x-pack/plugins/security/public/views/management/edit_role/index.js b/x-pack/plugins/security/public/views/management/edit_role/index.js
index 8d20279e3984..b6dce0eac8cd 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/index.js
+++ b/x-pack/plugins/security/public/views/management/edit_role/index.js
@@ -29,7 +29,7 @@ import { EditRolePage } from './components';
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { KibanaAppPrivileges } from '../../../../common/model/kibana_privilege';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 routes.when(`${EDIT_ROLES_PATH}/:name?`, {
   template,
@@ -134,7 +134,7 @@ routes.when(`${EDIT_ROLES_PATH}/:name?`, {
       const domNode = document.getElementById('editRoleReactRoot');
 
       render(
-        <I18nProvider>
+        <I18nContext>
           <EditRolePage
             runAsUsers={users}
             role={role}
@@ -149,7 +149,7 @@ routes.when(`${EDIT_ROLES_PATH}/:name?`, {
             spacesEnabled={enableSpaceAwarePrivileges}
             userProfile={userProfile}
           />
-        </I18nProvider>, domNode);
+        </I18nContext>, domNode);
 
       // unmount react on controller destroy
       $scope.$on('$destroy', () => {
diff --git a/x-pack/plugins/security/public/views/management/edit_user.js b/x-pack/plugins/security/public/views/management/edit_user.js
index f46691e25a43..2ebfc2722c14 100644
--- a/x-pack/plugins/security/public/views/management/edit_user.js
+++ b/x-pack/plugins/security/public/views/management/edit_user.js
@@ -14,18 +14,18 @@ import { EditUser } from '../../components/management/users';
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { createApiClient } from '../../lib/api';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { getEditUserBreadcrumbs, getCreateUserBreadcrumbs } from './breadcrumbs';
 
 const renderReact = (elem, httpClient, changeUrl, username) => {
   render(
-    <I18nProvider>
+    <I18nContext>
       <EditUser
         changeUrl={changeUrl}
         apiClient={createApiClient(httpClient)}
         username={username}
       />
-    </I18nProvider>,
+    </I18nContext>,
     elem
   );
 };
diff --git a/x-pack/plugins/security/public/views/management/users.js b/x-pack/plugins/security/public/views/management/users.js
index 2b2ad62556ec..5ce5c0c81314 100644
--- a/x-pack/plugins/security/public/views/management/users.js
+++ b/x-pack/plugins/security/public/views/management/users.js
@@ -12,7 +12,7 @@ import 'plugins/security/services/shield_user';
 import { SECURITY_PATH, USERS_PATH } from './management_urls';
 import { Users } from '../../components/management/users';
 import { createApiClient } from '../../lib/api';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import { getUsersBreadcrumbs } from './breadcrumbs';
 
 routes.when(SECURITY_PATH, {
@@ -20,7 +20,7 @@ routes.when(SECURITY_PATH, {
 });
 
 const renderReact = (elem, httpClient, changeUrl) => {
-  render(<I18nProvider><Users changeUrl={changeUrl} apiClient={createApiClient(httpClient)} /></I18nProvider>, elem);
+  render(<I18nContext><Users changeUrl={changeUrl} apiClient={createApiClient(httpClient)} /></I18nContext>, elem);
 };
 
 routes.when(USERS_PATH, {
diff --git a/x-pack/plugins/security/public/views/nav_control/nav_control.js b/x-pack/plugins/security/public/views/nav_control/nav_control.js
index 654327d379c9..9154ec114ab8 100644
--- a/x-pack/plugins/security/public/views/nav_control/nav_control.js
+++ b/x-pack/plugins/security/public/views/nav_control/nav_control.js
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { constant } from 'lodash';
@@ -71,9 +71,9 @@ chromeHeaderNavControlsRegistry.register((ShieldUser, kbnBaseUrl, Private) => ({
     props.user.$promise.then(() => {
       // Wait for the user to be propogated before rendering into the DOM.
       ReactDOM.render(
-        <I18nProvider>
+        <I18nContext>
           <SecurityNavControl {...props} />
-        </I18nProvider>,
+        </I18nContext>,
         el
       );
     });
diff --git a/x-pack/plugins/spaces/public/views/management/page_routes.tsx b/x-pack/plugins/spaces/public/views/management/page_routes.tsx
index 5db4bca53d1f..f21c6fa2f5dc 100644
--- a/x-pack/plugins/spaces/public/views/management/page_routes.tsx
+++ b/x-pack/plugins/spaces/public/views/management/page_routes.tsx
@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nContext } from 'ui/i18n';
 
 // @ts-ignore
 import template from 'plugins/spaces/views/management/template.html';
@@ -42,13 +42,13 @@ routes.when('/management/spaces/list', {
       const spacesManager = new SpacesManager($http, chrome, spaceSelectorURL);
 
       render(
-        <I18nProvider>
+        <I18nContext>
           <SpacesGridPage
             spacesManager={spacesManager}
             spacesNavState={spacesNavState}
             userProfile={userProfile}
           />
-        </I18nProvider>,
+        </I18nContext>,
         domNode
       );
 
@@ -81,13 +81,13 @@ routes.when('/management/spaces/create', {
       const spacesManager = new SpacesManager($http, chrome, spaceSelectorURL);
 
       render(
-        <I18nProvider>
+        <I18nContext>
           <ManageSpacePage
             spacesManager={spacesManager}
             spacesNavState={spacesNavState}
             userProfile={userProfile}
           />
-        </I18nProvider>,
+        </I18nContext>,
         domNode
       );
 
@@ -127,7 +127,7 @@ routes.when('/management/spaces/edit/:spaceId', {
       const spacesManager = new SpacesManager($http, chrome, spaceSelectorURL);
 
       render(
-        <I18nProvider>
+        <I18nContext>
           <ManageSpacePage
             spaceId={spaceId}
             spacesManager={spacesManager}
@@ -137,7 +137,7 @@ routes.when('/management/spaces/edit/:spaceId', {
               chrome.breadcrumbs.set(breadcrumbs);
             }}
           />
-        </I18nProvider>,
+        </I18nContext>,
         domNode
       );
 
diff --git a/x-pack/plugins/spaces/public/views/nav_control/nav_control.tsx b/x-pack/plugins/spaces/public/views/nav_control/nav_control.tsx
index 8535358fc8fb..93efcdce0295 100644
--- a/x-pack/plugins/spaces/public/views/nav_control/nav_control.tsx
+++ b/x-pack/plugins/spaces/public/views/nav_control/nav_control.tsx
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { I18nProvider } from '@kbn/i18n/react';
 import { constant } from 'lodash';
 import { SpacesManager } from 'plugins/spaces/lib/spaces_manager';
 // @ts-ignore
@@ -17,6 +16,7 @@ import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import ReactDOM from 'react-dom';
 import { NavControlSide } from 'ui/chrome/directives/header_global_nav';
+import { I18nContext } from 'ui/i18n';
 // @ts-ignore
 import { uiModules } from 'ui/modules';
 // @ts-ignore
@@ -60,7 +60,7 @@ module.controller(
     $scope.$parent.$watch('isVisible', function isVisibleWatcher(isVisible: boolean) {
       if (isVisible && !mounted && !pathProvider.isUnauthenticated()) {
         render(
-          <I18nProvider>
+          <I18nContext>
             <NavControlPopover
               spacesManager={spacesManager}
               activeSpace={activeSpace}
@@ -68,7 +68,7 @@ module.controller(
               anchorPosition={'rightCenter'}
               buttonClass={SpacesGlobalNavButton}
             />
-          </I18nProvider>,
+          </I18nContext>,
           domNode
         );
         mounted = true;
@@ -116,7 +116,7 @@ chromeHeaderNavControlsRegistry.register(
       spacesManager = new SpacesManager($http, chrome, spaceSelectorURL);
 
       ReactDOM.render(
-        <I18nProvider>
+        <I18nContext>
           <NavControlPopover
             spacesManager={spacesManager}
             activeSpace={activeSpace}
@@ -124,7 +124,7 @@ chromeHeaderNavControlsRegistry.register(
             anchorPosition="downLeft"
             buttonClass={SpacesHeaderNavButton}
           />
-        </I18nProvider>,
+        </I18nContext>,
         el
       );
     },
diff --git a/x-pack/plugins/spaces/public/views/space_selector/index.tsx b/x-pack/plugins/spaces/public/views/space_selector/index.tsx
index 30301aac2615..bd62c663a555 100644
--- a/x-pack/plugins/spaces/public/views/space_selector/index.tsx
+++ b/x-pack/plugins/spaces/public/views/space_selector/index.tsx
@@ -4,12 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { I18nProvider } from '@kbn/i18n/react';
 import { SpacesManager } from 'plugins/spaces/lib/spaces_manager';
 // @ts-ignore
 import template from 'plugins/spaces/views/space_selector/space_selector.html';
 import 'ui/autoload/styles';
 import chrome from 'ui/chrome';
+import { I18nContext } from 'ui/i18n';
 // @ts-ignore
 import { uiModules } from 'ui/modules';
 
@@ -27,9 +27,9 @@ module.controller(
     const spacesManager = new SpacesManager($http, chrome, spaceSelectorURL);
 
     render(
-      <I18nProvider>
+      <I18nContext>
         <SpaceSelector spaces={spaces} spacesManager={spacesManager} />
-      </I18nProvider>,
+      </I18nContext>,
       domNode
     );
 
diff --git a/x-pack/plugins/upgrade_assistant/public/app.tsx b/x-pack/plugins/upgrade_assistant/public/app.tsx
index 1c8ad6e304b8..43a2304298a4 100644
--- a/x-pack/plugins/upgrade_assistant/public/app.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/app.tsx
@@ -7,12 +7,12 @@
 import React, { Fragment } from 'react';
 
 import { EuiPageHeader, EuiPageHeaderSection, EuiTitle } from '@elastic/eui';
-import { FormattedMessage, injectI18nProvider } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import { NEXT_MAJOR_VERSION } from '../common/version';
 import { UpgradeAssistantTabs } from './components/tabs';
 
-export const RootComponentUI: React.StatelessComponent = () => (
+export const RootComponent: React.StatelessComponent = () => (
   <Fragment>
     <EuiPageHeader>
       <EuiPageHeaderSection>
@@ -30,5 +30,3 @@ export const RootComponentUI: React.StatelessComponent = () => (
     <UpgradeAssistantTabs />
   </Fragment>
 );
-
-export const RootComponent = injectI18nProvider(RootComponentUI);
diff --git a/x-pack/plugins/upgrade_assistant/public/index.tsx b/x-pack/plugins/upgrade_assistant/public/index.tsx
index 62c98b65aa9e..2f631d3771ec 100644
--- a/x-pack/plugins/upgrade_assistant/public/index.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/index.tsx
@@ -5,6 +5,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { wrapInI18nContext } from 'ui/i18n';
 // @ts-ignore
 import { management } from 'ui/management';
 // @ts-ignore
@@ -28,7 +29,7 @@ function startApp() {
   });
 
   uiModules.get('kibana').directive('upgradeAssistant', (reactDirective: any) => {
-    return reactDirective(RootComponent);
+    return reactDirective(wrapInI18nContext(RootComponent));
   });
 
   routes.when(`${BASE_PATH}/:view?`, {
diff --git a/x-pack/plugins/uptime/public/uptime_app.tsx b/x-pack/plugins/uptime/public/uptime_app.tsx
index 3b420553174e..2da7354e24c1 100644
--- a/x-pack/plugins/uptime/public/uptime_app.tsx
+++ b/x-pack/plugins/uptime/public/uptime_app.tsx
@@ -24,10 +24,11 @@ import {
 import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
 import { ApolloProvider } from 'react-apollo';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { I18nContext } from 'ui/i18n';
 import { overviewBreadcrumb, UMBreadcrumb } from './breadcrumbs';
 import { UMGraphQLClient, UMUpdateBreadcrumbs } from './lib/lib';
 import { MonitorPage, OverviewPage } from './pages';
@@ -146,7 +147,7 @@ class Application extends React.Component<UptimeAppProps, UptimeAppState> {
   public render() {
     const { isUsingK7Design, routerBasename, graphQLClient } = this.props;
     return (
-      <I18nProvider>
+      <I18nContext>
         <Router basename={routerBasename}>
           <ApolloProvider client={graphQLClient}>
             <EuiPage className="app-wrapper-panel">
@@ -267,7 +268,7 @@ class Application extends React.Component<UptimeAppProps, UptimeAppState> {
             </EuiPage>
           </ApolloProvider>
         </Router>
-      </I18nProvider>
+      </I18nContext>
     );
   }