From 9f18ea9db06e9bcbdbee51364b8987729bfe15d3 Mon Sep 17 00:00:00 2001
From: Vadim Yakhin <yakhin.v@gmail.com>
Date: Tue, 8 Jun 2021 12:06:18 -0300
Subject: [PATCH] Simplify import of change_password_async component by
 providing... ... `notifications` and `userAPIClient` props in the security
 plugin

---
 .../account_settings/account_settings.tsx      | 11 ++---------
 .../change_password/change_password_async.tsx  | 18 +++++++++++++++---
 .../security/public/ui_api/components.tsx      |  2 +-
 x-pack/plugins/security/public/ui_api/index.ts |  2 +-
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/account_settings/account_settings.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/account_settings/account_settings.tsx
index 3a23f8dadf70f..e28faaeec8993 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/account_settings/account_settings.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/account_settings/account_settings.tsx
@@ -10,12 +10,10 @@ 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);
 
@@ -23,7 +21,6 @@ export const AccountSettings: React.FC = () => {
     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} />
     </>
   );
 };
diff --git a/x-pack/plugins/security/public/account_management/change_password/change_password_async.tsx b/x-pack/plugins/security/public/account_management/change_password/change_password_async.tsx
index 628cfe701705a..4dabd2f7b7942 100644
--- a/x-pack/plugins/security/public/account_management/change_password/change_password_async.tsx
+++ b/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}
+      />
+    );
   };
 };
diff --git a/x-pack/plugins/security/public/ui_api/components.tsx b/x-pack/plugins/security/public/ui_api/components.tsx
index a595a361a04dd..eeee7946663b7 100644
--- a/x-pack/plugins/security/public/ui_api/components.tsx
+++ b/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)),
   };
 };
diff --git a/x-pack/plugins/security/public/ui_api/index.ts b/x-pack/plugins/security/public/ui_api/index.ts
index 1de70e584a512..98c020e91e203 100644
--- a/x-pack/plugins/security/public/ui_api/index.ts
+++ b/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;
 }