[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)](#202610)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)
elastic · Dec 13, 2024 · 3e96c57 · 3e96c57
1 parent ada10e3
commit 3e96c57
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}>