[Core] Update RenderingService withaddContext public method (elastic#212163)

## Summary

Epic: elastic/kibana-team#1435
Closes elastic#205413
Closes elastic#205411

This PR creates a new way to expose stateful service dependencies needed
for rendering React elements in Kibana. The concept of the changes is
that `KibanaRenderContextProvider` should not be a shared module, but
should be wrapped by a core service (the `RenderContextService` name is
TBD). The next steps in this direction would be to coordinate teams to
migrate away from directly using `KibanaRenderContextProvider`.

### Background

Today, the dependencies for `KibanaRenderContextProvider` are declared
as separate services which can be found in the `CoreStart` context. This
has created a situation where enhancing the module with more
dependencies creates widespread changes needed for the UI codebase.

The @elastic/appex-sharedux team is looking to solve this situation by
defining a less impactful way to make future enhancements. The solution
is one that can be gradually migrated towards, so the SharedUX team can
ask Kibana contributors to migrate towards in their own code. This PR
offers a POC for that solution.

### Details of this POC

The driving goal for this refactor is to lessen the impact across the
Kibana codebase whenever the `KibanaRenderContext` module needs to
require additional services from the `CoreStart` context.

#### Rendering a React Element with `ReactDOM.render`: Before
```tsx
const renderApp = ({ core, targetDomElement }: { core: CoreStart; targetDomElement: HTMLElement; }) => {
  // If `KibanaRenderContextProvider` needs to expand its scope, more services could be needed here,
  // updating all the places throughout the code to pass those is a ton of work 👎🏻 
  const { i18n, theme, analytics, userProfile, executionContext } = core;
  ReactDOM.render(
    <KibanaRenderContextProvider {...{ i18n, theme, analytics, userProfile, executionContext }}>
      <MyApplication />
    </KibanaRenderContextProvider>,
    targetDomElement
  );
  return () => ReactDOM.unmountComponentAtNode(targetDomElement);
};
```

#### Rendering a React Element with `ReactDOM.render`: After

```tsx
const renderApp = ({ core, targetDomElement }: { core: CoreStart; targetDomElement: HTMLElement; }) => {
  // So much less code, so much more future-proof 👍🏻 
  ReactDOM.render(core.rendering.addContext(<MyApplication />), targetDomElement);
  return () => ReactDOM.unmountComponentAtNode(targetDomElement);
};
```

### Alternatives considered

See elastic#209161

### 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
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

### FAQ

1. **Q**: This is React-centric. Does this give Kibana more commitment
towards React?
**A:** For now, yes. But if we want to Kibana to remain
framework-agnostic we may be able to add more extensions to the
RenderContextService that support other frameworks.
1. **Q:** Why not have a service that wraps `ReactDOM.render`?
**A:** As we steer towards upgrading to React 18 in Kibana, staying
agnostic of how React is rendered benefits us. React 18 has different
ergonomics based on whether you want to update an existing tree or mount
a new one.
1. **Q:** Does the API have to be named `rendering.addContext`?
**A:** No, it does not. Please suggest a better name if you have one in
mind.
1. **Q:** What are the next steps?
**A:** Refer to the
[Epic](elastic/kibana-team#1435). This PR
started as a POC but became ready for merge. After it is delivered to
the codebase, the next steps are to improve documentation and engage in
"sheparding." That is, socialize the new way of injecting dependencies
into the context, support teams in their migration, and track the
progress of migration.

### Identify risks

Does this PR introduce any risks? For example, consider risks like hard
to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified
risk. Invite stakeholders and evaluate how to proceed before merging.

- [x] Care is needed to ensure this doesn't not negatively impact
performance with unnecessary re-renders.

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

Author: tsullivan

src/core/packages/chrome/browser-internal/src/handle_system_colormode_change.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { toMountPoint } from '@kbn/react-kibana-mount';
+import { mountReactNode } from '@kbn/core-mount-utils-browser-internal';
 import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import type { NotificationsStart } from '@kbn/core-notifications-browser';
 import type { I18nStart } from '@kbn/core-i18n-browser';
@@ -108,7 +108,7 @@ export async function handleSystemColorModeChange({
           title: i18n.translate('core.ui.chrome.appearanceChange.successNotificationTitle', {
             defaultMessage: 'System color mode updated',
           }),
-          text: toMountPoint(
+          text: mountReactNode(
             <>
               <p>
                 {i18n.translate('core.ui.chrome.appearanceChange.successNotificationText', {
@@ -131,8 +131,7 @@ export async function handleSystemColorModeChange({
                   </EuiButton>
                 </EuiFlexItem>
               </EuiFlexGroup>
-            </>,
-            coreStart
+            </>
           ),
         },
         { toastLifeTimeMs: Infinity } // leave it on until discard or page reload

src/core/packages/chrome/browser-internal/tsconfig.json

@@ -61,7 +61,6 @@
     "@kbn/core-user-profile-browser",
     "@kbn/core-ui-settings-browser",
     "@kbn/core-user-profile-common",
-    "@kbn/react-kibana-mount",
     "@kbn/core-theme-browser-internal"
   ],
   "exclude": [

src/core/packages/lifecycle/browser-mocks/src/core_start.mock.ts

@@ -24,6 +24,7 @@ import { chromeServiceMock } from '@kbn/core-chrome-browser-mocks';
 import { customBrandingServiceMock } from '@kbn/core-custom-branding-browser-mocks';
 import { securityServiceMock } from '@kbn/core-security-browser-mocks';
 import { userProfileServiceMock } from '@kbn/core-user-profile-browser-mocks';
+import { renderingServiceMock } from '@kbn/core-rendering-browser-mocks';
 import { coreFeatureFlagsMock } from '@kbn/core-feature-flags-browser-mocks';
 
 export function createCoreStartMock({ basePath = '' } = {}) {
@@ -47,6 +48,7 @@ export function createCoreStartMock({ basePath = '' } = {}) {
     fatalErrors: fatalErrorsServiceMock.createStartContract(),
     security: securityServiceMock.createStart(),
     userProfile: userProfileServiceMock.createStart(),
+    rendering: renderingServiceMock.create(),
     plugins: {
       onStart: jest.fn(),
     },

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

@@ -29,7 +29,8 @@
     "@kbn/core-custom-branding-browser-mocks",
     "@kbn/core-security-browser-mocks",
     "@kbn/core-user-profile-browser-mocks",
-    "@kbn/core-feature-flags-browser-mocks"
+    "@kbn/core-feature-flags-browser-mocks",
+    "@kbn/core-rendering-browser-mocks"
   ],
   "exclude": [
     "target/**/*",

src/core/packages/lifecycle/browser/src/core_start.ts

@@ -24,6 +24,7 @@ import type { ChromeStart } from '@kbn/core-chrome-browser';
 import type { CustomBrandingStart } from '@kbn/core-custom-branding-browser';
 import type { PluginsServiceStart } from '@kbn/core-plugins-contracts-browser';
 import type { SecurityServiceStart } from '@kbn/core-security-browser';
+import type { RenderingService } from '@kbn/core-rendering-browser';
 import type { UserProfileServiceStart } from '@kbn/core-user-profile-browser';
 import type { FeatureFlagsStart } from '@kbn/core-feature-flags-browser';
 
@@ -81,4 +82,6 @@ export interface CoreStart {
   security: SecurityServiceStart;
   /** {@link UserProfileServiceStart} */
   userProfile: UserProfileServiceStart;
+  /** {@link RenderingService} */
+  rendering: RenderingService;
 }

src/core/packages/lifecycle/browser/tsconfig.json

@@ -30,7 +30,8 @@
     "@kbn/core-plugins-contracts-browser",
     "@kbn/core-security-browser",
     "@kbn/core-user-profile-browser",
-    "@kbn/core-feature-flags-browser"
+    "@kbn/core-feature-flags-browser",
+    "@kbn/core-rendering-browser"
   ],
   "exclude": [
     "target/**/*",

src/core/packages/mount-utils/browser-internal/src/mount.tsx

@@ -37,6 +37,7 @@ export const MountWrapper: MountWrapperComponent = ({ mount, className = default
 
 /**
  * Mount converter for react node.
+ * This should only be used in internal Core packages to prevent circular dependency issues
  *
  * @param node to get a mount for
  * @internal

src/core/packages/notifications/browser-internal/src/notifications_service.ts

@@ -11,13 +11,11 @@ import { i18n } from '@kbn/i18n';
 
 import { Subscription } from 'rxjs';
 import type { AnalyticsServiceStart, AnalyticsServiceSetup } from '@kbn/core-analytics-browser';
-import type { ThemeServiceStart } from '@kbn/core-theme-browser';
-import type { UserProfileService } from '@kbn/core-user-profile-browser';
-import type { I18nStart } from '@kbn/core-i18n-browser';
 import type { IUiSettingsClient } from '@kbn/core-ui-settings-browser';
 import type { OverlayStart } from '@kbn/core-overlays-browser';
 import type { NotificationsSetup, NotificationsStart } from '@kbn/core-notifications-browser';
 import type { PublicMethodsOf } from '@kbn/utility-types';
+import type { RenderingService } from '@kbn/core-rendering-browser';
 import { showErrorDialog, ToastsService } from './toasts';
 import { EventReporter, eventTypes } from './toasts/telemetry';
 
@@ -27,10 +25,8 @@ export interface SetupDeps {
 }
 
 export interface StartDeps {
-  i18n: I18nStart;
   overlays: OverlayStart;
-  theme: ThemeServiceStart;
-  userProfile: UserProfileService;
+  rendering: RenderingService;
   analytics: AnalyticsServiceStart;
   targetDomElement: HTMLElement;
 }