From e875f098b11c1ee73854d413c16160c29c79f25b Mon Sep 17 00:00:00 2001
From: Bena Kansara <bena.kansara@elastic.co>
Date: Tue, 7 Apr 2026 10:09:29 +0200
Subject: [PATCH] fix rule preview error

---
 .../alerting_v2/public/application/mount.tsx  | 54 +++++++++++--------
 .../shared/alerting_v2/public/index.ts        |  7 ++-
 2 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/x-pack/platform/plugins/shared/alerting_v2/public/application/mount.tsx b/x-pack/platform/plugins/shared/alerting_v2/public/application/mount.tsx
index fd8edf88ad5bf..739df9b30e41d 100644
--- a/x-pack/platform/plugins/shared/alerting_v2/public/application/mount.tsx
+++ b/x-pack/platform/plugins/shared/alerting_v2/public/application/mount.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import type { Container } from 'inversify';
 import type { AppMountParameters, AppUnmount } from '@kbn/core-application-browser';
-import type { ChromeBreadcrumb } from '@kbn/core/public';
+import type { ChromeBreadcrumb, CoreStart } from '@kbn/core/public';
 import { Context } from '@kbn/core-di-browser';
 import { Router } from '@kbn/shared-ux-router';
 import { I18nProvider } from '@kbn/i18n-react';
@@ -27,26 +27,30 @@ interface AlertingV2MountParams {
 export const mountAlertingV2App = ({
   params,
   container,
+  coreStart,
 }: {
   params: AlertingV2MountParams;
   container: Container;
+  coreStart: CoreStart;
 }): AppUnmount => {
   const { element, history, setBreadcrumbs } = params;
 
   const queryClient = new QueryClient();
 
   ReactDOM.render(
-    <Context.Provider value={container}>
-      <QueryClientProvider client={queryClient}>
-        <BreadcrumbProvider setBreadcrumbs={setBreadcrumbs}>
-          <I18nProvider>
-            <Router history={history}>
-              <RulesApp />
-            </Router>
-          </I18nProvider>
-        </BreadcrumbProvider>
-      </QueryClientProvider>
-    </Context.Provider>,
+    coreStart.rendering.addContext(
+      <Context.Provider value={container}>
+        <QueryClientProvider client={queryClient}>
+          <BreadcrumbProvider setBreadcrumbs={setBreadcrumbs}>
+            <I18nProvider>
+              <Router history={history}>
+                <RulesApp />
+              </Router>
+            </I18nProvider>
+          </BreadcrumbProvider>
+        </QueryClientProvider>
+      </Context.Provider>
+    ),
     element
   );
 
@@ -56,26 +60,30 @@ export const mountAlertingV2App = ({
 export const mountNotificationPoliciesApp = ({
   params,
   container,
+  coreStart,
 }: {
   params: AlertingV2MountParams;
   container: Container;
+  coreStart: CoreStart;
 }): AppUnmount => {
   const { element, history, setBreadcrumbs } = params;
 
   const queryClient = new QueryClient();
 
   ReactDOM.render(
-    <Context.Provider value={container}>
-      <QueryClientProvider client={queryClient}>
-        <BreadcrumbProvider setBreadcrumbs={setBreadcrumbs}>
-          <I18nProvider>
-            <Router history={history}>
-              <NotificationPoliciesApp />
-            </Router>
-          </I18nProvider>
-        </BreadcrumbProvider>
-      </QueryClientProvider>
-    </Context.Provider>,
+    coreStart.rendering.addContext(
+      <Context.Provider value={container}>
+        <QueryClientProvider client={queryClient}>
+          <BreadcrumbProvider setBreadcrumbs={setBreadcrumbs}>
+            <I18nProvider>
+              <Router history={history}>
+                <NotificationPoliciesApp />
+              </Router>
+            </I18nProvider>
+          </BreadcrumbProvider>
+        </QueryClientProvider>
+      </Context.Provider>
+    ),
     element
   );
 
diff --git a/x-pack/platform/plugins/shared/alerting_v2/public/index.ts b/x-pack/platform/plugins/shared/alerting_v2/public/index.ts
index becf8405307a5..3b059964433a7 100644
--- a/x-pack/platform/plugins/shared/alerting_v2/public/index.ts
+++ b/x-pack/platform/plugins/shared/alerting_v2/public/index.ts
@@ -64,7 +64,11 @@ export const module = new ContainerModule(({ bind }) => {
       async mount(params) {
         const [coreStart] = await getStartServices();
         const { mountAlertingV2App } = await import('./application/mount');
-        return mountAlertingV2App({ params, container: coreStart.injection.getContainer() });
+        return mountAlertingV2App({
+          params,
+          container: coreStart.injection.getContainer(),
+          coreStart,
+        });
       },
     });
 
@@ -78,6 +82,7 @@ export const module = new ContainerModule(({ bind }) => {
         return mountNotificationPoliciesApp({
           params,
           container: coreStart.injection.getContainer(),
+          coreStart,
         });
       },
     });