[Observability] Wraps render tree with KibanaThemeProvider (elastic#1…

…20400) * Treats application root * Treats toMountPoint - part I
TinLe · Dec 22, 2021 · 3fe91d8 · 3fe91d8
1 parent ebbde37
commit 3fe91d8
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 27 deletions.
diff --git a/x-pack/plugins/observability/public/application/application.test.tsx b/x-pack/plugins/observability/public/application/application.test.tsx
@@ -9,6 +9,7 @@ import { createMemoryHistory } from 'history';
 import React from 'react';
 import { Observable } from 'rxjs';
 import { AppMountParameters, CoreStart } from 'src/core/public';
+import { themeServiceMock } from '../../../../../src/core/public/mocks';
 import { KibanaPageTemplate } from '../../../../../src/plugins/kibana_react/public';
 import { ObservabilityPublicPluginsStart } from '../plugin';
 import { createObservabilityRuleTypeRegistryMock } from '../rules/observability_rule_type_registry_mock';
@@ -45,6 +46,7 @@ describe('renderApp', () => {
       i18n: { Context: ({ children }: { children: React.ReactNode }) => children },
       uiSettings: { get: () => false },
       http: { basePath: { prepend: (path: string) => path } },
+      theme: themeServiceMock.createStartContract(),
     } as unknown as CoreStart;
     const config = {
       unsafe: {
@@ -57,6 +59,7 @@ describe('renderApp', () => {
       element: window.document.createElement('div'),
       history: createMemoryHistory(),
       setHeaderActionMenu: () => {},
+      theme$: themeServiceMock.createTheme$(),
     } as unknown as AppMountParameters;
 
     expect(() => {

diff --git a/x-pack/plugins/observability/public/application/index.tsx b/x-pack/plugins/observability/public/application/index.tsx
@@ -14,6 +14,7 @@ import { AppMountParameters, APP_WRAPPER_CLASS, CoreStart } from '../../../../..
 import { EuiThemeProvider } from '../../../../../src/plugins/kibana_react/common';
 import {
   KibanaContextProvider,
+  KibanaThemeProvider,
   RedirectAppLinks,
 } from '../../../../../src/plugins/kibana_react/public';
 import { Storage } from '../../../../../src/plugins/kibana_utils/public';
@@ -58,7 +59,7 @@ export const renderApp = ({
   appMountParameters: AppMountParameters;
   ObservabilityPageTemplate: React.ComponentType<LazyObservabilityPageTemplateProps>;
 }) => {
-  const { element, history } = appMountParameters;
+  const { element, history, theme$ } = appMountParameters;
   const i18nCore = core.i18n;
   const isDarkMode = core.uiSettings.get('theme:darkMode');
 
@@ -73,30 +74,32 @@ export const renderApp = ({
   element.classList.add(APP_WRAPPER_CLASS);
 
   ReactDOM.render(
-    <KibanaContextProvider services={{ ...core, ...plugins, storage: new Storage(localStorage) }}>
-      <PluginContext.Provider
-        value={{
-          appMountParameters,
-          config,
-          core,
-          plugins,
-          observabilityRuleTypeRegistry,
-          ObservabilityPageTemplate,
-        }}
-      >
-        <Router history={history}>
-          <EuiThemeProvider darkMode={isDarkMode}>
-            <i18nCore.Context>
-              <RedirectAppLinks application={core.application} className={APP_WRAPPER_CLASS}>
-                <HasDataContextProvider>
-                  <App />
-                </HasDataContextProvider>
-              </RedirectAppLinks>
-            </i18nCore.Context>
-          </EuiThemeProvider>
-        </Router>
-      </PluginContext.Provider>
-    </KibanaContextProvider>,
+    <KibanaThemeProvider theme$={theme$}>
+      <KibanaContextProvider services={{ ...core, ...plugins, storage: new Storage(localStorage) }}>
+        <PluginContext.Provider
+          value={{
+            appMountParameters,
+            config,
+            core,
+            plugins,
+            observabilityRuleTypeRegistry,
+            ObservabilityPageTemplate,
+          }}
+        >
+          <Router history={history}>
+            <EuiThemeProvider darkMode={isDarkMode}>
+              <i18nCore.Context>
+                <RedirectAppLinks application={core.application} className={APP_WRAPPER_CLASS}>
+                  <HasDataContextProvider>
+                    <App />
+                  </HasDataContextProvider>
+                </RedirectAppLinks>
+              </i18nCore.Context>
+            </EuiThemeProvider>
+          </Router>
+        </PluginContext.Provider>
+      </KibanaContextProvider>
+    </KibanaThemeProvider>,
     element
   );
   return () => {

diff --git a/...ins/observability/public/components/shared/exploratory_view/header/add_to_case_action.tsx b/...ins/observability/public/components/shared/exploratory_view/header/add_to_case_action.tsx
@@ -31,6 +31,7 @@ export function AddToCaseAction({ lensAttributes, timeRange }: AddToCaseProps) {
   const {
     cases,
     application: { getUrlForApp },
+    theme,
   } = kServices;
 
   const getToastText = useCallback(
@@ -41,9 +42,10 @@ export function AddToCaseAction({ lensAttributes, timeRange }: AddToCaseProps) {
             deepLinkId: CasesDeepLinkId.cases,
             path: generateCaseViewPath({ detailName: theCase.id }),
           })}
-        />
+        />,
+        { theme$: theme?.theme$ }
       ),
-    [getUrlForApp]
+    [getUrlForApp, theme?.theme$]
   );
 
   const absoluteFromDate = parseRelativeDate(timeRange.from);