Preparation for High Contrast Mode, ResponseOps domains (elastic#202610)

## 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]>
opauloh · Dec 12, 2024 · 80160cb · 80160cb
1 parent 5dee999
commit 80160cb
Show file tree

Hide file tree

Showing 28 changed files with 124 additions and 68 deletions.
diff --git a/packages/kbn-alerts-ui-shared/tsconfig.json b/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",
   ]
 }
diff --git a/packages/response-ops/rule_form/src/create_rule_form.tsx b/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
           ),
         }),
       });

diff --git a/packages/response-ops/rule_form/src/edit_rule_form.tsx b/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
           ),
         }),
       });

diff --git a/packages/response-ops/rule_form/src/rule_form.tsx b/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>;
 };
diff --git a/packages/response-ops/rule_form/src/types.ts b/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;

diff --git a/packages/response-ops/rule_form/tsconfig.json b/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",
   ]
 }
diff --git a/x-pack/examples/triggers_actions_ui_example/public/application.tsx b/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,15 +193,14 @@ const TriggersActionsUiExampleApp = ({
                     application,
                     notifications,
                     docLinks,
-                    i18n,
-                    theme,
                     charts,
                     data,
                     dataViews,
                     unifiedSearch,
                     settings,
                     ruleTypeRegistry: triggersActionsUi.ruleTypeRegistry,
                     actionTypeRegistry: triggersActionsUi.actionTypeRegistry,
+                    ...startServices,
                   }}
                 />
               </Page>
@@ -218,15 +217,14 @@ const TriggersActionsUiExampleApp = ({
                     application,
                     notifications,
                     docLinks,
-                    theme,
-                    i18n,
                     charts,
                     data,
                     dataViews,
                     unifiedSearch,
                     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>

diff --git a/x-pack/plugins/alerting/public/application/maintenance_windows.tsx b/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,

diff --git a/x-pack/plugins/cases/public/common/lib/kibana/services.ts b/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;
   }

diff --git a/x-pack/plugins/cases/public/common/mock/test_providers.tsx b/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}>

diff --git a/x-pack/plugins/cases/public/common/use_cases_toast.tsx b/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]
   );
 };
 

diff --git a/x-pack/plugins/cases/public/components/visualizations/actions/action_wrapper.tsx b/x-pack/plugins/cases/public/components/visualizations/actions/action_wrapper.tsx
@@ -29,15 +29,15 @@ 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);
   // TODO: Remove when https://github.com/elastic/kibana/issues/143201 is developed
   const syncAlerts = owner === SECURITY_SOLUTION_OWNER;
 
   return (
-    <KibanaRenderContextProvider i18n={i18n} theme={theme}>
+    <KibanaRenderContextProvider {...startServices}>
       <CasesProvider
         value={{
           ...casesActionContextProps,

diff --git a/x-pack/plugins/cases/public/components/visualizations/actions/open_modal.tsx b/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);

diff --git a/x-pack/plugins/triggers_actions_ui/.storybook/decorator.tsx b/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,

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/alerts_app.tsx b/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>

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/connectors_app.tsx b/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}>