From 5bb087761425e3eebd2b173a150ac33d0754a21c Mon Sep 17 00:00:00 2001
From: Harmit Goswami <90732381+harmitgoswami@users.noreply.github.com>
Date: Fri, 7 Jun 2024 14:43:19 -0400
Subject: [PATCH] Added capability to mention users by username (#3253)

---
 pontoon/base/views.py                                    | 3 +++
 translate/src/api/user.ts                                | 1 +
 translate/src/modules/comments/components/AddComment.tsx | 6 ++++--
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/pontoon/base/views.py b/pontoon/base/views.py
index a46fc7eebc..5bd69d69e1 100755
--- a/pontoon/base/views.py
+++ b/pontoon/base/views.py
@@ -676,6 +676,8 @@ def get_users(request):
         .exclude(profile__system_user=True)
         # Exclude deleted users
         .exclude(email__regex=r"^deleted-user-(\w+)@example.com$")
+        # Prefetch profile for retrieving username
+        .prefetch_related("profile")
     )
     payload = []
 
@@ -685,6 +687,7 @@ def get_users(request):
                 "gravatar": u.gravatar_url(44),
                 "name": u.name_or_email,
                 "url": u.profile_url,
+                "username": u.profile.username,
             }
         )
 
diff --git a/translate/src/api/user.ts b/translate/src/api/user.ts
index 8479ae73e4..15198f0427 100644
--- a/translate/src/api/user.ts
+++ b/translate/src/api/user.ts
@@ -52,6 +52,7 @@ export type MentionUser = {
   gravatar: string;
   name: string;
   url: string;
+  username: string | null;
 };
 
 /** Dismiss Add-On Promotion. */
diff --git a/translate/src/modules/comments/components/AddComment.tsx b/translate/src/modules/comments/components/AddComment.tsx
index bbabadcd37..fa2cfc589b 100644
--- a/translate/src/modules/comments/components/AddComment.tsx
+++ b/translate/src/modules/comments/components/AddComment.tsx
@@ -135,8 +135,10 @@ export function AddComment({
   }, [initFocus]);
 
   const suggestedUsers = mentionUsers
-    .filter((user) =>
-      user.name.toLowerCase().includes(mentionSearch.toLowerCase()),
+    .filter(
+      (user) =>
+        user.username?.toLowerCase().includes(mentionSearch.toLowerCase()) ||
+        user.name.toLowerCase().includes(mentionSearch.toLowerCase()),
     )
     .slice(0, 5);