[Observability] Passes theme$ to toMountPoint (elastic#120968)

* Treats toMountPoint - part II * Adds theme$ to exploratory view config * Uses theme$ from useExploratoryView hook * Uses theme$ in HeaderActionMenuContext * Better props for MonitoringApp
TinLe · Dec 22, 2021 · e2c723b · e2c723b
1 parent 297199b
commit e2c723b
Show file tree

Hide file tree

Showing 20 changed files with 55 additions and 25 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ActionMenu/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ActionMenu/index.tsx
@@ -64,6 +64,7 @@ export function UXActionMenu({
   return (
     <HeaderMenuPortal
       setHeaderActionMenu={appMountParameters.setHeaderActionMenu}
+      theme$={appMountParameters.theme$}
     >
       <EuiHeaderLinks gutterSize="xs">
         <EuiToolTip position="top" content={<p>{ANALYZE_MESSAGE}</p>}>

diff --git a/x-pack/plugins/apm/public/components/routing/app_root.tsx b/x-pack/plugins/apm/public/components/routing/app_root.tsx
@@ -90,10 +90,11 @@ export function ApmAppRoot({
 }
 
 function MountApmHeaderActionMenu() {
-  const { setHeaderActionMenu } = useApmPluginContext().appMountParameters;
+  const { setHeaderActionMenu, theme$ } =
+    useApmPluginContext().appMountParameters;
 
   return (
-    <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu}>
+    <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
       <ApmHeaderActionMenu />
     </HeaderMenuPortal>
   );

diff --git a/x-pack/plugins/infra/public/apps/common_providers.tsx b/x-pack/plugins/infra/public/apps/common_providers.tsx
@@ -26,14 +26,15 @@ export const CommonInfraProviders: React.FC<{
   storage: Storage;
   triggersActionsUI: TriggersAndActionsUIPublicPluginStart;
   setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
-}> = ({ children, triggersActionsUI, setHeaderActionMenu, appName, storage }) => {
+  theme$: AppMountParameters['theme$'];
+}> = ({ children, triggersActionsUI, setHeaderActionMenu, appName, storage, theme$ }) => {
   const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
 
   return (
     <TriggersActionsProvider triggersActionsUI={triggersActionsUI}>
       <EuiThemeProvider darkMode={darkMode}>
         <DataUIProviders appName={appName} storage={storage}>
-          <HeaderActionMenuProvider setHeaderActionMenu={setHeaderActionMenu}>
+          <HeaderActionMenuProvider setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
             <NavigationWarningPromptProvider>{children}</NavigationWarningPromptProvider>
           </HeaderActionMenuProvider>
         </DataUIProviders>

diff --git a/x-pack/plugins/infra/public/apps/logs_app.tsx b/x-pack/plugins/infra/public/apps/logs_app.tsx
@@ -62,6 +62,7 @@ const LogsApp: React.FC<{
         appName="Logs UI"
         setHeaderActionMenu={setHeaderActionMenu}
         storage={storage}
+        theme$={theme$}
         triggersActionsUI={plugins.triggersActionsUi}
       >
         <Router history={history}>

diff --git a/x-pack/plugins/infra/public/apps/metrics_app.tsx b/x-pack/plugins/infra/public/apps/metrics_app.tsx
@@ -63,6 +63,7 @@ const MetricsApp: React.FC<{
         appName="Metrics UI"
         setHeaderActionMenu={setHeaderActionMenu}
         storage={storage}
+        theme$={theme$}
         triggersActionsUI={plugins.triggersActionsUi}
       >
         <Router history={history}>

diff --git a/x-pack/plugins/infra/public/pages/logs/page_content.tsx b/x-pack/plugins/infra/public/pages/logs/page_content.tsx
@@ -28,7 +28,7 @@ import { useReadOnlyBadge } from '../../hooks/use_readonly_badge';
 
 export const LogsPageContent: React.FunctionComponent = () => {
   const uiCapabilities = useKibana().services.application?.capabilities;
-  const { setHeaderActionMenu } = useContext(HeaderActionMenuContext);
+  const { setHeaderActionMenu, theme$ } = useContext(HeaderActionMenuContext);
 
   const { initialize } = useLogSourceContext();
 
@@ -76,8 +76,8 @@ export const LogsPageContent: React.FunctionComponent = () => {
 
       <HelpCenterContent feedbackLink={feedbackLinkUrl} appName={pageTitle} />
 
-      {setHeaderActionMenu && (
-        <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu}>
+      {setHeaderActionMenu && theme$ && (
+        <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
           <EuiHeaderLinks gutterSize="xs">
             <EuiHeaderLink color={'text'} {...settingsLinkProps}>
               {settingsTabTitle}

diff --git a/x-pack/plugins/infra/public/pages/metrics/index.tsx b/x-pack/plugins/infra/public/pages/metrics/index.tsx
@@ -48,7 +48,7 @@ const ADD_DATA_LABEL = i18n.translate('xpack.infra.metricsHeaderAddDataButtonLab
 
 export const InfrastructurePage = ({ match }: RouteComponentProps) => {
   const uiCapabilities = useKibana().services.application?.capabilities;
-  const { setHeaderActionMenu } = useContext(HeaderActionMenuContext);
+  const { setHeaderActionMenu, theme$ } = useContext(HeaderActionMenuContext);
 
   const settingsTabTitle = i18n.translate('xpack.infra.metrics.settingsTabTitle', {
     defaultMessage: 'Settings',
@@ -84,8 +84,8 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
                     })}
                   />
 
-                  {setHeaderActionMenu && (
-                    <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu}>
+                  {setHeaderActionMenu && theme$ && (
+                    <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
                       <EuiHeaderLinks gutterSize="xs">
                         <EuiHeaderLink color={'text'} {...settingsLinkProps}>
                           {settingsTabTitle}

diff --git a/x-pack/plugins/infra/public/utils/header_action_menu_provider.tsx b/x-pack/plugins/infra/public/utils/header_action_menu_provider.tsx
@@ -10,16 +10,18 @@ import { AppMountParameters } from 'kibana/public';
 
 interface ContextProps {
   setHeaderActionMenu?: AppMountParameters['setHeaderActionMenu'];
+  theme$?: AppMountParameters['theme$'];
 }
 
 export const HeaderActionMenuContext = React.createContext<ContextProps>({});
 
 export const HeaderActionMenuProvider: React.FC<Required<ContextProps>> = ({
   setHeaderActionMenu,
+  theme$,
   children,
 }) => {
   return (
-    <HeaderActionMenuContext.Provider value={{ setHeaderActionMenu }}>
+    <HeaderActionMenuContext.Provider value={{ setHeaderActionMenu, theme$ }}>
       {children}
     </HeaderActionMenuContext.Provider>
   );

diff --git a/x-pack/plugins/monitoring/public/application/contexts/header_action_menu_context.tsx b/x-pack/plugins/monitoring/public/application/contexts/header_action_menu_context.tsx
@@ -10,6 +10,7 @@ import { AppMountParameters } from 'kibana/public';
 
 interface ContextProps {
   setHeaderActionMenu?: AppMountParameters['setHeaderActionMenu'];
+  theme$?: AppMountParameters['theme$'];
 }
 
 export const HeaderActionMenuContext = React.createContext<ContextProps>({});
diff --git a/x-pack/plugins/monitoring/public/application/index.tsx b/x-pack/plugins/monitoring/public/application/index.tsx
@@ -5,10 +5,11 @@
  * 2.0.
  */
 
-import { CoreStart, AppMountParameters, MountPoint } from 'kibana/public';
+import { CoreStart, AppMountParameters, MountPoint, CoreTheme } from 'kibana/public';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Switch, Redirect, Router } from 'react-router-dom';
+import { Observable } from 'rxjs';
 import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public';
 import { LoadingPage } from './pages/loading_page';
 import { LicensePage } from './pages/license_page';
@@ -62,7 +63,7 @@ import { AccessDeniedPage } from './pages/access_denied';
 export const renderApp = (
   core: CoreStart,
   plugins: MonitoringStartPluginDependencies,
-  { element, history, setHeaderActionMenu }: AppMountParameters,
+  { element, history, setHeaderActionMenu, theme$ }: AppMountParameters,
   externalConfig: ExternalConfig
 ) => {
   // dispatch synthetic hash change event to update hash history objects
@@ -77,6 +78,7 @@ export const renderApp = (
       plugins={plugins}
       externalConfig={externalConfig}
       setHeaderActionMenu={setHeaderActionMenu}
+      theme$={theme$}
     />,
     element
   );
@@ -92,14 +94,15 @@ const MonitoringApp: React.FC<{
   plugins: MonitoringStartPluginDependencies;
   externalConfig: ExternalConfig;
   setHeaderActionMenu: (element: MountPoint<HTMLElement> | undefined) => void;
-}> = ({ core, plugins, externalConfig, setHeaderActionMenu }) => {
+  theme$: Observable<CoreTheme>;
+}> = ({ core, plugins, externalConfig, setHeaderActionMenu, theme$ }) => {
   const history = createPreserveQueryHistory();
 
   return (
     <KibanaContextProvider services={{ ...core, ...plugins }}>
       <ExternalConfigContext.Provider value={externalConfig}>
         <GlobalStateProvider query={plugins.data.query} toasts={core.notifications.toasts}>
-          <HeaderActionMenuContext.Provider value={{ setHeaderActionMenu }}>
+          <HeaderActionMenuContext.Provider value={{ setHeaderActionMenu, theme$ }}>
             <MonitoringTimeContainer.Provider>
               <BreadcrumbContainer.Provider history={history}>
                 <Router history={history}>

diff --git a/x-pack/plugins/observability/public/components/app/header/header_menu.tsx b/x-pack/plugins/observability/public/components/app/header/header_menu.tsx
@@ -13,7 +13,7 @@ import HeaderMenuPortal from '../../shared/header_menu_portal';
 
 export function ObservabilityHeaderMenu(): React.ReactElement | null {
   const {
-    appMountParameters: { setHeaderActionMenu },
+    appMountParameters: { setHeaderActionMenu, theme$ },
     core: {
       http: {
         basePath: { prepend },
@@ -22,7 +22,7 @@ export function ObservabilityHeaderMenu(): React.ReactElement | null {
   } = usePluginContext();
 
   return (
-    <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu}>
+    <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
       <EuiHeaderLinks>
         <EuiHeaderLink
           color="primary"

diff --git a/.../observability/public/components/shared/exploratory_view/components/action_menu/index.tsx b/.../observability/public/components/shared/exploratory_view/components/action_menu/index.tsx
@@ -16,10 +16,10 @@ interface Props {
   lensAttributes: TypedLensByValueInput['attributes'] | null;
 }
 export function ExpViewActionMenu(props: Props) {
-  const { setHeaderActionMenu } = useExploratoryView();
+  const { setHeaderActionMenu, theme$ } = useExploratoryView();
 
   return (
-    <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu}>
+    <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
       <ExpViewActionMenuContent {...props} />
     </HeaderMenuPortal>
   );

diff --git a/...servability/public/components/shared/exploratory_view/contexts/exploatory_view_config.tsx b/...servability/public/components/shared/exploratory_view/contexts/exploatory_view_config.tsx
@@ -21,6 +21,7 @@ interface ExploratoryViewContextValue {
   indexPatterns: Record<string, string>;
   reportConfigMap: ReportConfigMap;
   setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
+  theme$: AppMountParameters['theme$'];
 }
 
 export const ExploratoryViewContext = createContext<ExploratoryViewContextValue>({
@@ -34,13 +35,15 @@ export function ExploratoryViewContextProvider({
   indexPatterns,
   reportConfigMap,
   setHeaderActionMenu,
+  theme$,
 }: { children: JSX.Element } & ExploratoryViewContextValue) {
   const value = {
     reportTypes,
     dataTypes,
     indexPatterns,
     reportConfigMap,
     setHeaderActionMenu,
+    theme$,
   };
 
   return (

diff --git a/...bservability/public/components/shared/exploratory_view/hooks/use_lens_attributes.test.tsx b/...bservability/public/components/shared/exploratory_view/hooks/use_lens_attributes.test.tsx
@@ -19,6 +19,7 @@ import * as indexPattern from './use_app_index_pattern';
 import * as theme from '../../../../hooks/use_theme';
 import { dataTypes, obsvReportConfigMap, reportTypesList } from '../obsv_exploratory_view';
 import { ExploratoryViewContextProvider } from '../contexts/exploatory_view_config';
+import { themeServiceMock } from 'src/core/public/mocks';
 
 const mockSingleSeries = [
   {
@@ -60,6 +61,7 @@ describe('useExpViewTimeRange', function () {
         indexPatterns={{}}
         reportConfigMap={obsvReportConfigMap}
         setHeaderActionMenu={jest.fn()}
+        theme$={themeServiceMock.createTheme$()}
       >
         <UrlStorageContextProvider storage={storage}>{children}</UrlStorageContextProvider>
       </ExploratoryViewContextProvider>

diff --git a/...plugins/observability/public/components/shared/exploratory_view/obsv_exploratory_view.tsx b/...plugins/observability/public/components/shared/exploratory_view/obsv_exploratory_view.tsx
@@ -92,6 +92,7 @@ export function ObservabilityExploratoryView() {
       indexPatterns={{}}
       reportConfigMap={obsvReportConfigMap}
       setHeaderActionMenu={appMountParameters.setHeaderActionMenu}
+      theme$={appMountParameters.theme$}
     >
       <ExploratoryViewPage />
     </ExploratoryViewContextProvider>

diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/rtl_helpers.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/rtl_helpers.tsx
@@ -14,7 +14,7 @@ import { Route, Router } from 'react-router-dom';
 import { createMemoryHistory, History } from 'history';
 import { CoreStart } from 'kibana/public';
 import { I18nProvider } from '@kbn/i18n-react';
-import { coreMock } from 'src/core/public/mocks';
+import { coreMock, themeServiceMock } from 'src/core/public/mocks';
 import {
   KibanaContextProvider,
   KibanaServices,
@@ -207,6 +207,7 @@ export function render<ExtraCore>(
           indexPatterns={{}}
           reportConfigMap={obsvReportConfigMap}
           setHeaderActionMenu={jest.fn()}
+          theme$={themeServiceMock.createTheme$()}
         >
           <UrlStorageContext.Provider value={{ ...seriesContextValue }}>
             {ui}

diff --git a/x-pack/plugins/observability/public/components/shared/header_menu_portal.test.tsx b/x-pack/plugins/observability/public/components/shared/header_menu_portal.test.tsx
@@ -8,14 +8,18 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 import HeaderMenuPortal from './header_menu_portal';
+import { themeServiceMock } from '../../../../../../src/core/public/mocks';
 
 describe('HeaderMenuPortal', () => {
   describe('when unmounted', () => {
     it('calls setHeaderActionMenu with undefined', () => {
       const setHeaderActionMenu = jest.fn();
+      const theme$ = themeServiceMock.createTheme$();
 
       const { unmount } = render(
-        <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu}>test</HeaderMenuPortal>
+        <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
+          test
+        </HeaderMenuPortal>
       );
 
       unmount();

diff --git a/x-pack/plugins/observability/public/components/shared/header_menu_portal.tsx b/x-pack/plugins/observability/public/components/shared/header_menu_portal.tsx
@@ -11,20 +11,24 @@ import { toMountPoint } from '../../../../../../src/plugins/kibana_react/public'
 import { HeaderMenuPortalProps } from './types';
 
 // eslint-disable-next-line import/no-default-export
-export default function HeaderMenuPortal({ children, setHeaderActionMenu }: HeaderMenuPortalProps) {
+export default function HeaderMenuPortal({
+  children,
+  setHeaderActionMenu,
+  theme$,
+}: HeaderMenuPortalProps) {
   const portalNode = useMemo(() => createPortalNode(), []);
 
   useEffect(() => {
     setHeaderActionMenu((element) => {
-      const mount = toMountPoint(<OutPortal node={portalNode} />);
+      const mount = toMountPoint(<OutPortal node={portalNode} />, { theme$ });
       return mount(element);
     });
 
     return () => {
       portalNode.unmount();
       setHeaderActionMenu(undefined);
     };
-  }, [portalNode, setHeaderActionMenu]);
+  }, [portalNode, setHeaderActionMenu, theme$]);
 
   return <InPortal node={portalNode}>{children}</InPortal>;
 }
diff --git a/x-pack/plugins/observability/public/components/shared/types.ts b/x-pack/plugins/observability/public/components/shared/types.ts
@@ -12,6 +12,7 @@ import { UXMetrics } from './core_web_vitals';
 export interface HeaderMenuPortalProps {
   children: ReactNode;
   setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
+  theme$: AppMountParameters['theme$'];
 }
 
 export interface CoreVitalProps {

diff --git a/x-pack/plugins/uptime/public/components/common/header/action_menu.tsx b/x-pack/plugins/uptime/public/components/common/header/action_menu.tsx
@@ -18,7 +18,10 @@ export const ActionMenu = ({
   appMountParameters: AppMountParameters;
   config: UptimeConfig;
 }) => (
-  <HeaderMenuPortal setHeaderActionMenu={appMountParameters.setHeaderActionMenu}>
+  <HeaderMenuPortal
+    setHeaderActionMenu={appMountParameters.setHeaderActionMenu}
+    theme$={appMountParameters.theme$}
+  >
     <ActionMenuContent config={config} />
   </HeaderMenuPortal>
 );