add theme$ to ManagementAppMountParams

elastic · Nov 17, 2021 · 5d5bb9b · 5d5bb9b
1 parent 04d5762
commit 5d5bb9b
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 6 deletions.
diff --git a/src/plugins/management/public/application.tsx b/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
   );
 

diff --git a/src/plugins/management/public/components/management_app/management_app.tsx b/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}

diff --git a/src/plugins/management/public/components/management_app/management_router.tsx b/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$}
                   />
                 )}
               />

diff --git a/src/plugins/management/public/components/management_app_wrapper/management_app_wrapper.tsx b/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);

diff --git a/src/plugins/management/public/types.ts b/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 {