[User Profile] Clean up specific usage of deprecated toMountPoint uti…

…lity (#180003) ## Summary Partially addresses https://github.com/elastic/kibana/issues/140122#issuecomment-2035729879 This change assumes that achieving dark mode consistency would be easier if we remove the deprecated utilities that allow consumers to get away with dark mode bugs. These changes address a specific usage of the deprecated `toMountPoint` utility in the User-Profile package that has spread itself to a few places. ### Checklist - [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 - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: kibanamachine <[email protected]>
elastic · Apr 4, 2024 · 0e422f9 · 0e422f9
1 parent b11f758
commit 0e422f9
Show file tree

Hide file tree

Showing 12 changed files with 23 additions and 44 deletions.
diff --git a/packages/kbn-user-profile-components/src/services.tsx b/packages/kbn-user-profile-components/src/services.tsx
@@ -7,10 +7,11 @@
  */
 
 import React, { FC, useContext } from 'react';
-import type { Observable } from 'rxjs';
+
+import type { I18nStart } from '@kbn/core-i18n-browser';
 import type { NotificationsStart, ToastOptions } from '@kbn/core-notifications-browser';
-import type { MountPoint } from '@kbn/core-mount-utils-browser';
 import type { ThemeServiceStart } from '@kbn/core-theme-browser';
+import { toMountPoint } from '@kbn/react-kibana-mount';
 
 import type { UserProfileAPIClient } from './types';
 
@@ -41,6 +42,7 @@ export interface UserProfilesKibanaDependencies {
   core: {
     notifications: NotificationsStart;
     theme: ThemeServiceStart;
+    i18n: I18nStart;
   };
   security: {
     userProfiles: UserProfileAPIClient;
@@ -52,10 +54,7 @@ export interface UserProfilesKibanaDependencies {
    * import { toMountPoint } from '@kbn/kibana-react-plugin/public';
    * ```
    */
-  toMountPoint: (
-    node: React.ReactNode,
-    options?: { theme$: Observable<{ readonly darkMode: boolean }> }
-  ) => MountPoint;
+  toMountPoint: typeof toMountPoint;
 }
 
 /**
@@ -66,9 +65,9 @@ export const UserProfilesKibanaProvider: FC<UserProfilesKibanaDependencies> = ({
   ...services
 }) => {
   const {
-    core: { notifications, theme },
+    core: { notifications, i18n, theme },
     security: { userProfiles: userProfileApiClient },
-    toMountPoint,
+    toMountPoint: toMountPointUtility,
   } = services;
 
   return (
@@ -82,7 +81,7 @@ export const UserProfilesKibanaProvider: FC<UserProfilesKibanaDependencies> = ({
         notifications.toasts.addSuccess(
           {
             title,
-            text: text ? toMountPoint(text, { theme$: theme.theme$ }) : undefined,
+            text: text ? toMountPointUtility(text, { i18n, theme }) : undefined,
           },
           toastOptions
         );

diff --git a/packages/kbn-user-profile-components/tsconfig.json b/packages/kbn-user-profile-components/tsconfig.json
@@ -17,7 +17,8 @@
     "@kbn/core-notifications-browser",
     "@kbn/core",
     "@kbn/core-theme-browser",
-    "@kbn/core-mount-utils-browser",
+    "@kbn/react-kibana-mount",
+    "@kbn/core-i18n-browser",
   ],
   "exclude": [
     "target/**/*",

diff --git a/src/plugins/navigation/kibana.jsonc b/src/plugins/navigation/kibana.jsonc
@@ -8,6 +8,6 @@
     "browser": true,
     "optionalPlugins": ["cloud","security"],
     "requiredPlugins": ["unifiedSearch"],
-    "requiredBundles": ["kibanaReact"]
+    "requiredBundles": []
   }
 }
diff --git a/...ins/navigation/public/solution_nav_userprofile_toggle/solution_nav_userprofile_toggle.tsx b/...ins/navigation/public/solution_nav_userprofile_toggle/solution_nav_userprofile_toggle.tsx
@@ -19,7 +19,7 @@ import { i18n } from '@kbn/i18n';
 import type { SecurityPluginStart } from '@kbn/security-plugin/public';
 import { UserProfilesKibanaProvider } from '@kbn/user-profile-components';
 import { CoreStart } from '@kbn/core-lifecycle-browser';
-import { toMountPoint } from '@kbn/kibana-react-plugin/public';
+import { toMountPoint } from '@kbn/react-kibana-mount';
 
 import { useSolutionNavUserProfileToggle } from './use_solution_nav_userprofile_toggle';
 

diff --git a/src/plugins/navigation/tsconfig.json b/src/plugins/navigation/tsconfig.json
@@ -28,7 +28,6 @@
     "@kbn/solution-nav-oblt",
     "@kbn/config",
     "@kbn/solution-nav-analytics",
-    "@kbn/kibana-react-plugin",
     "@kbn/security-plugin",
     "@kbn/user-profile-components",
     "@kbn/core-lifecycle-browser",

diff --git a/x-pack/plugins/cloud_integrations/cloud_links/kibana.jsonc b/x-pack/plugins/cloud_integrations/cloud_links/kibana.jsonc
@@ -12,9 +12,7 @@
       "security",
       "guidedOnboarding"
     ],
-    "requiredBundles": [
-      "kibanaReact"
-    ],
+    "requiredBundles": [],
     "requiredPlugins": [
       "share"
     ]

diff --git a/...ins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/theme_darkmode_toggle.tsx b/...ins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/theme_darkmode_toggle.tsx
@@ -19,7 +19,7 @@ import type { SecurityPluginStart } from '@kbn/security-plugin/public';
 import { IUiSettingsClient } from '@kbn/core-ui-settings-browser';
 import { UserProfilesKibanaProvider } from '@kbn/user-profile-components';
 import { CoreStart } from '@kbn/core-lifecycle-browser';
-import { toMountPoint } from '@kbn/kibana-react-plugin/public';
+import { toMountPoint } from '@kbn/react-kibana-mount';
 
 import { useThemeDarkmodeToggle } from './theme_darkmode_hook';
 

diff --git a/x-pack/plugins/cloud_integrations/cloud_links/tsconfig.json b/x-pack/plugins/cloud_integrations/cloud_links/tsconfig.json
@@ -22,7 +22,6 @@
     "@kbn/core-ui-settings-browser",
     "@kbn/user-profile-components",
     "@kbn/core-lifecycle-browser",
-    "@kbn/kibana-react-plugin",
     "@kbn/share-plugin",
     "@kbn/cloud",
     "@kbn/react-kibana-mount",

diff --git a/x-pack/plugins/security/public/account_management/account_management_app.tsx b/x-pack/plugins/security/public/account_management/account_management_app.tsx
@@ -9,22 +9,18 @@ import type { History } from 'history';
 import type { FunctionComponent } from 'react';
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
-import type { Observable } from 'rxjs';
 
 import type {
   ApplicationSetup,
   AppMountParameters,
   CoreStart,
-  CoreTheme,
   StartServicesAccessor,
 } from '@kbn/core/public';
 import { i18n } from '@kbn/i18n';
 import { I18nProvider } from '@kbn/i18n-react';
-import {
-  KibanaContextProvider,
-  KibanaThemeProvider,
-  toMountPoint,
-} from '@kbn/kibana-react-plugin/public';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
+import { toMountPoint } from '@kbn/react-kibana-mount';
 import type { AuthenticationServiceSetup } from '@kbn/security-plugin-types-public';
 import { Router } from '@kbn/shared-ux-router';
 import { UserProfilesKibanaProvider } from '@kbn/user-profile-components';
@@ -51,7 +47,7 @@ export const accountManagementApp = Object.freeze({
       }),
       visibleIn: [],
       appRoute: '/security/account',
-      async mount({ element, theme$, history }: AppMountParameters) {
+      async mount({ element, history }: AppMountParameters) {
         const [[coreStart], { AccountManagementPage }] = await Promise.all([
           getStartServices(),
           import('./account_management_page'),
@@ -60,7 +56,6 @@ export const accountManagementApp = Object.freeze({
         render(
           <Providers
             services={coreStart}
-            theme$={theme$}
             history={history}
             authc={authc}
             securityApiClients={securityApiClients}
@@ -78,7 +73,6 @@ export const accountManagementApp = Object.freeze({
 
 export interface ProvidersProps {
   services: CoreStart;
-  theme$: Observable<CoreTheme>;
   history: History;
   authc: AuthenticationServiceSetup;
   securityApiClients: SecurityApiClients;
@@ -87,7 +81,6 @@ export interface ProvidersProps {
 
 export const Providers: FunctionComponent<ProvidersProps> = ({
   services,
-  theme$,
   history,
   authc,
   securityApiClients,
@@ -98,7 +91,7 @@ export const Providers: FunctionComponent<ProvidersProps> = ({
     <AuthenticationProvider authc={authc}>
       <SecurityApiClientsProvider {...securityApiClients}>
         <I18nProvider>
-          <KibanaThemeProvider theme$={theme$}>
+          <KibanaThemeProvider theme={services.theme}>
             <Router history={history}>
               <BreadcrumbsProvider onChange={onChange}>
                 <UserProfilesKibanaProvider

diff --git a/x-pack/plugins/security/public/account_management/account_management_page.test.tsx b/x-pack/plugins/security/public/account_management/account_management_page.test.tsx
@@ -8,7 +8,7 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { coreMock, scopedHistoryMock, themeServiceMock } from '@kbn/core/public/mocks';
+import { coreMock, scopedHistoryMock } from '@kbn/core/public/mocks';
 
 import { Providers } from './account_management_app';
 import { AccountManagementPage } from './account_management_page';
@@ -31,7 +31,6 @@ describe('<AccountManagementPage>', () => {
       },
     },
   };
-  const theme$ = themeServiceMock.createTheme$();
   let history = scopedHistoryMock.create();
   const authc = securityMock.createSetup().authc;
 
@@ -55,7 +54,6 @@ describe('<AccountManagementPage>', () => {
     const { findByRole } = render(
       <Providers
         services={coreStart}
-        theme$={theme$}
         history={history}
         authc={authc}
         securityApiClients={{

diff --git a/x-pack/plugins/security/public/account_management/user_profile/user_profile.test.tsx b/x-pack/plugins/security/public/account_management/user_profile/user_profile.test.tsx
@@ -10,7 +10,7 @@ import { mount } from 'enzyme';
 import type { FunctionComponent } from 'react';
 import React from 'react';
 
-import { coreMock, scopedHistoryMock, themeServiceMock } from '@kbn/core/public/mocks';
+import { coreMock, scopedHistoryMock } from '@kbn/core/public/mocks';
 
 import { UserProfile, useUserProfileForm } from './user_profile';
 import { UserProfileAPIClient } from '..';
@@ -22,14 +22,12 @@ import { Providers } from '../account_management_app';
 
 const user = mockAuthenticatedUser();
 const coreStart = coreMock.createStart();
-const theme$ = themeServiceMock.createTheme$();
 let history = scopedHistoryMock.create();
 const authc = securityMock.createSetup().authc;
 
 const wrapper: FunctionComponent = ({ children }) => (
   <Providers
     services={coreStart}
-    theme$={theme$}
     history={history}
     authc={authc}
     securityApiClients={{
@@ -197,7 +195,6 @@ describe('useUserProfileForm', () => {
       const testWrapper = mount(
         <Providers
           services={coreStart}
-          theme$={theme$}
           history={history}
           authc={authc}
           securityApiClients={{
@@ -220,7 +217,6 @@ describe('useUserProfileForm', () => {
       const testWrapper = mount(
         <Providers
           services={coreStart}
-          theme$={theme$}
           history={history}
           authc={authc}
           securityApiClients={{
@@ -245,7 +241,6 @@ describe('useUserProfileForm', () => {
       const testWrapper = mount(
         <Providers
           services={coreStart}
-          theme$={theme$}
           history={history}
           authc={authc}
           securityApiClients={{
@@ -279,7 +274,6 @@ describe('useUserProfileForm', () => {
       const testWrapper = mount(
         <Providers
           services={coreStart}
-          theme$={theme$}
           history={history}
           authc={authc}
           securityApiClients={{
@@ -330,7 +324,6 @@ describe('useUserProfileForm', () => {
       const testWrapper = mount(
         <Providers
           services={coreStart}
-          theme$={theme$}
           history={history}
           authc={authc}
           securityApiClients={{
@@ -367,7 +360,6 @@ describe('useUserProfileForm', () => {
       const testWrapper = mount(
         <Providers
           services={coreStart}
-          theme$={theme$}
           history={history}
           authc={authc}
           securityApiClients={{
@@ -406,7 +398,6 @@ describe('useUserProfileForm', () => {
       const testWrapper = mount(
         <Providers
           services={coreStart}
-          theme$={theme$}
           history={history}
           authc={authc}
           securityApiClients={{
@@ -434,7 +425,6 @@ describe('useUserProfileForm', () => {
       const testWrapper = mount(
         <Providers
           services={coreStart}
-          theme$={theme$}
           history={history}
           authc={authc}
           securityApiClients={{

diff --git a/x-pack/plugins/security/tsconfig.json b/x-pack/plugins/security/tsconfig.json
@@ -76,6 +76,8 @@
     "@kbn/core-security-browser",
     "@kbn/core-security-server",
     "@kbn/core-http-router-server-internal",
+    "@kbn/react-kibana-mount",
+    "@kbn/react-kibana-context-theme",
   ],
   "exclude": [
     "target/**/*",