From bb26e8685f16b150a46aa6974c19f1150e6a6841 Mon Sep 17 00:00:00 2001
From: Tanmay Thole <72058456+tanmaythole@users.noreply.github.com>
Date: Fri, 12 Apr 2024 16:40:03 +0530
Subject: [PATCH] [MM-55497] Add tooltips with enlarged emojis when hovering
 over emojis within message content (#26709)

* feat: add tooltip to emojis in post messages

* ci: eslint fix
---
 .../components/post_emoji/post_emoji.test.tsx |  8 +++----
 .../src/components/post_emoji/post_emoji.tsx  | 22 ++++++++++++++-----
 .../channels/src/sass/components/_post.scss   |  6 +++++
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/webapp/channels/src/components/post_emoji/post_emoji.test.tsx b/webapp/channels/src/components/post_emoji/post_emoji.test.tsx
index 6b7d86dbc5..404cc84773 100644
--- a/webapp/channels/src/components/post_emoji/post_emoji.test.tsx
+++ b/webapp/channels/src/components/post_emoji/post_emoji.test.tsx
@@ -16,14 +16,14 @@ describe('PostEmoji', () => {
     test('should render image when imageUrl is provided', () => {
         render(<PostEmoji {...baseProps}/>);
 
-        expect(screen.getByTitle(':' + baseProps.name + ':')).toBeInTheDocument();
-        expect(screen.getByTitle(':' + baseProps.name + ':')).toHaveStyle(`backgroundImage: url(${baseProps.imageUrl})}`);
+        expect(screen.queryByTestId('postEmoji.:' + baseProps.name + ':')).toBeInTheDocument();
+        expect(screen.queryByTestId('postEmoji.:' + baseProps.name + ':')).toHaveStyle(`backgroundImage: url(${baseProps.imageUrl})}`);
     });
 
     test('should render shortcode text within span when imageUrl is provided', () => {
         render(<PostEmoji {...baseProps}/>);
 
-        expect(screen.getByTitle(':' + baseProps.name + ':')).toHaveTextContent(`:${baseProps.name}:`);
+        expect(screen.queryByTestId('postEmoji.:' + baseProps.name + ':')).toHaveTextContent(`:${baseProps.name}:`);
     });
 
     test('should render original text when imageUrl is empty', () => {
@@ -34,7 +34,7 @@ describe('PostEmoji', () => {
 
         render(<PostEmoji {...props}/>);
 
-        expect(screen.queryByTitle(':' + baseProps.name + ':')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('postEmoji.:' + baseProps.name + ':')).not.toBeInTheDocument();
         expect(screen.getByText(`:${props.name}:`)).toBeInTheDocument();
     });
 });
diff --git a/webapp/channels/src/components/post_emoji/post_emoji.tsx b/webapp/channels/src/components/post_emoji/post_emoji.tsx
index e1c59be88d..e32adec457 100644
--- a/webapp/channels/src/components/post_emoji/post_emoji.tsx
+++ b/webapp/channels/src/components/post_emoji/post_emoji.tsx
@@ -3,6 +3,8 @@
 
 import React from 'react';
 
+import WithTooltip from 'components/with_tooltip';
+
 interface Props {
     name: string;
     imageUrl: string;
@@ -22,14 +24,22 @@ const PostEmoji = ({name, imageUrl}: Props) => {
     }
 
     return (
-        <span
-            alt={emojiText}
-            className='emoticon'
+        <WithTooltip
+            id='postEmoji__tooltip'
             title={emojiText}
-            style={{backgroundImage: backgroundImageUrl}}
+            emoji={name}
+            emojiStyle='large'
+            placement='top'
         >
-            {emojiText}
-        </span>
+            <span
+                alt={emojiText}
+                className='emoticon'
+                data-testid={`postEmoji.${emojiText}`}
+                style={{backgroundImage: backgroundImageUrl}}
+            >
+                {emojiText}
+            </span>
+        </WithTooltip>
     );
 };
 
diff --git a/webapp/channels/src/sass/components/_post.scss b/webapp/channels/src/sass/components/_post.scss
index 31fa195694..caabeebde6 100644
--- a/webapp/channels/src/sass/components/_post.scss
+++ b/webapp/channels/src/sass/components/_post.scss
@@ -2058,6 +2058,12 @@
                 }
             }
         }
+
+        .post-message__text {
+            span.emoticon[style]:hover {
+                cursor: pointer;
+            }
+        }
     }
 
     &.post-message--overflow {