From dad30a08f0e991ecaf94bcf48fb06d59e40a9541 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 14 Aug 2024 15:27:05 +0200
Subject: [PATCH] fix: cap number of collaborators displayed (#7879)

Caps the number of collaborators to display to a constant (currently
set to 99).

Above that, it'll always show "+99".

However, we also add a tooltip that shows you a prettified version of
the extra collaborators (using the `millify` package that we already use
for metrics)

Screenies:

< 1000 collaborators:

![image](https://github.com/user-attachments/assets/b030e77e-e23d-4cac-a1d1-7841a4ba86e7)


1000 - 1M collaborators:

![image](https://github.com/user-attachments/assets/b72ca22e-513d-4d69-b78d-c675951c894a)

1M+ collaborators:

![image](https://github.com/user-attachments/assets/6341e87d-17da-4359-bce3-e31df637cd5c)

Update, it now shows the total number of collaborators instead of the
overflow:

![image](https://github.com/user-attachments/assets/67a459c5-91b8-475d-b0e3-c5c19aaf62d7)
---
 .../component/common/AvatarGroup/AvatarGroup.tsx  | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/common/AvatarGroup/AvatarGroup.tsx b/frontend/src/component/common/AvatarGroup/AvatarGroup.tsx
index ad7a85cc0e..458f108caf 100644
--- a/frontend/src/component/common/AvatarGroup/AvatarGroup.tsx
+++ b/frontend/src/component/common/AvatarGroup/AvatarGroup.tsx
@@ -4,6 +4,7 @@ import type { IGroupUser } from 'interfaces/group';
 import { useMemo } from 'react';
 import { UserAvatar } from 'component/common/UserAvatar/UserAvatar'; // usage
 import { objectId } from 'utils/objectId';
+import millify from 'millify';
 
 const StyledAvatars = styled('div')(({ theme }) => ({
     display: 'inline-flex',
@@ -48,6 +49,8 @@ type AvatarGroupInnerProps = Omit<AvatarGroupProps, 'AvatarComponent'> & {
     AvatarComponent: typeof UserAvatar;
 };
 
+const MAX_OVERFLOW_DISPLAY_NUMBER = 99;
+
 const AvatarGroupInner = ({
     users = [],
     avatarLimit = 9,
@@ -73,16 +76,22 @@ const AvatarGroupInner = ({
         [users],
     );
 
+    const overflow = users.length - avatarLimit;
+
     return (
         <StyledAvatars className={className}>
             {shownUsers.map((user) => (
                 <AvatarComponent key={objectId(user)} user={user} />
             ))}
             <ConditionallyRender
-                condition={users.length > avatarLimit}
+                condition={overflow > 0}
                 show={
-                    <AvatarComponent>
-                        +{users.length - shownUsers.length}
+                    <AvatarComponent
+                        user={{
+                            username: `Total: ${millify(users.length)}`,
+                        }}
+                    >
+                        +{Math.min(overflow, MAX_OVERFLOW_DISPLAY_NUMBER)}
                     </AvatarComponent>
                 }
             />