From e8c73c79fc52672968cfec57f2a4da1318177b8b Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 8 Oct 2024 09:50:28 +0200
Subject: [PATCH] fix: handle lots of project roles better (#8383)

This PR improves how we handle cases where you have lots of roles or roles with very long names.

It puts project roles into it's own little area (and turns it into a list!). We'll show three roles by default. If they all have super long names, we'll split them up onto multiple lines.

Additionally, the headers and avatar group will no longer wrap.

So in edge case territory, it'll look like this:
![image](https://github.com/user-attachments/assets/afb1a809-f6f4-4d25-9796-6abaa15445c1)

And what if one role has an even longer name? It'll wrap inside the badge:
![image](https://github.com/user-attachments/assets/f3b42cc5-2f5a-4447-9e5e-edef7f92f977)
---
 .../personalDashboard/RoleAndOwnerInfo.tsx    | 90 +++++++++++++++++--
 1 file changed, 81 insertions(+), 9 deletions(-)

diff --git a/frontend/src/component/personalDashboard/RoleAndOwnerInfo.tsx b/frontend/src/component/personalDashboard/RoleAndOwnerInfo.tsx
index 3e19530420..c84beec347 100644
--- a/frontend/src/component/personalDashboard/RoleAndOwnerInfo.tsx
+++ b/frontend/src/component/personalDashboard/RoleAndOwnerInfo.tsx
@@ -1,7 +1,8 @@
-import { styled } from '@mui/material';
+import { Typography, styled } from '@mui/material';
 import { Badge } from 'component/common/Badge/Badge';
 import { AvatarGroupFromOwners } from 'component/common/AvatarGroupFromOwners/AvatarGroupFromOwners';
 import type { ProjectSchemaOwners } from 'openapi';
+import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
 
 type Props = {
     roles: string[];
@@ -22,26 +23,97 @@ const InfoSection = styled('div')(({ theme }) => ({
     alignItems: 'center',
 }));
 
+const Roles = styled('ul')(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1),
+    flexFlow: 'row wrap',
+    listStyle: 'none',
+    padding: 0,
+}));
+
+const TooltipRoles = styled('ul')(({ theme }) => ({
+    gap: theme.spacing(1),
+    flexFlow: 'column',
+    display: 'flex',
+    listStyle: 'none',
+    padding: 0,
+}));
+
+const RoleBadge = styled(Badge)({
+    whitespace: 'nowrap',
+});
+
+const StyledAvatarGroup = styled(AvatarGroupFromOwners)({
+    width: 'max-content',
+});
+
 export const RoleAndOwnerInfo = ({ roles, owners }: Props) => {
+    const firstRoles = roles.slice(0, 3);
+    const extraRoles = roles.slice(3);
     return (
         <Wrapper>
             <InfoSection>
                 {roles.length > 0 ? (
                     <>
-                        <span>Your roles in this project:</span>
-                        {roles.map((role) => (
-                            <Badge key={role} color='secondary'>
-                                {role}
-                            </Badge>
-                        ))}
+                        <Typography
+                            sx={{
+                                whiteSpace: 'nowrap',
+                            }}
+                            variant='body1'
+                            component='h4'
+                        >
+                            Your roles in this project:
+                        </Typography>
+                        <Roles>
+                            {firstRoles.map((role) => (
+                                <li>
+                                    <RoleBadge key={role} color='secondary'>
+                                        {role}
+                                    </RoleBadge>
+                                </li>
+                            ))}
+                            {extraRoles.length ? (
+                                <li>
+                                    <HtmlTooltip
+                                        arrow
+                                        title={
+                                            <TooltipRoles>
+                                                {extraRoles.map((role) => (
+                                                    <li>
+                                                        <RoleBadge>
+                                                            {role}
+                                                        </RoleBadge>
+                                                    </li>
+                                                ))}
+                                            </TooltipRoles>
+                                        }
+                                    >
+                                        <RoleBadge
+                                            key={'extra-roles'}
+                                            color='secondary'
+                                        >
+                                            {`+ ${extraRoles.length} more`}
+                                        </RoleBadge>
+                                    </HtmlTooltip>
+                                </li>
+                            ) : null}
+                        </Roles>
                     </>
                 ) : (
                     <span>You have no project roles in this project.</span>
                 )}
             </InfoSection>
             <InfoSection>
-                <span>Project owner{owners.length > 1 ? 's' : ''}</span>
-                <AvatarGroupFromOwners users={owners} avatarLimit={3} />
+                <Typography
+                    variant='body1'
+                    component='h4'
+                    sx={{
+                        whiteSpace: 'nowrap',
+                    }}
+                >
+                    Project owner{owners.length > 1 ? 's' : ''}
+                </Typography>
+                <StyledAvatarGroup users={owners} avatarLimit={3} />
             </InfoSection>
         </Wrapper>
     );