From 87d9466005a2751f18d4a5752a9c873e06dd9925 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Tue, 29 Nov 2022 12:56:19 +0100
Subject: [PATCH] change request tooltips (#2555)

---
 .../ChangeRequestComments/AddCommentField.tsx         | 11 +++++++----
 .../ChangeRequestComments/ChangeRequestComment.tsx    |  6 ++++--
 .../ChangeRequestHeader/ChangeRequestHeader.tsx       |  6 ++++--
 .../ChangeRequestOverview/ChangeRequestOverview.tsx   |  2 +-
 .../ProjectFeatureToggles/ProjectFeatureToggles.tsx   |  1 -
 5 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/AddCommentField.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/AddCommentField.tsx
index 07932179b5..5960763cff 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/AddCommentField.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/AddCommentField.tsx
@@ -1,6 +1,7 @@
 import { FC } from 'react';
-import { Box, Button, styled, TextField } from '@mui/material';
+import { Box, styled, TextField, Tooltip } from '@mui/material';
 import { StyledAvatar } from './StyledAvatar';
+import { IUser } from 'interfaces/user';
 
 const AddCommentWrapper = styled(Box)(({ theme }) => ({
     display: 'flex',
@@ -9,13 +10,15 @@ const AddCommentWrapper = styled(Box)(({ theme }) => ({
 }));
 
 export const AddCommentField: FC<{
-    imageUrl: string;
+    user: IUser | undefined;
     commentText: string;
     onTypeComment: (text: string) => void;
-}> = ({ imageUrl, commentText, onTypeComment, children }) => (
+}> = ({ user, commentText, onTypeComment, children }) => (
     <>
         <AddCommentWrapper>
-            <StyledAvatar src={imageUrl} />
+            <Tooltip title={user?.name || user?.username}>
+                <StyledAvatar src={user?.imageUrl || ''} />
+            </Tooltip>
             <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 b9b20a37b1..722cd184d8 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import Paper from '@mui/material/Paper';
-import { Box, styled, Typography } from '@mui/material';
+import { Box, styled, Typography, Tooltip } from '@mui/material';
 import TimeAgo from 'react-timeago';
 import { StyledAvatar } from './StyledAvatar';
 import { IChangeRequestComment } from '../../changeRequest.types';
@@ -26,7 +26,9 @@ export const ChangeRequestComment: FC<{ comment: IChangeRequestComment }> = ({
     comment,
 }) => (
     <ChangeRequestCommentWrapper>
-        <StyledAvatar src={comment.createdBy.imageUrl} />
+        <Tooltip title={comment.createdBy.username}>
+            <StyledAvatar src={comment.createdBy.imageUrl} />
+        </Tooltip>
         <CommentPaper variant="outlined">
             <CommentHeader>
                 <Box>
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx
index ce6a6d3367..c457e2d587 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx
@@ -1,6 +1,6 @@
 import { Box } from '@mui/material';
 import { FC } from 'react';
-import { Typography } from '@mui/material';
+import { Typography, Tooltip } from '@mui/material';
 import TimeAgo from 'react-timeago';
 import { IChangeRequest } from 'component/changeRequest/changeRequest.types';
 import { ChangeRequestStatusBadge } from 'component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge';
@@ -29,7 +29,9 @@ export const ChangeRequestHeader: FC<{ changeRequest: IChangeRequest }> = ({
                     Created <TimeAgo date={new Date(changeRequest.createdAt)} />{' '}
                     by
                 </Typography>
-                <StyledAvatar src={changeRequest?.createdBy?.imageUrl} />
+                <Tooltip title={changeRequest?.createdBy?.username}>
+                    <StyledAvatar src={changeRequest?.createdBy?.imageUrl} />
+                </Tooltip>
                 <Box>
                     <StyledCard variant="outlined">
                         <Typography variant="body2">
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
index 8857f37341..50c4145807 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
@@ -167,7 +167,7 @@ export const ChangeRequestOverview: FC = () => {
                             />
                         ))}
                         <AddCommentField
-                            imageUrl={user?.imageUrl || ''}
+                            user={user}
                             commentText={commentText}
                             onTypeComment={setCommentText}
                         >
diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
index aab3cb28d2..fb4bae24a7 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
@@ -38,7 +38,6 @@ import { useMediaQuery } from '@mui/material';
 import { Search } from 'component/common/Search/Search';
 import { useChangeRequestToggle } from 'hooks/useChangeRequestToggle';
 import { ChangeRequestDialogue } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestConfirmDialog';
-import { CopyStrategyMessage } from '../../../changeRequest/ChangeRequestConfirmDialog/ChangeRequestMessages/CopyStrategyMessage';
 import { UpdateEnabledMessage } from '../../../changeRequest/ChangeRequestConfirmDialog/ChangeRequestMessages/UpdateEnabledMessage';
 import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { IFeatureToggleListItem } from 'interfaces/featureToggle';