[APM] Wrap APM/UX apps in KibanaThemeProvider (elastic#123910)

awahab07 · Jan 31, 2022 · 69de24f · 69de24f
1 parent 6ff4172
commit 69de24f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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 () => {