Preparation for High Contrast Mode, Observability domains

src/platform/plugins/shared/ai_assistant_management/selection/public/management_section/mount_section.tsx

@@ -64,7 +64,8 @@ export const mountManagementSection = async ({
           </AppContextProvider>
         </I18nProvider>
       </RedirectToHomeIfUnauthorized>,
-      theme$
+      theme$,
+      coreStart.userProfile
     ),
     element
   );

x-pack/platform/plugins/shared/logs_shared/public/test_utils/use_global_storybook_theme.tsx

@@ -7,7 +7,7 @@
 
 import type { DecoratorFn } from '@storybook/react';
 import React, { useEffect, useMemo, useState, FC, PropsWithChildren } from 'react';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, of } from 'rxjs';
 import type { CoreTheme } from '@kbn/core/public';
 import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
 import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
@@ -17,6 +17,7 @@ type StoryContext = Parameters<DecoratorFn>[1];
 export const useGlobalStorybookTheme = ({ globals: { euiTheme } }: StoryContext) => {
   const theme = useMemo(() => euiThemeFromId(euiTheme), [euiTheme]);
   const [theme$] = useState(() => new BehaviorSubject(theme));
+  const userProfile = { getUserProfile$: () => of(null) };
 
   useEffect(() => {
     theme$.next(theme);
@@ -25,6 +26,7 @@ export const useGlobalStorybookTheme = ({ globals: { euiTheme } }: StoryContext)
   return {
     theme,
     theme$,
+    userProfile,
   };
 };
 
@@ -33,9 +35,9 @@ export const GlobalStorybookThemeProviders: FC<
     storyContext: StoryContext;
   }>
 > = ({ children, storyContext }) => {
-  const { theme, theme$ } = useGlobalStorybookTheme(storyContext);
+  const { theme, theme$, userProfile } = useGlobalStorybookTheme(storyContext);
   return (
-    <KibanaThemeProvider theme={{ theme$ }}>
+    <KibanaThemeProvider theme={{ theme$ }} userProfile={userProfile}>
       <EuiThemeProvider darkMode={theme.darkMode}>{children}</EuiThemeProvider>
     </KibanaThemeProvider>
   );

x-pack/solutions/observability/plugins/apm/public/application/index.tsx

@@ -42,7 +42,7 @@ export const renderApp = ({
   apmServices: ApmServices;
   kibanaEnvironment: KibanaEnvContext;
 }) => {
-  const { element, theme$ } = appMountParameters;
+  const { element } = appMountParameters;
   const apmPluginContextValue = {
     appMountParameters,
     config,
@@ -74,7 +74,7 @@ export const renderApp = ({
   ReactDOM.render(
     <KibanaRenderContextProvider {...coreStart}>
       <KibanaThemeProvider
-        theme={{ theme$ }}
+        {...coreStart}
         modify={{
           breakpoint: {
             xxl: 1600,

x-pack/solutions/observability/plugins/apm/public/components/routing/app_root/index.tsx

@@ -109,11 +109,12 @@ export function ApmAppRoot({
 
 function MountApmHeaderActionMenu() {
   const {
-    appMountParameters: { setHeaderActionMenu, theme$ },
+    appMountParameters: { setHeaderActionMenu },
+    core,
   } = useApmPluginContext();
 
   return (
-    <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
+    <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} {...core}>
       <EuiFlexGroup responsive={false} gutterSize="s">
         <EuiFlexItem>
           <ApmHeaderActionMenu />

x-pack/solutions/observability/plugins/apm/public/embeddable/embeddable_context.tsx

@@ -53,7 +53,7 @@ export function ApmEmbeddableContext({
   return (
     <I18nContext>
       <ApmPluginContext.Provider value={services}>
-        <KibanaThemeProvider theme={deps.coreStart.theme}>
+        <KibanaThemeProvider {...deps.coreStart}>
           <KibanaContextProvider services={deps.coreStart}>
             <TimeRangeMetadataContextProvider
               uiSettings={deps.coreStart.uiSettings}

x-pack/solutions/observability/plugins/exploratory_view/public/application/index.tsx

@@ -20,7 +20,7 @@ import { PluginContext } from '../context/plugin_context';
 import { routes } from '../routes';
 import { ExploratoryViewPublicPluginsStart } from '../plugin';
 
-export type StartServices = Pick<CoreStart, 'analytics' | 'i18n' | 'theme'>;
+export type StartServices = Pick<CoreStart, 'analytics' | 'i18n' | 'theme' | 'userProfile'>;
 
 function App(props: { startServices: StartServices }) {
   return (

x-pack/solutions/observability/plugins/exploratory_view/public/application/types.ts

@@ -17,6 +17,7 @@ import type {
   OverlayStart,
   SavedObjectsStart,
   ThemeServiceStart,
+  UserProfileService,
 } from '@kbn/core/public';
 import { EmbeddableStateTransfer } from '@kbn/embeddable-plugin/public';
 import { NavigationPublicPluginStart } from '@kbn/navigation-plugin/public';
@@ -53,6 +54,7 @@ export interface ObservabilityAppServices {
   analytics: AnalyticsServiceStart;
   i18n: I18nStart;
   theme: ThemeServiceStart;
+  userProfile: UserProfileService;
   triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
   uiSettings: IUiSettingsClient;
   isDev?: boolean;

x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/components/action_menu/index.tsx

@@ -17,10 +17,10 @@ interface Props {
   lensAttributes: TypedLensByValueInput['attributes'] | null;
 }
 export function ExpViewActionMenu(props: Props) {
-  const { setHeaderActionMenu, theme$ } = useExploratoryView();
+  const { setHeaderActionMenu, ...startServices } = useExploratoryView();
 
   return (
-    <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
+    <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} {...startServices}>
       <EuiFlexGroup responsive={false} gutterSize="s">
         <EuiFlexItem>
           <ExpViewActionMenuContent {...props} />

x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/contexts/exploratory_view_config.tsx

@@ -12,7 +12,7 @@ import type { AppDataType, ConfigProps, ReportViewType, SeriesConfig } from '../
 
 export type ReportConfigMap = Record<string, Array<(config: ConfigProps) => SeriesConfig>>;
 
-type StartServices = Pick<CoreStart, 'analytics' | 'i18n' | 'theme'>;
+type StartServices = Pick<CoreStart, 'analytics' | 'i18n' | 'theme' | 'userProfile'>;
 
 interface ExploratoryViewContextValue extends StartServices {
   dataTypes: Array<{ id: AppDataType; label: string }>;

x-pack/solutions/observability/plugins/infra/public/alerting/log_threshold/components/alert_details_app_section/components/log_rate_analysis.tsx

@@ -232,6 +232,7 @@ export const LogRateAnalysis: FC<AlertDetailsLogRateAnalysisSectionProps> = ({ r
                 'storage',
                 'uiSettings',
                 'unifiedSearch',
+                'userProfile',
                 'theme',
                 'lens',
                 'i18n',

x-pack/solutions/observability/plugins/infra/public/apps/common_providers.tsx

@@ -5,7 +5,12 @@
  * 2.0.
  */
 
-import type { AppMountParameters, CoreStart } from '@kbn/core/public';
+import type {
+  AppMountParameters,
+  CoreStart,
+  ThemeServiceStart,
+  UserProfileService,
+} from '@kbn/core/public';
 import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
 import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
@@ -31,16 +36,17 @@ export const CommonInfraProviders: FC<
     storage: Storage;
     triggersActionsUI: TriggersAndActionsUIPublicPluginStart;
     setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
-    theme$: AppMountParameters['theme$'];
+    theme: ThemeServiceStart;
+    userProfile: UserProfileService;
   }>
-> = ({ children, triggersActionsUI, setHeaderActionMenu, appName, storage, theme$ }) => {
+> = ({ children, triggersActionsUI, setHeaderActionMenu, appName, storage, ...startServices }) => {
   const darkMode = useIsDarkMode();
 
   return (
     <TriggersActionsProvider triggersActionsUI={triggersActionsUI}>
       <EuiThemeProvider darkMode={darkMode}>
         <DataUIProviders appName={appName} storage={storage}>
-          <HeaderActionMenuProvider setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
+          <HeaderActionMenuProvider setHeaderActionMenu={setHeaderActionMenu} {...startServices}>
             <NavigationWarningPromptProvider>{children}</NavigationWarningPromptProvider>
           </HeaderActionMenuProvider>
         </DataUIProviders>

x-pack/solutions/observability/plugins/infra/public/apps/logs_app.tsx

@@ -77,8 +77,8 @@ const LogsApp: React.FC<{
         appName="Logs UI"
         setHeaderActionMenu={setHeaderActionMenu}
         storage={storage}
-        theme$={theme$}
         triggersActionsUI={plugins.triggersActionsUi}
+        {...core}
       >
         <Router history={history}>
           <KbnUrlStateStorageFromRouterProvider

x-pack/solutions/observability/plugins/infra/public/apps/metrics_app.tsx

@@ -93,8 +93,8 @@ const MetricsApp: React.FC<{
         appName="Metrics UI"
         setHeaderActionMenu={setHeaderActionMenu}
         storage={storage}
-        theme$={theme$}
         triggersActionsUI={plugins.triggersActionsUi}
+        {...core}
       >
         <SourceProvider sourceId="default">
           <MetricsDataViewProvider>

x-pack/solutions/observability/plugins/infra/public/containers/header_action_menu_provider.tsx

@@ -6,24 +6,31 @@
  */
 
 import type { PropsWithChildren } from 'react';
-import React from 'react';
-import type { AppMountParameters } from '@kbn/core/public';
+import React, { useContext } from 'react';
+import type { AppMountParameters, ThemeServiceStart, UserProfileService } from '@kbn/core/public';
 
 interface ContextProps {
-  setHeaderActionMenu?: AppMountParameters['setHeaderActionMenu'];
-  theme$?: AppMountParameters['theme$'];
+  setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
+  userProfile: UserProfileService;
+  theme: ThemeServiceStart;
 }
 
-export const HeaderActionMenuContext = React.createContext<ContextProps>({});
+export const HeaderActionMenuContext = React.createContext<ContextProps | null>(null);
 
 export const HeaderActionMenuProvider: React.FC<PropsWithChildren<Required<ContextProps>>> = ({
   setHeaderActionMenu,
-  theme$,
+  theme,
+  userProfile,
   children,
 }) => {
   return (
-    <HeaderActionMenuContext.Provider value={{ setHeaderActionMenu, theme$ }}>
+    <HeaderActionMenuContext.Provider value={{ setHeaderActionMenu, theme, userProfile }}>
       {children}
     </HeaderActionMenuContext.Provider>
   );
 };
+
+export const useHeaderActionMenu = () => {
+  // TODO: throw error if context is null?
+  return useContext(HeaderActionMenuContext);
+};

x-pack/solutions/observability/plugins/infra/public/pages/logs/page_content.tsx

@@ -7,7 +7,7 @@
 
 import { EuiFlexGroup, EuiFlexItem, EuiHeaderLink, EuiHeaderLinks } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React, { useContext } from 'react';
+import React from 'react';
 import { Routes, Route } from '@kbn/shared-ux-router';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { HeaderMenuPortal, useLinkProps } from '@kbn/observability-shared-plugin/public';
@@ -22,7 +22,7 @@ import { type LogsLocatorParams, LOGS_LOCATOR_ID } from '@kbn/logs-shared-plugin
 import { LazyAlertDropdownWrapper } from '../../alerting/log_threshold';
 import { HelpCenterContent } from '../../components/help_center_content';
 import { useReadOnlyBadge } from '../../hooks/use_readonly_badge';
-import { HeaderActionMenuContext } from '../../containers/header_action_menu_provider';
+import { useHeaderActionMenu } from '../../containers/header_action_menu_provider';
 import { RedirectWithQueryParams } from '../../utils/redirect_with_query_params';
 import { NotFoundPage } from '../404';
 import { getLogsAppRoutes } from './routes';
@@ -47,7 +47,7 @@ export const LogsPageContent: React.FunctionComponent = () => {
   const onboardingLocator = share?.url.locators.get<ObservabilityOnboardingLocatorParams>(
     OBSERVABILITY_ONBOARDING_LOCATOR
   );
-  const { setHeaderActionMenu, theme$ } = useContext(HeaderActionMenuContext);
+  const headerActionMenuContext = useHeaderActionMenu();
 
   const enableDeveloperRoutes = isDevMode();
 
@@ -64,8 +64,8 @@ export const LogsPageContent: React.FunctionComponent = () => {
     <>
       <HelpCenterContent feedbackLink={feedbackLinkUrl} appName={pageTitle} />
 
-      {setHeaderActionMenu && theme$ && (
-        <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
+      {headerActionMenuContext && (
+        <HeaderMenuPortal {...headerActionMenuContext}>
           <EuiFlexGroup responsive={false} gutterSize="s">
             <EuiFlexItem>
               <EuiHeaderLinks gutterSize="xs">

x-pack/solutions/observability/plugins/infra/public/pages/metrics/index.tsx

@@ -7,7 +7,7 @@
 
 import { i18n } from '@kbn/i18n';
 
-import React, { useContext } from 'react';
+import React from 'react';
 import { Routes, Route } from '@kbn/shared-ux-router';
 
 import {
@@ -30,7 +30,7 @@ import { MetricsAlertDropdown } from '../../alerting/common/components/metrics_a
 import { AlertPrefillProvider } from '../../alerting/use_alert_prefill';
 import { InfraMLCapabilitiesProvider } from '../../containers/ml/infra_ml_capabilities';
 import { AnomalyDetectionFlyout } from '../../components/ml/anomaly_detection/anomaly_detection_flyout';
-import { HeaderActionMenuContext } from '../../containers/header_action_menu_provider';
+import { useHeaderActionMenu } from '../../containers/header_action_menu_provider';
 import { NotFoundPage } from '../404';
 import { ReactQueryProvider } from '../../containers/react_query_provider';
 import { usePluginConfig } from '../../containers/plugin_config_context';
@@ -56,7 +56,7 @@ const HostsPage = dynamic(() => import('./hosts').then((mod) => ({ default: mod.
 export const InfrastructurePage = () => {
   const config = usePluginConfig();
   const { application } = useKibana<{ share: SharePublicStart }>().services;
-  const { setHeaderActionMenu, theme$ } = useContext(HeaderActionMenuContext);
+  const headerActionMenuContext = useHeaderActionMenu();
 
   const uiCapabilities = application?.capabilities;
 
@@ -83,8 +83,8 @@ export const InfrastructurePage = () => {
                   defaultMessage: 'Metrics',
                 })}
               />
-              {setHeaderActionMenu && theme$ && (
-                <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
+              {headerActionMenuContext && (
+                <HeaderMenuPortal {...headerActionMenuContext}>
                   <EuiFlexGroup responsive={false} gutterSize="s">
                     <EuiFlexItem>
                       <EuiHeaderLinks gutterSize="xs">

x-pack/solutions/observability/plugins/infra/public/test_utils/use_global_storybook_theme.tsx

@@ -8,7 +8,7 @@
 import type { DecoratorFn } from '@storybook/react';
 import type { FC, PropsWithChildren } from 'react';
 import React, { useEffect, useMemo, useState } from 'react';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, of } from 'rxjs';
 import type { CoreTheme } from '@kbn/core/public';
 import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
 import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
@@ -18,6 +18,7 @@ type StoryContext = Parameters<DecoratorFn>[1];
 export const useGlobalStorybookTheme = ({ globals: { euiTheme } }: StoryContext) => {
   const theme = useMemo(() => euiThemeFromId(euiTheme), [euiTheme]);
   const [theme$] = useState(() => new BehaviorSubject(theme));
+  const userProfile = { getUserProfile$: () => of(null) };
 
   useEffect(() => {
     theme$.next(theme);
@@ -26,6 +27,7 @@ export const useGlobalStorybookTheme = ({ globals: { euiTheme } }: StoryContext)
   return {
     theme,
     theme$,
+    userProfile,
   };
 };
 
@@ -34,9 +36,9 @@ export const GlobalStorybookThemeProviders: FC<
     storyContext: StoryContext;
   }>
 > = ({ children, storyContext }) => {
-  const { theme, theme$ } = useGlobalStorybookTheme(storyContext);
+  const { theme, theme$, userProfile } = useGlobalStorybookTheme(storyContext);
   return (
-    <KibanaThemeProvider theme={{ theme$ }}>
+    <KibanaThemeProvider theme={{ theme$ }} userProfile={userProfile}>
       <EuiThemeProvider darkMode={theme.darkMode}>{children}</EuiThemeProvider>
     </KibanaThemeProvider>
   );

x-pack/solutions/observability/plugins/inventory/public/components/app_root/index.tsx

@@ -6,6 +6,7 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import type { ThemeServiceStart, UserProfileService } from '@kbn/core/public';
 import { type AppMountParameters, type CoreStart } from '@kbn/core/public';
 import { HeaderMenuPortal } from '@kbn/observability-shared-plugin/public';
 import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
@@ -46,23 +47,29 @@ export function AppRoot({
         <RouterProvider history={history} router={inventoryRouter as any}>
           <UnifiedSearchProvider>
             <RouteRenderer />
-            <InventoryHeaderActionMenu appMountParameters={appMountParameters} />
+            <InventoryHeaderActionMenu
+              setHeaderActionMenu={appMountParameters.setHeaderActionMenu}
+              {...coreStart}
+            />
           </UnifiedSearchProvider>
         </RouterProvider>
       </RedirectAppLinks>
     </InventoryContextProvider>
   );
 }
 
-export function InventoryHeaderActionMenu({
-  appMountParameters,
-}: {
-  appMountParameters: AppMountParameters;
-}) {
-  const { setHeaderActionMenu, theme$ } = appMountParameters;
+interface InventoryHeaderActionMenuProps {
+  setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
+  theme: ThemeServiceStart;
+  userProfile: UserProfileService;
+}
 
+export function InventoryHeaderActionMenu({
+  setHeaderActionMenu,
+  ...startServices
+}: InventoryHeaderActionMenuProps) {
   return (
-    <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
+    <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} {...startServices}>
       <EuiFlexGroup responsive={false} gutterSize="s">
         <EuiFlexItem>
           <HeaderActionMenuItems />