chore: group cards redesign (#9048)

https://linear.app/unleash/issue/2-3108/cards-design-groups

Redesigns the group cards.

Like instructed in the task, I took inspiration from the project and
integration cards, along with the Figma sketch.

Also includes a new `Truncator` generic helper component.

### Before


![image](https://github.com/user-attachments/assets/e47ebb3d-a089-4cbb-962c-53af9f1933f9)

### After


![image](https://github.com/user-attachments/assets/ffeb96b7-e6c4-4433-a847-2e267beb72e9)

Hovering over the "X projects" label reveals the projects the group
belongs to. You can navigate to any project by clicking its badge.


![image](https://github.com/user-attachments/assets/cf06c7f5-011e-4b89-8e40-ed42e5817625)

Truncated titles and descriptions show a tooltip with the full text on
hover.


![image](https://github.com/user-attachments/assets/6fc598e7-b08a-4bfa-8cb2-4153a81f2a48)


![image](https://github.com/user-attachments/assets/91ceba73-c43e-4070-9de0-2a182a3d9257)

frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx

@@ -1,4 +1,4 @@
-import { styled, Tooltip } from '@mui/material';
+import { Box, Card, styled } from '@mui/material';
 import type { IGroup } from 'interfaces/group';
 import { Link, useNavigate } from 'react-router-dom';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@@ -7,88 +7,119 @@ import { GroupCardActions } from './GroupCardActions/GroupCardActions';
 import TopicOutlinedIcon from '@mui/icons-material/TopicOutlined';
 import { RoleBadge } from 'component/common/RoleBadge/RoleBadge';
 import { useScimSettings } from 'hooks/api/getters/useScimSettings/useScimSettings';
-import { AvatarGroup } from 'component/common/AvatarGroup/AvatarGroup';
+import {
+    AvatarComponent,
+    AvatarGroup,
+} from 'component/common/AvatarGroup/AvatarGroup';
+import GroupsIcon from '@mui/icons-material/GroupsOutlined';
+import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
+import { Highlighter } from 'component/common/Highlighter/Highlighter';
+import { Truncator } from 'component/common/Truncator/Truncator';
+import { TooltipLink } from 'component/common/TooltipLink/TooltipLink';
 
-const StyledLink = styled(Link)(({ theme }) => ({
+const StyledCardLink = styled(Link)(({ theme }) => ({
+    color: 'inherit',
     textDecoration: 'none',
-    color: theme.palette.text.primary,
+    border: 'none',
+    padding: '0',
+    background: 'transparent',
+    fontFamily: theme.typography.fontFamily,
+    pointer: 'cursor',
 }));
 
-const StyledGroupCard = styled('aside')(({ theme }) => ({
+const StyledCard = styled(Card)(({ theme }) => ({
-    padding: theme.spacing(2.5),
-    height: '100%',
-    border: `1px solid ${theme.palette.divider}`,
-    borderRadius: theme.shape.borderRadiusLarge,
-    boxShadow: theme.boxShadows.card,
     display: 'flex',
     flexDirection: 'column',
-    [theme.breakpoints.up('md')]: {
+    justifyContent: 'space-between',
-        padding: theme.spacing(4),
+    height: '100%',
+    boxShadow: 'none',
+    border: `1px solid ${theme.palette.divider}`,
+    [theme.breakpoints.down('sm')]: {
+        justifyContent: 'center',
     },
+    transition: 'background-color 0.2s ease-in-out',
+    backgroundColor: theme.palette.background.default,
     '&:hover': {
-        transition: 'background-color 0.2s ease-in-out',
         backgroundColor: theme.palette.neutral.light,
     },
+    borderRadius: theme.shape.borderRadiusMedium,
 }));
 
-const StyledRow = styled('div')(() => ({
+const StyledCardBody = styled(Box)(({ theme }) => ({
+    padding: theme.spacing(2),
     display: 'flex',
+    flexFlow: 'column',
+    height: '100%',
+    position: 'relative',
+}));
+
+const StyledCardBodyHeader = styled('div')(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1),
+    width: '100%',
     alignItems: 'center',
     justifyContent: 'space-between',
 }));
 
-const StyledTitleRow = styled(StyledRow)(() => ({
+const StyledCardIconContainer = styled(Box)(({ theme }) => ({
-    alignItems: 'flex-start',
+    display: 'grid',
+    placeItems: 'center',
+    padding: theme.spacing(0.5),
+    alignSelf: 'baseline',
+    backgroundColor: theme.palette.secondary.light,
+    color: theme.palette.primary.main,
+    borderRadius: theme.shape.borderRadiusMedium,
+    '& > svg': {
+        height: theme.spacing(2),
+        width: theme.spacing(2),
+    },
 }));
 
-const StyledBottomRow = styled(StyledRow)(({ theme }) => ({
+const StyledCardTitle = styled('h3')(({ theme }) => ({
-    marginTop: 'auto',
+    margin: 0,
-    alignItems: 'flex-end',
+    marginRight: 'auto',
+    fontWeight: theme.typography.fontWeightRegular,
+    fontSize: theme.typography.body1.fontSize,
+    lineHeight: '1.2',
+}));
+
+const StyledCardDescription = styled('p')(({ theme }) => ({
+    color: theme.palette.text.secondary,
+    fontSize: theme.fontSizes.smallBody,
+    marginTop: theme.spacing(2),
+}));
+
+const StyledCardFooter = styled(Box)(({ theme }) => ({
+    padding: theme.spacing(0, 2),
+    display: 'flex',
+    background: theme.palette.envAccordion.expanded,
+    boxShadow: theme.boxShadows.accordionFooter,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderTop: `1px solid ${theme.palette.divider}`,
+    minHeight: theme.spacing(6.25),
+}));
+
+const StyledCardFooterSpan = styled('span')(({ theme }) => ({
+    fontSize: theme.fontSizes.smallerBody,
+    color: theme.palette.text.secondary,
+    textWrap: 'nowrap',
+}));
+
+const StyledAvatarComponent = styled(AvatarComponent)(({ theme }) => ({
+    height: theme.spacing(2.5),
+    width: theme.spacing(2.5),
+    marginLeft: theme.spacing(-0.75),
+}));
+
+const StyledProjectsTooltip = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
     gap: theme.spacing(1),
 }));
 
-const StyledHeaderTitle = styled('h2')(({ theme }) => ({
+const StyledProjectBadge = styled(Badge)({
-    fontSize: theme.fontSizes.mainHeader,
+    cursor: 'pointer',
-    fontWeight: theme.fontWeight.medium,
-}));
-
-const StyledHeaderActions = styled('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    color: theme.palette.text.secondary,
-    fontSize: theme.fontSizes.smallBody,
-}));
-
-const StyledDescription = styled('p')(({ theme }) => ({
-    color: theme.palette.text.secondary,
-    fontSize: theme.fontSizes.smallBody,
-    marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(4),
-}));
-
-const StyledCounterDescription = styled('span')(({ theme }) => ({
-    color: theme.palette.text.secondary,
-    marginLeft: theme.spacing(1),
-}));
-
-const ProjectBadgeContainer = styled('div')(({ theme }) => ({
-    maxWidth: '50%',
-    display: 'flex',
-    justifyContent: 'flex-end',
-    gap: theme.spacing(0.5),
-    flexWrap: 'wrap',
-}));
-
-const InfoBadgeDescription = styled('span')(({ theme }) => ({
-    display: 'flex',
-    color: theme.palette.text.secondary,
-    alignItems: 'center',
-    gap: theme.spacing(1),
-    fontSize: theme.fontSizes.smallBody,
-}));
-
-const ProjectNameBadge = styled(Badge)({
-    wordBreak: 'break-word',
 });
 
 interface IGroupCardProps {
@@ -104,6 +135,8 @@ export const GroupCard = ({
 }: IGroupCardProps) => {
     const navigate = useNavigate();
 
+    const { searchQuery } = useSearchHighlightContext();
+
     const {
         settings: { enabled: scimEnabled },
     } = useScimSettings();
@@ -111,84 +144,104 @@ export const GroupCard = ({
 
     return (
         <>
-            <StyledLink key={group.id} to={`/admin/groups/${group.id}`}>
+            <StyledCardLink to={`/admin/groups/${group.id}`}>
-                <StyledGroupCard>
+                <StyledCard>
-                    <StyledTitleRow>
+                    <StyledCardBody>
-                        <StyledHeaderTitle>{group.name}</StyledHeaderTitle>
+                        <StyledCardBodyHeader>
-                        <StyledHeaderActions>
+                            <StyledCardIconContainer>
+                                <GroupsIcon />
+                            </StyledCardIconContainer>
+                            <Truncator
+                                title={group.name}
+                                arrow
+                                component={StyledCardTitle}
+                            >
+                                <Highlighter search={searchQuery}>
+                                    {group.name}
+                                </Highlighter>
+                            </Truncator>
+                            <ConditionallyRender
+                                condition={Boolean(group.rootRole)}
+                                show={
+                                    <RoleBadge
+                                        roleId={group.rootRole!}
+                                        hideIcon
+                                    />
+                                }
+                            />
                             <GroupCardActions
                                 groupId={group.id}
                                 onEditUsers={() => onEditUsers(group)}
                                 onRemove={() => onRemoveGroup(group)}
                                 isScimGroup={isScimGroup}
                             />
-                        </StyledHeaderActions>
+                        </StyledCardBodyHeader>
-                    </StyledTitleRow>
-                    <ConditionallyRender
-                        condition={Boolean(group.rootRole)}
-                        show={
-                            <InfoBadgeDescription>
-                                <p>Root role:</p>
-                                <RoleBadge roleId={group.rootRole!} />
-                            </InfoBadgeDescription>
-                        }
-                    />
-
-                    <StyledDescription>{group.description}</StyledDescription>
-                    <StyledBottomRow>
                         <ConditionallyRender
-                            condition={group.users?.length > 0}
+                            condition={Boolean(group.description)}
-                            show={<AvatarGroup users={group.users} />}
+                            show={
-                            elseShow={
+                                <Truncator
-                                <StyledCounterDescription>
+                                    lines={2}
-                                    This group has no users.
+                                    title={group.description}
-                                </StyledCounterDescription>
+                                    arrow
+                                    component={StyledCardDescription}
+                                >
+                                    <Highlighter search={searchQuery}>
+                                        {group.description}
+                                    </Highlighter>
+                                </Truncator>
                             }
                         />
-                        <ProjectBadgeContainer>
+                    </StyledCardBody>
-                            <ConditionallyRender
+                    <StyledCardFooter>
-                                condition={group.projects.length > 0}
+                        <ConditionallyRender
-                                show={group.projects.map((project) => (
+                            condition={group.users.length > 0}
-                                    <Tooltip
+                            show={
-                                        key={project}
+                                <AvatarGroup
-                                        title='View project'
+                                    users={group.users}
-                                        arrow
+                                    AvatarComponent={StyledAvatarComponent}
-                                        placement='bottom-end'
+                                />
-                                        describeChild
+                            }
-                                    >
+                            elseShow={
-                                        <ProjectNameBadge
+                                <StyledCardFooterSpan>
-                                            onClick={(e) => {
+                                    This group has no users
-                                                e.preventDefault();
+                                </StyledCardFooterSpan>
-                                                navigate(
+                            }
-                                                    `/projects/${project}/settings/access`,
+                        />
-                                                );
+                        <ConditionallyRender
-                                            }}
+                            condition={group.projects.length > 0}
-                                            color='secondary'
+                            show={
-                                            icon={<TopicOutlinedIcon />}
+                                <TooltipLink
-                                        >
+                                    component='span'
-                                            {project}
+                                    tooltip={
-                                        </ProjectNameBadge>
+                                        <StyledProjectsTooltip>
-                                    </Tooltip>
+                                            {group.projects.map((project) => (
-                                ))}
+                                                <StyledProjectBadge
-                                elseShow={
+                                                    key={project}
-                                    <ConditionallyRender
+                                                    onClick={(e) => {
-                                        condition={!group.rootRole}
+                                                        e.preventDefault();
-                                        show={
+                                                        navigate(
-                                            <Tooltip
+                                                            `/projects/${project}/settings/access`,
-                                                title='This group is not used in any project'
+                                                        );
-                                                arrow
+                                                    }}
-                                                describeChild
+                                                    color='secondary'
-                                            >
+                                                    icon={<TopicOutlinedIcon />}
-                                                <Badge>Not used</Badge>
+                                                >
-                                            </Tooltip>
+                                                    {project}
-                                        }
+                                                </StyledProjectBadge>
-                                    />
+                                            ))}
-                                }
+                                        </StyledProjectsTooltip>
-                            />
+                                    }
-                        </ProjectBadgeContainer>
+                                >
-                    </StyledBottomRow>
+                                    <StyledCardFooterSpan>
-                </StyledGroupCard>
+                                        {group.projects.length} project
-            </StyledLink>
+                                        {group.projects.length !== 1 && 's'}
+                                    </StyledCardFooterSpan>
+                                </TooltipLink>
+                            }
+                        />
+                    </StyledCardFooter>
+                </StyledCard>
+            </StyledCardLink>
         </>
     );
 };

frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardActions/GroupCardActions.tsx

@@ -18,9 +18,11 @@ import { Link } from 'react-router-dom';
 import { scimGroupTooltip } from 'component/admin/groups/group-constants';
 
 const StyledActions = styled('div')(({ theme }) => ({
+    margin: theme.spacing(-1),
+    marginLeft: theme.spacing(-0.5),
     display: 'flex',
     justifyContent: 'center',
-    transform: 'translate3d(8px, -6px, 0)',
+    alignItems: 'center',
 }));
 
 const StyledPopover = styled(Popover)(({ theme }) => ({
@@ -51,7 +53,7 @@ export const GroupCardActions: FC<IGroupCardActions> = ({
         setAnchorEl(null);
     };
 
-    const id = `feature-${groupId}-actions`;
+    const id = `group-${groupId}-actions`;
     const menuId = `${id}-menu`;
 
     return (
@@ -74,6 +76,7 @@ export const GroupCardActions: FC<IGroupCardActions> = ({
                         aria-expanded={open ? 'true' : undefined}
                         onClick={handleClick}
                         type='button'
+                        size='small'
                     >
                         <MoreVert />
                     </IconButton>

frontend/src/component/admin/groups/GroupsList/GroupsList.tsx

@@ -6,7 +6,7 @@ import { PageContent } from 'component/common/PageContent/PageContent';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { Search } from 'component/common/Search/Search';
-import { Grid, useMediaQuery } from '@mui/material';
+import { styled, useMediaQuery } from '@mui/material';
 import theme from 'themes/theme';
 import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
 import { TablePlaceholder } from 'component/common/Table';
@@ -19,6 +19,12 @@ import { NAVIGATE_TO_CREATE_GROUP } from 'utils/testIds';
 import { EditGroupUsers } from '../Group/EditGroupUsers/EditGroupUsers';
 import { RemoveGroup } from '../RemoveGroup/RemoveGroup';
 
+const StyledGridContainer = styled('div')(({ theme }) => ({
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
+    gap: theme.spacing(2),
+}));
+
 type PageQueryType = Partial<Record<'search', string>>;
 
 const groupsSearch = (group: IGroup, searchValue: string) => {
@@ -131,17 +137,16 @@ export const GroupsList: VFC = () => {
             }
         >
             <SearchHighlightProvider value={searchValue}>
-                <Grid container spacing={2}>
+                <StyledGridContainer>
                     {data.map((group) => (
-                        <Grid key={group.id} item xs={12} md={6}>
+                        <GroupCard
-                            <GroupCard
+                            key={group.id}
-                                group={group}
+                            group={group}
-                                onEditUsers={onEditUsers}
+                            onEditUsers={onEditUsers}
-                                onRemoveGroup={onRemoveGroup}
+                            onRemoveGroup={onRemoveGroup}
-                            />
+                        />
-                        </Grid>
                     ))}
-                </Grid>
+                </StyledGridContainer>
             </SearchHighlightProvider>
             <ConditionallyRender
                 condition={!loading && data.length === 0}

frontend/src/component/common/AvatarGroup/AvatarGroup.tsx

@@ -85,7 +85,7 @@ const AvatarGroupInner = ({
                     return 0;
                 })
                 .slice(0, avatarLimit),
-        [users],
+        [users, avatarLimit],
     );
 
     const overflow = users.length - avatarLimit;

frontend/src/component/common/RoleBadge/RoleBadge.tsx

@@ -6,16 +6,19 @@ import { RoleDescription } from 'component/common/RoleDescription/RoleDescriptio
 
 interface IRoleBadgeProps {
     roleId: number;
+    hideIcon?: boolean;
     children?: string;
 }
 
-export const RoleBadge = ({ roleId, children }: IRoleBadgeProps) => {
+export const RoleBadge = ({ roleId, hideIcon, children }: IRoleBadgeProps) => {
     const { role } = useRole(roleId.toString());
 
+    const icon = hideIcon ? undefined : <UserIcon />;
+
     if (!role) {
         if (children)
             return (
-                <Badge color='success' icon={<UserIcon />}>
+                <Badge color='success' icon={icon}>
                     {children}
                 </Badge>
             );
@@ -24,11 +27,7 @@ export const RoleBadge = ({ roleId, children }: IRoleBadgeProps) => {
 
     return (
         <HtmlTooltip title={<RoleDescription roleId={roleId} tooltip />} arrow>
-            <Badge
+            <Badge color='success' icon={icon} sx={{ cursor: 'pointer' }}>
-                color='success'
-                icon={<UserIcon />}
-                sx={{ cursor: 'pointer' }}
-            >
                 {role.name}
             </Badge>
         </HtmlTooltip>

frontend/src/component/common/StringTruncator/StringTruncator.tsx

@@ -8,6 +8,9 @@ interface IStringTruncatorProps {
     maxLength: number;
 }
 
+/**
+ * @Deprecated in favor of Truncator
+ */
 const StringTruncator = ({
     text,
     maxWidth,

frontend/src/component/common/Truncator/Truncator.tsx

@@ -0,0 +1,75 @@
+import { useState, useEffect, useRef } from 'react';
+import {
+    Box,
+    type BoxProps,
+    styled,
+    Tooltip,
+    type TooltipProps,
+} from '@mui/material';
+
+const StyledTruncatorContainer = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'lines',
+})<{ lines: number }>(({ lines }) => ({
+    lineClamp: `${lines}`,
+    WebkitLineClamp: lines,
+    display: '-webkit-box',
+    boxOrient: 'vertical',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    alignItems: 'flex-start',
+    WebkitBoxOrient: 'vertical',
+    wordBreak: 'break-word',
+}));
+
+type OverridableTooltipProps = Omit<TooltipProps, 'children'>;
+
+interface ITruncatorProps extends BoxProps {
+    lines?: number;
+    title?: string;
+    arrow?: boolean;
+    tooltipProps?: OverridableTooltipProps;
+    children: React.ReactNode;
+}
+
+export const Truncator = ({
+    lines = 1,
+    title,
+    arrow,
+    tooltipProps,
+    children,
+    ...props
+}: ITruncatorProps) => {
+    const [isTruncated, setIsTruncated] = useState(false);
+    const ref = useRef<HTMLDivElement>(null);
+
+    const checkTruncation = () => {
+        if (ref.current) {
+            setIsTruncated(ref.current.scrollHeight > ref.current.offsetHeight);
+        }
+    };
+
+    useEffect(() => {
+        const resizeObserver = new ResizeObserver(checkTruncation);
+        if (ref.current) {
+            resizeObserver.observe(ref.current);
+        }
+        return () => resizeObserver.disconnect();
+    }, [title, children]);
+
+    const overridableTooltipProps: OverridableTooltipProps = {
+        title,
+        arrow,
+        ...tooltipProps,
+    };
+
+    const { title: tooltipTitle, ...otherTooltipProps } =
+        overridableTooltipProps;
+
+    return (
+        <Tooltip title={isTruncated ? tooltipTitle : ''} {...otherTooltipProps}>
+            <StyledTruncatorContainer ref={ref} lines={lines} {...props}>
+                {children}
+            </StyledTruncatorContainer>
+        </Tooltip>
+    );
+};