From 3e1a0c8f0d6cb1f4eebcbf1e3fc32e353f72e27e Mon Sep 17 00:00:00 2001
From: Devin Binnie <52460000+devinbinnie@users.noreply.github.com>
Date: Mon, 16 Jun 2025 12:44:02 -0400
Subject: [PATCH] [MM-62988] Add username prop to multi-avatar component
 (#31398)

* [MM-62988] Add username prop to multi-avatar component

* Fix the file preview avatar as well
---
 .../file_preview_modal_info.test.tsx.snap     |  1 +
 .../file_preview_modal_info.tsx               |  1 +
 .../__snapshots__/thread_footer.test.tsx.snap | 18 ++++++++++------
 .../__snapshots__/avatars.test.tsx.snap       | 21 ++++++++++++-------
 .../widgets/users/avatars/avatars.tsx         |  1 +
 5 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/webapp/channels/src/components/file_preview_modal/file_preview_modal_info/__snapshots__/file_preview_modal_info.test.tsx.snap b/webapp/channels/src/components/file_preview_modal/file_preview_modal_info/__snapshots__/file_preview_modal_info.test.tsx.snap
index 7dc686a614..11720f7285 100644
--- a/webapp/channels/src/components/file_preview_modal/file_preview_modal_info/__snapshots__/file_preview_modal_info.test.tsx.snap
+++ b/webapp/channels/src/components/file_preview_modal/file_preview_modal_info/__snapshots__/file_preview_modal_info.test.tsx.snap
@@ -8,6 +8,7 @@ exports[`components/FilePreviewModalInfo should match snapshot 1`] = `
     className="file-preview-modal__avatar"
     size="lg"
     url="/api/v4/users/user_id/image?_=0"
+    username="some-user"
   />
   <div
     className="file-preview-modal__info-details"
diff --git a/webapp/channels/src/components/file_preview_modal/file_preview_modal_info/file_preview_modal_info.tsx b/webapp/channels/src/components/file_preview_modal/file_preview_modal_info/file_preview_modal_info.tsx
index 9d40fd29b2..6f3b0e2e32 100644
--- a/webapp/channels/src/components/file_preview_modal/file_preview_modal_info/file_preview_modal_info.tsx
+++ b/webapp/channels/src/components/file_preview_modal/file_preview_modal_info/file_preview_modal_info.tsx
@@ -76,6 +76,7 @@ const FilePreviewModalInfo: React.FC<Props> = (props: Props) => {
                 (props.post && Object.keys(props.post).length > 0) &&
                 <Avatar
                     size='lg'
+                    username={user?.username}
                     url={imageURLForUser(props.post.user_id, user?.last_picture_update)}
                     className='file-preview-modal__avatar'
                 />
diff --git a/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap b/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap
index a92d4fec15..c46e1db193 100644
--- a/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap
+++ b/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap
@@ -108,9 +108,10 @@ exports[`components/threading/channel_threads/thread_footer should report total
                   }
                   tabIndex={-1}
                   url="/api/v4/users/5/image?_=0"
+                  username="first.last5"
                 >
                   <img
-                    alt="user profile image"
+                    alt="first.last5 profile image"
                     className="Avatar Avatar-sm"
                     loading="lazy"
                     onBlur={[Function]}
@@ -179,9 +180,10 @@ exports[`components/threading/channel_threads/thread_footer should report total
                   }
                   tabIndex={-1}
                   url="/api/v4/users/4/image?_=0"
+                  username="first.last4"
                 >
                   <img
-                    alt="user profile image"
+                    alt="first.last4 profile image"
                     className="Avatar Avatar-sm"
                     loading="lazy"
                     onBlur={[Function]}
@@ -250,9 +252,10 @@ exports[`components/threading/channel_threads/thread_footer should report total
                   }
                   tabIndex={-1}
                   url="/api/v4/users/3/image?_=0"
+                  username="first.last3"
                 >
                   <img
-                    alt="user profile image"
+                    alt="first.last3 profile image"
                     className="Avatar Avatar-sm"
                     loading="lazy"
                     onBlur={[Function]}
@@ -619,9 +622,10 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                   }
                   tabIndex={-1}
                   url="/api/v4/users/5/image?_=0"
+                  username="first.last5"
                 >
                   <img
