[SharedUX] Replace KibanaRenderContextProvider usage (#220170)

## Summary Closes https://github.com/elastic/kibana/issues/220175 --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2025-06-27 10:40:07 -04:00 · 2025-06-12 08:39:59 -07:00 · 2025-06-12 08:39:59 -07:00 · 68174f8705
commit 68174f8705
parent f5b6aa241f
44 changed files with 181 additions and 238 deletions
--- a/examples/content_management_examples/public/examples/index.tsx
+++ b/examples/content_management_examples/public/examples/index.tsx
@ -10,7 +10,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Redirect } from 'react-router-dom';
-import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { Router, Routes, Route } from '@kbn/shared-ux-router';
 import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 import { EuiPageTemplate, EuiSideNav } from '@elastic/eui';
@ -26,7 +25,7 @@ export const renderApp = (
  { element, history }: AppMountParameters
 ) => {
  ReactDOM.render(
-    <KibanaRenderContextProvider {...core}>
+    core.rendering.addContext(
      <Router history={history}>
        <RedirectAppLinks coreStart={core}>
          <EuiPageTemplate offset={0}>
@ -86,7 +85,7 @@ export const renderApp = (
          </EuiPageTemplate>
        </RedirectAppLinks>
      </Router>
-    </KibanaRenderContextProvider>,
+    ),
    element
  );

--- a/examples/content_management_examples/tsconfig.json
+++ b/examples/content_management_examples/tsconfig.json
@ -29,6 +29,5 @@
    "@kbn/shared-ux-router",
    "@kbn/saved-objects-finder-plugin",
    "@kbn/content-management-table-list-view-common",
-    "@kbn/react-kibana-context-render",
  ]
 }
--- a/examples/developer_examples/public/app.tsx
+++ b/examples/developer_examples/public/app.tsx
@ -23,31 +23,18 @@ import {
  EuiLink,
  EuiButtonIcon,
 } from '@elastic/eui';
-import {
-  AnalyticsServiceStart,
-  AppMountParameters,
-  I18nStart,
-  ThemeServiceStart,
-  UserProfileService,
-} from '@kbn/core/public';
-import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
+import { AppMountParameters } from '@kbn/core/public';
+import { RenderingService } from '@kbn/core-rendering-browser';
 import { ExampleDefinition } from './types';

-interface StartServices {
-  analytics: Pick<AnalyticsServiceStart, 'reportEvent'>;
-  i18n: I18nStart;
-  theme: Pick<ThemeServiceStart, 'theme$'>;
-  userProfile: UserProfileService;
-}
-
 interface Props {
-  startServices: StartServices;
+  rendering: RenderingService;
  examples: ExampleDefinition[];
  navigateToApp: (appId: string) => void;
  getUrlForApp: (appId: string) => string;
 }

