Get rid of ui/i18n in Discover (#62799)

src/legacy/core_plugins/kibana/public/discover/get_inner_angular.ts

@@ -201,7 +201,6 @@ function createDocTableModule() {
     .directive('docTable', createDocTableDirective)
     .directive('kbnTableHeader', createTableHeaderDirective)
     .directive('toolBarPagerText', createToolBarPagerTextDirective)
-    .directive('toolBarPagerText', createToolBarPagerTextDirective)
     .directive('kbnTableRow', createTableRowDirective)
     .directive('toolBarPagerButtons', createToolBarPagerButtonsDirective)
     .directive('kbnInfiniteScroll', createInfiniteScrollDirective)

src/legacy/core_plugins/kibana/public/discover/kibana_services.ts

@@ -50,8 +50,6 @@ export const [getUrlTracker, setUrlTracker] = createGetterSetter<{
   setTrackedUrl: (url: string) => void;
 }>('urlTracker');
 
-// EXPORT legacy static dependencies, should be migrated when available in a new version;
-export { wrapInI18nContext } from 'ui/i18n';
 import { search } from '../../../../../plugins/data/public';
 import { createGetterSetter } from '../../../../../plugins/kibana_utils/common';
 export const { getRequestInspectorStats, getResponseInspectorStats, tabifyAggResponse } = search;

src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context/components/action_bar/action_bar.tsx

@@ -18,7 +18,7 @@
  */
 import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
 import {
   EuiButtonEmpty,
   EuiFieldNumber,
@@ -88,77 +88,83 @@ export function ActionBar({
   };
 
   return (
-    <form onSubmit={onSubmit}>
-      {isSuccessor && <EuiSpacer size="s" />}
-      {isSuccessor && showWarning && <ActionBarWarning docCount={docCountAvailable} type={type} />}
-      {isSuccessor && showWarning && <EuiSpacer size="s" />}
-      <EuiFlexGroup direction="row" gutterSize="s" responsive={false}>
-        <EuiFlexItem grow={false}>
-          <EuiButtonEmpty
-            data-test-subj={`${type}LoadMoreButton`}
-            iconType={isSuccessor ? 'arrowDown' : 'arrowUp'}
-            isDisabled={isDisabled}
-            isLoading={isLoading}
-            onClick={() => {
-              const value = newDocCount + defaultStepSize;
-              if (isValid(value)) {
-                setNewDocCount(value);
-                onChangeCount(value);
-              }
-            }}
-            flush="right"
-          >
-            <FormattedMessage id="kbn.context.loadButtonLabel" defaultMessage="Load" />
-          </EuiButtonEmpty>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiFormRow>
-            <EuiFieldNumber
-              aria-label={
-                isSuccessor
-                  ? i18n.translate('kbn.context.olderDocumentsAriaLabel', {
-                      defaultMessage: 'Number of older documents',
-                    })
-                  : i18n.translate('kbn.context.newerDocumentsAriaLabel', {
-                      defaultMessage: 'Number of newer documents',
-                    })
-              }
-              className="cxtSizePicker"
-              data-test-subj={`${type}CountPicker`}
-              disabled={isDisabled}
-              min={MIN_CONTEXT_SIZE}
-              max={MAX_CONTEXT_SIZE}
-              onChange={ev => {
-                setNewDocCount(ev.target.valueAsNumber);
-              }}
-              onBlur={() => {
-                if (newDocCount !== docCount && isValid(newDocCount)) {
-                  onChangeCount(newDocCount);
+    <I18nProvider>
+      <form onSubmit={onSubmit}>
+        {isSuccessor && <EuiSpacer size="s" />}
+        {isSuccessor && showWarning && (
+          <ActionBarWarning docCount={docCountAvailable} type={type} />
+        )}
+        {isSuccessor && showWarning && <EuiSpacer size="s" />}
+        <EuiFlexGroup direction="row" gutterSize="s" responsive={false}>
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              data-test-subj={`${type}LoadMoreButton`}
+              iconType={isSuccessor ? 'arrowDown' : 'arrowUp'}
+              isDisabled={isDisabled}
+              isLoading={isLoading}
+              onClick={() => {
+                const value = newDocCount + defaultStepSize;
+                if (isValid(value)) {
+                  setNewDocCount(value);
+                  onChangeCount(value);
                 }
               }}
-              type="number"
-              value={newDocCount >= 0 ? newDocCount : ''}
-            />
-          </EuiFormRow>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiFormRow displayOnly>
-            {isSuccessor ? (
-              <FormattedMessage
-                id="kbn.context.olderDocumentsDescription"
-                defaultMessage="older documents"
+              flush="right"
+            >
+              <FormattedMessage id="kbn.context.loadButtonLabel" defaultMessage="Load" />
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiFormRow>
+              <EuiFieldNumber
+                aria-label={
+                  isSuccessor
+                    ? i18n.translate('kbn.context.olderDocumentsAriaLabel', {
+                        defaultMessage: 'Number of older documents',
+                      })
+                    : i18n.translate('kbn.context.newerDocumentsAriaLabel', {
+                        defaultMessage: 'Number of newer documents',
+                      })
+                }
+                className="cxtSizePicker"
+                data-test-subj={`${type}CountPicker`}
+                disabled={isDisabled}
+                min={MIN_CONTEXT_SIZE}
+                max={MAX_CONTEXT_SIZE}
+                onChange={ev => {
+                  setNewDocCount(ev.target.valueAsNumber);
+                }}
+                onBlur={() => {
+                  if (newDocCount !== docCount && isValid(newDocCount)) {
+                    onChangeCount(newDocCount);
+                  }
+                }}
+                type="number"
+                value={newDocCount >= 0 ? newDocCount : ''}
               />
-            ) : (
-              <FormattedMessage
-                id="kbn.context.newerDocumentsDescription"
-                defaultMessage="newer documents"
-              />
-            )}
-          </EuiFormRow>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      {!isSuccessor && showWarning && <ActionBarWarning docCount={docCountAvailable} type={type} />}
-      {!isSuccessor && <EuiSpacer size="s" />}
-    </form>
+            </EuiFormRow>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiFormRow displayOnly>
+              {isSuccessor ? (
+                <FormattedMessage
+                  id="kbn.context.olderDocumentsDescription"
+                  defaultMessage="older documents"
+                />
+              ) : (
+                <FormattedMessage
+                  id="kbn.context.newerDocumentsDescription"
+                  defaultMessage="newer documents"
+                />
+              )}
+            </EuiFormRow>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        {!isSuccessor && showWarning && (
+          <ActionBarWarning docCount={docCountAvailable} type={type} />
+        )}
+        {!isSuccessor && <EuiSpacer size="s" />}
+      </form>
+    </I18nProvider>
   );
 }

src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context/components/action_bar/action_bar_directive.ts

@@ -16,9 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { getAngularModule, wrapInI18nContext } from '../../../../../kibana_services';
+import { getAngularModule } from '../../../../../kibana_services';
 import { ActionBar } from './action_bar';
 
 getAngularModule().directive('contextActionBar', function(reactDirective: any) {
-  return reactDirective(wrapInI18nContext(ActionBar));
+  return reactDirective(ActionBar);
 });

src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/index.js

@@ -20,16 +20,12 @@
 import { DiscoverNoResults } from './no_results';
 import { DiscoverUninitialized } from './uninitialized';
 import { DiscoverHistogram } from './histogram';
-import { getAngularModule, wrapInI18nContext } from '../../../kibana_services';
+import { getAngularModule } from '../../../kibana_services';
 
 const app = getAngularModule();
 
-app.directive('discoverNoResults', reactDirective =>
-  reactDirective(wrapInI18nContext(DiscoverNoResults))
-);
+app.directive('discoverNoResults', reactDirective => reactDirective(DiscoverNoResults));
 
-app.directive('discoverUninitialized', reactDirective =>
-  reactDirective(wrapInI18nContext(DiscoverUninitialized))
-);
+app.directive('discoverUninitialized', reactDirective => reactDirective(DiscoverUninitialized));
 
 app.directive('discoverHistogram', reactDirective => reactDirective(DiscoverHistogram));

src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/no_results.js

@@ -18,7 +18,7 @@
  */
 
 import React, { Component, Fragment } from 'react';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
 import PropTypes from 'prop-types';
 
 import {
@@ -247,29 +247,31 @@ export class DiscoverNoResults extends Component {
     }
 
     return (
-      <Fragment>
-        <EuiSpacer size="xl" />
+      <I18nProvider>
+        <Fragment>
+          <EuiSpacer size="xl" />
 
-        <EuiFlexGroup justifyContent="center">
-          <EuiFlexItem grow={false} className="dscNoResults">
-            <EuiCallOut
-              title={
-                <FormattedMessage
-                  id="kbn.discover.noResults.searchExamples.noResultsMatchSearchCriteriaTitle"
-                  defaultMessage="No results match your search criteria"
-                />
-              }
-              color="warning"
-              iconType="help"
-              data-test-subj="discoverNoResults"
-            />
+          <EuiFlexGroup justifyContent="center">
+            <EuiFlexItem grow={false} className="dscNoResults">
+              <EuiCallOut
+                title={
+                  <FormattedMessage
+                    id="kbn.discover.noResults.searchExamples.noResultsMatchSearchCriteriaTitle"
+                    defaultMessage="No results match your search criteria"
+                  />
+                }
+                color="warning"
+                iconType="help"
+                data-test-subj="discoverNoResults"
+              />
 
-            {shardFailuresMessage}
-            {timeFieldMessage}
-            {luceneQueryMessage}
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </Fragment>
+              {shardFailuresMessage}
+              {timeFieldMessage}
+              {luceneQueryMessage}
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </Fragment>
+      </I18nProvider>
     );
   }
 }

src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/uninitialized.tsx

@@ -18,7 +18,7 @@
  */
 
 import React from 'react';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
 
 import { EuiButton, EuiEmptyPrompt, EuiPage, EuiPageBody, EuiPageContent } from '@elastic/eui';
 
@@ -28,38 +28,40 @@ interface Props {
 
 export const DiscoverUninitialized = ({ onRefresh }: Props) => {
   return (
-    <EuiPage>
-      <EuiPageBody>
-        <EuiPageContent horizontalPosition="center">
-          <EuiEmptyPrompt
-            iconType="discoverApp"
-            title={
-              <h2>
-                <FormattedMessage
-                  id="kbn.discover.uninitializedTitle"
-                  defaultMessage="Start searching"
-                />
-              </h2>
-            }
-            body={
-              <p>
-                <FormattedMessage
-                  id="kbn.discover.uninitializedText"
-                  defaultMessage="Write a query, add some filters, or simply hit Refresh to retrieve results for the current query."
-                />
-              </p>
-            }
-            actions={
-              <EuiButton color="primary" fill onClick={onRefresh}>
-                <FormattedMessage
-                  id="kbn.discover.uninitializedRefreshButtonText"
-                  defaultMessage="Refresh data"
-                />
-              </EuiButton>
-            }
-          />
-        </EuiPageContent>
-      </EuiPageBody>
-    </EuiPage>
+    <I18nProvider>
+      <EuiPage>
+        <EuiPageBody>
+          <EuiPageContent horizontalPosition="center">
+            <EuiEmptyPrompt
+              iconType="discoverApp"
+              title={
+                <h2>
+                  <FormattedMessage
+                    id="kbn.discover.uninitializedTitle"
+                    defaultMessage="Start searching"
+                  />
+                </h2>
+              }
+              body={
+                <p>
+                  <FormattedMessage
+                    id="kbn.discover.uninitializedText"
+                    defaultMessage="Write a query, add some filters, or simply hit Refresh to retrieve results for the current query."
+                  />
+                </p>
+              }
+              actions={
+                <EuiButton color="primary" fill onClick={onRefresh}>
+                  <FormattedMessage
+                    id="kbn.discover.uninitializedRefreshButtonText"
+                    defaultMessage="Refresh data"
+                  />
+                </EuiButton>
+              }
+            />
+          </EuiPageContent>
+        </EuiPageBody>
+      </EuiPage>
+    </I18nProvider>
   );
 };

src/legacy/core_plugins/kibana/public/discover/np_ready/angular/doc.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { getAngularModule, wrapInI18nContext, getServices } from '../../kibana_services';
+import { getAngularModule, getServices } from '../../kibana_services';
 // @ts-ignore
 import { getRootBreadcrumbs } from '../helpers/breadcrumbs';
 import html from './doc.html';
@@ -30,7 +30,7 @@ const { timefilter } = getServices();
 const app = getAngularModule();
 app.directive('discoverDoc', function(reactDirective: any) {
   return reactDirective(
-    wrapInI18nContext(Doc),
+    Doc,
     [
       ['id', { watchDepth: 'value' }],
       ['index', { watchDepth: 'value' }],

src/legacy/core_plugins/kibana/public/discover/np_ready/angular/doc_table/components/pager/index.ts

@@ -16,14 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { wrapInI18nContext } from '../../../../../kibana_services';
 import { ToolBarPagerText } from './tool_bar_pager_text';
 import { ToolBarPagerButtons } from './tool_bar_pager_buttons';
 
 export function createToolBarPagerTextDirective(reactDirective: any) {
-  return reactDirective(wrapInI18nContext(ToolBarPagerText));
+  return reactDirective(ToolBarPagerText);
 }
 
 export function createToolBarPagerButtonsDirective(reactDirective: any) {
-  return reactDirective(wrapInI18nContext(ToolBarPagerButtons));
+  return reactDirective(ToolBarPagerButtons);
 }

src/legacy/core_plugins/kibana/public/discover/np_ready/angular/doc_table/components/pager/tool_bar_pager_text.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
 
 interface Props {
   startItem: number;
@@ -27,12 +27,14 @@ interface Props {
 
 export function ToolBarPagerText({ startItem, endItem, totalItems }: Props) {
   return (
-    <div className="kuiToolBarText" data-test-subj="toolBarPagerText">
-      <FormattedMessage
-        id="kbn.docTable.pagerControl.pagesCountLabel"
-        defaultMessage="{startItem}&ndash;{endItem} of {totalItems}"
-        values={{ startItem, endItem, totalItems }}
-      />
-    </div>
+    <I18nProvider>
+      <div className="kuiToolBarText" data-test-subj="toolBarPagerText">
+        <FormattedMessage
+          id="kbn.docTable.pagerControl.pagesCountLabel"
+          defaultMessage="{startItem}&ndash;{endItem} of {totalItems}"
+          values={{ startItem, endItem, totalItems }}
+        />
+      </div>
+    </I18nProvider>
   );
 }

src/legacy/core_plugins/kibana/public/discover/np_ready/angular/doc_table/components/table_header.ts

@@ -17,13 +17,13 @@
  * under the License.
  */
 import { TableHeader } from './table_header/table_header';
-import { wrapInI18nContext, getServices } from '../../../../kibana_services';
+import { getServices } from '../../../../kibana_services';
 
 export function createTableHeaderDirective(reactDirective: any) {
   const { uiSettings: config } = getServices();
 
   return reactDirective(
-    wrapInI18nContext(TableHeader),
+    TableHeader,
     [
       ['columns', { watchDepth: 'collection' }],
       ['hideTimeColumn', { watchDepth: 'value' }],

src/legacy/core_plugins/kibana/public/discover/np_ready/components/doc/doc.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
 import { EuiCallOut, EuiLink, EuiLoadingSpinner, EuiPageContent } from '@elastic/eui';
 import { IndexPatternsContract } from 'src/plugins/data/public';
 import { ElasticRequestState, useEsDocSearch } from './use_es_doc_search';
@@ -65,83 +65,85 @@ export function Doc(props: DocProps) {
   const [reqState, hit, indexPattern] = useEsDocSearch(props);
 
   return (
-    <EuiPageContent>
-      {reqState === ElasticRequestState.NotFoundIndexPattern && (
-        <EuiCallOut
-          color="danger"
-          data-test-subj={`doc-msg-notFoundIndexPattern`}
-          iconType="alert"
-          title={
-            <FormattedMessage
-              id="kbn.doc.failedToLocateIndexPattern"
-              defaultMessage="No index pattern matches ID {indexPatternId}"
-              values={{ indexPatternId: props.indexPatternId }}
-            />
-          }
-        />
-      )}
-      {reqState === ElasticRequestState.NotFound && (
-        <EuiCallOut
-          color="danger"
-          data-test-subj={`doc-msg-notFound`}
-          iconType="alert"
-          title={
-            <FormattedMessage
-              id="kbn.doc.failedToLocateDocumentDescription"
-              defaultMessage="Cannot find document"
-            />
-          }
-        >
-          <FormattedMessage
-            id="kbn.doc.couldNotFindDocumentsDescription"
-            defaultMessage="No documents match that ID."
+    <I18nProvider>
+      <EuiPageContent>
+        {reqState === ElasticRequestState.NotFoundIndexPattern && (
+          <EuiCallOut
+            color="danger"
+            data-test-subj={`doc-msg-notFoundIndexPattern`}
+            iconType="alert"
+            title={
+              <FormattedMessage
+                id="kbn.doc.failedToLocateIndexPattern"
+                defaultMessage="No index pattern matches ID {indexPatternId}"
+                values={{ indexPatternId: props.indexPatternId }}
+              />
+            }
           />
-        </EuiCallOut>
-      )}
-
-      {reqState === ElasticRequestState.Error && (
-        <EuiCallOut
-          color="danger"
-          data-test-subj={`doc-msg-error`}
-          iconType="alert"
-          title={
-            <FormattedMessage
-              id="kbn.doc.failedToExecuteQueryDescription"
-              defaultMessage="Cannot run search"
-            />
-          }
-        >
-          <FormattedMessage
-            id="kbn.doc.somethingWentWrongDescription"
-            defaultMessage="{indexName} is missing."
-            values={{ indexName: props.index }}
-          />{' '}
-          <EuiLink
-            href={`https://www.elastic.co/guide/en/elasticsearch/reference/${
-              getServices().metadata.branch
-            }/indices-exists.html`}
-            target="_blank"
+        )}
+        {reqState === ElasticRequestState.NotFound && (
+          <EuiCallOut
+            color="danger"
+            data-test-subj={`doc-msg-notFound`}
+            iconType="alert"
+            title={
+              <FormattedMessage
+                id="kbn.doc.failedToLocateDocumentDescription"
+                defaultMessage="Cannot find document"
+              />
+            }
           >
             <FormattedMessage
-              id="kbn.doc.somethingWentWrongDescriptionAddon"
-              defaultMessage="Please ensure the index exists."
+              id="kbn.doc.couldNotFindDocumentsDescription"
+              defaultMessage="No documents match that ID."
             />
-          </EuiLink>
-        </EuiCallOut>
-      )}
+          </EuiCallOut>
+        )}
 
-      {reqState === ElasticRequestState.Loading && (
-        <EuiCallOut data-test-subj={`doc-msg-loading`}>
-          <EuiLoadingSpinner size="m" />{' '}
-          <FormattedMessage id="kbn.doc.loadingDescription" defaultMessage="Loading…" />
-        </EuiCallOut>
-      )}
+        {reqState === ElasticRequestState.Error && (
+          <EuiCallOut
+            color="danger"
+            data-test-subj={`doc-msg-error`}
+            iconType="alert"
+            title={
+              <FormattedMessage
+                id="kbn.doc.failedToExecuteQueryDescription"
+                defaultMessage="Cannot run search"
+              />
+            }
+          >
+            <FormattedMessage
+              id="kbn.doc.somethingWentWrongDescription"
+              defaultMessage="{indexName} is missing."
+              values={{ indexName: props.index }}
+            />{' '}
+            <EuiLink
+              href={`https://www.elastic.co/guide/en/elasticsearch/reference/${
+                getServices().metadata.branch
+              }/indices-exists.html`}
+              target="_blank"
+            >
+              <FormattedMessage
+                id="kbn.doc.somethingWentWrongDescriptionAddon"
+                defaultMessage="Please ensure the index exists."
+              />
+            </EuiLink>
+          </EuiCallOut>
+        )}
 
-      {reqState === ElasticRequestState.Found && hit !== null && indexPattern && (
-        <div data-test-subj="doc-hit">
-          <DocViewer hit={hit} indexPattern={indexPattern} />
-        </div>
-      )}
-    </EuiPageContent>
+        {reqState === ElasticRequestState.Loading && (
+          <EuiCallOut data-test-subj={`doc-msg-loading`}>
+            <EuiLoadingSpinner size="m" />{' '}
+            <FormattedMessage id="kbn.doc.loadingDescription" defaultMessage="Loading…" />
+          </EuiCallOut>
+        )}
+
+        {reqState === ElasticRequestState.Found && hit !== null && indexPattern && (
+          <div data-test-subj="doc-hit">
+            <DocViewer hit={hit} indexPattern={indexPattern} />
+          </div>
+        )}
+      </EuiPageContent>
+    </I18nProvider>
   );
 }

src/legacy/core_plugins/kibana/public/discover/np_ready/components/fetch_error/fetch_error.tsx

@@ -17,9 +17,9 @@
  * under the License.
  */
 import React, { Fragment } from 'react';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
 import { EuiFlexGroup, EuiFlexItem, EuiCallOut, EuiCodeBlock, EuiSpacer } from '@elastic/eui';
-import { getAngularModule, wrapInI18nContext, getServices } from '../../../kibana_services';
+import { getAngularModule, getServices } from '../../../kibana_services';
 
 interface Props {
   fetchError: {
@@ -72,26 +72,28 @@ const DiscoverFetchError = ({ fetchError }: Props) => {
   }
 
   return (
-    <Fragment>
-      <EuiSpacer size="xl" />
+    <I18nProvider>
+      <Fragment>
+        <EuiSpacer size="xl" />
 
-      <EuiFlexGroup justifyContent="center" data-test-subj="discoverFetchError">
-        <EuiFlexItem grow={false} className="discoverFetchError">
-          <EuiCallOut title={fetchError.message} color="danger" iconType="cross">
-            {body}
+        <EuiFlexGroup justifyContent="center" data-test-subj="discoverFetchError">
+          <EuiFlexItem grow={false} className="discoverFetchError">
+            <EuiCallOut title={fetchError.message} color="danger" iconType="cross">
+              {body}
 
-            <EuiCodeBlock>{fetchError.error}</EuiCodeBlock>
-          </EuiCallOut>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+              <EuiCodeBlock>{fetchError.error}</EuiCodeBlock>
+            </EuiCallOut>
+          </EuiFlexItem>
+        </EuiFlexGroup>
 
-      <EuiSpacer size="xl" />
-    </Fragment>
+        <EuiSpacer size="xl" />
+      </Fragment>
+    </I18nProvider>
   );
 };
 
 export function createFetchErrorDirective(reactDirective: any) {
-  return reactDirective(wrapInI18nContext(DiscoverFetchError));
+  return reactDirective(DiscoverFetchError);
 }
 
 getAngularModule().directive('discoverFetchError', createFetchErrorDirective);

src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/discover_sidebar.tsx

@@ -20,7 +20,7 @@ import React, { useCallback, useEffect, useState, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiButtonIcon, EuiTitle } from '@elastic/eui';
 import { sortBy } from 'lodash';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
 import { DiscoverField } from './discover_field';
 import { DiscoverIndexPattern } from './discover_index_pattern';
 import { DiscoverFieldSearch } from './discover_field_search';
@@ -162,165 +162,175 @@ export function DiscoverSidebar({
   }
 
   return (
-    <section
-      className="sidebar-list"
-      aria-label={i18n.translate(
-        'kbn.discover.fieldChooser.filter.indexAndFieldsSectionAriaLabel',
-        {
-          defaultMessage: 'Index and fields',
-        }
-      )}
-    >
-      <DiscoverIndexPattern
-        selectedIndexPattern={selectedIndexPattern}
-        setIndexPattern={setIndexPattern}
-        indexPatternList={sortBy(indexPatternList, o => o.attributes.title)}
-      />
-      <div className="dscSidebar__item">
-        <form>
-          <DiscoverFieldSearch
-            onChange={onChangeFieldSearch}
-            value={fieldFilterState.name}
-            types={fieldTypes}
-          />
-        </form>
-      </div>
-      <div className="sidebar-list">
-        {fields.length > 0 && (
-          <>
-            <EuiTitle size="xxxs" id="selected_fields">
-              <h3>
-                <FormattedMessage
-                  id="kbn.discover.fieldChooser.filter.selectedFieldsTitle"
-                  defaultMessage="Selected fields"
-                />
-              </h3>
-            </EuiTitle>
-            <ul
-              className="dscSidebarList dscFieldList--selected"
-              aria-labelledby="selected_fields"
-              data-test-subj={`fieldList-selected`}
-            >
-              {selectedFields.map((field: IndexPatternField, idx: number) => {
-                return (
-                  <li key={`field${idx}`} data-attr-field={field.name} className="dscSidebar__item">
-                    <DiscoverField
-                      field={field}
-                      indexPattern={selectedIndexPattern}
-                      onAddField={onAddField}
-                      onRemoveField={onRemoveField}
-                      onAddFilter={onAddFilter}
-                      onShowDetails={onShowDetails}
-                      getDetails={getDetailsByField}
-                      showDetails={openFieldMap.get(field.name) || false}
-                      selected={true}
-                      useShortDots={useShortDots}
-                    />
-                  </li>
-                );
-              })}
-            </ul>
-            <div className="euiFlexGroup euiFlexGroup--gutterMedium">
-              <EuiTitle size="xxxs" id="available_fields" className="euiFlexItem">
+    <I18nProvider>
+      <section
+        className="sidebar-list"
+        aria-label={i18n.translate(
+          'kbn.discover.fieldChooser.filter.indexAndFieldsSectionAriaLabel',
+          {
+            defaultMessage: 'Index and fields',
+          }
+        )}
+      >
+        <DiscoverIndexPattern
+          selectedIndexPattern={selectedIndexPattern}
+          setIndexPattern={setIndexPattern}
+          indexPatternList={sortBy(indexPatternList, o => o.attributes.title)}
+        />
+        <div className="dscSidebar__item">
+          <form>
+            <DiscoverFieldSearch
+              onChange={onChangeFieldSearch}
+              value={fieldFilterState.name}
+              types={fieldTypes}
+            />
+          </form>
+        </div>
+        <div className="sidebar-list">
+          {fields.length > 0 && (
+            <>
+              <EuiTitle size="xxxs" id="selected_fields">
                 <h3>
                   <FormattedMessage
-                    id="kbn.discover.fieldChooser.filter.availableFieldsTitle"
-                    defaultMessage="Available fields"
+                    id="kbn.discover.fieldChooser.filter.selectedFieldsTitle"
+                    defaultMessage="Selected fields"
                   />
                 </h3>
               </EuiTitle>
-              <div className="euiFlexItem euiFlexItem--flexGrowZero">
-                <EuiButtonIcon
-                  className={'visible-xs visible-sm dscFieldChooser__toggle'}
-                  iconType={showFields ? 'arrowDown' : 'arrowRight'}
-                  onClick={() => setShowFields(!showFields)}
-                  aria-label={
-                    showFields
-                      ? i18n.translate(
-                          'kbn.discover.fieldChooser.filter.indexAndFieldsSectionHideAriaLabel',
-                          {
-                            defaultMessage: 'Hide fields',
-                          }
-                        )
-                      : i18n.translate(
-                          'kbn.discover.fieldChooser.filter.indexAndFieldsSectionShowAriaLabel',
-                          {
-                            defaultMessage: 'Show fields',
-                          }
-                        )
-                  }
-                />
-              </div>
-            </div>
-          </>
-        )}
-        {popularFields.length > 0 && (
-          <div>
-            <EuiTitle
-              size="xxxs"
-              className={`dscFieldListHeader ${!showFields ? 'hidden-sm hidden-xs' : ''}`}
-            >
-              <h4 style={{ fontWeight: 'normal' }} id="available_fields_popular">
-                <FormattedMessage
-                  id="kbn.discover.fieldChooser.filter.popularTitle"
-                  defaultMessage="Popular"
-                />
-              </h4>
-            </EuiTitle>
-            <ul
-              className={`dscFieldList dscFieldList--popular ${
-                !showFields ? 'hidden-sm hidden-xs' : ''
-              }`}
-              aria-labelledby="available_fields available_fields_popular"
-              data-test-subj={`fieldList-popular`}
-            >
-              {popularFields.map((field: IndexPatternField, idx: number) => {
-                return (
-                  <li key={`field${idx}`} data-attr-field={field.name} className="dscSidebar__item">
-                    <DiscoverField
-                      field={field}
-                      indexPattern={selectedIndexPattern}
-                      onAddField={onAddField}
-                      onRemoveField={onRemoveField}
-                      onAddFilter={onAddFilter}
-                      onShowDetails={onShowDetails}
-                      getDetails={getDetailsByField}
-                      showDetails={openFieldMap.get(field.name) || false}
-                      useShortDots={useShortDots}
+              <ul
+                className="dscSidebarList dscFieldList--selected"
+                aria-labelledby="selected_fields"
+                data-test-subj={`fieldList-selected`}
+              >
+                {selectedFields.map((field: IndexPatternField, idx: number) => {
+                  return (
+                    <li
+                      key={`field${idx}`}
+                      data-attr-field={field.name}
+                      className="dscSidebar__item"
+                    >
+                      <DiscoverField
+                        field={field}
+                        indexPattern={selectedIndexPattern}
+                        onAddField={onAddField}
+                        onRemoveField={onRemoveField}
+                        onAddFilter={onAddFilter}
+                        onShowDetails={onShowDetails}
+                        getDetails={getDetailsByField}
+                        showDetails={openFieldMap.get(field.name) || false}
+                        selected={true}
+                        useShortDots={useShortDots}
+                      />
+                    </li>
+                  );
+                })}
+              </ul>
+              <div className="euiFlexGroup euiFlexGroup--gutterMedium">
+                <EuiTitle size="xxxs" id="available_fields" className="euiFlexItem">
+                  <h3>
+                    <FormattedMessage
+                      id="kbn.discover.fieldChooser.filter.availableFieldsTitle"
+                      defaultMessage="Available fields"
                     />
-                  </li>
-                );
-              })}
-            </ul>
-          </div>
-        )}
+                  </h3>
+                </EuiTitle>
+                <div className="euiFlexItem euiFlexItem--flexGrowZero">
+                  <EuiButtonIcon
+                    className={'visible-xs visible-sm dscFieldChooser__toggle'}
+                    iconType={showFields ? 'arrowDown' : 'arrowRight'}
+                    onClick={() => setShowFields(!showFields)}
+                    aria-label={
+                      showFields
+                        ? i18n.translate(
+                            'kbn.discover.fieldChooser.filter.indexAndFieldsSectionHideAriaLabel',
+                            {
+                              defaultMessage: 'Hide fields',
+                            }
+                          )
+                        : i18n.translate(
+                            'kbn.discover.fieldChooser.filter.indexAndFieldsSectionShowAriaLabel',
+                            {
+                              defaultMessage: 'Show fields',
+                            }
+                          )
+                    }
+                  />
+                </div>
+              </div>
+            </>
+          )}
+          {popularFields.length > 0 && (
+            <div>
+              <EuiTitle
+                size="xxxs"
+                className={`dscFieldListHeader ${!showFields ? 'hidden-sm hidden-xs' : ''}`}
+              >
+                <h4 style={{ fontWeight: 'normal' }} id="available_fields_popular">
+                  <FormattedMessage
+                    id="kbn.discover.fieldChooser.filter.popularTitle"
+                    defaultMessage="Popular"
+                  />
+                </h4>
+              </EuiTitle>
+              <ul
+                className={`dscFieldList dscFieldList--popular ${
+                  !showFields ? 'hidden-sm hidden-xs' : ''
+                }`}
+                aria-labelledby="available_fields available_fields_popular"
+                data-test-subj={`fieldList-popular`}
+              >
+                {popularFields.map((field: IndexPatternField, idx: number) => {
+                  return (
+                    <li
+                      key={`field${idx}`}
+                      data-attr-field={field.name}
+                      className="dscSidebar__item"
+                    >
+                      <DiscoverField
+                        field={field}
+                        indexPattern={selectedIndexPattern}
+                        onAddField={onAddField}
+                        onRemoveField={onRemoveField}
+                        onAddFilter={onAddFilter}
+                        onShowDetails={onShowDetails}
+                        getDetails={getDetailsByField}
+                        showDetails={openFieldMap.get(field.name) || false}
+                        useShortDots={useShortDots}
+                      />
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          )}
 
-        <ul
-          className={`dscFieldList dscFieldList--unpopular ${
-            !showFields ? 'hidden-sm hidden-xs' : ''
-          }`}
-          aria-labelledby="available_fields"
-          data-test-subj={`fieldList-unpopular`}
-        >
-          {unpopularFields.map((field: IndexPatternField, idx: number) => {
-            return (
-              <li key={`field${idx}`} data-attr-field={field.name} className="dscSidebar__item">
-                <DiscoverField
-                  field={field}
-                  indexPattern={selectedIndexPattern}
-                  onAddField={onAddField}
-                  onRemoveField={onRemoveField}
-                  onAddFilter={onAddFilter}
-                  onShowDetails={onShowDetails}
-                  getDetails={getDetailsByField}
-                  showDetails={openFieldMap.get(field.name) || false}
-                  useShortDots={useShortDots}
-                />
-              </li>
-            );
-          })}
-        </ul>
-      </div>
-    </section>
+          <ul
+            className={`dscFieldList dscFieldList--unpopular ${
+              !showFields ? 'hidden-sm hidden-xs' : ''
+            }`}
+            aria-labelledby="available_fields"
+            data-test-subj={`fieldList-unpopular`}
+          >
+            {unpopularFields.map((field: IndexPatternField, idx: number) => {
+              return (
+                <li key={`field${idx}`} data-attr-field={field.name} className="dscSidebar__item">
+                  <DiscoverField
+                    field={field}
+                    indexPattern={selectedIndexPattern}
+                    onAddField={onAddField}
+                    onRemoveField={onRemoveField}
+                    onAddFilter={onAddFilter}
+                    onShowDetails={onShowDetails}
+                    getDetails={getDetailsByField}
+                    showDetails={openFieldMap.get(field.name) || false}
+                    useShortDots={useShortDots}
+                  />
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      </section>
+    </I18nProvider>
   );
 }

src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/discover_sidebar_directive.ts

@@ -16,11 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { wrapInI18nContext } from '../../../kibana_services';
 import { DiscoverSidebar } from './discover_sidebar';
 
 export function createDiscoverSidebarDirective(reactDirective: any) {
-  return reactDirective(wrapInI18nContext(DiscoverSidebar), [
+  return reactDirective(DiscoverSidebar, [
     ['columns', { watchDepth: 'reference' }],
     ['fieldCounts', { watchDepth: 'reference' }],
     ['hits', { watchDepth: 'reference' }],