[8.x] Preparation for High Contrast Mode, ResponseOps domains (#202610) (#204128)

# Backport

This will backport the following commits from `main` to `8.x`:
- [Preparation for High Contrast Mode, ResponseOps domains
(#202610)](https://github.com/elastic/kibana/pull/202610)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Tim
Sullivan","email":"tsullivan@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-12-12T20:34:44Z","message":"Preparation
for High Contrast Mode, ResponseOps domains (#202610)\n\n##
Summary\r\n\r\n**Reviewers: Please test the code paths affected by this
PR. See the\r\n\"Risks\" section below.**\r\n\r\nPart of work for
enabling \"high contrast mode\" in Kibana.
See\r\nhttps://github.com/elastic/kibana/issues/176219.\r\n\r\n**Background:**\r\nKibana
will soon have a user profile setting to allow users to enable\r\n\"high
contrast mode.\" This setting will activate a flag
with\r\n`<EuiProvider>` that causes EUI components to render with
higher\r\ncontrast visual elements. Consumer plugins and packages need
to be\r\nupdated selected places where `<EuiProvider>` is wrapped, to
pass the\r\n`UserProfileService` service dependency from the CoreStart
contract.\r\n\r\n**NOTE:** **EUI currently does not yet support the
high-contrast mode\r\nflag**, but support for that is expected to come
in around 2 weeks.\r\nThese first PRs are simply preparing the code by
wiring up the\r\n`UserProvideService`.\r\n\r\n### Checklist\r\n\r\nCheck
the PR satisfies following conditions. \r\n\r\nReviewers should verify
this PR satisfies this list as well.\r\n\r\n- [X] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [X] The PR
description includes the appropriate Release Notes section,\r\nand the
correct `release_note:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n###
Risks\r\n\r\nDoes this PR introduce any risks? For example, consider
risks like hard\r\nto test bugs, performance regression, potential of
data loss.\r\n\r\nDescribe the risk, its severity, and mitigation for
each identified\r\nrisk. Invite stakeholders and evaluate how to proceed
before merging.\r\n\r\n- [ ] [medium/high] The implementor of this
change did not manually test\r\nthe affected code paths and relied on
type-checking and functional tests\r\nto drive the changes. Code owners
for this PR need to manually test the\r\naffected code paths.\r\n- [ ]
[medium] The `UserProfileService` dependency comes from the\r\nCoreStart
contract. If acquiring the service causes synchronous code to\r\nbecome
asynchronous, check for race conditions or errors in rendering\r\nReact
components. Code owners for this PR need to manually test
the\r\naffected code paths.\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"80160cbf8fe21b904fe109470ae96e1dc5d42052","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:ResponseOps","v9.0.0","backport:prev-minor","v8.18.0"],"number":202610,"url":"https://github.com/elastic/kibana/pull/202610","mergeCommit":{"message":"Preparation
for High Contrast Mode, ResponseOps domains (#202610)\n\n##
Summary\r\n\r\n**Reviewers: Please test the code paths affected by this
PR. See the\r\n\"Risks\" section below.**\r\n\r\nPart of work for
enabling \"high contrast mode\" in Kibana.
See\r\nhttps://github.com/elastic/kibana/issues/176219.\r\n\r\n**Background:**\r\nKibana
will soon have a user profile setting to allow users to enable\r\n\"high
contrast mode.\" This setting will activate a flag
with\r\n`<EuiProvider>` that causes EUI components to render with
higher\r\ncontrast visual elements. Consumer plugins and packages need
to be\r\nupdated selected places where `<EuiProvider>` is wrapped, to
pass the\r\n`UserProfileService` service dependency from the CoreStart
contract.\r\n\r\n**NOTE:** **EUI currently does not yet support the
high-contrast mode\r\nflag**, but support for that is expected to come
in around 2 weeks.\r\nThese first PRs are simply preparing the code by
wiring up the\r\n`UserProvideService`.\r\n\r\n### Checklist\r\n\r\nCheck
the PR satisfies following conditions. \r\n\r\nReviewers should verify
this PR satisfies this list as well.\r\n\r\n- [X] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [X] The PR
description includes the appropriate Release Notes section,\r\nand the
correct `release_note:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n###
Risks\r\n\r\nDoes this PR introduce any risks? For example, consider
risks like hard\r\nto test bugs, performance regression, potential of
data loss.\r\n\r\nDescribe the risk, its severity, and mitigation for
each identified\r\nrisk. Invite stakeholders and evaluate how to proceed
before merging.\r\n\r\n- [ ] [medium/high] The implementor of this
change did not manually test\r\nthe affected code paths and relied on
type-checking and functional tests\r\nto drive the changes. Code owners
for this PR need to manually test the\r\naffected code paths.\r\n- [ ]
[medium] The `UserProfileService` dependency comes from the\r\nCoreStart
contract. If acquiring the service causes synchronous code to\r\nbecome
asynchronous, check for race conditions or errors in rendering\r\nReact
components. Code owners for this PR need to manually test
the\r\naffected code paths.\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"80160cbf8fe21b904fe109470ae96e1dc5d42052"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","labelRegex":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/202610","number":202610,"mergeCommit":{"message":"Preparation
for High Contrast Mode, ResponseOps domains (#202610)\n\n##
Summary\r\n\r\n**Reviewers: Please test the code paths affected by this
PR. See the\r\n\"Risks\" section below.**\r\n\r\nPart of work for
enabling \"high contrast mode\" in Kibana.
See\r\nhttps://github.com/elastic/kibana/issues/176219.\r\n\r\n**Background:**\r\nKibana
will soon have a user profile setting to allow users to enable\r\n\"high
contrast mode.\" This setting will activate a flag
with\r\n`<EuiProvider>` that causes EUI components to render with
higher\r\ncontrast visual elements. Consumer plugins and packages need
to be\r\nupdated selected places where `<EuiProvider>` is wrapped, to
pass the\r\n`UserProfileService` service dependency from the CoreStart
contract.\r\n\r\n**NOTE:** **EUI currently does not yet support the
high-contrast mode\r\nflag**, but support for that is expected to come
in around 2 weeks.\r\nThese first PRs are simply preparing the code by
wiring up the\r\n`UserProvideService`.\r\n\r\n### Checklist\r\n\r\nCheck
the PR satisfies following conditions. \r\n\r\nReviewers should verify
this PR satisfies this list as well.\r\n\r\n- [X] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [X] The PR
description includes the appropriate Release Notes section,\r\nand the
correct `release_note:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n###
Risks\r\n\r\nDoes this PR introduce any risks? For example, consider
risks like hard\r\nto test bugs, performance regression, potential of
data loss.\r\n\r\nDescribe the risk, its severity, and mitigation for
each identified\r\nrisk. Invite stakeholders and evaluate how to proceed
before merging.\r\n\r\n- [ ] [medium/high] The implementor of this
change did not manually test\r\nthe affected code paths and relied on
type-checking and functional tests\r\nto drive the changes. Code owners
for this PR need to manually test the\r\naffected code paths.\r\n- [ ]
[medium] The `UserProfileService` dependency comes from the\r\nCoreStart
contract. If acquiring the service causes synchronous code to\r\nbecome
asynchronous, check for race conditions or errors in rendering\r\nReact
components. Code owners for this PR need to manually test
the\r\naffected code paths.\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"80160cbf8fe21b904fe109470ae96e1dc5d42052"}},{"branch":"8.x","label":"v8.18.0","labelRegex":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

packages/kbn-alerts-ui-shared/tsconfig.json

@@ -34,6 +34,6 @@
     "@kbn/alerts-as-data-utils",
     "@kbn/core-http-browser-mocks",
     "@kbn/core-notifications-browser-mocks",
-    "@kbn/shared-ux-table-persist"
+    "@kbn/shared-ux-table-persist",
   ]
 }

packages/response-ops/rule_form/src/create_rule_form.tsx

@@ -64,7 +64,7 @@ export const CreateRuleForm = (props: CreateRuleFormProps) => {
     onSubmit,
   } = props;
 
-  const { http, docLinks, notifications, ruleTypeRegistry, i18n, theme } = plugins;
+  const { http, docLinks, notifications, ruleTypeRegistry, ...deps } = plugins;
   const { toasts } = notifications;
 
   const { mutate, isLoading: isSaving } = useCreateRule({
@@ -82,7 +82,7 @@ export const CreateRuleForm = (props: CreateRuleFormProps) => {
         ...(message.details && {
           text: toMountPoint(
             <RuleFormCircuitBreakerError>{message.details}</RuleFormCircuitBreakerError>,
-            { i18n, theme }
+            deps
           ),
         }),
       });

packages/response-ops/rule_form/src/edit_rule_form.tsx

@@ -45,7 +45,7 @@ export const EditRuleForm = (props: EditRuleFormProps) => {
     onCancel,
     onSubmit,
   } = props;
-  const { http, notifications, docLinks, ruleTypeRegistry, i18n, theme, application } = plugins;
+  const { http, notifications, docLinks, ruleTypeRegistry, application, ...deps } = plugins;
   const { toasts } = notifications;
 
   const { mutate, isLoading: isSaving } = useUpdateRule({
@@ -63,7 +63,7 @@ export const EditRuleForm = (props: EditRuleFormProps) => {
         ...(message.details && {
           text: toMountPoint(
             <RuleFormCircuitBreakerError>{message.details}</RuleFormCircuitBreakerError>,
-            { i18n, theme }
+            deps
           ),
         }),
       });

packages/response-ops/rule_form/src/rule_form.tsx

@@ -28,13 +28,46 @@ export interface RuleFormProps {
 }
 
 export const RuleForm = (props: RuleFormProps) => {
-  const { plugins, onCancel, onSubmit } = props;
+  const { plugins: _plugins, onCancel, onSubmit } = props;
   const { id, ruleTypeId } = useParams<{
     id?: string;
     ruleTypeId?: string;
   }>();
 
+  const {
+    http,
+    i18n,
+    theme,
+    userProfile,
+    application,
+    notifications,
+    charts,
+    settings,
+    data,
+    dataViews,
+    unifiedSearch,
+    docLinks,
+    ruleTypeRegistry,
+    actionTypeRegistry,
+  } = _plugins;
+
   const ruleFormComponent = useMemo(() => {
+    const plugins = {
+      http,
+      i18n,
+      theme,
+      userProfile,
+      application,
+      notifications,
+      charts,
+      settings,
+      data,
+      dataViews,
+      unifiedSearch,
+      docLinks,
+      ruleTypeRegistry,
+      actionTypeRegistry,
+    };
     if (id) {
       return <EditRuleForm id={id} plugins={plugins} onCancel={onCancel} onSubmit={onSubmit} />;
     }
@@ -60,7 +93,26 @@ export const RuleForm = (props: RuleFormProps) => {
         }
       />
     );
-  }, [id, ruleTypeId, plugins, onCancel, onSubmit]);
+  }, [
+    http,
+    i18n,
+    theme,
+    userProfile,
+    application,
+    notifications,
+    charts,
+    settings,
+    data,
+    dataViews,
+    unifiedSearch,
+    docLinks,
+    ruleTypeRegistry,
+    actionTypeRegistry,
+    id,
+    ruleTypeId,
+    onCancel,
+    onSubmit,
+  ]);
 
   return <QueryClientProvider client={queryClient}>{ruleFormComponent}</QueryClientProvider>;
 };

packages/response-ops/rule_form/src/types.ts

@@ -16,6 +16,7 @@ import type { HttpStart } from '@kbn/core-http-browser';
 import type { I18nStart } from '@kbn/core-i18n-browser';
 import type { NotificationsStart } from '@kbn/core-notifications-browser';
 import type { ThemeServiceStart } from '@kbn/core-theme-browser';
+import type { UserProfileService } from '@kbn/core-user-profile-browser';
 import type { SettingsStart } from '@kbn/core-ui-settings-browser';
 import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
 import type { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
@@ -54,6 +55,7 @@ export interface RuleFormPlugins {
   http: HttpStart;
   i18n: I18nStart;
   theme: ThemeServiceStart;
+  userProfile: UserProfileService;
   application: ApplicationStart;
   notifications: NotificationsStart;
   charts: ChartsPluginSetup;

packages/response-ops/rule_form/tsconfig.json

@@ -39,5 +39,6 @@
     "@kbn/kibana-react-plugin",
     "@kbn/core-i18n-browser",
     "@kbn/core-theme-browser",
+    "@kbn/core-user-profile-browser",
   ]
 }

x-pack/examples/triggers_actions_ui_example/public/application.tsx

@@ -45,6 +45,7 @@ export interface TriggersActionsUiExampleComponentParams {
   docLinks: CoreStart['docLinks'];
   i18n: CoreStart['i18n'];
   theme: CoreStart['theme'];
+  userProfile: CoreStart['userProfile'];
   settings: CoreStart['settings'];
   history: ScopedHistory;
   triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
@@ -63,12 +64,11 @@ const TriggersActionsUiExampleApp = ({
   notifications,
   settings,
   docLinks,
-  i18n,
-  theme,
   data,
   charts,
   dataViews,
   unifiedSearch,
+  ...startServices
 }: TriggersActionsUiExampleComponentParams) => {
   return (
     <Router history={history}>
@@ -193,8 +193,6 @@ const TriggersActionsUiExampleApp = ({
                     application,
                     notifications,
                     docLinks,
-                    i18n,
-                    theme,
                     charts,
                     data,
                     dataViews,
@@ -202,6 +200,7 @@ const TriggersActionsUiExampleApp = ({
                     settings,
                     ruleTypeRegistry: triggersActionsUi.ruleTypeRegistry,
                     actionTypeRegistry: triggersActionsUi.actionTypeRegistry,
+                    ...startServices,
                   }}
                 />
               </Page>
@@ -218,8 +217,6 @@ const TriggersActionsUiExampleApp = ({
                     application,
                     notifications,
                     docLinks,
-                    theme,
-                    i18n,
                     charts,
                     data,
                     dataViews,
@@ -227,6 +224,7 @@ const TriggersActionsUiExampleApp = ({
                     settings,
                     ruleTypeRegistry: triggersActionsUi.ruleTypeRegistry,
                     actionTypeRegistry: triggersActionsUi.actionTypeRegistry,
+                    ...startServices,
                   }}
                 />
               </Page>
@@ -245,7 +243,6 @@ export const renderApp = (
   deps: TriggersActionsUiExamplePublicStartDeps,
   { appBasePath, element, history }: AppMountParameters
 ) => {
-  const { http, notifications, docLinks, application, i18n, theme, settings } = core;
   const { triggersActionsUi } = deps;
   const { ruleTypeRegistry, actionTypeRegistry } = triggersActionsUi;
 
@@ -263,19 +260,13 @@ export const renderApp = (
           <IntlProvider locale="en">
             <TriggersActionsUiExampleApp
               history={history}
-              http={http}
-              notifications={notifications}
-              application={application}
-              docLinks={docLinks}
-              i18n={i18n}
-              theme={theme}
-              settings={settings}
               triggersActionsUi={deps.triggersActionsUi}
               data={deps.data}
               charts={deps.charts}
               dataViews={deps.dataViews}
               dataViewsEditor={deps.dataViewsEditor}
               unifiedSearch={deps.unifiedSearch}
+              {...core}
             />
           </IntlProvider>
         </QueryClientProvider>

x-pack/plugins/alerting/public/application/maintenance_windows.tsx

@@ -78,12 +78,11 @@ export const renderApp = ({
   kibanaVersion: string;
 }) => {
   const { element, history } = mountParams;
-  const { i18n, theme } = core;
 
   const queryClient = new QueryClient();
 
   ReactDOM.render(
-    <KibanaRenderContextProvider i18n={i18n} theme={theme}>
+    <KibanaRenderContextProvider {...core}>
       <KibanaContextProvider
         services={{
           ...core,

x-pack/plugins/cases/public/common/lib/kibana/services.ts

@@ -9,7 +9,7 @@ import type { CoreStart } from '@kbn/core/public';
 import type { CasesUiConfigType } from '../../../../common/ui/types';
 import type { CasesPublicStartDependencies } from '../../../types';
 
-type GlobalServices = Pick<CoreStart, 'application' | 'http' | 'theme'> &
+type GlobalServices = Pick<CoreStart, 'application' | 'http' | 'theme' | 'userProfile'> &
   Pick<CasesPublicStartDependencies, 'serverless'>;
 
 export class KibanaServices {
@@ -23,12 +23,12 @@ export class KibanaServices {
     http,
     serverless,
     kibanaVersion,
-    theme,
+    ...startServices
   }: GlobalServices & {
     kibanaVersion: string;
     config: CasesUiConfigType;
   }) {
-    this.services = { application, http, theme, serverless };
+    this.services = { application, http, serverless, ...startServices };
     this.kibanaVersion = kibanaVersion;
     this.config = config;
   }

x-pack/plugins/cases/public/common/mock/test_providers.tsx

@@ -99,7 +99,7 @@ const TestProvidersComponent: React.FC<TestProviderProps> = ({
   };
 
   return (
-    <KibanaRenderContextProvider i18n={coreStart.i18n} theme={coreStart.theme}>
+    <KibanaRenderContextProvider {...coreStart}>
       <KibanaContextProvider services={services}>
         <MemoryRouter>
           <CasesProvider value={casesProviderValue} queryClient={queryClient}>
@@ -178,7 +178,7 @@ export const createAppMockRenderer = ({
     getFilesClient,
   };
   const AppWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-    <KibanaRenderContextProvider i18n={coreStart.i18n} theme={coreStart.theme}>
+    <KibanaRenderContextProvider {...coreStart}>
       <KibanaContextProvider services={services}>
         <MemoryRouter>
           <CasesProvider value={casesProviderValue} queryClient={queryClient}>

x-pack/plugins/cases/public/common/use_cases_toast.tsx

@@ -106,7 +106,7 @@ const getErrorMessage = (error: Error | ServerError): string => {
 
 export const useCasesToast = () => {
   const { appId } = useApplication();
-  const { application, i18n, theme } = useKibana().services;
+  const { application, i18n, theme, userProfile } = useKibana().services;
   const { getUrlForApp, navigateToUrl } = application;
 
   const toasts = useToasts();
@@ -148,13 +148,13 @@ export const useCasesToast = () => {
         return toasts.addSuccess({
           color: 'success',
           iconType: 'check',
-          title: toMountPoint(<TruncatedText text={renderTitle} />, { i18n, theme }),
+          title: toMountPoint(<TruncatedText text={renderTitle} />, { i18n, theme, userProfile }),
           text: toMountPoint(
             <CaseToastSuccessContent
               content={renderContent}
               onViewCaseClick={url != null ? onViewCaseClick : undefined}
             />,
-            { i18n, theme }
+            { i18n, theme, userProfile }
           ),
         });
       },
@@ -177,7 +177,7 @@ export const useCasesToast = () => {
         });
       },
     }),
-    [i18n, theme, appId, getUrlForApp, navigateToUrl, toasts]
+    [i18n, theme, userProfile, appId, getUrlForApp, navigateToUrl, toasts]
   );
 };
 

x-pack/plugins/cases/public/components/visualizations/actions/action_wrapper.tsx

@@ -29,7 +29,7 @@ const ActionWrapperWithContext: React.FC<PropsWithChildren<Props>> = ({
   casesActionContextProps,
   currentAppId,
 }) => {
-  const { application, i18n, theme } = useKibana().services;
+  const { application, ...startServices } = useKibana().services;
 
   const owner = getCaseOwnerByAppId(currentAppId);
   const casePermissions = canUseCases(application.capabilities)(owner ? [owner] : undefined);
@@ -37,7 +37,7 @@ const ActionWrapperWithContext: React.FC<PropsWithChildren<Props>> = ({
   const syncAlerts = owner === SECURITY_SOLUTION_OWNER;
 
   return (
-    <KibanaRenderContextProvider i18n={i18n} theme={theme}>
+    <KibanaRenderContextProvider {...startServices}>
       <CasesProvider
         value={{
           ...casesActionContextProps,

x-pack/plugins/cases/public/components/visualizations/actions/open_modal.tsx

@@ -88,7 +88,7 @@ export function openModal(
     >
       <AddExistingCaseModalWrapper lensApi={lensApi} onClose={onClose} onSuccess={onSuccess} />
     </ActionWrapper>,
-    { i18n: services.core.i18n, theme: services.core.theme }
+    services.core
   );
 
   mount(targetDomElement);

x-pack/plugins/triggers_actions_ui/.storybook/decorator.tsx

@@ -50,6 +50,8 @@ const notifications: NotificationsStart = {
   showErrorDialog: () => {},
 };
 
+const userProfile = { getUserProfile$: () => of(null) };
+
 export const StorybookContextDecorator: FC<PropsWithChildren<StorybookContextDecoratorProps>> = (
   props
 ) => {
@@ -75,7 +77,7 @@ export const StorybookContextDecorator: FC<PropsWithChildren<StorybookContextDec
   return (
     <I18nProvider>
       <EuiThemeProvider darkMode={darkMode}>
-        <KibanaThemeProvider theme$={EMPTY}>
+        <KibanaThemeProvider theme$={EMPTY} userProfile={userProfile}>
           <KibanaContextProvider
             services={{
               notifications,

x-pack/plugins/triggers_actions_ui/public/application/alerts_app.tsx

@@ -27,11 +27,11 @@ export const renderApp = (deps: TriggersAndActionsUiServices) => {
 };
 
 export const App = ({ deps }: { deps: TriggersAndActionsUiServices }) => {
-  const { dataViews, i18n, theme } = deps;
+  const { dataViews } = deps;
 
   setDataViewsService(dataViews);
   return (
-    <KibanaRenderContextProvider i18n={i18n} theme={theme}>
+    <KibanaRenderContextProvider {...deps}>
       <KibanaContextProvider services={{ ...deps }}>
         <Router history={deps.history}>
           <Routes>

x-pack/plugins/triggers_actions_ui/public/application/connectors_app.tsx

@@ -73,13 +73,13 @@ export const renderApp = (deps: TriggersAndActionsUiServices) => {
 };
 
 export const App = ({ deps }: { deps: TriggersAndActionsUiServices }) => {
-  const { dataViews, i18n, theme } = deps;
+  const { dataViews } = deps;
   const sections: Section[] = ['connectors', 'logs'];
   const sectionsRegex = sections.join('|');
 
   setDataViewsService(dataViews);
   return (
-    <KibanaRenderContextProvider i18n={i18n} theme={theme}>
+    <KibanaRenderContextProvider {...deps}>
       <KibanaContextProvider services={{ ...deps }}>
         <Router history={deps.history}>
           <QueryClientProvider client={queryClient}>

x-pack/plugins/triggers_actions_ui/public/application/hooks/use_bulk_edit_response.tsx

@@ -65,6 +65,7 @@ export function useBulkEditResponse(props: UseBulkEditResponseProps) {
   const {
     i18n: i18nStart,
     theme,
+    userProfile,
     notifications: { toasts },
   } = useKibana().services;
 
@@ -124,7 +125,11 @@ export function useBulkEditResponse(props: UseBulkEditResponseProps) {
       if (numberOfErrors === total) {
         toasts.addDanger({
           title: failureMessage(numberOfErrors, translationMap[property]),
-          text: toMountPoint(renderToastErrorBody(response), { i18n: i18nStart, theme }),
+          text: toMountPoint(renderToastErrorBody(response), {
+            i18n: i18nStart,
+            theme,
+            userProfile,
+          }),
         });
         return;
       }
@@ -132,10 +137,10 @@ export function useBulkEditResponse(props: UseBulkEditResponseProps) {
       // Some failure
       toasts.addWarning({
         title: someSuccessMessage(numberOfSuccess, numberOfErrors, translationMap[property]),
-        text: toMountPoint(renderToastErrorBody(response), { i18n: i18nStart, theme }),
+        text: toMountPoint(renderToastErrorBody(response), { i18n: i18nStart, theme, userProfile }),
       });
     },
-    [i18nStart, theme, toasts, renderToastErrorBody]
+    [i18nStart, theme, userProfile, toasts, renderToastErrorBody]
   );
 
   return useMemo(() => {

x-pack/plugins/triggers_actions_ui/public/application/hooks/use_bulk_operation_toast.tsx

@@ -50,6 +50,7 @@ export const useBulkOperationToast = ({
   const {
     i18n,
     theme,
+    userProfile,
     notifications: { toasts },
   } = useKibana().services;
 
@@ -122,7 +123,7 @@ export const useBulkOperationToast = ({
             SINGLE_RULE_TITLE,
             MULTIPLE_RULE_TITLE
           ),
-          text: toMountPoint(renderToastErrorBody(errors, 'danger'), { i18n, theme }),
+          text: toMountPoint(renderToastErrorBody(errors, 'danger'), { i18n, theme, userProfile }),
         });
         return;
       }
@@ -135,10 +136,10 @@ export const useBulkOperationToast = ({
           SINGLE_RULE_TITLE,
           MULTIPLE_RULE_TITLE
         ),
-        text: toMountPoint(renderToastErrorBody(errors, 'warning'), { i18n, theme }),
+        text: toMountPoint(renderToastErrorBody(errors, 'warning'), { i18n, theme, userProfile }),
       });
     },
-    [i18n, theme, toasts, renderToastErrorBody]
+    [i18n, theme, userProfile, toasts, renderToastErrorBody]
   );
 
   return useMemo(() => {

x-pack/plugins/triggers_actions_ui/public/application/rules_app.tsx

@@ -101,13 +101,13 @@ export const renderApp = (deps: TriggersAndActionsUiServices) => {
 };
 
 export const App = ({ deps }: { deps: TriggersAndActionsUiServices }) => {
-  const { dataViews, i18n, theme } = deps;
+  const { dataViews } = deps;
   const sections: Section[] = ['rules', 'logs'];
 
   const sectionsRegex = sections.join('|');
   setDataViewsService(dataViews);
   return (
-    <KibanaRenderContextProvider i18n={i18n} theme={theme}>
+    <KibanaRenderContextProvider {...deps}>
       <KibanaContextProvider services={{ ...deps }}>
         <Router history={deps.history}>
           <QueryClientProvider client={queryClient}>

x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connectors_selection.test.tsx

@@ -94,7 +94,7 @@ describe('connectors_selection', () => {
 
   it('renders a selector', () => {
     const wrapper = mountWithIntl(
-      <KibanaThemeProvider theme={core.theme}>
+      <KibanaThemeProvider {...core}>
         <ConnectorsSelection
           accordionIndex={0}
           actionItem={actionItem}
@@ -113,7 +113,7 @@ describe('connectors_selection', () => {
 
   it('renders the title of the connector', () => {
     render(
-      <KibanaThemeProvider theme={core.theme}>
+      <KibanaThemeProvider {...core}>
         <ConnectorsSelection
           accordionIndex={0}
           actionItem={actionItem}

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/inspect/modal.test.tsx

@@ -8,6 +8,7 @@
 import React from 'react';
 import { of } from 'rxjs';
 import { fireEvent, render, screen } from '@testing-library/react';
+import { userProfileServiceMock } from '@kbn/core-user-profile-browser-mocks';
 import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
 import type { ModalInspectProps } from './modal';
 import { ModalInspectQuery } from './modal';
@@ -44,9 +45,12 @@ describe('Modal Inspect', () => {
 
   const renderModalInspectQuery = () => {
     const theme = { theme$: of({ darkMode: false }) };
+    const userProfile = userProfileServiceMock.createStart();
     return render(<ModalInspectQuery {...defaultProps} />, {
       wrapper: ({ children }) => (
-        <KibanaThemeProvider theme={theme}>{children}</KibanaThemeProvider>
+        <KibanaThemeProvider theme={theme} userProfile={userProfile}>
+          {children}
+        </KibanaThemeProvider>
       ),
     });
   };

x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_details.tsx

@@ -108,6 +108,7 @@ export const RuleDetails: React.FunctionComponent<RuleDetailsProps> = ({
     http,
     i18n: i18nStart,
     theme,
+    userProfile,
     notifications: { toasts },
   } = useKibana().services;
 
@@ -223,7 +224,7 @@ export const RuleDetails: React.FunctionComponent<RuleDetailsProps> = ({
                 </EuiFlexGroup>
               )}
             </>,
-            { i18n: i18nStart, theme }
+            { i18n: i18nStart, theme, userProfile }
           ),
         });
       }
@@ -232,6 +233,7 @@ export const RuleDetails: React.FunctionComponent<RuleDetailsProps> = ({
   }, [
     i18nStart,
     theme,
+    userProfile,
     rule.schedule.interval,
     config.minimumScheduleInterval,
     toasts,

x-pack/plugins/triggers_actions_ui/public/application/sections/rule_form/rule_add.tsx

@@ -132,9 +132,8 @@ const RuleAdd = <
     http,
     notifications: { toasts },
     application: { capabilities },
-    i18n: i18nStart,
-    theme,
     isServerless,
+    ...startServices
   } = useKibana().services;
 
   const canShowActions = hasShowActionsCapability(capabilities);
@@ -284,7 +283,7 @@ const RuleAdd = <
         ...(message.details && {
           text: toMountPoint(
             <ToastWithCircuitBreakerContent>{message.details}</ToastWithCircuitBreakerContent>,
-            { i18n: i18nStart, theme }
+            startServices
           ),
         }),
       });

x-pack/plugins/triggers_actions_ui/public/application/sections/rule_form/rule_edit.tsx

@@ -140,9 +140,8 @@ export const RuleEdit = <
   const {
     http,
     notifications: { toasts },
-    i18n: i18nStart,
-    theme,
     isServerless,
+    ...startServices
   } = useKibana().services;
 
   const setRule = (value: Rule) => {
@@ -238,7 +237,7 @@ export const RuleEdit = <
         ...(message.details && {
           text: toMountPoint(
             <ToastWithCircuitBreakerContent>{message.details}</ToastWithCircuitBreakerContent>,
-            { i18n: i18nStart, theme }
+            startServices
           ),
         }),
       });

x-pack/plugins/triggers_actions_ui/public/application/sections/rule_form/rule_form_route.tsx

@@ -17,8 +17,6 @@ import { getCurrentDocTitle } from '../../lib/doc_title';
 export const RuleFormRoute = () => {
   const {
     http,
-    i18n,
-    theme,
     application,
     notifications,
     charts,
@@ -31,6 +29,7 @@ export const RuleFormRoute = () => {
     actionTypeRegistry,
     chrome,
     setBreadcrumbs,
+    ...startServices
   } = useKibana().services;
 
   const location = useLocation<{ returnApp?: string; returnPath?: string }>();
@@ -64,8 +63,6 @@ export const RuleFormRoute = () => {
       <RuleForm
         plugins={{
           http,
-          i18n,
-          theme,
           application,
           notifications,
           charts,
@@ -76,6 +73,7 @@ export const RuleFormRoute = () => {
           docLinks,
           ruleTypeRegistry,
           actionTypeRegistry,
+          ...startServices,
         }}
         onCancel={() => {
           if (returnApp && returnPath) {

x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_dropdown.tsx

@@ -63,6 +63,7 @@ export const RuleStatusDropdown: React.FunctionComponent<ComponentOpts> = ({
     notifications: { toasts },
     i18n: i18nStart,
     theme,
+    userProfile,
   } = useKibana().services;
 
   const [isUpdating, setIsUpdating] = useState<boolean>(false);
@@ -86,12 +87,12 @@ export const RuleStatusDropdown: React.FunctionComponent<ComponentOpts> = ({
       ...(message.details && {
         text: toMountPoint(
           <ToastWithCircuitBreakerContent>{message.details}</ToastWithCircuitBreakerContent>,
-          { i18n: i18nStart, theme }
+          { i18n: i18nStart, theme, userProfile }
         ),
       }),
     });
     throw new Error();
-  }, [i18nStart, theme, enableRule, toasts]);
+  }, [i18nStart, theme, userProfile, enableRule, toasts]);
 
   const onEnable = useCallback(async () => {
     setIsUpdating(true);

x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rules_list.tsx

@@ -196,8 +196,7 @@ export const RulesList = ({
     kibanaFeatures,
     notifications: { toasts },
     ruleTypeRegistry,
-    i18n: i18nStart,
-    theme,
+    ...startServices
   } = kibanaServices;
 
   const canExecuteActions = hasExecuteActionsCapability(capabilities);
@@ -715,7 +714,7 @@ export const RulesList = ({
         title: parsedError.summary,
         text: toMountPoint(
           <ToastWithCircuitBreakerContent>{parsedError.details}</ToastWithCircuitBreakerContent>,
-          { theme, i18n: i18nStart }
+          startServices
         ),
       });
     } else {

x-pack/plugins/triggers_actions_ui/tsconfig.json

@@ -73,7 +73,8 @@
     "@kbn/observability-alerting-rule-utils",
     "@kbn/core-application-browser",
     "@kbn/cloud-plugin",
-    "@kbn/response-ops-rule-form"
+    "@kbn/response-ops-rule-form",
+    "@kbn/core-user-profile-browser-mocks"
   ],
   "exclude": ["target/**/*"]
 }