Export the required components from the Security plugin and

use them in the new AccountSettings component

x-pack/plugins/enterprise_search/public/applications/workplace_search/index.tsx

@@ -28,7 +28,9 @@ import {
   ORG_SETTINGS_PATH,
   ROLE_MAPPINGS_PATH,
   SECURITY_PATH,
+  PERSONAL_SETTINGS_PATH,
 } from './routes';
+import { AccountSettings } from './views/account_settings';
 import { SourcesRouter } from './views/content_sources';
 import { SourceAdded } from './views/content_sources/components/source_added';
 import { SourceSubNav } from './views/content_sources/components/source_sub_nav';
@@ -103,6 +105,11 @@ export const WorkplaceSearchConfigured: React.FC<InitialAppData> = (props) => {
           <SourcesRouter />
         </PrivateSourcesLayout>
       </Route>
+      <Route path={PERSONAL_SETTINGS_PATH}>
+        <PrivateSourcesLayout restrictWidth readOnlyMode={readOnlyMode}>
+          <AccountSettings />
+        </PrivateSourcesLayout>
+      </Route>
       <Route path={SOURCES_PATH}>
         <Layout
           navigation={<WorkplaceSearchNav sourcesSubNav={showSourcesSubnav && <SourceSubNav />} />}

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

@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+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 [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,
+  ]);
+
+  if (!currentUser) {
+    return null;
+  }
+
+  return (
+    <>
+      <PersonalInfo user={currentUser} />
+      <ChangePassword
+        user={currentUser}
+        userAPIClient={new UserAPIClient(http)}
+        notifications={notifications}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { AccountSettings } from './account_settings';