From bd8e699d360c02c3b380a3d85c596822c49a0c3c Mon Sep 17 00:00:00 2001 From: Claudio Procida Date: Thu, 9 Dec 2021 17:53:36 +0100 Subject: [PATCH 1/5] Treats toMountPoint - part II --- .../components/app/RumDashboard/ActionMenu/index.tsx | 1 + .../plugins/apm/public/components/routing/app_root.tsx | 5 +++-- .../public/components/app/header/header_menu.tsx | 4 ++-- .../components/shared/header_menu_portal.test.tsx | 6 +++++- .../public/components/shared/header_menu_portal.tsx | 10 +++++++--- .../observability/public/components/shared/types.ts | 1 + .../public/components/common/header/action_menu.tsx | 5 ++++- 7 files changed, 23 insertions(+), 9 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 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/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 ( - + { 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; }) => ( - + ); From 666a87d4f399acbf0db8320250d99396ccbaf783 Mon Sep 17 00:00:00 2001 From: Claudio Procida Date: Mon, 13 Dec 2021 15:18:58 +0100 Subject: [PATCH 2/5] Adds theme$ to exploratory view config --- .../exploratory_view/contexts/exploatory_view_config.tsx | 3 +++ .../shared/exploratory_view/hooks/use_lens_attributes.test.tsx | 2 ++ .../shared/exploratory_view/obsv_exploratory_view.tsx | 1 + .../public/components/shared/exploratory_view/rtl_helpers.tsx | 3 ++- 4 files changed, 8 insertions(+), 1 deletion(-) 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} From 167e8f5a3ea06dcfb2ea657adab56c28bb8559e9 Mon Sep 17 00:00:00 2001 From: Claudio Procida Date: Mon, 13 Dec 2021 16:48:40 +0100 Subject: [PATCH 3/5] Uses theme$ from useExploratoryView hook --- .../shared/exploratory_view/components/action_menu/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/components/action_menu/index.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/components/action_menu/index.tsx index b5ccda37003181..a83db70ab65c54 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/components/action_menu/index.tsx +++ b/x-pack/plugins/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 ( - + ); From 17683c83239618be1abbe080bfc902f152609144 Mon Sep 17 00:00:00 2001 From: Claudio Procida Date: Mon, 13 Dec 2021 17:59:04 +0100 Subject: [PATCH 4/5] Uses theme$ in HeaderActionMenuContext --- x-pack/plugins/infra/public/apps/common_providers.tsx | 5 +++-- x-pack/plugins/infra/public/apps/logs_app.tsx | 1 + x-pack/plugins/infra/public/apps/metrics_app.tsx | 1 + x-pack/plugins/infra/public/pages/logs/page_content.tsx | 6 +++--- x-pack/plugins/infra/public/pages/metrics/index.tsx | 6 +++--- .../infra/public/utils/header_action_menu_provider.tsx | 4 +++- .../application/contexts/header_action_menu_context.tsx | 1 + x-pack/plugins/monitoring/public/application/index.tsx | 4 +++- 8 files changed, 18 insertions(+), 10 deletions(-) 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..59610ffcd379f3 100644 --- a/x-pack/plugins/monitoring/public/application/index.tsx +++ b/x-pack/plugins/monitoring/public/application/index.tsx @@ -99,7 +99,9 @@ const MonitoringApp: React.FC<{ - + From d1139742e8ae62e6badeb672c2ece8b359a9edd6 Mon Sep 17 00:00:00 2001 From: Claudio Procida Date: Mon, 13 Dec 2021 18:11:36 +0100 Subject: [PATCH 5/5] Better props for MonitoringApp --- .../plugins/monitoring/public/application/index.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/x-pack/plugins/monitoring/public/application/index.tsx b/x-pack/plugins/monitoring/public/application/index.tsx index 59610ffcd379f3..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,16 +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 ( - +