Create a custom group popover for avatars (#1143)

* Create a custom group tooltip for avatars

* Remove data attribute

* Fix naming convention

* Fix naming convention

* Run prettier manually

* Prettier malfunction fix

Co-authored-by: Jaanus Sellin <jaanus@getunleash.ai>

frontend/.gitignore

@@ -50,5 +50,6 @@ build
 .DS_Store
 
 cypress/videos/*
+cypress/downloads/*
 cypress/screenshots/*
 .env.local

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

@@ -1,8 +1,9 @@
 import { Avatar, Badge, styled } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { IGroupUser, Role } from 'interfaces/group';
-import { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import StarIcon from '@mui/icons-material/Star';
+import { GroupPopover } from './GroupPopover/GroupPopover';
 
 const StyledAvatars = styled('div')(({ theme }) => ({
     display: 'inline-flex',
@@ -42,6 +43,20 @@ export const GroupCardAvatars = ({ users }: IGroupCardAvatarsProps) => {
         () => users.sort((a, b) => (a.role < b.role ? 1 : -1)).slice(0, 9),
         [users]
     );
+
+    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+    const [popupUser, setPopupUser] = useState<IGroupUser>();
+
+    const onPopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const onPopoverClose = () => {
+        setAnchorEl(null);
+    };
+
+    const avatarOpen = Boolean(anchorEl);
+
     return (
         <StyledAvatars>
             {shownUsers.map(user => (
@@ -53,9 +68,11 @@ export const GroupCardAvatars = ({ users }: IGroupCardAvatarsProps) => {
                             data-loading
                             alt="Gravatar"
                             src={user.imageUrl}
-                            title={`${
-                                user.name || user.email || user.username
-                            } (id: ${user.id})`}
+                            onMouseEnter={event => {
+                                onPopoverOpen(event);
+                                setPopupUser(user);
+                            }}
+                            onMouseLeave={onPopoverClose}
                         />
                     }
                     elseShow={
@@ -71,9 +88,11 @@ export const GroupCardAvatars = ({ users }: IGroupCardAvatarsProps) => {
                                 data-loading
                                 alt="Gravatar"
                                 src={user.imageUrl}
-                                title={`${
-                                    user.name || user.email || user.username
-                                } (id: ${user.id})`}
+                                onMouseEnter={event => {
+                                    onPopoverOpen(event);
+                                    setPopupUser(user);
+                                }}
+                                onMouseLeave={onPopoverClose}
                             />
                         </Badge>
                     }
@@ -87,6 +106,12 @@ export const GroupCardAvatars = ({ users }: IGroupCardAvatarsProps) => {
                     </StyledAvatarMore>
                 }
             />
+            <GroupPopover
+                open={avatarOpen}
+                user={popupUser}
+                anchorEl={anchorEl}
+                onPopoverClose={onPopoverClose}
+            />
         </StyledAvatars>
     );
 };

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

@@ -0,0 +1,88 @@
+import { Popover, Badge, styled, Tooltip } from '@mui/material';
+import { IGroup, IGroupUser, Role } from 'interfaces/group';
+import { Link } from 'react-router-dom';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+
+import { Badge as StyledBadge } from 'component/common/Badge/Badge';
+
+import { RemoveGroup } from 'component/admin/groups/RemoveGroup/RemoveGroup';
+import { useState } from 'react';
+import StarIcon from '@mui/icons-material/Star';
+import { IUser } from '../../../../../../../interfaces/user';
+
+const StyledPopover = styled(Popover)(({ theme }) => ({
+    pointerEvents: 'none',
+    '.MuiPaper-root': {
+        padding: '12px',
+    },
+}));
+
+const StyledPopupStar = styled(StarIcon)(({ theme }) => ({
+    color: theme.palette.warning.main,
+    fontSize: theme.fontSizes.smallBody,
+    marginLeft: theme.spacing(0.1),
+    marginTop: theme.spacing(2),
+}));
+
+const StyledName = styled('div')(({ theme }) => ({
+    color: theme.palette.text.secondary,
+    fontSize: theme.fontSizes.smallBody,
+    marginTop: theme.spacing(1),
+}));
+
+interface IGroupPopoverProps {
+    user: IGroupUser | undefined;
+
+    open: boolean;
+    anchorEl: HTMLElement | null;
+
+    onPopoverClose(event: React.MouseEvent<HTMLElement>): void;
+}
+
+export const GroupPopover = ({
+    user,
+    open,
+    anchorEl,
+    onPopoverClose,
+}: IGroupPopoverProps) => {
+    return (
+        <StyledPopover
+            open={open}
+            anchorEl={anchorEl}
+            onClose={onPopoverClose}
+            anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'left',
+            }}
+            transformOrigin={{
+                vertical: 'top',
+                horizontal: 'left',
+            }}
+        >
+            <ConditionallyRender
+                condition={user?.role === Role.Member}
+                show={<StyledBadge color="success">{user?.role}</StyledBadge>}
+                elseShow={
+                    <Badge
+                        overlap="circular"
+                        anchorOrigin={{
+                            vertical: 'top',
+                            horizontal: 'left',
+                        }}
+                        badgeContent={<StyledPopupStar />}
+                    >
+                        <StyledBadge
+                            color="success"
+                            sx={{ paddingLeft: '16px' }}
+                        >
+                            {user?.role}
+                        </StyledBadge>
+                    </Badge>
+                }
+            />
+
+            <StyledName>{user?.name}</StyledName>
+            <div>{user?.email}</div>
+        </StyledPopover>
+    );
+};