[Core Rendering Service] Mark KibanaRenderContextProvider as deprecated (#219313)

## Summary

Set `KibanaRenderContextProvider` as deprecated and comment that
consumers should use `core.rendering.addContext` instead.

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [x]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Christiane (Tina) Heiligers <christiane.heiligers@elastic.co>

dev_docs/operations/writing_stable_functional_tests.mdx

@@ -77,7 +77,7 @@ Even if you are very careful, the more UI automation you do the more likely you
 
 ## Incorrect usage of EUI components in React code will cause a functional test failure
 
-For EUI to support theming and internationalization, EUI components in your React application must be wrapped in `EuiProvider` (more preferably, use the `KibanaRenderContextProvider` wrapper). The functional test runner treats EUI as a first-class citizen and will throw an error when incorrect usage of EUI is detected. However, experiencing this type of failure in a test run is unlikely: in dev mode, a toast message alerts developers of incorrect EUI usage in real-time.
+For EUI to support theming and internationalization, EUI components in your React application must be wrapped in `EuiProvider` (more preferably, use the <DocLink id="kibDevRenderingService" text="`core.rendering.addContext()`"/>) wrapper. The functional test runner treats EUI as a first-class citizen and will throw an error when incorrect usage of EUI is detected. However, experiencing this type of failure in a test run is unlikely: in dev mode, a toast message alerts developers of incorrect EUI usage in real-time.
 
 ## Do you really need a functional test for this?
 

src/core/packages/notifications/browser-internal/src/toasts/__snapshots__/error_toast.test.tsx.snap

@@ -1,26 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders matching snapshot 1`] = `
-<Fragment>
+<I18nProvider>
-  <p
+  <EuiProvider>
-    data-test-subj="errorToastMessage"
+    <p
-  >
+      data-test-subj="errorToastMessage"
-    This is the toast message
-  </p>
-  <div
-    className="eui-textRight"
-  >
-    <EuiButton
-      color="danger"
-      data-test-subj="errorToastBtn"
-      onClick={[Function]}
-      size="s"
     >
-      <MemoizedFormattedMessage
+      This is the toast message
-        defaultMessage="See the full error"
+    </p>
-        id="core.toasts.errorToast.seeFullError"
+    <div
-      />
+      className="eui-textRight"
-    </EuiButton>
+    >
-  </div>
+      <EuiButton
-</Fragment>
+        color="danger"
+        data-test-subj="errorToastBtn"
+        onClick={[Function]}
+        size="s"
+      >
+        <MemoizedFormattedMessage
+          defaultMessage="See the full error"
+          id="core.toasts.errorToast.seeFullError"
+        />
+      </EuiButton>
+    </div>
+  </EuiProvider>
+</I18nProvider>
 `;

src/core/packages/notifications/browser-internal/src/toasts/__snapshots__/toasts_service.test.tsx.snap

@@ -3,31 +3,35 @@
 exports[`#start() renders the GlobalToastList into the targetDomElement param 1`] = `
 Array [
   Array [
-    <GlobalToastList
+    <I18nProvider>
-      dismissToast={[Function]}
+      <EuiProvider>
-      reportEvent={
+        <GlobalToastList
-        Object {
+          dismissToast={[Function]}
-          "onDismissToast": [Function],
+          reportEvent={
-        }
+            Object {
-      }
+              "onDismissToast": [Function],
-      toasts$={
+            }
-        Observable {
+          }
-          "operator": [Function],
+          toasts$={
-          "source": Observable {
+            Observable {
-            "operator": [Function],
-            "source": Observable {
               "operator": [Function],
               "source": Observable {
                 "operator": [Function],
                 "source": Observable {
-                  "_subscribe": [Function],
+                  "operator": [Function],
+                  "source": Observable {
+                    "operator": [Function],
+                    "source": Observable {
+                      "_subscribe": [Function],
+                    },
+                  },
                 },
               },
-            },
+            }
-          },
+          }
-        }
+        />
-      }
+      </EuiProvider>
-    />,
+    </I18nProvider>,
     <div
       test="target-dom-element"
     />,

src/core/packages/rendering/browser-mocks/src/rendering_service.mock.tsx

@@ -7,7 +7,10 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import React from 'react';
 import type { RenderingService } from '@kbn/core-rendering-browser';
+import { EuiProvider } from '@elastic/eui';
+import { I18nProvider } from '@kbn/i18n-react';
 
 /**
  * This is declared internally to avoid a circular dependency issue
@@ -27,7 +30,11 @@ const createMockInternal = () => {
 
 const createMock = () => {
   const mocked: jest.Mocked<RenderingService> = {
-    addContext: jest.fn().mockImplementation((element) => element),
+    addContext: jest.fn().mockImplementation((element) => (
+      <I18nProvider>
+        <EuiProvider>{element}</EuiProvider>
+      </I18nProvider>
+    )),
   };
   return mocked;
 };

src/core/packages/rendering/browser-mocks/tsconfig.json

@@ -12,7 +12,8 @@
     "**/*.tsx"
   ],
   "kbn_references": [
-    "@kbn/core-rendering-browser"
+    "@kbn/core-rendering-browser",
+    "@kbn/i18n-react"
   ],
   "exclude": [
     "target/**/*"

src/platform/packages/shared/react/kibana_context/render/render_provider.tsx

@@ -21,7 +21,9 @@ export type KibanaRenderContextProviderProps = Omit<KibanaRootContextProviderPro
 /**
  * The `KibanaRenderContextProvider` provides the necessary context for an out-of-current React render, such as using `ReactDOM.render()`.
  *
+/**
  * @internal Use RenderingService.addContext from the CoreStart contract instead of consuming this directly.
+ * @deprecated
  */
 export const KibanaRenderContextProvider: FC<
   PropsWithChildren<KibanaRenderContextProviderProps>

x-pack/platform/plugins/shared/lens/public/datasources/common/field_item.test.tsx

@@ -21,7 +21,6 @@ import { fieldFormatsServiceMock } from '@kbn/field-formats-plugin/public/mocks'
 import { IndexPattern } from '../../types';
 import { chartPluginMock } from '@kbn/charts-plugin/public/mocks';
 import { documentField } from '../form_based/document_field';
-import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 
 jest.mock('@kbn/unified-field-list/src/services/field_stats', () => ({
   loadFieldStats: jest.fn().mockResolvedValue({}),
@@ -156,13 +155,11 @@ describe('Lens Field Item', () => {
     const Wrapper: React.FC<{
       children: React.ReactNode;
     }> = ({ children }) => {
-      return (
+      return mockedServices.core.rendering.addContext(
-        <KibanaRenderContextProvider {...mockedServices.core}>
+        <KibanaContextProvider services={mockedServices}>
-          <KibanaContextProvider services={mockedServices}>
+          <button>close the euiPopover</button>
-            <button>close the euiPopover</button>
+          {children}
-            {children}
+        </KibanaContextProvider>
-          </KibanaContextProvider>
-        </KibanaRenderContextProvider>
       );
     };
 
@@ -396,11 +393,11 @@ describe('Lens Field Item', () => {
     };
 
     render(
-      <KibanaRenderContextProvider {...mockedServices.core}>
+      mockedServices.core.rendering.addContext(
         <KibanaContextProvider services={services}>
           <InnerFieldItem {...defaultProps} />
         </KibanaContextProvider>
-      </KibanaRenderContextProvider>
+      )
     );
     await waitFor(() => {
       expect(screen.getByTestId('field-bytes-showDetails')).toBeInTheDocument();