import { euiLightVars , euiDarkVars } from '@kbn/ui-shared-deps-src/theme' ; import { RouteRenderer , RouterProvider } from '@kbn/typed-react-router-config' ; import React from 'react' ; import { Route } from 'react-router-dom' ; import { DefaultTheme , ThemeProvider } from 'styled-components' ; import { APP_WRAPPER_CLASS } from '../../../../../../src/core/public' ; import { KibanaContextProvider , RedirectAppLinks , useUiSetting$ , } from '../../../../../../src/plugins/kibana_react/public' ; import { HeaderMenuPortal , InspectorContextProvider , } from '../../../../observability/public' ; import { ScrollToTopOnPathChange } from '../../components/app/main/ScrollToTopOnPathChange' ; import { AnomalyDetectionJobsContextProvider } from '../../context/anomaly_detection_jobs/anomaly_detection_jobs_context' ; import { ApmPluginContext , ApmPluginContextValue , } from '../../context/apm_plugin/apm_plugin_context' ; import { useApmPluginContext } from '../../context/apm_plugin/use_apm_plugin_context' ; import { BreadcrumbsContextProvider } from '../../context/breadcrumbs/context' ; import { LicenseProvider } from '../../context/license/license_context' ; import { TimeRangeIdContextProvider } from '../../context/time_range_id/time_range_id_context' ; import { UrlParamsProvider } from '../../context/url_params_context/url_params_context' ; import { ApmPluginStartDeps } from '../../plugin' ; import { ApmHeaderActionMenu } from '../shared/apm_header_action_menu' ; import { RedirectWithDefaultDateRange } from '../shared/redirect_with_default_date_range' ; import { apmRouter } from './apm_route_config' ; import { TrackPageview } from './track_pageview' ; export function ApmAppRoot ( { apmPluginContextValue , pluginsStart , } ) { const { appMountParameters , core } = apmPluginContextValue ; const { history } = appMountParameters ; const i18nCore = core . i18n ; return ( < RedirectAppLinks application = { core . application } className = { APP_WRAPPER_CLASS } data - test - subj = "apmMainContainer" role = "main" > < ApmPluginContext . Provider value = { apmPluginContextValue } > < KibanaContextProvider services = { { ... core , ... pluginsStart } } > < i18nCore . Context > < TimeRangeIdContextProvider > < RouterProvider history = { history } router = { apmRouter as any } > < RedirectWithDefaultDateRange > < TrackPageview > < BreadcrumbsContextProvider > < UrlParamsProvider > < LicenseProvider > < AnomalyDetectionJobsContextProvider > < InspectorContextProvider > < ApmThemeProvider > < MountApmHeaderActionMenu /> < Route component = { ScrollToTopOnPathChange } / > < RouteRenderer /> < /ApmThemeProvider> < /InspectorContextProvider> < /AnomalyDetectionJobsContextProvider> < /LicenseProvider> < /UrlParamsProvider> < /BreadcrumbsContextProvider> < /TrackPageview> < /RedirectWithDefaultDateRange> < /RouterProvider> < /TimeRangeIdContextProvider> < /i18nCore.Context> < /KibanaContextProvider> < /ApmPluginContext.Provider> < /RedirectAppLinks>); } function MountApmHeaderActionMenu ( ) { const { setHeaderActionMenu , theme$ } = useApmPluginContext ( ) . appMountParameters ; return ( < HeaderMenuPortal setHeaderActionMenu = { setHeaderActionMenu } theme$ = { theme$ } > < ApmHeaderActionMenu /> < /HeaderMenuPortal>); } function ApmThemeProvider ( { children } ) { const [ darkMode ] = useUiSetting$ < boolean > ( 'theme:darkMode' ) ; return ( < ThemeProvider theme = { ( outerTheme ? ) => ( { ... outerTheme , eui : darkMode ? euiDarkVars : euiLightVars , darkMode , } ) } > { children } < /ThemeProvider>); }