Account Management: Create API keys

package.json

@@ -285,7 +285,7 @@
     "react-resizable": "^1.7.5",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-use": "^13.27.0",
+    "react-use": "^15.3.4",
     "recompose": "^0.26.0",
     "redux": "^4.0.5",
     "redux-actions": "^2.6.5",

src/plugins/kibana_react/public/notifications/create_notifications.test.tsx

@@ -54,16 +54,12 @@ test('can display string element as title', () => {
   expect(notifications.toasts.add).toHaveBeenCalledTimes(1);
   expect(notifications.toasts.add.mock.calls[0][0]).toMatchInlineSnapshot(`
     Object {
-      "color": undefined,
-      "iconType": undefined,
-      "onClose": undefined,
       "text": MountPoint {
         "reactNode": <React.Fragment />,
       },
       "title": MountPoint {
         "reactNode": "foo",
       },
-      "toastLifeTimeMs": undefined,
     }
   `);
 });
@@ -120,7 +116,6 @@ test('can set toast properties', () => {
     Object {
       "color": "danger",
       "iconType": "foo",
-      "onClose": undefined,
       "text": MountPoint {
         "reactNode": <React.Fragment>
           1
@@ -147,42 +142,36 @@ test('can display success, warning and danger toasts', () => {
     Object {
       "color": "success",
       "iconType": "check",
-      "onClose": undefined,
       "text": MountPoint {
         "reactNode": <React.Fragment />,
       },
       "title": MountPoint {
         "reactNode": "1",
       },
-      "toastLifeTimeMs": undefined,
     }
   `);
   expect(notifications.toasts.add.mock.calls[1][0]).toMatchInlineSnapshot(`
     Object {
       "color": "warning",
       "iconType": "help",
-      "onClose": undefined,
       "text": MountPoint {
         "reactNode": <React.Fragment />,
       },
       "title": MountPoint {
         "reactNode": "2",
       },
-      "toastLifeTimeMs": undefined,
     }
   `);
   expect(notifications.toasts.add.mock.calls[2][0]).toMatchInlineSnapshot(`
     Object {
       "color": "danger",
       "iconType": "alert",
-      "onClose": undefined,
       "text": MountPoint {
         "reactNode": <React.Fragment />,
       },
       "title": MountPoint {
         "reactNode": "3",
       },
-      "toastLifeTimeMs": undefined,
     }
   `);
 });

src/plugins/kibana_react/public/notifications/create_notifications.tsx

@@ -23,24 +23,14 @@ import { KibanaReactNotifications } from './types';
 import { toMountPoint } from '../util';
 
 export const createNotifications = (services: KibanaServices): KibanaReactNotifications => {
-  const show: KibanaReactNotifications['toasts']['show'] = ({
-    title,
-    body,
-    color,
-    iconType,
-    toastLifeTimeMs,
-    onClose,
-  }) => {
+  const show: KibanaReactNotifications['toasts']['show'] = ({ title, body, ...rest }) => {
     if (!services.notifications) {
       throw new TypeError('Could not show notification as notifications service is not available.');
     }
     services.notifications!.toasts.add({
       title: toMountPoint(title),
       text: toMountPoint(<>{body || null}</>),
-      color,
-      iconType,
-      toastLifeTimeMs,
-      onClose,
+      ...rest,
     });
   };
 

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

@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FunctionComponent } from 'react';
+import { ChangePassword } from './change_password';
+import { PersonalInfo } from './personal_info';
+import { AuthenticatedUser } from '../../../common/model';
+import { UserAPIClient } from '../../management';
+import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
+import { NotificationsSetup } from '../../../../../../src/core/public';
+
+export interface AccountDetailsPageProps {
+  user: AuthenticatedUser;
+  notifications: NotificationsSetup;
+}
+
+export const AccountDetailsPage: FunctionComponent<AccountDetailsPageProps> = ({
+  user,
+  notifications,
+}) => {
+  const { services } = useKibana();
+  const userAPIClient = new UserAPIClient(services.http!);
+
+  return (
+    <>
+      <PersonalInfo user={user} />
+      <ChangePassword user={user} userAPIClient={userAPIClient} notifications={notifications} />
+    </>
+  );
+};

x-pack/plugins/security/public/account_management/change_password/index.ts → x-pack/plugins/security/public/account_management/account_details_page/index.ts

@@ -4,4 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+export { AccountDetailsPage as default } from './account_details_page'; // eslint-disable-line import/no-default-export
 export { ChangePassword } from './change_password';
+export { PersonalInfo } from './personal_info';

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

@@ -4,7 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React from 'react';
-import { EuiDescribedFormGroup, EuiFormRow, EuiText } from '@elastic/eui';
+import {
+  EuiDescribedFormGroup,
+  EuiDescriptionList,
+  EuiDescriptionListTitle,
+  EuiDescriptionListDescription,
+} from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { AuthenticatedUser } from '../../../common/model';
 
@@ -31,23 +36,19 @@ export const PersonalInfo = (props: Props) => {
         />
       }
     >
-      <EuiFormRow fullWidth>
-        <EuiText size="s">
-          <dl>
-            <dt title="username" data-test-subj="username">
-              {props.user.username}
-            </dt>
-            <dd title="email" data-test-subj="email">
-              {props.user.email || (
-                <FormattedMessage
-                  id="xpack.security.account.noEmailMessage"
-                  defaultMessage="no email address"
-                />
-              )}
-            </dd>
-          </dl>
-        </EuiText>
-      </EuiFormRow>
+      <EuiDescriptionList>
+        <EuiDescriptionListTitle title="username" data-test-subj="username">
+          {props.user.username}
+        </EuiDescriptionListTitle>
+        <EuiDescriptionListDescription title="email" data-test-subj="email">
+          {props.user.email || (
+            <FormattedMessage
+              id="xpack.security.account.noEmailMessage"
+              defaultMessage="No email address"
+            />
+          )}
+        </EuiDescriptionListDescription>
+      </EuiDescriptionList>
     </EuiDescribedFormGroup>
   );
 };

x-pack/plugins/security/public/account_management/account_management_app.test.tsx

@@ -0,0 +1,65 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import ReactDOM from 'react-dom';
+import { act, screen, fireEvent } from '@testing-library/react';
+import { AppMount, AppNavLinkStatus, ScopedHistory } from '../../../../../src/core/public';
+import { coreMock } from '../../../../../src/core/public/mocks';
+import { mockAuthenticatedUser } from '../../common/model/authenticated_user.mock';
+import { securityMock } from '../mocks';
+import { accountManagementApp } from './account_management_app';
+import { createMemoryHistory } from 'history';
+
+describe('accountManagementApp', () => {
+  it('registers application', () => {
+    const { application, getStartServices } = coreMock.createSetup();
+    const { authc } = securityMock.createSetup();
+    accountManagementApp.create({ application, getStartServices, authc });
+    expect(application.register).toHaveBeenLastCalledWith({
+      id: 'security_account',
+      appRoute: '/security/account',
+      navLinkStatus: AppNavLinkStatus.hidden,
+      title: 'Account Management',
+      mount: expect.any(Function),
+    });
+  });
+
+  it('renders application and sets breadcrumbs', async () => {
+    const { application, getStartServices } = coreMock.createSetup();
+    const coreStartMock = coreMock.createStart();
+    getStartServices.mockResolvedValue([coreStartMock, {}, {}]);
+    const { authc } = securityMock.createSetup();
+    authc.getCurrentUser.mockResolvedValue(
+      mockAuthenticatedUser({ username: 'some-user', full_name: undefined })
+    );
+    accountManagementApp.create({ application, getStartServices, authc });
+    const [[{ mount }]] = application.register.mock.calls;
+    const element = document.body.appendChild(document.createElement('div'));
+
+    await act(async () => {
+      await (mount as AppMount)({
+        element,
+        appBasePath: '',
+        onAppLeave: jest.fn(),
+        setHeaderActionMenu: jest.fn(),
+        history: (createMemoryHistory() as unknown) as ScopedHistory,
+      });
+    });
+    expect(coreStartMock.chrome.setBreadcrumbs).toHaveBeenLastCalledWith([
+      expect.objectContaining({ text: 'Account Management' }),
+    ]);
+
+    fireEvent.click(screen.getByRole('tab', { name: 'API Keys' }));
+    expect(coreStartMock.chrome.setBreadcrumbs).toHaveBeenLastCalledWith([
+      expect.objectContaining({ text: 'Account Management' }),
+      expect.objectContaining({ text: 'API Keys' }),
+    ]);
+
+    // Need to cleanup manually since `mount` renders the app straight to the DOM
+    ReactDOM.unmountComponentAtNode(element);
+    document.body.removeChild(element);
+  });
+});