Preparation for High Contrast Mode, Analytics Experience domains (ela…

…stic#202608)

## Summary

**Reviewers: Please test the code paths affected by this PR. See the
"Risks" section below.**

Part of work for enabling "high contrast mode" in Kibana. See
elastic#176219.

**Background:**
Kibana will soon have a user profile setting to allow users to enable
"high contrast mode." This setting will activate a flag with
`<EuiProvider>` that causes EUI components to render with higher
contrast visual elements. Consumer plugins and packages need to be
updated selected places where `<EuiProvider>` is wrapped, to pass the
`UserProfileService` service dependency from the CoreStart contract.

**NOTE:** **EUI currently does not yet support the high-contrast mode
flag**, but support for that is expected to come in around 2 weeks.
These first PRs are simply preparing the code by wiring up the
`UserProvideService`.

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [X] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [X] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### Risks

Does this PR introduce any risks? For example, consider risks like hard
to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified
risk. Invite stakeholders and evaluate how to proceed before merging.

- [ ] [medium/high] The implementor of this change did not manually test
the affected code paths and relied on type-checking and functional tests
to drive the changes. Code owners for this PR need to manually test the
affected code paths.
- [ ] [medium] The `UserProfileService` dependency comes from the
CoreStart contract. If acquiring the service causes synchronous code to
become asynchronous, check for race conditions or errors in rendering
React components. Code owners for this PR need to manually test the
affected code paths.

---------

Co-authored-by: kibanamachine <[email protected]>

examples/controls_example/public/app/app.tsx

@@ -48,7 +48,7 @@ const App = ({
   }
 
   return (
-    <KibanaRenderContextProvider i18n={core.i18n} theme={core.theme}>
+    <KibanaRenderContextProvider {...core}>
       <EuiPage>
         <EuiPageBody>
           <EuiPageSection>

examples/controls_example/public/app/react_control_example/react_control_example.tsx

@@ -315,10 +315,7 @@ export const ReactControlExample = ({
                   <EuiCodeBlock language="json">
                     {JSON.stringify(controlGroupApi?.serializeState(), null, 2)}
                   </EuiCodeBlock>,
-                  {
-                    theme: core.theme,
-                    i18n: core.i18n,
-                  }
+                  core
                 )
               );
             }}

examples/discover_customization_examples/public/plugin.tsx

@@ -52,11 +52,11 @@ export class DiscoverCustomizationExamplesPlugin implements Plugin {
       title: PLUGIN_NAME,
       visibleIn: [],
       mount: async (appMountParams) => {
-        const [_, { discover, data }] = await core.getStartServices();
+        const [coreStart, { discover, data }] = await core.getStartServices();
 
         ReactDOM.render(
           <I18nProvider>
-            <KibanaThemeProvider theme={core.theme}>
+            <KibanaThemeProvider {...coreStart}>
               <Router history={appMountParams.history}>
                 <Routes>
                   <Route>

examples/embeddable_examples/public/app/app.tsx

@@ -81,7 +81,7 @@ const App = ({
   }, [pages]);
 
   return (
-    <KibanaRenderContextProvider i18n={core.i18n} theme={core.theme}>
+    <KibanaRenderContextProvider {...core}>
       <Router basename={mountParams.appBasePath}>
         <EuiPageTemplate restrictWidth={true} offset={0}>
           <EuiPageTemplate.Sidebar sticky={true}>

examples/embeddable_examples/public/react_embeddables/data_table/data_table_react_embeddable.tsx

@@ -99,7 +99,7 @@ export const getDataTableFactory = (
                 width: 100%;
               `}
             >
-              <KibanaRenderContextProvider theme={core.theme} i18n={core.i18n}>
+              <KibanaRenderContextProvider {...core}>
                 <KibanaContextProvider services={allServices}>
                   <CellActionsProvider
                     getTriggerCompatibleActions={services.uiActions.getTriggerCompatibleActions}

examples/embeddable_examples/public/react_embeddables/saved_book/saved_book_editor.tsx

@@ -69,10 +69,7 @@ export const openSavedBookEditor = (
             resolve({ addToLibrary });
           }}
         />,
-        {
-          theme: core.theme,
-          i18n: core.i18n,
-        }
+        core
       ),
       {
         type: isCreate ? 'overlay' : 'push',

examples/expressions_explorer/public/app.tsx

@@ -24,6 +24,7 @@ import {
   I18nStart,
   IUiSettingsClient,
   ThemeServiceStart,
+  UserProfileService,
 } from '@kbn/core/public';
 import { ExpressionsStart } from '@kbn/expressions-plugin/public';
 import { Start as InspectorStart } from '@kbn/inspector-plugin/public';
@@ -41,6 +42,7 @@ interface Props {
   inspector: InspectorStart;
   actions: UiActionsStart;
   uiSettings: IUiSettingsClient;
+  userProfile: UserProfileService;
   settings: SettingsStart;
   theme: ThemeServiceStart;
   i18n: I18nStart;
@@ -52,15 +54,13 @@ const ExpressionsExplorer = ({
   actions,
   uiSettings,
   settings,
-  i18n,
-  theme,
+  ...startServices
 }: Props) => {
   const { Provider: KibanaReactContextProvider } = createKibanaReactContext({
     uiSettings,
     settings,
-    theme,
+    theme: startServices.theme,
   });
-  const startServices = { i18n, theme };
   return (
     <KibanaRenderContextProvider {...startServices}>
       <KibanaReactContextProvider>

examples/expressions_explorer/public/plugin.tsx

@@ -58,6 +58,7 @@ export class ExpressionsExplorerPlugin implements Plugin<void, void, SetupDeps,
             inspector: depsStart.inspector,
             actions: depsStart.uiActions,
             uiSettings: core.uiSettings,
+            userProfile: coreStart.userProfile,
             settings: core.settings,
             theme: coreStart.theme,
             i18n: coreStart.i18n,

examples/grid_example/public/get_panel_id.tsx

@@ -98,10 +98,7 @@ export const getPanelId = async ({
             session.close();
           }}
         />,
-        {
-          theme: coreStart.theme,
-          i18n: coreStart.i18n,
-        }
+        coreStart
       )
     );
   });

examples/portable_dashboards_example/public/app.tsx

@@ -56,7 +56,7 @@ const PortableDashboardsDemos = ({
   history: AppMountParameters['history'];
 }) => {
   return (
-    <KibanaRenderContextProvider i18n={coreStart.i18n} theme={coreStart.theme}>
+    <KibanaRenderContextProvider {...coreStart}>
       <Router history={history}>
         <Routes>
           <Route exact path="/">

examples/resizable_layout_examples/public/application.tsx

@@ -8,7 +8,7 @@
  */
 
 import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
-import type { AppMountParameters } from '@kbn/core/public';
+import type { AppMountParameters, CoreStart } from '@kbn/core/public';
 import { I18nProvider } from '@kbn/i18n-react';
 import React, { ReactNode, useState } from 'react';
 import ReactDOM from 'react-dom';
@@ -98,10 +98,10 @@ const ResizableSection = ({
   );
 };
 
-export const renderApp = ({ element, theme$ }: AppMountParameters) => {
+export const renderApp = (coreStart: CoreStart, { element }: AppMountParameters) => {
   ReactDOM.render(
     <I18nProvider>
-      <KibanaThemeProvider theme={{ theme$ }}>
+      <KibanaThemeProvider {...coreStart}>
         <div
           css={css`
             height: calc(100vh - var(--euiFixedHeadersOffset, 0));

examples/resizable_layout_examples/public/plugin.tsx

@@ -25,10 +25,11 @@ export class ResizableLayoutExamplesPlugin implements Plugin {
       title: PLUGIN_NAME,
       visibleIn: [],
       mount: async (params: AppMountParameters) => {
+        const [coreStart] = await core.getStartServices();
         // Load application bundle
         const { renderApp } = await import('./application');
         // Render the application
-        return renderApp(params);
+        return renderApp(coreStart, params);
       },
     });
 

examples/search_examples/public/search/app.tsx

@@ -43,7 +43,10 @@ import { PLUGIN_ID, PLUGIN_NAME, SERVER_SEARCH_ROUTE_PATH } from '../../common';
 import { IMyStrategyResponse } from '../../common/types';
 
 interface SearchExamplesAppDeps
-  extends Pick<CoreStart, 'notifications' | 'http' | 'analytics' | 'i18n' | 'theme'> {
+  extends Pick<
+    CoreStart,
+    'notifications' | 'http' | 'analytics' | 'i18n' | 'theme' | 'userProfile'
+  > {
   navigation: NavigationPublicPluginStart;
   data: DataPublicPluginStart;
   unifiedSearch: UnifiedSearchPublicPluginStart;
@@ -230,13 +233,8 @@ export const SearchExamplesApp = ({
               </EuiText>
             );
             notifications.toasts.addSuccess(
-              {
-                title: 'Query result',
-                text: toMountPoint(message, startServices),
-              },
-              {
-                toastLifeTimeMs: 300000,
-              }
+              { title: 'Query result', text: toMountPoint(message, startServices) },
+              { toastLifeTimeMs: 300000 }
             );
             if (res.warning) {
               notifications.toasts.addWarning({

examples/search_examples/public/search_sessions/app.tsx

@@ -56,6 +56,7 @@ interface SearchSessionsExampleAppDeps {
   analytics: CoreStart['analytics'];
   i18n: CoreStart['i18n'];
   theme: CoreStart['theme'];
+  userProfile: CoreStart['userProfile'];
   navigation: NavigationPublicPluginStart;
   data: DataPublicPluginStart;
   unifiedSearch: UnifiedSearchPublicPluginStart;
@@ -674,6 +675,7 @@ function doSearch(
     analytics: CoreStart['analytics'];
     i18n: CoreStart['i18n'];
     theme: CoreStart['theme'];
+    userProfile: CoreStart['userProfile'];
   }
 ): Promise<{ request: IEsSearchRequest; response: IEsSearchResponse; tookMs?: number }> {
   if (!dataView) return Promise.reject('Select a data view');

examples/unified_field_list_examples/public/application.tsx

@@ -18,11 +18,11 @@ import { UnifiedFieldListExampleApp } from './example_app';
 export const renderApp = (
   core: CoreStart,
   deps: AppPluginStartDependencies,
-  { element, theme$ }: AppMountParameters
+  { element }: AppMountParameters
 ) => {
   ReactDOM.render(
     <I18nProvider>
-      <KibanaThemeProvider theme={{ theme$ }}>
+      <KibanaThemeProvider {...core}>
         <UnifiedFieldListExampleApp
           services={{
             core,

packages/kbn-search-response-warnings/src/handle_warnings.tsx

@@ -14,6 +14,7 @@ import type {
   AnalyticsServiceStart,
   NotificationsStart,
   ThemeServiceStart,
+  UserProfileService,
 } from '@kbn/core/public';
 import { toMountPoint } from '@kbn/react-kibana-mount';
 import type { I18nStart } from '@kbn/core-i18n-browser';
@@ -36,6 +37,7 @@ interface Services {
   inspector: InspectorStart;
   notifications: NotificationsStart;
   theme: ThemeServiceStart;
+  userProfile: UserProfileService;
 }
 
 /**

src/plugins/chart_expressions/expression_xy/public/types.ts

@@ -32,7 +32,7 @@ export interface StartDeps {
   expression: ExpressionsServiceStart;
 }
 
-export type StartServices = Pick<CoreStart, 'analytics' | 'i18n' | 'theme'>;
+export type StartServices = Pick<CoreStart, 'analytics' | 'i18n' | 'theme' | 'userProfile'>;
 
 export type ExpressionXyPluginSetup = void;
 export type ExpressionXyPluginStart = void;

src/plugins/controls/public/control_group/open_edit_control_group_flyout.tsx

@@ -92,10 +92,7 @@ export const openEditControlGroupFlyout = (
         onDeleteAll={() => onDeleteAll(overlay)}
         onCancel={() => closeOverlay(overlay)}
       />,
-      {
-        theme: coreServices.theme,
-        i18n: coreServices.i18n,
-      }
+      coreServices
     ),
     {
       'aria-label': i18n.translate('controls.controlGroup.manageControl', {

src/plugins/controls/public/controls/data_controls/open_data_control_editor.tsx

@@ -91,10 +91,7 @@ export const openDataControlEditor = <
           onSave({ type: selectedControlType, state });
         }}
       />,
-      {
-        theme: coreServices.theme,
-        i18n: coreServices.i18n,
-      }
+      coreServices
     ),
     {
       size: 'm',

src/plugins/dashboard/public/dashboard_actions/copy_to_dashboard_action.tsx

@@ -83,12 +83,11 @@ export class CopyToDashboardAction implements Action<EmbeddableApiContext> {
   public async execute({ embeddable }: EmbeddableApiContext) {
     if (!apiIsCompatible(embeddable)) throw new IncompatibleActionError();
 
-    const { theme, i18n } = coreServices;
     const session = coreServices.overlays.openModal(
-      toMountPoint(<CopyToDashboardModal closeModal={() => session.close()} api={embeddable} />, {
-        theme,
-        i18n,
-      }),
+      toMountPoint(
+        <CopyToDashboardModal closeModal={() => session.close()} api={embeddable} />,
+        coreServices
+      ),
       {
         maxWidth: 400,
         'data-test-subj': 'copyToDashboardPanel',

src/plugins/dashboard/public/dashboard_app/listing_page/dashboard_no_match.tsx

@@ -49,7 +49,7 @@ export const DashboardNoMatch = ({ history }: { history: RouteComponentProps['hi
               />
             </p>
           </EuiCallOut>,
-          { analytics: coreServices.analytics, i18n: coreServices.i18n, theme: coreServices.theme }
+          coreServices
         )
       );
 

src/plugins/dashboard/public/dashboard_app/top_nav/editor_menu.tsx

@@ -57,7 +57,7 @@ export const EditorMenu = ({ createNewVisType, isDisabled }: EditorMenuProps) =>
             />
           );
         }),
-        { analytics: coreServices.analytics, theme: coreServices.theme, i18n: coreServices.i18n }
+        coreServices
       );
 
       dashboardApi.openOverlay(

src/plugins/dashboard/public/dashboard_container/embeddable/api/open_settings_flyout.tsx

@@ -27,7 +27,7 @@ export function openSettingsFlyout(dashboardApi: DashboardApi) {
             }}
           />
         </DashboardContext.Provider>,
-        { analytics: coreServices.analytics, i18n: coreServices.i18n, theme: coreServices.theme }
+        coreServices
       ),
       {
         size: 's',

src/plugins/dashboard/public/dashboard_listing/confirm_overlays.tsx

@@ -112,7 +112,7 @@ export const confirmCreateWithUnsaved = (
           </div>
         </EuiOutsideClickDetector>
       </EuiFocusTrap>,
-      { analytics: coreServices.analytics, i18n: coreServices.i18n, theme: coreServices.theme }
+      coreServices
     ),
     {
       'data-test-subj': 'dashboardCreateConfirmModal',

src/plugins/data/public/search/search_interceptor/search_interceptor.ts

@@ -47,6 +47,7 @@ import type {
   IUiSettingsClient,
   ThemeServiceStart,
   ToastsSetup,
+  UserProfileService,
 } from '@kbn/core/public';
 
 import { toMountPoint } from '@kbn/react-kibana-mount';
@@ -127,6 +128,7 @@ export class SearchInterceptor {
     analytics: Pick<AnalyticsServiceStart, 'reportEvent'>;
     i18n: I18nStart;
     theme: Pick<ThemeServiceStart, 'theme$'>;
+    userProfile: UserProfileService;
   };
 
   /*
@@ -136,10 +138,10 @@ export class SearchInterceptor {
     this.deps.http.addLoadingCountSource(this.pendingCount$);
 
     this.deps.startServices.then(([coreStart, depsStart]) => {
-      const { application, docLinks, analytics, i18n: i18nStart, theme } = coreStart;
+      const { application, docLinks, ...startRenderServices } = coreStart;
       this.application = application;
       this.docLinks = docLinks;
-      this.startRenderServices = { analytics, i18n: i18nStart, theme };
+      this.startRenderServices = startRenderServices;
       this.inspector = (depsStart as SearchServiceStartDependencies).inspector;
     });
 

src/plugins/data/public/search/search_service.ts

@@ -217,16 +217,7 @@ export class SearchService implements Plugin<ISearchSetup, ISearchStart> {
   }
 
   public start(
-    {
-      analytics,
-      http,
-      theme,
-      uiSettings,
-      chrome,
-      application,
-      notifications,
-      i18n: i18nStart,
-    }: CoreStart,
+    { http, uiSettings, chrome, application, notifications, ...startServices }: CoreStart,
     {
       fieldFormats,
       indexPatterns,
@@ -245,11 +236,9 @@ export class SearchService implements Plugin<ISearchSetup, ISearchStart> {
     const aggs = this.aggsService.start({ fieldFormats, indexPatterns });
 
     const warningsServices = {
-      analytics,
-      i18n: i18nStart,
       inspector,
       notifications,
-      theme,
+      ...startServices,
     };
 
     const searchSourceDependencies: SearchSourceDependencies = {
@@ -305,7 +294,7 @@ export class SearchService implements Plugin<ISearchSetup, ISearchStart> {
               tourDisabled: screenshotMode.isScreenshotMode(),
             })
           ),
-          { analytics, i18n: i18nStart, theme }
+          startServices
         ),
       });
     }