-                    alt="user profile image"
+                    alt="first.last5 profile image"
                     className="Avatar Avatar-sm"
                     loading="lazy"
                     onBlur={[Function]}
@@ -690,9 +694,10 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                   }
                   tabIndex={-1}
                   url="/api/v4/users/4/image?_=0"
+                  username="first.last4"
                 >
                   <img
-                    alt="user profile image"
+                    alt="first.last4 profile image"
                     className="Avatar Avatar-sm"
                     loading="lazy"
                     onBlur={[Function]}
@@ -761,9 +766,10 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                   }
                   tabIndex={-1}
                   url="/api/v4/users/3/image?_=0"
+                  username="first.last3"
                 >
                   <img
-                    alt="user profile image"
+                    alt="first.last3 profile image"
                     className="Avatar Avatar-sm"
                     loading="lazy"
                     onBlur={[Function]}
diff --git a/webapp/channels/src/components/widgets/users/avatars/__snapshots__/avatars.test.tsx.snap b/webapp/channels/src/components/widgets/users/avatars/__snapshots__/avatars.test.tsx.snap
index 5d5a4a30f7..1269c73e88 100644
--- a/webapp/channels/src/components/widgets/users/avatars/__snapshots__/avatars.test.tsx.snap
+++ b/webapp/channels/src/components/widgets/users/avatars/__snapshots__/avatars.test.tsx.snap
@@ -62,9 +62,10 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
               }
               tabIndex={-1}
               url="/api/v4/users/1/image?_=1620680333191"
+              username="first.last1"
             >
               <img
-                alt="user profile image"
+                alt="first.last1 profile image"
                 className="Avatar Avatar-xl"
                 loading="lazy"
                 onBlur={[Function]}
@@ -334,9 +335,10 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
               }
               tabIndex={-1}
               url="/api/v4/users/1/image?_=1620680333191"
+              username="first.last1"
             >
               <img
-                alt="user profile image"
+                alt="first.last1 profile image"
                 className="Avatar Avatar-xl"
                 loading="lazy"
                 onBlur={[Function]}
@@ -405,9 +407,10 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
               }
               tabIndex={-1}
               url="/api/v4/users/2/image?_=1620680333191"
+              username="first.last2"
             >
               <img
-                alt="user profile image"
+                alt="first.last2 profile image"
                 className="Avatar Avatar-xl"
                 loading="lazy"
                 onBlur={[Function]}
@@ -476,9 +479,10 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
               }
               tabIndex={-1}
               url="/api/v4/users/3/image?_=1620680333191"
+              username="first.last3"
             >
               <img
-                alt="user profile image"
+                alt="first.last3 profile image"
                 className="Avatar Avatar-xl"
                 loading="lazy"
                 onBlur={[Function]}
@@ -604,9 +608,10 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
               }
               tabIndex={-1}
               url="/api/v4/users/1/image?_=1620680333191"
+              username="first.last1"
             >
               <img
-                alt="user profile image"
+                alt="first.last1 profile image"
                 className="Avatar Avatar-xl"
                 loading="lazy"
                 onBlur={[Function]}
@@ -675,9 +680,10 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
               }
               tabIndex={-1}
               url="/api/v4/users/2/image?_=1620680333191"
+              username="first.last2"
             >
               <img
-                alt="user profile image"
+                alt="first.last2 profile image"
                 className="Avatar Avatar-xl"
                 loading="lazy"
                 onBlur={[Function]}
@@ -746,9 +752,10 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
               }
               tabIndex={-1}
               url="/api/v4/users/3/image?_=1620680333191"
+              username="first.last3"
             >
               <img
-                alt="user profile image"
+                alt="first.last3 profile image"
                 className="Avatar Avatar-xl"
                 loading="lazy"
                 onBlur={[Function]}
diff --git a/webapp/channels/src/components/widgets/users/avatars/avatars.tsx b/webapp/channels/src/components/widgets/users/avatars/avatars.tsx
index fbec2bdc6b..e956abb89b 100644
--- a/webapp/channels/src/components/widgets/users/avatars/avatars.tsx
+++ b/webapp/channels/src/components/widgets/users/avatars/avatars.tsx
@@ -72,6 +72,7 @@ function UserAvatar({
             >
                 <Avatar
                     url={imageURLForUser(userId, user?.last_picture_update)}
+                    username={user?.username}
                     tabIndex={-1}
                     {...props}
                 />