Format mention suggestions with name + email

Screenshot: https://imgur.com/a/4Hh1xOD
Google-bug-id: b/236921879
Release-Notes: skip
Change-Id: Iab926c9fe84e322a35dd8cacffdc33134bbdba36
diff --git a/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.ts b/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.ts
index 988f970..3ea9c5d 100644
--- a/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.ts
+++ b/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.ts
@@ -612,7 +612,7 @@
       .filter(account => account.email)
       .map(account => {
         return {
-          text: account.email,
+          text: `${account.name ?? ''} <${account.email}>`,
           dataValue: account.email,
         };
       });
diff --git a/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea_test.ts b/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea_test.ts
index 93560ab..76c5033 100644
--- a/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea_test.ts
+++ b/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea_test.ts
@@ -137,8 +137,8 @@
     test('mention selector opens when previous char is \n', async () => {
       stubRestApi('getSuggestedAccounts').returns(
         Promise.resolve([
-          createAccountWithEmail('abc@google.com'),
-          createAccountWithEmail('abcdef@google.com'),
+          {...createAccountWithEmail('abc@google.com'), name: 'A'},
+          {...createAccountWithEmail('abcdef@google.com'), name: 'B'},
         ])
       );
       element.textarea!.focus();
@@ -151,6 +151,17 @@
       await waitUntil(() => element.suggestions.length > 0);
       await element.updateComplete;
 
+      assert.deepEqual(element.suggestions, [
+        {
+          dataValue: 'abc@google.com',
+          text: 'A <abc@google.com>',
+        },
+        {
+          dataValue: 'abcdef@google.com',
+          text: 'B <abcdef@google.com>',
+        },
+      ]);
+
       assert.isTrue(element.emojiSuggestions!.isHidden);
       assert.isFalse(element.mentionsSuggestions!.isHidden);
     });
diff --git a/polygerrit-ui/app/utils/account-util.ts b/polygerrit-ui/app/utils/account-util.ts
index f0bfda9..0e2317f 100644
--- a/polygerrit-ui/app/utils/account-util.ts
+++ b/polygerrit-ui/app/utils/account-util.ts
@@ -185,11 +185,11 @@
       if (!accounts) return [];
       const accountSuggestions = [];
       for (const account of accounts) {
-        let nameAndEmail;
+        let nameAndEmail: string;
         if (account.email !== undefined) {
-          nameAndEmail = `${account.name} <${account.email}>`;
+          nameAndEmail = `${account.name ?? ''} <${account.email}>`;
         } else {
-          nameAndEmail = account.name;
+          nameAndEmail = account.name ?? '';
         }
         accountSuggestions.push({
           name: nameAndEmail,