Update getUserDisplayName function to use email as the first fall…

…back.

packages/kbn-user-profile-components/src/user_profile.ts

@@ -143,6 +143,11 @@ export interface GetUserDisplayNameParams {
   /**
    * Optional email of the user.
    */
+  email?: string;
+
+  /**
+   * Optional full name of the user.
+   */
   full_name?: string;
 }
 
@@ -151,5 +156,5 @@ export interface GetUserDisplayNameParams {
  * @param params Set of available user's name-related fields.
  */
 export function getUserDisplayName(params: GetUserDisplayNameParams) {
-  return params.full_name || params.username;
+  return params.full_name || params.email || params.username;
 }

x-pack/plugins/security/common/model/user.test.ts

@@ -13,12 +13,22 @@ describe('#getUserDisplayName', () => {
     expect(
       getUserDisplayName({
         full_name: 'my full name',
+        email: '[email protected]',
         username: 'foo',
       } as User)
     ).toEqual('my full name');
   });
 
-  it(`uses the username when full name is not available`, () => {
+  it(`uses the email when full name is not available available`, () => {
+    expect(
+      getUserDisplayName({
+        email: '[email protected]',
+        username: 'foo',
+      } as User)
+    ).toEqual('[email protected]');
+  });
+
+  it(`uses the username when full name and email are not available`, () => {
     expect(
       getUserDisplayName({
         username: 'foo',

x-pack/plugins/security/common/model/user.ts

@@ -38,6 +38,11 @@ export interface GetUserDisplayNameParams {
   /**
    * Optional email of the user.
    */
+  email?: string;
+
+  /**
+   * Optional full name of the user.
+   */
   full_name?: string;
 }
 
@@ -46,5 +51,5 @@ export interface GetUserDisplayNameParams {
  * @param params Set of available user's name-related fields.
  */
 export function getUserDisplayName(params: GetUserDisplayNameParams) {
-  return params.full_name || params.username;
+  return params.full_name || params.email || params.username;
 }

x-pack/plugins/security/public/management/users/edit_user/edit_user_page.tsx

@@ -76,20 +76,21 @@ export const EditUserPage: FunctionComponent<EditUserPageProps> = ({ username })
 
   const isReservedUser = isUserReserved(user);
   const isDeprecatedUser = isUserDeprecated(user);
-  const displayName = getUserDisplayName(user);
 
+  // We render email below the title already and don't need to duplicate it in the title itself.
+  const title = getUserDisplayName({ full_name: user.full_name, username: user.username });
   return (
     <>
       <EuiPageHeader
         bottomBorder
         pageTitle={
           <EuiFlexGroup alignItems="center" responsive={false}>
             <EuiFlexItem grow={false}>
-              <EuiAvatar name={displayName!} size="xl" />
+              <EuiAvatar name={getUserDisplayName(user)} size="xl" />
             </EuiFlexItem>
             <EuiFlexItem>
               <EuiTitle>
-                <h1>{displayName}</h1>
+                <h1>{title}</h1>
               </EuiTitle>
               <EuiText>{user.email}</EuiText>
             </EuiFlexItem>