chore: show avatars in cross-project change requests table.

Keeps using the same avatar cell as the project-based change requests table, but makes showing the avatar optional.

Also adds a truncator to the created by cell, to avoid weird name stacking.

frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/AvatarCell.tsx

@@ -2,24 +2,36 @@ import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
 import { styled, Typography } from '@mui/material';
 import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
 import { Highlighter } from 'component/common/Highlighter/Highlighter';
+import {
+    type AvatarUser,
+    UserAvatar,
+} from 'component/common/UserAvatar/UserAvatar';
+import { Truncator } from 'component/common/Truncator/Truncator';
 
 const StyledContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
     margin: 0,
+    columnGap: theme.spacing(0.5),
 }));
 
-export const AvatarCell = ({ value }: any) => {
+type AvatarCellProps = {
+    value: AvatarUser;
+};
+
+export const AvatarCell = ({ value }: AvatarCellProps) => {
     const { searchQuery } = useSearchHighlightContext();
     return (
         <TextCell>
             <StyledContainer>
+                <UserAvatar disableTooltip={true} user={value} />
                 <Typography component={'span'} variant={'body2'}>
-                    {' '}
-                    <Highlighter search={searchQuery}>
-                        {value?.username}
-                    </Highlighter>
+                    <Truncator title={value?.username}>
+                        <Highlighter search={searchQuery}>
+                            {value?.username}
+                        </Highlighter>
+                    </Truncator>
                 </Typography>
             </StyledContainer>
         </TextCell>

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

@@ -37,10 +37,12 @@ const StyledTooltipContent = styled(Box)({
     justifyContent: 'center',
 });
 
+export type AvatarUser = Partial<
+    Pick<IUser, 'id' | 'name' | 'email' | 'username' | 'imageUrl'>
+>;
+
 export interface IUserAvatarProps extends AvatarProps {
-    user?: Partial<
-        Pick<IUser, 'id' | 'name' | 'email' | 'username' | 'imageUrl'>
-    >;
+    user?: AvatarUser;
     src?: string;
     className?: string;
     sx?: SxProps<Theme>;

frontend/src/openapi/models/changeRequestSearchItemSchemaOneOfCreatedBy.ts

@@ -12,12 +12,10 @@ export type ChangeRequestSearchItemSchemaOneOfCreatedBy = {
     id: number;
     /**
      * Avatar image URL for the user.
-     * @nullable
      */
-    imageUrl?: string | null;
+    imageUrl?: string;
     /**
      * Username of the user.
-     * @nullable
      */
-    username?: string | null;
+    username?: string;
 };

frontend/src/openapi/models/changeRequestSearchItemSchemaOneOfFourCreatedBy.ts

@@ -12,12 +12,10 @@ export type ChangeRequestSearchItemSchemaOneOfFourCreatedBy = {
     id: number;
     /**
      * Avatar image URL for the user.
-     * @nullable
      */
-    imageUrl?: string | null;
+    imageUrl?: string;
     /**
      * Username of the user.
-     * @nullable
      */
-    username?: string | null;
+    username?: string;
 };