Merge pull request #1709 from appsmithorg/fix/user-icon-numbers

Fix: Max 5 user icons to show for each organization on homepage

app/client/src/pages/Applications/index.tsx

@@ -554,6 +554,7 @@ const ApplicationsSection = (props: any) => {
     organizationsListComponent = updatedOrgs.map(
       (organizationObject: any, index: number) => {
         const { organization, applications, userRoles } = organizationObject;
+        const userProfiles = userRoles && userRoles.splice(5);
         const hasManageOrgPermissions = isPermitted(
           organization.userPermissions,
           PERMISSION_TYPE.MANAGE_ORGANIZATION,
@@ -598,6 +599,12 @@ const ApplicationsSection = (props: any) => {
                           key={el.username}
                         />
                       ))}
+                      {userProfiles && userProfiles.length > 0 ? (
+                        <ProfileImage
+                          className="org-share-user-icons"
+                          commonName={`+${userProfiles.length}`}
+                        />
+                      ) : null}
                     </UserImageContainer>
                     <FormDialogComponent
                       trigger={

app/client/src/pages/common/ProfileImage.tsx

@@ -19,11 +19,12 @@ export const Profile = styled.div<{ backgroundColor?: string }>`
 export default function ProfileImage(props: {
   userName?: string;
   className?: string;
+  commonName?: string;
 }) {
   const themeDetails = useSelector(getThemeDetails);
 
   const initialsAndColorCode = getInitialsAndColorCode(
-    props.userName,
+    props.commonName || props.userName,
     themeDetails.theme.colors.appCardColors,
   );
 
@@ -33,7 +34,7 @@ export default function ProfileImage(props: {
       className={props.className}
     >
       <Text type={TextType.H6} highlight>
-        {initialsAndColorCode[0]}
+        {props.commonName || initialsAndColorCode[0]}
       </Text>
     </Profile>
   );