From 258909db39ace764c6b2f24dadfe2a109104ff88 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 9 Aug 2024 09:54:16 +0200
Subject: [PATCH] fix: Update avatar usage in change requests (#7818)

---
 .../ChangeRequestComments/AddCommentField.tsx               | 6 ++----
 .../ChangeRequestComments/ChangeRequestComment.tsx          | 6 ++----
 .../ChangeRequestComments/StyledAvatar.tsx                  | 5 +++--
 .../ChangeRequestHeader/ChangeRequestHeader.styles.tsx      | 6 ++++--
 .../ChangeRequestHeader/ChangeRequestHeader.tsx             | 4 +---
 .../ChangeRequestReviewers/ChangeRequestReviewer.tsx        | 4 ++--
 6 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/AddCommentField.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/AddCommentField.tsx
index f985425a15..e40094aeb1 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/AddCommentField.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/AddCommentField.tsx
@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { FC } from 'react';
-import { Box, styled, TextField, Tooltip } from '@mui/material';
+import { Box, styled, TextField } from '@mui/material';
 import { StyledAvatar } from './StyledAvatar';
 import type { IUser } from 'interfaces/user';
 
@@ -18,9 +18,7 @@ export const AddCommentField: FC<{
 }> = ({ user, commentText, onTypeComment, children }) => (
     <>
         <AddCommentWrapper>
-            <Tooltip title={user?.name || user?.username}>
-                <StyledAvatar src={user?.imageUrl || ''} />
-            </Tooltip>
+            <StyledAvatar user={user} />
             <TextField
                 variant='outlined'
                 placeholder='Add your comment here'
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx
index 9d90aca49f..a1ec3cc904 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import { Markdown } from 'component/common/Markdown/Markdown';
 import Paper from '@mui/material/Paper';
-import { Box, styled, Typography, Tooltip } from '@mui/material';
+import { Box, styled, Typography } from '@mui/material';
 import TimeAgo from 'react-timeago';
 import { StyledAvatar } from './StyledAvatar';
 import type { IChangeRequestComment } from '../../changeRequest.types';
@@ -29,9 +29,7 @@ export const ChangeRequestComment: FC<{ comment: IChangeRequestComment }> = ({
     comment,
 }) => (
     <ChangeRequestCommentWrapper>
-        <Tooltip title={comment.createdBy.username}>
-            <StyledAvatar src={comment.createdBy.imageUrl} />
-        </Tooltip>
+        <StyledAvatar user={comment.createdBy} />
         <CommentPaper variant='outlined'>
             <CommentHeader>
                 <Box>
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/StyledAvatar.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/StyledAvatar.tsx
index 1aa0e8fc65..abfd8477c0 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/StyledAvatar.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/StyledAvatar.tsx
@@ -1,6 +1,7 @@
-import { Avatar, styled } from '@mui/material';
+import { styled } from '@mui/material';
+import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
 
-export const StyledAvatar = styled(Avatar)(({ theme }) => ({
+export const StyledAvatar = styled(UserAvatar)(({ theme }) => ({
     height: '32px',
     width: '32px',
     marginTop: theme.spacing(1),
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx
index 82ef69ec96..3bf2972359 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx
@@ -1,5 +1,6 @@
 import { styled } from '@mui/material';
-import { Avatar, Box, Card, Paper, Typography } from '@mui/material';
+import { Box, Card, Paper, Typography } from '@mui/material';
+import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
 
 export const StyledPaper = styled(Paper)(({ theme }) => ({
     padding: theme.spacing(3, 4),
@@ -29,7 +30,8 @@ export const StyledCard = styled(Card)(({ theme }) => ({
     backgroundColor: theme.palette.background.elevation2,
 }));
 
-export const StyledAvatar = styled(Avatar)(({ theme }) => ({
+export const StyledAvatar = styled(UserAvatar)(({ theme }) => ({
     height: '24px',
     width: '24px',
+    marginInline: 0,
 }));
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx
index 0ca28f6463..f711a15ea0 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx
@@ -51,9 +51,7 @@ export const ChangeRequestHeader: FC<{ changeRequest: ChangeRequestType }> = ({
                     })}
                 >
                     <Tooltip title={changeRequest?.createdBy?.username}>
-                        <StyledAvatar
-                            src={changeRequest?.createdBy?.imageUrl}
-                        />
+                        <StyledAvatar user={changeRequest?.createdBy} />
                     </Tooltip>
                 </Box>
                 <Typography
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewers/ChangeRequestReviewer.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewers/ChangeRequestReviewer.tsx
index 1883c4121a..8c20bdbea9 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewers/ChangeRequestReviewer.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewers/ChangeRequestReviewer.tsx
@@ -40,7 +40,7 @@ export const ChangeRequestApprover: FC<IChangeRequestReviewerProps> = ({
 }) => {
     return (
         <StyledBox>
-            <StyledAvatar src={imageUrl} />
+            <StyledAvatar user={{ name, imageUrl }} />
             <ReviewerName variant='body1'>{name}</ReviewerName>
             <StyledSuccessIcon />
         </StyledBox>
@@ -53,7 +53,7 @@ export const ChangeRequestRejector: FC<IChangeRequestReviewerProps> = ({
 }) => {
     return (
         <StyledBox>
-            <StyledAvatar src={imageUrl} />
+            <StyledAvatar user={{ name, imageUrl }} />
             <ReviewerName variant='body1'>{name}</ReviewerName>
             <StyledErrorIcon />
         </StyledBox>