-function DeveloperExamples({ startServices, examples, navigateToApp, getUrlForApp }: Props) {
+function DeveloperExamples({ examples, navigateToApp, getUrlForApp, rendering }: Props) {
  const [search, setSearch] = useState<string>('');

  const lcSearch = search.toLowerCase();
@ -59,69 +46,67 @@ function DeveloperExamples({ startServices, examples, navigateToApp, getUrlForAp
        return false;
      });

-  return (
-    <KibanaRenderContextProvider {...startServices}>
-      <EuiPageTemplate offset={0}>
-        <EuiPageTemplate.Header>
-          <EuiFlexGroup justifyContent={'spaceBetween'}>
-            <EuiFlexItem>
-              <EuiPageHeader pageTitle={'Developer examples'} />
-              <EuiText>
-                The following examples showcase services and APIs that are available to developers.
-              </EuiText>
-            </EuiFlexItem>
-            <EuiFlexItem>
-              <EuiFieldSearch
-                fullWidth
-                placeholder="Search"
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-                isClearable={true}
-                aria-label="Search developer examples"
+  return rendering.addContext(
+    <EuiPageTemplate offset={0}>
+      <EuiPageTemplate.Header>
+        <EuiFlexGroup justifyContent={'spaceBetween'}>
+          <EuiFlexItem>
+            <EuiPageHeader pageTitle={'Developer examples'} />
+            <EuiText>
+              The following examples showcase services and APIs that are available to developers.
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiFieldSearch
+              fullWidth
+              placeholder="Search"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              isClearable={true}
+              aria-label="Search developer examples"
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPageTemplate.Header>
+      <EuiPageTemplate.Section>
+        <EuiFlexGroup wrap>
+          {filteredExamples.map((def) => (
+            <EuiFlexItem style={{ minWidth: 300, maxWidth: 500 }} key={def.appId}>
+              <EuiCard
+                description={
+                  <EuiHighlight search={search} highlightAll={true}>
+                    {def.description}
+                  </EuiHighlight>
+                }
+                title={
+                  <React.Fragment>
+                    <EuiLink
+                      onClick={() => {
+                        navigateToApp(def.appId);
+                      }}
+                    >
+                      <EuiHighlight search={search} highlightAll={true}>
+                        {def.title}
+                      </EuiHighlight>
+                    </EuiLink>
+                    <EuiButtonIcon
+                      iconType="popout"
+                      onClick={() =>
+                        window.open(getUrlForApp(def.appId), '_blank', 'noopener, noreferrer')
+                      }
+                    >
+                      Open in new tab
+                    </EuiButtonIcon>
+                  </React.Fragment>
+                }
+                image={def.image}
+                footer={def.links ? <EuiListGroup size={'s'} listItems={def.links} /> : undefined}
              />
            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiPageTemplate.Header>
-        <EuiPageTemplate.Section>
-          <EuiFlexGroup wrap>
-            {filteredExamples.map((def) => (
-              <EuiFlexItem style={{ minWidth: 300, maxWidth: 500 }} key={def.appId}>
-                <EuiCard
-                  description={
-                    <EuiHighlight search={search} highlightAll={true}>
-                      {def.description}
-                    </EuiHighlight>
-                  }
-                  title={
-                    <React.Fragment>
-                      <EuiLink
-                        onClick={() => {
-                          navigateToApp(def.appId);
-                        }}
-                      >
-                        <EuiHighlight search={search} highlightAll={true}>
-                          {def.title}
-                        </EuiHighlight>
-                      </EuiLink>
-                      <EuiButtonIcon
-                        iconType="popout"
-                        onClick={() =>
-                          window.open(getUrlForApp(def.appId), '_blank', 'noopener, noreferrer')
-                        }
-                      >
-                        Open in new tab
-                      </EuiButtonIcon>
-                    </React.Fragment>
-                  }
-                  image={def.image}
-                  footer={def.links ? <EuiListGroup size={'s'} listItems={def.links} /> : undefined}
-                />
-              </EuiFlexItem>
-            ))}
-          </EuiFlexGroup>
-        </EuiPageTemplate.Section>
-      </EuiPageTemplate>
-    </KibanaRenderContextProvider>
+          ))}
+        </EuiFlexGroup>
+      </EuiPageTemplate.Section>
+    </EuiPageTemplate>
  );
 }

--- a/examples/developer_examples/public/plugin.ts
+++ b/examples/developer_examples/public/plugin.ts
@ -28,13 +28,13 @@ export class DeveloperExamplesPlugin implements Plugin<DeveloperExamplesSetup, v
      async mount(params: AppMountParameters) {
        const { renderApp } = await import('./app');
        const [coreStart] = await core.getStartServices();
-        const { analytics, i18n, theme, userProfile } = coreStart;
+        const { rendering } = coreStart;
        return renderApp(
          {
-            startServices: { analytics, i18n, theme, userProfile },
            examples,
            navigateToApp: (appId: string) => coreStart.application.navigateToApp(appId),
            getUrlForApp: (appId: string) => coreStart.application.getUrlForApp(appId),
+            rendering,
          },
          params.element
        );
--- a/examples/developer_examples/tsconfig.json
+++ b/examples/developer_examples/tsconfig.json
@ -15,6 +15,6 @@
  ],
  "kbn_references": [
    "@kbn/core",
-    "@kbn/react-kibana-context-render"
+    "@kbn/core-rendering-browser"
  ]
 }
--- a/examples/guided_onboarding_example/public/application.tsx
+++ b/examples/guided_onboarding_example/public/application.tsx
@ -10,7 +10,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { AppMountParameters, CoreStart } from '@kbn/core/public';
-import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { AppPluginStartDependencies } from './types';
 import { GuidedOnboardingExampleApp } from './components/app';

@ -19,15 +18,15 @@ export const renderApp = (
  { guidedOnboarding }: AppPluginStartDependencies,
  { element, history }: AppMountParameters
 ) => {
-  const { notifications } = coreStart;
+  const { notifications, rendering } = coreStart;
  ReactDOM.render(
-    <KibanaRenderContextProvider {...coreStart}>
+    rendering.addContext(
      <GuidedOnboardingExampleApp
        notifications={notifications}
        guidedOnboarding={guidedOnboarding}
        history={history}
      />
-    </KibanaRenderContextProvider>,
+    ),
    element
  );

--- a/examples/guided_onboarding_example/tsconfig.json
+++ b/examples/guided_onboarding_example/tsconfig.json
@ -17,7 +17,6 @@
    "@kbn/i18n",
    "@kbn/guided-onboarding",
    "@kbn/shared-ux-router",
-    "@kbn/react-kibana-context-render",
  ],
  "exclude": [
    "target/**/*",
--- a/examples/state_containers_examples/public/todo/app.tsx
+++ b/examples/state_containers_examples/public/todo/app.tsx
@ -11,7 +11,6 @@ import ReactDOM from 'react-dom';
 import React from 'react';

 import { AppMountParameters, CoreStart } from '@kbn/core/public';
-import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { createHashHistory } from 'history';
 import { TodoAppPage } from './todo';
 import { StateContainersExamplesPage, ExampleLink } from '../common/example_page';
@ -39,11 +38,11 @@ export const renderApp = (
 ) => {
  const history = historyType === History.Browser ? platformHistory : createHashHistory();
  ReactDOM.render(
-    <KibanaRenderContextProvider {...core}>
+    core.rendering.addContext(
      <StateContainersExamplesPage navigateToApp={navigateToApp} exampleLinks={exampleLinks}>
        <TodoAppPage history={history} appTitle={appTitle} appBasePath={appBasePath} />
      </StateContainersExamplesPage>
-    </KibanaRenderContextProvider>,
+    ),
    element
  );

--- a/examples/state_containers_examples/tsconfig.json
+++ b/examples/state_containers_examples/tsconfig.json
@ -23,6 +23,5 @@
    "@kbn/developer-examples-plugin",
    "@kbn/es-query",
    "@kbn/shared-ux-router",
-    "@kbn/react-kibana-context-render",
  ]
 }
--- a/examples/ui_action_examples/public/hello_world_action.tsx
+++ b/examples/ui_action_examples/public/hello_world_action.tsx
@ -14,7 +14,7 @@ import { toMountPoint } from '@kbn/react-kibana-mount';

 export const ACTION_HELLO_WORLD = 'ACTION_HELLO_WORLD';

-type StartServices = Pick<CoreStart, 'overlays' | 'analytics' | 'i18n' | 'theme' | 'userProfile'>;
+type StartServices = Pick<CoreStart, 'overlays' | 'rendering'>;

 export const createHelloWorldActionDefinition = (
  getStartServices: () => Promise<StartServices>
@ -23,7 +23,7 @@ export const createHelloWorldActionDefinition = (
  type: ACTION_HELLO_WORLD,
  getDisplayName: () => 'Hello World!',
  execute: async () => {
-    const { overlays, ...startServices } = await getStartServices();
+    const { overlays, rendering } = await getStartServices();
    const overlay = overlays.openModal(
      toMountPoint(
        <EuiModalBody>
@ -32,7 +32,7 @@ export const createHelloWorldActionDefinition = (
            Close
          </EuiButton>
        </EuiModalBody>,
-        startServices
+        rendering
      )
    );
  },
--- a/examples/ui_actions_explorer/public/actions/actions.tsx
+++ b/examples/ui_actions_explorer/public/actions/actions.tsx
@ -110,11 +110,11 @@ export const createEditUserAction = (getStartServices: () => Promise<CoreStart>)
    getIconType: () => 'pencil',
    getDisplayName: () => 'Edit user',
    execute: async ({ user, update }) => {
-      const { overlays, ...startServices } = await getStartServices();
+      const { overlays, rendering } = await getStartServices();
      const overlay = overlays.openModal(
        toMountPoint(
          <EditUserModal user={user} update={update} close={() => overlay.close()} />,
-          startServices
+          rendering
        )
      );
    },
--- a/examples/ui_actions_explorer/public/app.tsx
+++ b/examples/ui_actions_explorer/public/app.tsx
@ -19,7 +19,6 @@ import {
  EuiPageHeader,
 } from '@elastic/eui';
 import { AppMountParameters, CoreStart } from '@kbn/core/public';
-import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { UiActionsStart } from '@kbn/ui-actions-plugin/public';
 import { TriggerContextExample } from './trigger_context_example';
 import { ContextMenuExamples } from './context_menu_examples';
@ -32,36 +31,31 @@ interface Props {
 }

 const ActionsExplorer = ({ uiActionsStartService, core }: Props) => {
-  return (
-    <KibanaRenderContextProvider {...core}>
-      <EuiPage>
-        <EuiPageBody>
+  return core.rendering.addContext(
+    <EuiPage>
+      <EuiPageBody>
+        <EuiPageSection>
+          <EuiPageHeader pageTitle="Actions and Triggers" />
+        </EuiPageSection>
+        <EuiPageTemplate.Section>
          <EuiPageSection>
-            <EuiPageHeader pageTitle="Actions and Triggers" />
+            <Overview />
+
+            <EuiSpacer />
+
+            <HelloWorldExample uiActionsStartService={uiActionsStartService} startServices={core} />
+
+            <EuiSpacer />
+
+            <TriggerContextExample uiActionsApi={uiActionsStartService} />
+
+            <EuiSpacer />
+
+            <ContextMenuExamples />
          </EuiPageSection>
-          <EuiPageTemplate.Section>
-            <EuiPageSection>
-              <Overview />
-
-              <EuiSpacer />
-
-              <HelloWorldExample
-                uiActionsStartService={uiActionsStartService}
-                startServices={core}
-              />
-
-              <EuiSpacer />
-
-              <TriggerContextExample uiActionsApi={uiActionsStartService} />
-
-              <EuiSpacer />
-
-              <ContextMenuExamples />
-            </EuiPageSection>
-          </EuiPageTemplate.Section>
-        </EuiPageBody>
-      </EuiPage>
-    </KibanaRenderContextProvider>
+        </EuiPageTemplate.Section>
+      </EuiPageBody>
+    </EuiPage>
  );
 };

--- a/examples/ui_actions_explorer/public/hello_world_example.tsx
+++ b/examples/ui_actions_explorer/public/hello_world_example.tsx
@ -19,10 +19,13 @@ const DYNAMIC_ACTION_ID = `${ACTION_HELLO_WORLD}-Waldo`;

 interface Props {
  uiActionsStartService: UiActionsStart;
-  startServices: Pick<CoreStart, 'overlays' | 'analytics' | 'i18n' | 'theme' | 'userProfile'>;
+  startServices: Pick<CoreStart, 'overlays' | 'rendering'>;
 }

-export const HelloWorldExample = ({ uiActionsStartService, startServices }: Props) => {
+export const HelloWorldExample = ({
+  uiActionsStartService,
+  startServices: { overlays, rendering },
+}: Props) => {
  const [isChecked, setIsChecked] = useState(false);

  const actionsMessage = isChecked ? '2 actions attached' : '1 action attached';
@ -71,7 +74,7 @@ export const HelloWorldExample = ({ uiActionsStartService, startServices }: Prop
                type: ACTION_HELLO_WORLD,
                getDisplayName: () => 'Say hello to Waldo',
                execute: async () => {
-                  const overlay = startServices.overlays.openModal(
+                  const overlay = overlays.openModal(
                    toMountPoint(
                      <EuiModalBody>
                        <EuiText data-test-subj="dynamicHelloWorldActionText">Hello Waldo</EuiText>{' '}
@ -79,7 +82,7 @@ export const HelloWorldExample = ({ uiActionsStartService, startServices }: Prop
                          Close
                        </EuiButton>
                      </EuiModalBody>,
-                      startServices
+                      rendering
                    )
                  );
                },
--- a/examples/ui_actions_explorer/tsconfig.json
+++ b/examples/ui_actions_explorer/tsconfig.json
@ -18,6 +18,5 @@
    "@kbn/ui-actions-examples-plugin",
    "@kbn/developer-examples-plugin",
    "@kbn/react-kibana-mount",
-    "@kbn/react-kibana-context-render",
  ]
 }
--- a/src/platform/packages/shared/content-management/content_editor/src/services.tsx
+++ b/src/platform/packages/shared/content-management/content_editor/src/services.tsx
@ -87,6 +87,9 @@ export interface ContentEditorKibanaDependencies {
        addDanger: (notifyArgs: { title: MountPoint; text?: string }) => void;
      };
    };
+    rendering: {
+      addContext: (element: React.ReactNode) => React.ReactElement;
+    };
  };
  /**
   * The public API from the savedObjectsTaggingOss plugin.
@ -123,7 +126,7 @@ export const ContentEditorKibanaProvider: FC<
  PropsWithChildren<ContentEditorKibanaDependencies>
 > = ({ children, ...services }) => {
  const { core, savedObjectsTagging } = services;
-  const { overlays, notifications, ...startServices } = core;
+  const { overlays, notifications, rendering } = core;
  const { openFlyout: coreOpenFlyout } = overlays;

  const TagList = useMemo(() => {
@ -148,19 +151,19 @@ export const ContentEditorKibanaProvider: FC<
          <QueryClientProvider client={queryClient}>
            <UserProfilesProvider {...userProfilesServices}>{node}</UserProfilesProvider>
          </QueryClientProvider>,
-          startServices
+          rendering
        ),
        options
      );
    },
-    [coreOpenFlyout, startServices, userProfilesServices, queryClient]
+    [coreOpenFlyout, rendering, userProfilesServices, queryClient]
  );

  return (
    <ContentEditorProvider
      openFlyout={openFlyout}
      notifyError={(title, text) => {
-        notifications.toasts.addDanger({ title: toMountPoint(title, startServices), text });
+        notifications.toasts.addDanger({ title: toMountPoint(title, rendering), text });
      }}
      TagList={TagList}
      TagSelector={savedObjectsTagging?.ui.components.SavedObjectSaveModalTagSelector}
--- a/src/platform/packages/shared/content-management/table_list_view_table/src/services.tsx
+++ b/src/platform/packages/shared/content-management/table_list_view_table/src/services.tsx
@ -135,6 +135,9 @@ export interface TableListViewKibanaDependencies {
    userProfile: {
      bulkGet: UserProfileServiceStart['bulkGet'];
    };
+    rendering: {
+      addContext: (element: React.ReactNode) => React.ReactElement;
+    };
  };
  /**
   * The public API from the savedObjectsTaggingOss plugin.
@ -202,7 +205,7 @@ export const TableListViewKibanaProvider: FC<
  PropsWithChildren<TableListViewKibanaDependencies>
 > = ({ children, ...services }) => {
  const { core, savedObjectsTagging, FormattedRelative } = services;
-  const { application, http, notifications, ...startServices } = core;
+  const { application, http, notifications, rendering } = core;

  const searchQueryParser = useMemo(() => {
    if (savedObjectsTagging) {
@ -268,7 +271,7 @@ export const TableListViewKibanaProvider: FC<
                favoritesClient={services.favorites}
                notifyError={(title, text) => {
                  notifications.toasts.addDanger({
-                    title: toMountPoint(title, startServices),
+                    title: toMountPoint(title, rendering),
                    text,
                  });
                }}
@ -276,7 +279,7 @@ export const TableListViewKibanaProvider: FC<
                <TableListViewProvider
                  notifyError={(title, text) => {
                    notifications.toasts.addDanger({
-                      title: toMountPoint(title, startServices),
+                      title: toMountPoint(title, rendering),
                      text,
                    });
                  }}
@ -290,7 +293,7 @@ export const TableListViewKibanaProvider: FC<
                  TagList={TagList}
                  itemHasTags={itemHasTags}
                  getTagIdsFromReferences={getTagIdsFromReferences}
-                  getTagManagementUrl={() => core.http.basePath.prepend(TAG_MANAGEMENT_APP_URL)}
+                  getTagManagementUrl={() => http.basePath.prepend(TAG_MANAGEMENT_APP_URL)}
                  isKibanaVersioningEnabled={services.isKibanaVersioningEnabled ?? false}
                >
                  {children}
--- a/src/platform/plugins/private/advanced_settings/public/plugin.tsx
+++ b/src/platform/plugins/private/advanced_settings/public/plugin.tsx
@ -11,7 +11,6 @@ import { i18n } from '@kbn/i18n';
 import { CoreSetup, Plugin } from '@kbn/core/public';
 import { SectionRegistry } from '@kbn/management-settings-section-registry';
 import ReactDOM from 'react-dom';
-import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import React from 'react';
 import { withSuspense } from '@kbn/shared-ux-utility';
 import {
@ -60,7 +59,7 @@ export class AdvancedSettingsPlugin
        setBreadcrumbs([{ text: title }]);

        ReactDOM.render(
-          <KibanaRenderContextProvider {...coreStart}>
+          coreStart.rendering.addContext(
            <KibanaSettingsApplication
              {...{
                ...coreStart,
@ -69,7 +68,7 @@ export class AdvancedSettingsPlugin
                sectionRegistry: sectionRegistryStart,
              }}
            />
-          </KibanaRenderContextProvider>,
+          ),
          element
        );
        return () => {
--- a/src/platform/plugins/private/advanced_settings/tsconfig.json
+++ b/src/platform/plugins/private/advanced_settings/tsconfig.json
@ -16,7 +16,6 @@
    "@kbn/config-schema",
    "@kbn/core-plugins-server",
    "@kbn/management-settings-section-registry",
-    "@kbn/react-kibana-context-render",
    "@kbn/shared-ux-utility",
    "@kbn/management-settings-application",
    "@kbn/spaces-plugin",
--- a/src/platform/plugins/private/files_management/public/mount_management_section.tsx
+++ b/src/platform/plugins/private/files_management/public/mount_management_section.tsx
@ -11,7 +11,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router } from '@kbn/shared-ux-router';
 import { Route } from '@kbn/shared-ux-router';
-import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { FormattedRelative } from '@kbn/i18n-react';
 import type { CoreStart } from '@kbn/core/public';
 import type { ManagementAppMountParams } from '@kbn/management-plugin/public';
@ -33,14 +32,9 @@ export const mountManagementSection = (
  } = startDeps;

  ReactDOM.render(
-    <KibanaRenderContextProvider {...coreStart}>
+    coreStart.rendering.addContext(
      <QueryClientProvider client={queryClient}>
-        <TableListViewKibanaProvider
-          {...{
-            core: coreStart,
-            FormattedRelative,
-          }}
-        >
+        <TableListViewKibanaProvider {...{ core: coreStart, FormattedRelative }}>
          <FilesManagementAppContextProvider
            filesClient={filesClientFactory.asUnscoped()}
            getFileKindDefinition={getFileKindDefinition}
@ -52,7 +46,7 @@ export const mountManagementSection = (
          </FilesManagementAppContextProvider>
        </TableListViewKibanaProvider>
      </QueryClientProvider>
-    </KibanaRenderContextProvider>,
+    ),
    element
  );

--- a/src/platform/plugins/private/files_management/tsconfig.json
+++ b/src/platform/plugins/private/files_management/tsconfig.json
@ -15,7 +15,6 @@
    "@kbn/shared-ux-file-image",
    "@kbn/shared-ux-router",
    "@kbn/content-management-table-list-view-common",
-    "@kbn/react-kibana-context-render",
    "@kbn/charts-theme",
  ],
  "exclude": [
--- a/src/platform/plugins/private/image_embeddable/public/components/image_editor/open_image_editor.tsx
+++ b/src/platform/plugins/private/image_embeddable/public/components/image_editor/open_image_editor.tsx
@ -28,7 +28,7 @@ export const openImageEditor = async ({
 }): Promise<ImageConfig> => {
  const { ImageEditorFlyout } = await import('./image_editor_flyout');

-  const { overlays, http, security, ...startServices } = coreServices;
+  const { overlays, http, security, rendering } = coreServices;
  const user = await security.authc.getCurrentUser();
  const filesClient = filesService.filesClientFactory.asUnscoped<FileImageMetadata>();

@ -73,7 +73,7 @@ export const openImageEditor = async ({
            />
          </ImageViewerContext.Provider>
        </FilesContext>,
-        startServices
+        rendering
      ),
      {
        onClose: () => {
--- a/src/platform/plugins/private/kibana_overview/public/application.tsx
+++ b/src/platform/plugins/private/kibana_overview/public/application.tsx
@ -11,7 +11,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { i18n } from '@kbn/i18n';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
-import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { NewsfeedApiEndpoint } from '@kbn/newsfeed-plugin/public';
 import { AppMountParameters, CoreStart } from '@kbn/core/public';
 import { AppPluginStartDependencies } from './types';
@ -42,14 +41,14 @@ export const renderApp = (
      );

    ReactDOM.render(
-      <KibanaRenderContextProvider {...core}>
+      core.rendering.addContext(
        <KibanaContextProvider services={{ ...core, ...deps }}>
          <KibanaOverviewApp
            basename={appBasePath}
            {...{ notifications, http, navigation, newsfeed$, solutions, features$ }}
          />
        </KibanaContextProvider>
-      </KibanaRenderContextProvider>,
+      ),
      element
    );
  });
--- a/src/platform/plugins/private/kibana_overview/tsconfig.json
+++ b/src/platform/plugins/private/kibana_overview/tsconfig.json
@ -28,7 +28,6 @@
    "@kbn/shared-ux-router",
    "@kbn/shared-ux-avatar-solution",
    "@kbn/shared-ux-utility",
-    "@kbn/react-kibana-context-render",
    "@kbn/core-application-browser-mocks",
    "@kbn/core-http-browser-mocks",
    "@kbn/react-kibana-context-theme",
--- a/src/platform/plugins/shared/guided_onboarding/public/plugin.tsx
+++ b/src/platform/plugins/shared/guided_onboarding/public/plugin.tsx
@ -16,7 +16,6 @@ import {
  ApplicationStart,
  NotificationsStart,
 } from '@kbn/core/public';
-import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';

 import { PLUGIN_FEATURE } from '../common/constants';
 import type {
@ -80,16 +79,17 @@ export class GuidedOnboardingPlugin
    application,
    notifications,
  }: {
-    startServices: Pick<CoreStart, 'analytics' | 'i18n' | 'theme' | 'userProfile'>;
+    startServices: Pick<CoreStart, 'rendering'>;
    targetDomElement: HTMLElement;
    api: ApiService;
    application: ApplicationStart;
    notifications: NotificationsStart;
  }) {
+    const { rendering } = startServices;
    ReactDOM.render(
-      <KibanaRenderContextProvider {...startServices}>
+      rendering.addContext(
        <GuidePanel api={api} application={application} notifications={notifications} />
-      </KibanaRenderContextProvider>,
+      ),
      targetDomElement
    );
    return () => ReactDOM.unmountComponentAtNode(targetDomElement);
--- a/src/platform/plugins/shared/guided_onboarding/tsconfig.json
+++ b/src/platform/plugins/shared/guided_onboarding/tsconfig.json
@ -16,7 +16,6 @@
    "@kbn/core-http-browser-mocks",
    "@kbn/config-schema",
    "@kbn/features-plugin",
-    "@kbn/react-kibana-context-render",
    "@kbn/react-kibana-context-theme",
  ],
  "exclude": [
--- a/src/platform/plugins/shared/home/public/application/application.tsx
+++ b/src/platform/plugins/shared/home/public/application/application.tsx
@ -11,7 +11,6 @@ import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { ScopedHistory, CoreStart } from '@kbn/core/public';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
-import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 import { SampleDataTabKibanaProvider } from '@kbn/home-sample-data-tab';
 import { HomeApp } from './components/home_app';
@ -38,7 +37,7 @@ export const renderApp = async (
      );

    render(
-      <KibanaRenderContextProvider {...coreStart}>
+      coreStart.rendering.addContext(
        <RedirectAppLinks
          coreStart={{
            application: coreStart.application,
@ -50,7 +49,7 @@ export const renderApp = async (
            </SampleDataTabKibanaProvider>
          </KibanaContextProvider>
        </RedirectAppLinks>
-      </KibanaRenderContextProvider>,
+      ),
      element
    );
  });
--- a/src/platform/plugins/shared/home/tsconfig.json
+++ b/src/platform/plugins/shared/home/tsconfig.json
@ -33,7 +33,6 @@
    "@kbn/shared-ux-router",
    "@kbn/core-http-common",
    "@kbn/shared-ux-link-redirect-app",
-    "@kbn/react-kibana-context-render",
    "@kbn/core-http-browser",
    "@kbn/deeplinks-observability",
    "@kbn/react-kibana-context-theme",
--- a/src/platform/plugins/shared/saved_objects/public/kibana_services.ts
+++ b/src/platform/plugins/shared/saved_objects/public/kibana_services.ts
@ -14,7 +14,4 @@ export function setStartServices(core: CoreStart) {
  coreStart = core;
 }

-export const getAnalytics = () => coreStart.analytics;
-export const getI18n = () => coreStart.i18n;
-export const getTheme = () => coreStart.theme;
-export const getUserProfile = () => coreStart.userProfile;
+export const getRendering = () => coreStart.rendering;
--- a/src/platform/plugins/shared/saved_objects/public/save_modal/show_saved_object_save_modal.tsx
+++ b/src/platform/plugins/shared/saved_objects/public/save_modal/show_saved_object_save_modal.tsx
@ -10,7 +10,7 @@
 import React, { FC, PropsWithChildren } from 'react';

 import { toMountPoint } from '@kbn/react-kibana-mount';
-import { getAnalytics, getI18n, getTheme, getUserProfile } from '../kibana_services';
+import { getRendering } from '../kibana_services';

 /**
 * Represents the result of trying to persist the saved object.
@ -68,7 +68,7 @@ export function showSaveModal(
        children: augmentedElement,
      });
    }),
-    { analytics: getAnalytics(), theme: getTheme(), i18n: getI18n(), userProfile: getUserProfile() }
+    getRendering()
  );

  unmount = mount(document.createElement('div'));
--- a/src/platform/plugins/shared/ui_actions/public/tests/test_samples/hello_world_action.tsx
+++ b/src/platform/plugins/shared/ui_actions/public/tests/test_samples/hello_world_action.tsx
@ -11,22 +11,19 @@ import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiBadge, EuiFlyoutBody } from '@elastic/eui';
 import { CoreStart } from '@kbn/core/public';
 import { toMountPoint } from '@kbn/react-kibana-mount';
-import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { ActionDefinition } from '../../actions';

-type StartServices = Pick<CoreStart, 'analytics' | 'i18n' | 'theme' | 'userProfile'>;
+type StartServices = Pick<CoreStart, 'overlays' | 'rendering'>;

 const getMenuItem = (core: StartServices) => {
  return () => {
-    return (
-      <KibanaRenderContextProvider {...core}>
-        <EuiFlexGroup alignItems="center">
-          <EuiFlexItem>Hello world!</EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiBadge color={'danger'}>{'secret'}</EuiBadge>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </KibanaRenderContextProvider>
+    return core.rendering.addContext(
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem>Hello world!</EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiBadge color={'danger'}>{'secret'}</EuiBadge>
+        </EuiFlexItem>
+      </EuiFlexGroup>
    );
  };
 };
@ -36,17 +33,17 @@ export const ACTION_HELLO_WORLD = 'ACTION_HELLO_WORLD';
 export function createHelloWorldAction(
  coreStart: StartServices & Pick<CoreStart, 'overlays'>
 ): ActionDefinition {
-  const { overlays, ...startServices } = coreStart;
+  const { overlays, rendering } = coreStart;
  return {
    id: ACTION_HELLO_WORLD,
    type: ACTION_HELLO_WORLD,
    getIconType: () => 'lock',
-    MenuItem: getMenuItem(startServices),
+    MenuItem: getMenuItem(coreStart),
    execute: async () => {
      overlays.openFlyout(
        toMountPoint(
          <EuiFlyoutBody>Hello World, I am a hello world action!</EuiFlyoutBody>,
-          startServices
+          rendering
        ),
        {
          'data-test-subj': 'helloWorldAction',
--- a/src/platform/test/plugin_functional/plugins/kbn_sample_panel_action/public/sample_panel_action.tsx
+++ b/src/platform/test/plugin_functional/plugins/kbn_sample_panel_action/public/sample_panel_action.tsx
@ -31,7 +31,7 @@ export function createSamplePanelAction(getStartServices: CoreSetup['getStartSer
        return;
      }
      const coreStart = (await getStartServices())[0];
-      const { overlays, ...startServices } = coreStart;
+      const { overlays, rendering } = coreStart;
      const openFlyout = overlays.openFlyout;
      openFlyout(
        toMountPoint(
@ -45,7 +45,7 @@ export function createSamplePanelAction(getStartServices: CoreSetup['getStartSer
              <h3 data-test-subj="samplePanelActionBody">This is a sample action</h3>
            </EuiFlyoutBody>
          </React.Fragment>,
-          startServices
+          rendering
        ),
        {
          'data-test-subj': 'samplePanelActionFlyout',
--- a/x-pack/examples/ui_actions_enhanced_examples/public/containers/app/app.tsx
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/containers/app/app.tsx
@ -8,18 +8,15 @@
 import React from 'react';
 import { EuiPage } from '@elastic/eui';
 import { CoreStart } from '@kbn/core/public';
-import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { Page } from '../../components/page';
 import { DrilldownsManager } from '../drilldowns_manager';

 export const App = ({ core }: { core: CoreStart }) => {
-  return (
-    <KibanaRenderContextProvider i18n={core.i18n} theme={core.theme}>
-      <EuiPage>
-        <Page title={'UI Actions Enhanced'}>
-          <DrilldownsManager />
-        </Page>
-      </EuiPage>
-    </KibanaRenderContextProvider>
+  return core.rendering.addContext(
+    <EuiPage>
+      <Page title={'UI Actions Enhanced'}>
+        <DrilldownsManager />
+      </Page>
+    </EuiPage>
  );
 };
--- a/x-pack/examples/ui_actions_enhanced_examples/public/plugin.ts
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/plugin.ts
@ -96,7 +96,7 @@ export class UiActionsEnhancedExamplesPlugin
              triggers: [SAMPLE_APP2_CLICK_TRIGGER],
              placeContext: {},
            }),
-            coreStart
+            coreStart.rendering
          ),
          {
            ownFocus: true,
@ -122,7 +122,7 @@ export class UiActionsEnhancedExamplesPlugin
              triggers: [SAMPLE_APP2_CLICK_TRIGGER],
              placeContext: { sampleApp2ClickContext },
            }),
-            coreStart
+            coreStart.rendering
          ),
          {
            ownFocus: true,
--- a/x-pack/examples/ui_actions_enhanced_examples/tsconfig.json
+++ b/x-pack/examples/ui_actions_enhanced_examples/tsconfig.json
@ -29,6 +29,5 @@
    "@kbn/utility-types",
    "@kbn/presentation-publishing",
    "@kbn/react-kibana-mount",
-    "@kbn/react-kibana-context-render",
  ]
 }
--- a/x-pack/platform/plugins/private/banners/public/plugin.tsx
+++ b/x-pack/platform/plugins/private/banners/public/plugin.tsx
@ -19,16 +19,13 @@ export class BannersPlugin implements Plugin<{}, {}, {}, BannerPluginStartDepend
    return {};
  }

-  start(
-    { chrome, http, ...startServices }: CoreStart,
-    { screenshotMode }: BannerPluginStartDependencies
-  ) {
+  start({ chrome, http, rendering }: CoreStart, { screenshotMode }: BannerPluginStartDependencies) {
    if (!(screenshotMode?.isScreenshotMode() ?? false)) {
      getBannerInfo(http).then(
        ({ allowed, banner }) => {
          if (allowed && banner.placement === 'top') {
            chrome.setHeaderBanner({
-              content: toMountPoint(<Banner bannerConfig={banner} />, startServices),
+              content: toMountPoint(<Banner bannerConfig={banner} />, rendering),
            });
          }
        },
--- a/x-pack/platform/plugins/private/global_search_bar/public/plugin.tsx
+++ b/x-pack/platform/plugins/private/global_search_bar/public/plugin.tsx
@ -13,7 +13,6 @@ import {
  PluginInitializerContext,
 } from '@kbn/core/public';
 import { GlobalSearchPluginStart } from '@kbn/global-search-plugin/public';
-import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { SavedObjectTaggingPluginStart } from '@kbn/saved-objects-tagging-plugin/public';
 import { UsageCollectionSetup } from '@kbn/usage-collection-plugin/public';
 import React from 'react';
@ -57,7 +56,7 @@ export class GlobalSearchBarPlugin implements Plugin<{}, {}, {}, GlobalSearchBar
      order: 1000,
      mount: (container) => {
        ReactDOM.render(
-          <KibanaRenderContextProvider {...core}>
+          core.rendering.addContext(
            <SearchBar
              globalSearch={{ ...globalSearch, searchCharLimit: this.config.input_max_limit }}
              navigateToUrl={application.navigateToUrl}
@ -66,7 +65,7 @@ export class GlobalSearchBarPlugin implements Plugin<{}, {}, {}, GlobalSearchBar
              chromeStyle$={core.chrome.getChromeStyle$()}
              reportEvent={reportEvent}
            />
-          </KibanaRenderContextProvider>,
+          ),
          container
        );

--- a/x-pack/platform/plugins/private/global_search_bar/tsconfig.json
+++ b/x-pack/platform/plugins/private/global_search_bar/tsconfig.json
@ -14,7 +14,6 @@
    "@kbn/i18n",
    "@kbn/saved-objects-tagging-oss-plugin",
    "@kbn/core-chrome-browser",
-    "@kbn/react-kibana-context-render",
    "@kbn/config-schema",
  ],
  "exclude": [
--- a/x-pack/platform/plugins/shared/saved_objects_tagging/public/components/assign_flyout/open_assign_flyout.tsx
+++ b/x-pack/platform/plugins/shared/saved_objects_tagging/public/components/assign_flyout/open_assign_flyout.tsx
@ -41,10 +41,10 @@ export const getAssignFlyoutOpener =
  ({
    overlays,
    notifications,
+    rendering,
    tagCache,
    assignmentService,
    assignableTypes,
-    ...startServices
  }: GetAssignFlyoutOpenerOptions): AssignFlyoutOpener =>
  async ({ tagIds }) => {
    const flyout = overlays.openFlyout(
@ -59,7 +59,7 @@ export const getAssignFlyoutOpener =
            onClose={() => flyout.close()}
          />
        </React.Suspense>,
-        startServices
+        rendering
      ),
      { size: 'm', maxWidth: 600 }
    );
--- a/x-pack/platform/plugins/shared/saved_objects_tagging/public/components/edition_modal/open_modal.tsx
+++ b/x-pack/platform/plugins/shared/saved_objects_tagging/public/components/edition_modal/open_modal.tsx
@ -39,12 +39,7 @@ const LazyEditTagModal = React.lazy(() =>
 );

 export const getCreateModalOpener =
-  ({
-    overlays,
-    tagClient,
-    notifications,
-    ...startServices
-  }: GetModalOpenerOptions): CreateModalOpener =>
+  ({ overlays, tagClient, notifications, rendering }: GetModalOpenerOptions): CreateModalOpener =>
  async ({ onCreate, defaultValues }: OpenCreateModalOptions) => {
    const modal = overlays.openModal(
      toMountPoint(
@ -62,7 +57,7 @@ export const getCreateModalOpener =
            notifications={notifications}
          />
        </React.Suspense>,
-        startServices
+        rendering
      )
    );
    return modal;
@ -74,7 +69,7 @@ interface OpenEditModalOptions {
 }

 export const getEditModalOpener =
-  ({ overlays, tagClient, notifications, ...startServices }: GetModalOpenerOptions) =>
+  ({ overlays, tagClient, notifications, rendering }: GetModalOpenerOptions) =>
  async ({ tagId, onUpdate }: OpenEditModalOptions) => {
    const tag = await tagClient.get(tagId);

@ -94,7 +89,7 @@ export const getEditModalOpener =
            notifications={notifications}
          />
        </React.Suspense>,
-        startServices
+        rendering
      )
    );

--- a/x-pack/platform/plugins/shared/saved_objects_tagging/public/management/mount_section.tsx
+++ b/x-pack/platform/plugins/shared/saved_objects_tagging/public/management/mount_section.tsx
@ -8,7 +8,6 @@
 import React, { FC, PropsWithChildren } from 'react';
 import ReactDOM from 'react-dom';
 import { CoreSetup, ApplicationStart } from '@kbn/core/public';
-import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { ManagementAppMountParams } from '@kbn/management-plugin/public';
 import { getTagsCapabilities } from '../../common';
 import { SavedObjectTaggingPluginStart } from '../types';
@ -52,7 +51,7 @@ export const mountSection = async ({
  coreStart.chrome.docTitle.change(title);

  ReactDOM.render(
-    <KibanaRenderContextProvider {...coreStart}>
+    coreStart.rendering.addContext(
      <RedirectToHomeIfUnauthorized applications={coreStart.application}>
        <TagManagementPage
          setBreadcrumbs={setBreadcrumbs}
@ -64,7 +63,7 @@ export const mountSection = async ({
          assignableTypes={assignableTypes}
        />
      </RedirectToHomeIfUnauthorized>
-    </KibanaRenderContextProvider>,
+    ),
    element
  );

--- a/x-pack/platform/plugins/shared/saved_objects_tagging/public/plugin.ts
+++ b/x-pack/platform/plugins/shared/saved_objects_tagging/public/plugin.ts
@ -88,7 +88,6 @@ export class SavedObjectTaggingPlugin
      cache: this.tagCache,
      ui: getUiApi({
        ...startServices,
-        analytics,
        cache: this.tagCache,
        client: this.tagClient,
        capabilities: getTagsCapabilities(application.capabilities),
--- a/x-pack/platform/plugins/shared/saved_objects_tagging/public/types.ts
+++ b/x-pack/platform/plugins/shared/saved_objects_tagging/public/types.ts
@ -10,7 +10,4 @@ import type { SavedObjectsTaggingApi } from '@kbn/saved-objects-tagging-oss-plug

 export type SavedObjectTaggingPluginStart = SavedObjectsTaggingApi;

-export type StartServices = Pick<
-  CoreStart,
-  'overlays' | 'notifications' | 'analytics' | 'i18n' | 'theme' | 'userProfile'
->;
+export type StartServices = Pick<CoreStart, 'overlays' | 'notifications' | 'rendering'>;
--- a/x-pack/platform/plugins/shared/saved_objects_tagging/tsconfig.json
+++ b/x-pack/platform/plugins/shared/saved_objects_tagging/tsconfig.json
@ -18,7 +18,6 @@
    "@kbn/config-schema",
    "@kbn/ebt-tools",
    "@kbn/core-notifications-browser",
-    "@kbn/react-kibana-context-render",
    "@kbn/react-kibana-mount",
    "@kbn/core-lifecycle-browser"
  ],
--- a/x-pack/platform/plugins/shared/serverless/public/plugin.tsx
+++ b/x-pack/platform/plugins/shared/serverless/public/plugin.tsx
@ -45,12 +45,14 @@ export class ServerlessPlugin
    core: CoreStart,
    dependencies: ServerlessPluginStartDependencies
  ): ServerlessPluginStart {
-    core.chrome.setChromeStyle('project');
+    const { chrome, rendering } = core;

-    // Casting the "chrome.projects" service to an "internal" type: this is intentional to obscure the property from Typescript.
-    const { project } = core.chrome as InternalChromeStart;
+    // Casting the "chrome.project" service to an "internal" type: this is intentional to obscure the property from Typescript.
+    const { project } = chrome as InternalChromeStart;
    const { cloud } = dependencies;

+    chrome.setChromeStyle('project');
+
    if (cloud.serverless.projectName) {
      project.setProjectName(cloud.serverless.projectName);
    }
@ -59,7 +61,7 @@ export class ServerlessPlugin
    const activeNavigationNodes$ = project.getActiveNavigationNodes$();
    const navigationTreeUi$ = project.getNavigationTreeUi$();

-    core.chrome.navControls.registerRight({
+    chrome.navControls.registerRight({
      order: 1,
      mount: toMountPoint(
        <EuiButton
@ -74,7 +76,7 @@ export class ServerlessPlugin
            defaultMessage: 'Give feedback',
          })}
        </EuiButton>,
-        core.rendering
+        rendering
      ),
    });