Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-23 00:22:19 +01:00
Code Issues Projects Releases Wiki Activity

fix: handle lots of project roles better (#8383)

Browse Source 
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)
This commit is contained in:
Thomas Heartman 2024-10-08 09:50:28 +02:00 committed by GitHub
parent 9c22658b5d
commit e8c73c79fc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 81 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
frontend/src/component/personalDashboard/RoleAndOwnerInfo.tsx
View File

@ -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>
);