From a9392e134fcb4ca5f0bd13c95b4d071cbe2231c7 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 21 Oct 2025 14:23:01 +0200
Subject: [PATCH] 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.
---
 .../ChangeRequestsTabs/AvatarCell.tsx         | 22 ++++++++++++++-----
 .../common/UserAvatar/UserAvatar.tsx          |  8 ++++---
 ...geRequestSearchItemSchemaOneOfCreatedBy.ts |  6 ++---
 ...questSearchItemSchemaOneOfFourCreatedBy.ts |  6 ++---
 4 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/AvatarCell.tsx b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/AvatarCell.tsx
index 10ae362ab5..80a44b958a 100644
--- a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/AvatarCell.tsx
+++ b/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>
diff --git a/frontend/src/component/common/UserAvatar/UserAvatar.tsx b/frontend/src/component/common/UserAvatar/UserAvatar.tsx
index db085add35..69896c9c74 100644
--- a/frontend/src/component/common/UserAvatar/UserAvatar.tsx
+++ b/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>;
diff --git a/frontend/src/openapi/models/changeRequestSearchItemSchemaOneOfCreatedBy.ts b/frontend/src/openapi/models/changeRequestSearchItemSchemaOneOfCreatedBy.ts
index d9d08f03f2..437127ee35 100644
--- a/frontend/src/openapi/models/changeRequestSearchItemSchemaOneOfCreatedBy.ts
+++ b/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;
 };
diff --git a/frontend/src/openapi/models/changeRequestSearchItemSchemaOneOfFourCreatedBy.ts b/frontend/src/openapi/models/changeRequestSearchItemSchemaOneOfFourCreatedBy.ts
index 5d264a0b4c..2e61ec1f1b 100644
--- a/frontend/src/openapi/models/changeRequestSearchItemSchemaOneOfFourCreatedBy.ts
+++ b/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;
 };