Fix i18n usage in flyout_session (#31577) (#31677)

CONTRIBUTING.md

@@ -21,6 +21,7 @@ A high level overview of our contributing guidelines.
     - [Customizing `config/kibana.dev.yml`](#customizing-configkibanadevyml)
     - [Setting Up SSL](#setting-up-ssl)
   - [Linting](#linting)
+  - [Internationalization](#internationalization)
   - [Testing and Building](#testing-and-building)
     - [Debugging server code](#debugging-server-code)
   - [Debugging Unit Tests](#debugging-unit-tests)
@@ -254,6 +255,22 @@ IntelliJ   | Settings » Languages & Frameworks » JavaScript » Code Quality To
 
 Another tool we use for enforcing consistent coding style is EditorConfig, which can be set up by installing a plugin in your editor that dynamically updates its configuration. Take a look at the [EditorConfig](http://editorconfig.org/#download) site to find a plugin for your editor, and browse our [`.editorconfig`](https://github.com/elastic/kibana/blob/master/.editorconfig) file to see what config rules we set up.
 
+### Internationalization
+
+All user-facing labels and info texts in Kibana should be internationalized. Please take a look at the [readme](packages/kbn-i18n/README.md) and the [guideline](packages/kbn-i18n/GUIDELINE.md) of the i18n package on how to do so.
+
+In order to enable translations in the React parts of the application, the top most component of every `ReactDOM.render` call should be an `I18nContext`:
+```jsx
+import { I18nContext } from 'ui/i18n';
+
+ReactDOM.render(
+  <I18nContext>
+      {myComponentTree}
+  </I18nContext>,
+  container
+);
+```
+
 ### Testing and Building
 
 To ensure that your changes will not break other functionality, please run the test suite and build process before submitting your Pull Request.

src/legacy/ui/public/flyout/flyout_session.tsx

@@ -20,9 +20,9 @@
 import React from 'react';
 
 import { EuiFlyout } from '@elastic/eui';
-import { I18nProvider } from '@kbn/i18n/react';
 import { EventEmitter } from 'events';
 import ReactDOM from 'react-dom';
+import { I18nContext } from 'ui/i18n';
 
 let activeSession: FlyoutSession | null = null;
 
@@ -105,11 +105,11 @@ export function openFlyout(
   };
 
   ReactDOM.render(
-    <I18nProvider>
+    <I18nContext>
       <EuiFlyout {...flyoutProps} onClose={onClose}>
         {flyoutChildren}
       </EuiFlyout>
-    </I18nProvider>,
+    </I18nContext>,
     container
   );
 

src/legacy/ui/public/inspector/inspector.test.js

@@ -26,6 +26,8 @@ jest.mock('./view_registry', () => ({
 jest.mock('./ui/inspector_panel', () => ({
   InspectorPanel: () => 'InspectorPanel',
 }));
+jest.mock('ui/i18n', () => ({ I18nContext: ({ children }) => children }));
+
 import { viewRegistry } from './view_registry';
 
 function setViews(views) {