[Workplace Search] Add Account Settings page imported from Security plugin

x-pack/plugins/enterprise_search/public/applications/__mocks__/kibana_logic.mock.ts

@@ -8,6 +8,7 @@
 import { mockHistory } from './react_router_history.mock';
 
 import { chartPluginMock } from '../../../../../../src/plugins/charts/public/mocks';
+import { securityMock } from '../../../../security/public/mocks';
 
 export const mockKibanaValues = {
   config: { host: 'http://localhost:3002' },
@@ -18,6 +19,7 @@ export const mockKibanaValues = {
   },
   history: mockHistory,
   navigateToUrl: jest.fn(),
+  security: securityMock.createStart(),
   setBreadcrumbs: jest.fn(),
   setChromeIsVisible: jest.fn(),
   setDocTitle: jest.fn(),

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

@@ -12,6 +12,7 @@ import { getContext } from 'kea';
 import { coreMock } from '../../../../../src/core/public/mocks';
 import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks';
 import { licensingMock } from '../../../licensing/public/mocks';
+import { securityMock } from '../../../security/public/mocks';
 
 import { AppSearch } from './app_search';
 import { EnterpriseSearch } from './enterprise_search';
@@ -27,6 +28,7 @@ describe('renderApp', () => {
     plugins: {
       licensing: licensingMock.createStart(),
       charts: chartPluginMock.createStartContract(),
+      security: securityMock.createStart(),
     },
   } as any;
   const pluginData = {

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

@@ -48,6 +48,7 @@ export const renderApp = (
     cloud: plugins.cloud || {},
     history: params.history,
     navigateToUrl: core.application.navigateToUrl,
+    security: plugins.security || {},
     setBreadcrumbs: core.chrome.setBreadcrumbs,
     setChromeIsVisible: core.chrome.setIsVisible,
     setDocTitle: core.chrome.docTitle.change,

x-pack/plugins/enterprise_search/public/applications/shared/kibana/kibana_logic.ts

@@ -13,6 +13,7 @@ import { kea, MakeLogicType } from 'kea';
 import { ApplicationStart, ChromeBreadcrumb } from '../../../../../../../src/core/public';
 import { ChartsPluginStart } from '../../../../../../../src/plugins/charts/public';
 import { CloudSetup } from '../../../../../cloud/public';
+import { SecurityPluginStart } from '../../../../../security/public';
 
 import { HttpLogic } from '../http';
 import { createHref, CreateHrefOptions } from '../react_router_helpers';
@@ -23,6 +24,7 @@ interface KibanaLogicProps {
   cloud: Partial<CloudSetup>;
   charts: ChartsPluginStart;
   navigateToUrl: ApplicationStart['navigateToUrl'];
+  security: Partial<SecurityPluginStart>;
   setBreadcrumbs(crumbs: ChromeBreadcrumb[]): void;
   setChromeIsVisible(isVisible: boolean): void;
   setDocTitle(title: string): void;
@@ -47,6 +49,7 @@ export const KibanaLogic = kea<MakeLogicType<KibanaValues>>({
       },
       {},
     ],
+    security: [props.security || {}, {}],
     setBreadcrumbs: [props.setBreadcrumbs, {}],
     setChromeIsVisible: [props.setChromeIsVisible, {}],
     setDocTitle: [props.setDocTitle, {}],

x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/account_header/account_header.tsx

@@ -27,7 +27,7 @@ import { getWorkplaceSearchUrl } from '../../../../shared/enterprise_search_url'
 import { EuiButtonEmptyTo } from '../../../../shared/react_router_helpers';
 import { AppLogic } from '../../../app_logic';
 import { WORKPLACE_SEARCH_TITLE, ACCOUNT_NAV } from '../../../constants';
-import { PERSONAL_SOURCES_PATH, LOGOUT_ROUTE, KIBANA_ACCOUNT_ROUTE } from '../../../routes';
+import { PERSONAL_SOURCES_PATH, LOGOUT_ROUTE, PERSONAL_SETTINGS_PATH } from '../../../routes';
 
 export const AccountHeader: React.FC = () => {
   const [isPopoverOpen, setPopover] = useState(false);
@@ -44,8 +44,7 @@ export const AccountHeader: React.FC = () => {
 
   const accountNavItems = [
     <EuiContextMenuItem key="accountSettings">
-      {/* TODO: Once auth is completed, we need to have non-admins redirect to the self-hosted form */}
-      <EuiButtonEmpty href={KIBANA_ACCOUNT_ROUTE}>{ACCOUNT_NAV.SETTINGS}</EuiButtonEmpty>
+      <EuiButtonEmptyTo to={PERSONAL_SETTINGS_PATH}>{ACCOUNT_NAV.SETTINGS}</EuiButtonEmptyTo>
     </EuiContextMenuItem>,
     <EuiContextMenuItem key="logout">
       <EuiButtonEmpty href={LOGOUT_ROUTE}>{ACCOUNT_NAV.LOGOUT}</EuiButtonEmpty>

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/routes.ts

@@ -13,7 +13,6 @@ export const SETUP_GUIDE_PATH = '/setup_guide';
 
 export const NOT_FOUND_PATH = '/404';
 export const LOGOUT_ROUTE = '/logout';
-export const KIBANA_ACCOUNT_ROUTE = '/security/account';
 
 export const LEAVE_FEEDBACK_EMAIL = '[email protected]';
 export const LEAVE_FEEDBACK_URL = `mailto:${LEAVE_FEEDBACK_EMAIL}?Subject=Elastic%20Workplace%20Search%20Feedback`;

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

@@ -0,0 +1,39 @@
+/*
+ * 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 { KibanaLogic } from '../../../shared/kibana/kibana_logic';
+
+export const AccountSettings: React.FC = () => {
+  const { security } = useValues(KibanaLogic);
+
+  const [currentUser, setCurrentUser] = useState<AuthenticatedUser | null>(null);
+
+  useEffect(() => {
+    security!.authc!.getCurrentUser().then(setCurrentUser);
+  }, [security.authc]);
+
+  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} />
+    </>
+  );
+};

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';

x-pack/plugins/enterprise_search/public/plugin.ts

@@ -21,6 +21,7 @@ import {
 } from '../../../../src/plugins/home/public';
 import { CloudSetup } from '../../cloud/public';
 import { LicensingPluginStart } from '../../licensing/public';
+import { SecurityPluginSetup, SecurityPluginStart } from '../../security/public';
 
 import {
   APP_SEARCH_PLUGIN,
@@ -42,11 +43,13 @@ export interface ClientData extends InitialAppData {
 interface PluginsSetup {
   cloud?: CloudSetup;
   home?: HomePublicPluginSetup;
+  security?: SecurityPluginSetup;
 }
 export interface PluginsStart {
   cloud?: CloudSetup;
   licensing: LicensingPluginStart;
   charts: ChartsPluginStart;
+  security?: SecurityPluginStart;
 }
 
 export class EnterpriseSearchPlugin implements Plugin {

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

@@ -17,13 +17,13 @@ import { canUserChangePassword } from '../../../common/model';
 import type { UserAPIClient } from '../../management/users';
 import { ChangePasswordForm } from '../../management/users/components/change_password_form';
 
-interface Props {
+export interface ChangePasswordProps {
   user: AuthenticatedUser;
   userAPIClient: PublicMethodsOf<UserAPIClient>;
   notifications: NotificationsSetup;
 }
 
-export class ChangePassword extends Component<Props, {}> {
+export class ChangePassword extends Component<ChangePasswordProps, {}> {
   public render() {
     const canChangePassword = canUserChangePassword(this.props.user);
 

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

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

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

@@ -6,3 +6,6 @@
  */
 
 export { accountManagementApp } from './account_management_app';
+
+export type { ChangePasswordProps } from './change_password/change_password';
+export type { PersonalInfoProps } from './personal_info/personal_info';

x-pack/plugins/security/public/account_management/personal_info/personal_info.tsx

@@ -12,11 +12,11 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 import type { AuthenticatedUser } from '../../../common/model';
 
-interface Props {
+export interface PersonalInfoProps {
   user: AuthenticatedUser;
 }
 
-export const PersonalInfo = (props: Props) => {
+export const PersonalInfo = (props: PersonalInfoProps) => {
   return (
     <EuiDescribedFormGroup
       fullWidth

x-pack/plugins/security/public/account_management/personal_info/personal_info_async.tsx

@@ -0,0 +1,17 @@
+/*
+ * 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 from 'react';
+
+import type { PersonalInfoProps } from './personal_info';
+
+export const getPersonalInfoComponent = async (): Promise<React.FC<PersonalInfoProps>> => {
+  const { PersonalInfo } = await import('./personal_info');
+  return (props: PersonalInfoProps) => {
+    return <PersonalInfo {...props} />;
+  };
+};

x-pack/plugins/security/public/mocks.ts

@@ -11,6 +11,7 @@ import { mockAuthenticatedUser } from '../common/model/authenticated_user.mock';
 import { authenticationMock } from './authentication/index.mock';
 import { navControlServiceMock } from './nav_control/index.mock';
 import { createSessionTimeoutMock } from './session/session_timeout.mock';
+import { getUiApiMock } from './ui_api/index.mock';
 
 function createSetupMock() {
   return {
@@ -23,6 +24,7 @@ function createStartMock() {
   return {
     authc: authenticationMock.createStart(),
     navControlService: navControlServiceMock.createStart(),
+    uiApi: getUiApiMock.createStart(),
   };
 }
 

x-pack/plugins/security/public/plugin.test.tsx

@@ -103,6 +103,12 @@ describe('Security Plugin', () => {
           features: {} as FeaturesPluginStart,
         })
       ).toEqual({
+        uiApi: {
+          components: {
+            getChangePassword: expect.any(Function),
+            getPersonalInfo: expect.any(Function),
+          },
+        },
         authc: {
           getCurrentUser: expect.any(Function),
           areAPIKeysEnabled: expect.any(Function),

x-pack/plugins/security/public/plugin.tsx

@@ -28,6 +28,7 @@ import { ManagementService } from './management';
 import { SecurityNavControlService } from './nav_control';
 import { SecurityCheckupService } from './security_checkup';
 import { SessionExpired, SessionTimeout, UnauthorizedResponseHttpInterceptor } from './session';
+import { getUiApi } from './ui_api';
 
 export interface PluginSetupDependencies {
   licensing: LicensingPluginSetup;
@@ -147,6 +148,7 @@ export class SecurityPlugin
     }
 
     return {
+      uiApi: getUiApi({ core }),
       navControlService: this.navControlService.start({ core }),
       authc: this.authc as AuthenticationServiceStart,
     };

x-pack/plugins/security/public/suspense_error_boundary/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 { SuspenseErrorBoundary } from './suspense_error_boundary';

x-pack/plugins/security/public/suspense_error_boundary/suspense_error_boundary.tsx

@@ -0,0 +1,54 @@
+/*
+ * 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 { EuiLoadingSpinner } from '@elastic/eui';
+import type { PropsWithChildren } from 'react';
+import React, { Component, Suspense } from 'react';
+
+import { i18n } from '@kbn/i18n';
+import type { NotificationsStart } from 'src/core/public';
+
+interface Props {
+  notifications: NotificationsStart;
+}
+
+interface State {
+  error: Error | null;
+}
+
+export class SuspenseErrorBoundary extends Component<PropsWithChildren<Props>, State> {
+  state: State = {
+    error: null,
+  };
+
+  static getDerivedStateFromError(error: Error) {
+    // Update state so next render shows fallback UI.
+    return { error };
+  }
+
+  public componentDidCatch(error: Error) {
+    const { notifications } = this.props;
+    if (notifications) {
+      const title = i18n.translate('xpack.security.uiApi.errorBoundaryToastTitle', {
+        defaultMessage: 'Failed to load Kibana asset',
+      });
+      const toastMessage = i18n.translate('xpack.security.uiApi.errorBoundaryToastMessage', {
+        defaultMessage: 'Reload page to continue.',
+      });
+      notifications.toasts.addError(error, { title, toastMessage });
+    }
+  }
+
+  render() {
+    const { children, notifications } = this.props;
+    const { error } = this.state;
+    if (!notifications || error) {
+      return null;
+    }
+    return <Suspense fallback={<EuiLoadingSpinner />}>{children}</Suspense>;
+  }
+}