use proper theme$ for devtool's mount

pgayvallet · pgayvallet · commit 6762b3d1a4e5 · 2021-11-09T15:17:42.000+01:00
diff --git a/src/plugins/dev_tools/public/application.tsx b/src/plugins/dev_tools/public/application.tsx
@@ -7,22 +7,23 @@
  */
 
 import React, { useEffect, useRef } from 'react';
-import { EMPTY } from 'rxjs';
+import { Observable } from 'rxjs';
 import ReactDOM from 'react-dom';
 import { HashRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
 import { EuiTab, EuiTabs, EuiToolTip } from '@elastic/eui';
 import { I18nProvider } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { euiThemeVars } from '@kbn/ui-shared-deps-src/theme';
 
-import { ApplicationStart, ChromeStart, ScopedHistory } from 'src/core/public';
+import { ApplicationStart, ChromeStart, ScopedHistory, CoreTheme } from 'src/core/public';
 
 import { DevToolApp } from './dev_tool';
 
 interface DevToolsWrapperProps {
   devTools: readonly DevToolApp[];
   activeDevTool: DevToolApp;
   updateRoute: (newRoute: string) => void;
+  theme$: Observable<CoreTheme>;
 }
 
 interface MountedDevToolDescriptor {
@@ -31,7 +32,7 @@ interface MountedDevToolDescriptor {
   unmountHandler: () => void;
 }
 
-function DevToolsWrapper({ devTools, activeDevTool, updateRoute }: DevToolsWrapperProps) {
+function DevToolsWrapper({ devTools, activeDevTool, updateRoute, theme$ }: DevToolsWrapperProps) {
   const mountedTool = useRef<MountedDevToolDescriptor | null>(null);
 
   useEffect(
@@ -85,8 +86,7 @@ function DevToolsWrapper({ devTools, activeDevTool, updateRoute }: DevToolsWrapp
               setHeaderActionMenu: () => undefined,
               // TODO: adapt to use Core's ScopedHistory
               history: {} as any,
-              // TODO: adapt to use Core's theme
-              theme$: EMPTY,
+              theme$,
             };
 
             const unmountHandler = await activeDevTool.mount(params);
@@ -151,6 +151,7 @@ export function renderApp(
   application: ApplicationStart,
   chrome: ChromeStart,
   history: ScopedHistory,
+  theme$: Observable<CoreTheme>,
   devTools: readonly DevToolApp[]
 ) {
   if (redirectOnMissingCapabilities(application)) {
@@ -178,6 +179,7 @@ export function renderApp(
                     updateRoute={props.history.push}
                     activeDevTool={devTool}
                     devTools={devTools}
+                    theme$={theme$}
                   />
                 )}
               />
diff --git a/src/plugins/dev_tools/public/plugin.ts b/src/plugins/dev_tools/public/plugin.ts
@@ -53,14 +53,14 @@ export class DevToolsPlugin implements Plugin<DevToolsSetup, void> {
       order: 9010,
       category: DEFAULT_APP_CATEGORIES.management,
       mount: async (params: AppMountParameters) => {
-        const { element, history } = params;
+        const { element, history, theme$ } = params;
         element.classList.add('devAppWrapper');
 
         const [core] = await getStartServices();
         const { application, chrome } = core;
 
         const { renderApp } = await import('./application');
-        return renderApp(element, application, chrome, history, this.getSortedDevTools());
+        return renderApp(element, application, chrome, history, theme$, this.getSortedDevTools());
       },
     });
 
