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
index 6e18eb61f355c3..ae29016956feca 100644
--- 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 (
{ANALYZE_MESSAGE}
}>
diff --git a/x-pack/plugins/apm/public/components/routing/app_root.tsx b/x-pack/plugins/apm/public/components/routing/app_root.tsx
index 0e8e6732dc943f..5750146bef722b 100644
--- 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 (
-
+
);
diff --git a/x-pack/plugins/infra/public/apps/common_providers.tsx b/x-pack/plugins/infra/public/apps/common_providers.tsx
index 39808ab7d3ac47..eb1ce01fac9638 100644
--- 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$('theme:darkMode');
return (
-
+
{children}
diff --git a/x-pack/plugins/infra/public/apps/logs_app.tsx b/x-pack/plugins/infra/public/apps/logs_app.tsx
index 6ebaf3e805d913..4e9936ad4123fa 100644
--- 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}
>
diff --git a/x-pack/plugins/infra/public/apps/metrics_app.tsx b/x-pack/plugins/infra/public/apps/metrics_app.tsx
index 33dcccd46defb5..903ea7a808ea6c 100644
--- 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}
>
diff --git a/x-pack/plugins/infra/public/pages/logs/page_content.tsx b/x-pack/plugins/infra/public/pages/logs/page_content.tsx
index a82cb55dc7241e..b8fc4ebef26c53 100644
--- 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 = () => {
- {setHeaderActionMenu && (
-
+ {setHeaderActionMenu && theme$ && (
+
{settingsTabTitle}
diff --git a/x-pack/plugins/infra/public/pages/metrics/index.tsx b/x-pack/plugins/infra/public/pages/metrics/index.tsx
index 1a79cd996087d9..316ef1ca0b57f8 100644
--- 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 && (
-
+ {setHeaderActionMenu && theme$ && (
+
{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
index 0053fa3a9e5d19..bd54af25987eb4 100644
--- 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({});
export const HeaderActionMenuProvider: React.FC> = ({
setHeaderActionMenu,
+ theme$,
children,
}) => {
return (
-
+
{children}
);
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
index 88862d9e6a8074..031db07327e36a 100644
--- 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({});
diff --git a/x-pack/plugins/monitoring/public/application/index.tsx b/x-pack/plugins/monitoring/public/application/index.tsx
index 60af11ff8a6a32..a08d9f2648eca4 100644
--- 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 | undefined) => void;
-}> = ({ core, plugins, externalConfig, setHeaderActionMenu }) => {
+ theme$: Observable;
+}> = ({ core, plugins, externalConfig, setHeaderActionMenu, theme$ }) => {
const history = createPreserveQueryHistory();
return (
-
+
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
index 550cfe46afb3f1..5c499ca916d31d 100644
--- 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 (
-
+
+
);
diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/contexts/exploatory_view_config.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/contexts/exploatory_view_config.tsx
index fe7ea3884880a3..b7734e675f3940 100644
--- a/x-pack/plugins/observability/public/components/shared/exploratory_view/contexts/exploatory_view_config.tsx
+++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/contexts/exploatory_view_config.tsx
@@ -21,6 +21,7 @@ interface ExploratoryViewContextValue {
indexPatterns: Record;
reportConfigMap: ReportConfigMap;
setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
+ theme$: AppMountParameters['theme$'];
}
export const ExploratoryViewContext = createContext({
@@ -34,6 +35,7 @@ export function ExploratoryViewContextProvider({
indexPatterns,
reportConfigMap,
setHeaderActionMenu,
+ theme$,
}: { children: JSX.Element } & ExploratoryViewContextValue) {
const value = {
reportTypes,
@@ -41,6 +43,7 @@ export function ExploratoryViewContextProvider({
indexPatterns,
reportConfigMap,
setHeaderActionMenu,
+ theme$,
};
return (
diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/hooks/use_lens_attributes.test.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/hooks/use_lens_attributes.test.tsx
index 654421dfdf60a2..9ea1da7e644499 100644
--- a/x-pack/plugins/observability/public/components/shared/exploratory_view/hooks/use_lens_attributes.test.tsx
+++ b/x-pack/plugins/observability/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$()}
>
{children}
diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/obsv_exploratory_view.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/obsv_exploratory_view.tsx
index 04e291b1b6629a..fe020456b05828 100644
--- a/x-pack/plugins/observability/public/components/shared/exploratory_view/obsv_exploratory_view.tsx
+++ b/x-pack/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$}
>
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
index d2523d5fb96f73..cdcbb6b335d79a 100644
--- 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(
indexPatterns={{}}
reportConfigMap={obsvReportConfigMap}
setHeaderActionMenu={jest.fn()}
+ theme$={themeServiceMock.createTheme$()}
>
{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
index 4e9a1ae2c587f0..a3254b6d98b7ab 100644
--- 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(
- test
+
+ test
+
);
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
index 6c3b558c5e61df..5b645605f7f1b8 100644
--- 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,12 +11,16 @@ 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();
+ const mount = toMountPoint(, { theme$ });
return mount(element);
});
@@ -24,7 +28,7 @@ export default function HeaderMenuPortal({ children, setHeaderActionMenu }: Head
portalNode.unmount();
setHeaderActionMenu(undefined);
};
- }, [portalNode, setHeaderActionMenu]);
+ }, [portalNode, setHeaderActionMenu, theme$]);
return {children};
}
diff --git a/x-pack/plugins/observability/public/components/shared/types.ts b/x-pack/plugins/observability/public/components/shared/types.ts
index 3dd074bcbf2047..e08d2f19e5706c 100644
--- 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
index 84dd03b6aa1898..f2a17c9aef99d9 100644
--- 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;
}) => (
-
+
);