Merge "Add display name to account hovercard"

diff --git a/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account-contents.ts b/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account-contents.ts
index ac6fa57..ffc588e 100644
--- a/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account-contents.ts
+++ b/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account-contents.ts

@@ -105,6 +105,7 @@
         .top,
         .attention,
         .status,
+        .displayName,
         .voteable {
           padding: var(--spacing-s) var(--spacing-l);
         }
@@ -181,7 +182,8 @@
         </div>
       </div>
       ${this.renderAccountStatusPlugins()} ${this.renderAccountStatus()}
-      ${this.renderLinks()} ${this.renderChangeRelatedInfoAndActions()}
+      ${this.renderDisplayName()} ${this.renderLinks()}
+      ${this.renderChangeRelatedInfoAndActions()}
     `;
   }
 
@@ -281,6 +283,16 @@
     `;
   }
 
+  private renderDisplayName() {
+    if (!this.account.display_name) return nothing;
+    return html`
+      <div class="displayName">
+        <span class="title">Display name:</span>
+        <span class="value">${this.account.display_name.trim()}</span>
+      </div>
+    `;
+  }
+
   private renderNeedsAttention() {
     if (!(this.isAttentionEnabled && this.hasUserAttention)) return nothing;
     const lastUpdate = getLastUpdate(this.account, this.change);

diff --git a/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account-contents_test.ts b/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account-contents_test.ts
index c3c48cb..281d295 100644
--- a/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account-contents_test.ts
+++ b/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account-contents_test.ts

@@ -35,6 +35,7 @@
   const ACCOUNT: AccountDetailInfo = {
     ...createAccountDetailWithId(31),
     email: 'kermit@gmail.com' as EmailAddress,
+    display_name: 'Just Kermit',
     username: 'kermit',
     name: 'Kermit The Frog',
     status: '  I am a frog  ',
@@ -76,6 +77,10 @@
           <span class="title">About me:</span>
           <span class="value">I am a frog</span>
         </div>
+        <div class="displayName">
+          <span class="title">Display name:</span>
+          <span class="value">Just Kermit</span>
+        </div>
         <div class="links">
           <gr-icon icon="link" class="linkIcon"></gr-icon>
           <a href="/q/owner:kermit@gmail.com">Changes</a>
@@ -111,6 +116,10 @@
           <span class="title"> About me: </span>
           <span class="value"> I am a frog </span>
         </div>
+        <div class="displayName">
+          <span class="title">Display name:</span>
+          <span class="value">Just Kermit</span>
+        </div>
         <div class="links">
           <gr-icon class="linkIcon" icon="link"> </gr-icon>
           <a href="/q/owner:kermit@gmail.com"> Changes </a>