From 69de24fac116f42bdda96835e7db55049bb762d0 Mon Sep 17 00:00:00 2001
From: Dario Gieselaar <dario.gieselaar@elastic.co>
Date: Fri, 28 Jan 2022 12:59:06 +0100
Subject: [PATCH] [APM] Wrap APM/UX apps in KibanaThemeProvider (#123910)

---
 .../public/application/application.test.tsx   |  1 +
 .../plugins/apm/public/application/index.tsx  | 13 +++++++-----
 .../plugins/apm/public/application/uxApp.tsx  | 21 +++++++++++--------
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/x-pack/plugins/apm/public/application/application.test.tsx b/x-pack/plugins/apm/public/application/application.test.tsx
index 396e853ca54a7..982e279a2d65d 100644
--- a/x-pack/plugins/apm/public/application/application.test.tsx
+++ b/x-pack/plugins/apm/public/application/application.test.tsx
@@ -70,6 +70,7 @@ describe('renderApp (APM)', () => {
       element: document.createElement('div'),
       history: createMemoryHistory(),
       setHeaderActionMenu: () => {},
+      theme$: new Observable(),
     };
 
     const data = dataPluginMock.createStartContract();
diff --git a/x-pack/plugins/apm/public/application/index.tsx b/x-pack/plugins/apm/public/application/index.tsx
index d32fb72bbe308..a59865adfa168 100644
--- a/x-pack/plugins/apm/public/application/index.tsx
+++ b/x-pack/plugins/apm/public/application/index.tsx
@@ -21,6 +21,7 @@ import { createStaticDataView } from '../services/rest/data_view';
 import { setHelpExtension } from '../setHelpExtension';
 import { setReadonlyBadge } from '../updateBadge';
 import { ApmAppRoot } from '../components/routing/app_root';
+import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public';
 
 /**
  * This module is rendered asynchronously in the Kibana platform.
@@ -41,7 +42,7 @@ export const renderApp = ({
   pluginsStart: ApmPluginStartDeps;
   observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry;
 }) => {
-  const { element } = appMountParameters;
+  const { element, theme$ } = appMountParameters;
   const apmPluginContextValue = {
     appMountParameters,
     config,
@@ -68,10 +69,12 @@ export const renderApp = ({
   element.classList.add(APP_WRAPPER_CLASS);
 
   ReactDOM.render(
-    <ApmAppRoot
-      apmPluginContextValue={apmPluginContextValue}
-      pluginsStart={pluginsStart}
-    />,
+    <KibanaThemeProvider theme$={theme$}>
+      <ApmAppRoot
+        apmPluginContextValue={apmPluginContextValue}
+        pluginsStart={pluginsStart}
+      />
+    </KibanaThemeProvider>,
     element
   );
   return () => {
diff --git a/x-pack/plugins/apm/public/application/uxApp.tsx b/x-pack/plugins/apm/public/application/uxApp.tsx
index f9883ca348c51..259db1885935b 100644
--- a/x-pack/plugins/apm/public/application/uxApp.tsx
+++ b/x-pack/plugins/apm/public/application/uxApp.tsx
@@ -40,6 +40,7 @@ import {
 } from '../../../observability/public';
 import { useApmPluginContext } from '../context/apm_plugin/use_apm_plugin_context';
 import { APP_WRAPPER_CLASS } from '../../../../../src/core/public';
+import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public';
 
 export const uxRoutes: APMRouteDefinition[] = [
   {
@@ -166,7 +167,7 @@ export const renderApp = ({
   corePlugins: ApmPluginStartDeps;
   observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry;
 }) => {
-  const { element } = appMountParameters;
+  const { element, theme$ } = appMountParameters;
 
   createCallApmApi(core);
 
@@ -177,14 +178,16 @@ export const renderApp = ({
   });
 
   ReactDOM.render(
-    <UXAppRoot
-      appMountParameters={appMountParameters}
-      core={core}
-      deps={deps}
-      config={config}
-      corePlugins={corePlugins}
-      observabilityRuleTypeRegistry={observabilityRuleTypeRegistry}
-    />,
+    <KibanaThemeProvider theme$={theme$}>
+      <UXAppRoot
+        appMountParameters={appMountParameters}
+        core={core}
+        deps={deps}
+        config={config}
+        corePlugins={corePlugins}
+        observabilityRuleTypeRegistry={observabilityRuleTypeRegistry}
+      />
+    </KibanaThemeProvider>,
     element
   );
   return () => {