add theme$ to ManagementAppMountParams

src/plugins/management/public/application.tsx

@@ -13,11 +13,16 @@ import { AppMountParameters } from 'kibana/public';
 import { ManagementApp, ManagementAppDependencies } from './components/management_app';
 
 export const renderApp = async (
-  { history, appBasePath, element }: AppMountParameters,
+  { history, appBasePath, element, theme$ }: AppMountParameters,
   dependencies: ManagementAppDependencies
 ) => {
   ReactDOM.render(
-    <ManagementApp dependencies={dependencies} appBasePath={appBasePath} history={history} />,
+    <ManagementApp
+      dependencies={dependencies}
+      appBasePath={appBasePath}
+      history={history}
+      theme$={theme$}
+    />,
     element
   );
 

src/plugins/management/public/components/management_app/management_app.tsx

@@ -25,6 +25,7 @@ import { SectionsServiceStart } from '../../types';
 interface ManagementAppProps {
   appBasePath: string;
   history: AppMountParameters['history'];
+  theme$: AppMountParameters['theme$'];
   dependencies: ManagementAppDependencies;
 }
 
@@ -34,7 +35,7 @@ export interface ManagementAppDependencies {
   setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
 }
 
-export const ManagementApp = ({ dependencies, history }: ManagementAppProps) => {
+export const ManagementApp = ({ dependencies, history, theme$ }: ManagementAppProps) => {
   const { setBreadcrumbs } = dependencies;
   const [selectedId, setSelectedId] = useState<string>('');
   const [sections, setSections] = useState<ManagementSection[]>();
@@ -93,6 +94,7 @@ export const ManagementApp = ({ dependencies, history }: ManagementAppProps) =>
       >
         <ManagementRouter
           history={history}
+          theme$={theme$}
           setBreadcrumbs={setBreadcrumbsScoped}
           onAppMounted={onAppMounted}
           sections={sections}

src/plugins/management/public/components/management_app/management_router.tsx

@@ -16,14 +16,22 @@ import { ManagementSection } from '../../utils';
 
 interface ManagementRouterProps {
   history: AppMountParameters['history'];
+  theme$: AppMountParameters['theme$'];
   dependencies: ManagementAppDependencies;
   setBreadcrumbs: (crumbs?: ChromeBreadcrumb[], appHistory?: ScopedHistory) => void;
   onAppMounted: (id: string) => void;
   sections: ManagementSection[];
 }
 
 export const ManagementRouter = memo(
-  ({ dependencies, history, setBreadcrumbs, onAppMounted, sections }: ManagementRouterProps) => (
+  ({
+    dependencies,
+    history,
+    setBreadcrumbs,
+    onAppMounted,
+    sections,
+    theme$,
+  }: ManagementRouterProps) => (
     <Router history={history}>
       <Switch>
         {sections.map((section) =>
@@ -38,6 +46,7 @@ export const ManagementRouter = memo(
                     setBreadcrumbs={setBreadcrumbs}
                     onAppMounted={onAppMounted}
                     history={history}
+                    theme$={theme$}
                   />
                 )}
               />

src/plugins/management/public/components/management_app_wrapper/management_app_wrapper.tsx

@@ -19,14 +19,15 @@ interface ManagementSectionWrapperProps {
   setBreadcrumbs: (crumbs?: ChromeBreadcrumb[], history?: ScopedHistory) => void;
   onAppMounted: (id: string) => void;
   history: AppMountParameters['history'];
+  theme$: AppMountParameters['theme$'];
 }
 
 export class ManagementAppWrapper extends Component<ManagementSectionWrapperProps> {
   private unmount?: Unmount;
   private mountElementRef = createRef<HTMLDivElement>();
 
   componentDidMount() {
-    const { setBreadcrumbs, app, onAppMounted, history } = this.props;
+    const { setBreadcrumbs, app, onAppMounted, history, theme$ } = this.props;
     const { mount, basePath } = app;
     const appHistory = history.createSubHistory(app.basePath);
 
@@ -35,6 +36,7 @@ export class ManagementAppWrapper extends Component<ManagementSectionWrapperProp
       setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => setBreadcrumbs(crumbs, appHistory),
       element: this.mountElementRef.current!,
       history: appHistory,
+      theme$,
     });
 
     onAppMounted(app.id);

src/plugins/management/public/types.ts

@@ -6,10 +6,11 @@
  * Side Public License, v 1.
  */
 
+import { Observable } from 'rxjs';
 import { ScopedHistory, Capabilities } from 'kibana/public';
 import type { LocatorPublic } from 'src/plugins/share/common';
 import { ManagementSection, RegisterManagementSectionArgs } from './utils';
-import { ChromeBreadcrumb } from '../../../core/public/';
+import { ChromeBreadcrumb, CoreTheme } from '../../../core/public/';
 import type { ManagementAppLocatorParams } from '../common/locator';
 
 export interface ManagementSetup {
@@ -63,6 +64,7 @@ export interface ManagementAppMountParams {
   element: HTMLElement; // element the section should render into
   setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => void;
   history: ScopedHistory;
+  theme$: Observable<CoreTheme>;
 }
 
 export interface CreateManagementItemArgs {

x-pack/plugins/security/public/management/api_keys/api_keys_management_app.test.tsx

@@ -11,7 +11,7 @@ jest.mock('./api_keys_grid', () => ({
 
 import { act } from '@testing-library/react';
 
-import { coreMock, scopedHistoryMock } from 'src/core/public/mocks';
+import { coreMock, scopedHistoryMock, themeServiceMock } from 'src/core/public/mocks';
 import type { Unmount } from 'src/plugins/management/public/types';
 
 import { securityMock } from '../../mocks';
@@ -52,6 +52,7 @@ describe('apiKeysManagementApp', () => {
           element: container,
           setBreadcrumbs,
           history: scopedHistoryMock.create(),
+          theme$: themeServiceMock.createTheme$(),
         });
     });
 

x-pack/plugins/security/public/management/role_mappings/role_mappings_management_app.test.tsx

@@ -8,7 +8,7 @@
 import { act } from '@testing-library/react';
 import { noop } from 'lodash';
 
-import { coreMock, scopedHistoryMock } from 'src/core/public/mocks';
+import { coreMock, scopedHistoryMock, themeServiceMock } from 'src/core/public/mocks';
 import type { Unmount } from 'src/plugins/management/public/types';
 
 import { roleMappingsManagementApp } from './role_mappings_management_app';
@@ -46,6 +46,7 @@ async function mountApp(basePath: string, pathname: string) {
         element: container,
         setBreadcrumbs,
         history: scopedHistoryMock.create({ pathname }),
+        theme$: themeServiceMock.createTheme$(),
       });
   });
 

x-pack/plugins/security/public/management/roles/roles_management_app.test.tsx

@@ -8,7 +8,7 @@
 import { act } from '@testing-library/react';
 import { noop } from 'lodash';
 
-import { coreMock, scopedHistoryMock } from 'src/core/public/mocks';
+import { coreMock, scopedHistoryMock, themeServiceMock } from 'src/core/public/mocks';
 import type { Unmount } from 'src/plugins/management/public/types';
 
 import { featuresPluginMock } from '../../../../features/public/mocks';
@@ -48,6 +48,7 @@ async function mountApp(basePath: string, pathname: string) {
         element: container,
         setBreadcrumbs,
         history: scopedHistoryMock.create({ pathname }),
+        theme$: themeServiceMock.createTheme$(),
       });
   });
 

x-pack/plugins/security/public/management/users/users_management_app.test.tsx

@@ -8,7 +8,7 @@
 import { act } from '@testing-library/react';
 import { noop } from 'lodash';
 
-import { coreMock, scopedHistoryMock } from 'src/core/public/mocks';
+import { coreMock, scopedHistoryMock, themeServiceMock } from 'src/core/public/mocks';
 import type { Unmount } from 'src/plugins/management/public/types';
 
 import { securityMock } from '../../mocks';
@@ -33,6 +33,7 @@ describe('usersManagementApp', () => {
         element,
         setBreadcrumbs,
         history,
+        theme$: themeServiceMock.createTheme$(),
       });
     });
 

x-pack/plugins/spaces/public/management/spaces_management_app.test.tsx

@@ -18,7 +18,7 @@ jest.mock('./edit_space', () => ({
   },
 }));
 
-import { coreMock, scopedHistoryMock } from 'src/core/public/mocks';
+import { coreMock, scopedHistoryMock, themeServiceMock } from 'src/core/public/mocks';
 
 import { featuresPluginMock } from '../../../features/public/mocks';
 import type { PluginsStart } from '../plugin';
@@ -51,6 +51,7 @@ async function mountApp(basePath: string, pathname: string, spaceId?: string) {
       element: container,
       setBreadcrumbs,
       history: scopedHistoryMock.create({ pathname }),
+      theme$: themeServiceMock.createTheme$(),
     });
 
   return { unmount, container, setBreadcrumbs, docTitle: coreStart.chrome.docTitle };