chore: show avatars in cross-project change requests table. (#10838)

Updates the CR table cell to show the avatar (again). This applies both
to the project-based table and the global table.

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

Because the truncator already has a popup functionality on truncation,
we disable it for the avatars.

To make it compile, I've manually updated the types based on the
schemas. I'll regenerate them at a later date. The fields that were
marked as nullable are typically not nullable (although often they may
not be required) in our schemas, so I'll take it out for now. If we find
that we *are* returning null there, it still shouldn't cause any
problems for the UI, so it's a low risk fix that can be done later if
necessary.

Before:
<img width="1816" height="157" alt="image"
src="https://github.com/user-attachments/assets/37f0b742-4113-45ed-a867-f62913bcf99f"
/>

<img width="1255" height="126" alt="image"
src="https://github.com/user-attachments/assets/786ba01d-1e16-4b4f-b34a-d1157571b9be"
/>


After:
<img width="1789" height="146" alt="image"
src="https://github.com/user-attachments/assets/2a838804-89c5-42c8-a43c-64c1b93c4e01"
/>
<img width="1320" height="72" alt="image"
src="https://github.com/user-attachments/assets/b04ca1d1-8334-40b4-bfba-46d803dd1cda"
/>

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

@@ -2,24 +2,34 @@ 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 { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
+import { Truncator } from 'component/common/Truncator/Truncator';
+import type { ComponentProps } from 'react';
 
 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: ComponentProps<typeof UserAvatar>['user'];
+};
+
+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/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;
 };