fix: wrap the UserAvatar component in forwardRef (#8461)

This fixes another one of the warnings we have in our tests and is
probably a sane change to make anyway.

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

@@ -1,8 +1,16 @@
 import { styled } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import type { IGroupUser } from 'interfaces/group';
-import { useMemo } from 'react';
-import { UserAvatar } from 'component/common/UserAvatar/UserAvatar'; // usage
+import {
+    type ForwardRefExoticComponent,
+    type FunctionComponent,
+    type RefAttributes,
+    useMemo,
+} from 'react';
+import {
+    type IUserAvatarProps,
+    UserAvatar,
+} from 'component/common/UserAvatar/UserAvatar';
 import { objectId } from 'utils/objectId';
 import millify from 'millify';
 
@@ -14,6 +22,12 @@ const StyledAvatars = styled('div')(({ theme }) => ({
     justifyContent: 'start',
 }));
 
+export type AvatarComponentType =
+    | FunctionComponent<IUserAvatarProps>
+    | ForwardRefExoticComponent<
+          IUserAvatarProps & RefAttributes<HTMLDivElement>
+      >;
+
 export const AvatarComponent = styled(UserAvatar)(({ theme }) => ({
     outline: `${theme.spacing(0.25)} solid ${theme.palette.background.paper}`,
     margin: 0,
@@ -21,7 +35,7 @@ export const AvatarComponent = styled(UserAvatar)(({ theme }) => ({
     '&:hover': {
         outlineColor: theme.palette.primary.main,
     },
-}));
+})) as AvatarComponentType;
 
 type User = {
     name: string;
@@ -32,7 +46,7 @@ type User = {
 type AvatarGroupProps = {
     users: User[];
     avatarLimit?: number;
-    AvatarComponent?: typeof UserAvatar;
+    AvatarComponent?: AvatarComponentType;
     className?: string;
 };
 
@@ -44,7 +58,7 @@ export const AvatarGroup = ({ ...props }: AvatarGroupProps) => (
 );
 
 type AvatarGroupInnerProps = Omit<AvatarGroupProps, 'AvatarComponent'> & {
-    AvatarComponent: typeof UserAvatar;
+    AvatarComponent: AvatarComponentType;
 };
 
 const MAX_OVERFLOW_DISPLAY_NUMBER = 99;

frontend/src/component/common/AvatarGroupFromOwners/AvatarGroupFromOwners.tsx

@@ -1,12 +1,14 @@
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import type { ProjectSchemaOwners } from 'openapi';
-import type { UserAvatar } from '../UserAvatar/UserAvatar';
-import { AvatarGroup } from '../AvatarGroup/AvatarGroup';
+import {
+    type AvatarComponentType,
+    AvatarGroup,
+} from '../AvatarGroup/AvatarGroup';
 
 type Props = {
     users: ProjectSchemaOwners;
     avatarLimit?: number;
-    AvatarComponent?: typeof UserAvatar;
+    AvatarComponent?: AvatarComponentType;
     className?: string;
 };
 export const AvatarGroupFromOwners: React.FC<Props> = ({ users, ...props }) => {

frontend/src/component/common/UserAvatar/UserAvatar.tsx

@@ -6,7 +6,7 @@ import {
     type Theme,
 } from '@mui/material';
 import type { IUser } from 'interfaces/user';
-import type { FC } from 'react';
+import { forwardRef } from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { HtmlTooltip } from '../HtmlTooltip/HtmlTooltip';
 const StyledAvatar = styled(Avatar)(({ theme }) => ({
@@ -60,15 +60,8 @@ const TooltipMainContent = styled('div')(({ theme }) => ({
     fontSize: theme.typography.body1.fontSize,
 }));
 
-export const UserAvatar: FC<IUserAvatarProps> = ({
-    user,
-    src,
-    className,
-    sx,
-    children,
-    disableTooltip,
-    ...props
-}) => {
+export const UserAvatar = forwardRef<HTMLDivElement, IUserAvatarProps>(
+    ({ user, src, className, sx, children, disableTooltip, ...props }, ref) => {
         let fallback: string | undefined;
         if (!children && user) {
             fallback = user?.name || user?.email || user?.username;
@@ -83,6 +76,7 @@ export const UserAvatar: FC<IUserAvatarProps> = ({
 
         const Avatar = (
             <StyledAvatar
+                ref={ref}
                 className={className}
                 sx={sx}
                 {...props}
@@ -109,7 +103,9 @@ export const UserAvatar: FC<IUserAvatarProps> = ({
                             <TooltipSecondaryContent>
                                 {tooltip.secondary}
                             </TooltipSecondaryContent>
-                        <TooltipMainContent>{tooltip.main}</TooltipMainContent>
+                            <TooltipMainContent>
+                                {tooltip.main}
+                            </TooltipMainContent>
                         </>
                     }
                 >
@@ -119,4 +115,5 @@ export const UserAvatar: FC<IUserAvatarProps> = ({
         }
 
         return Avatar;
-};
+    },
+);