Simplify import of change_password_async component by providing...

... `notifications` and `userAPIClient` props in the security plugin

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/account_settings/account_settings.tsx

@@ -10,20 +10,17 @@ import React, { useState, useEffect, useMemo } from 'react';
 import { useValues } from 'kea';
 
 import type { AuthenticatedUser } from '../../../../../../security/public';
-import { HttpLogic } from '../../../shared/http/http_logic';
 import { KibanaLogic } from '../../../shared/kibana/kibana_logic';
 
 export const AccountSettings: React.FC = () => {
-  const { security, notifications } = useValues(KibanaLogic);
-  const { http } = useValues(HttpLogic);
+  const { security } = useValues(KibanaLogic);
 
   const [currentUser, setCurrentUser] = useState<AuthenticatedUser | null>(null);
 
   useEffect(() => {
     security!.authc!.getCurrentUser().then(setCurrentUser);
   }, [security.authc]);
 
-  const UserAPIClient = security!.uiApi!.UserAPIClient;
   const PersonalInfo = useMemo(() => security!.uiApi!.components.getPersonalInfo, [security.uiApi]);
   const ChangePassword = useMemo(() => security!.uiApi!.components.getChangePassword, [
     security.uiApi,
@@ -36,11 +33,7 @@ export const AccountSettings: React.FC = () => {
   return (
     <>
       <PersonalInfo user={currentUser} />
-      <ChangePassword
-        user={currentUser}
-        userAPIClient={new UserAPIClient(http)}
-        notifications={notifications}
-      />
+      <ChangePassword user={currentUser} />
     </>
   );
 };

x-pack/plugins/security/public/account_management/change_password/change_password_async.tsx

@@ -7,11 +7,23 @@
 
 import React from 'react';
 
+import type { CoreStart } from 'src/core/public';
+
+import { UserAPIClient } from '../../management/users';
 import type { ChangePasswordProps } from './change_password';
 
-export const getChangePasswordComponent = async (): Promise<React.FC<ChangePasswordProps>> => {
+export const getChangePasswordComponent = async (
+  core: CoreStart
+): Promise<React.FC<Pick<ChangePasswordProps, 'user'>>> => {
   const { ChangePassword } = await import('./change_password');
-  return (props: ChangePasswordProps) => {
-    return <ChangePassword {...props} />;
+
+  return (props: Pick<ChangePasswordProps, 'user'>) => {
+    return (
+      <ChangePassword
+        notifications={core.notifications}
+        userAPIClient={new UserAPIClient(core.http)}
+        {...props}
+      />
+    );
   };
 };

x-pack/plugins/security/public/ui_api/components.tsx

@@ -30,6 +30,6 @@ export const getComponents = ({ core }: GetComponentsOptions) => {
 
   return {
     getPersonalInfo: wrapLazy(getPersonalInfoComponent),
-    getChangePassword: wrapLazy(getChangePasswordComponent),
+    getChangePassword: wrapLazy(() => getChangePasswordComponent(core)),
   };
 };

x-pack/plugins/security/public/ui_api/index.ts

@@ -23,7 +23,7 @@ type LazyComponentFn<T> = (props: T) => ReactElement;
 export interface UiApi {
   components: {
     getPersonalInfo: LazyComponentFn<PersonalInfoProps>;
-    getChangePassword: LazyComponentFn<ChangePasswordProps>;
+    getChangePassword: LazyComponentFn<Pick<ChangePasswordProps, 'user'>>;
   };
   UserAPIClient: typeof UserAPIClient;
 }