From 24ae4a6d9e477527e24125bfa4af9500097d39cc Mon Sep 17 00:00:00 2001
From: Brandon Shen <83319404+BrandonS09@users.noreply.github.com>
Date: Wed, 7 Aug 2024 01:19:41 -0700
Subject: [PATCH] [MM-59905] Migrate tooltips of
 'components/threading/channel_threads/thread_footer/thread_footer.tsx' to
 WithTooltip (#27802)

---
 .../__snapshots__/thread_footer.test.tsx.snap | 47 ++++---------------
 .../thread_footer/thread_footer.test.tsx      |  6 +--
 .../thread_footer/thread_footer.tsx           |  9 ++--
 3 files changed, 18 insertions(+), 44 deletions(-)

diff --git a/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap b/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap
index 49d37201a4..2851a120ef 100644
--- a/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap
+++ b/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap
@@ -796,8 +796,10 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
   <div
     className="ThreadFooter"
   >
-    <SimpleTooltip
-      content={
+    <WithTooltip
+      id="threadFooterIndicator"
+      placement="top"
+      title={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="{newReplies, plural, =0 {no unread messages} =1 {one unread message} other {# unread messages}}"
           id="threading.numNewMessages"
@@ -808,28 +810,12 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
           }
         />
       }
-      id="threadFooterIndicator"
     >
       <OverlayTrigger
         defaultOverlayShown={false}
-        delayShow={100}
-        overlay={
-          <Tooltip
-            className="hidden-xs"
-            id="threadFooterIndicator"
-            placement="top"
-          >
-            <Memo(MemoizedFormattedMessage)
-              defaultMessage="{newReplies, plural, =0 {no unread messages} =1 {one unread message} other {# unread messages}}"
-              id="threading.numNewMessages"
-              values={
-                Object {
-                  "newReplies": 2,
-                }
-              }
-            />
-          </Tooltip>
-        }
+        delay={400}
+        disabled={false}
+        overlay={<Unknown />}
         placement="top"
         trigger={
           Array [
@@ -840,11 +826,9 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
       >
         <OverlayTrigger
           defaultOverlayShown={false}
-          delayShow={100}
+          delay={400}
           overlay={
             <OverlayWrapper
-              className="hidden-xs"
-              id="threadFooterIndicator"
               intl={
                 Object {
                   "$t": [Function],
@@ -884,18 +868,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                   "wrapRichTextChunksInFragment": undefined,
                 }
               }
-              placement="top"
-            >
-              <Memo(MemoizedFormattedMessage)
-                defaultMessage="{newReplies, plural, =0 {no unread messages} =1 {one unread message} other {# unread messages}}"
-                id="threading.numNewMessages"
-                values={
-                  Object {
-                    "newReplies": 2,
-                  }
-                }
-              />
-            </OverlayWrapper>
+            />
           }
           placement="top"
           trigger={
@@ -920,7 +893,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
           </div>
         </OverlayTrigger>
       </OverlayTrigger>
-    </SimpleTooltip>
+    </WithTooltip>
     <Memo(Avatars)
       size="sm"
       userIds={
diff --git a/webapp/channels/src/components/threading/channel_threads/thread_footer/thread_footer.test.tsx b/webapp/channels/src/components/threading/channel_threads/thread_footer/thread_footer.test.tsx
index aa3c5440a8..785c1b6db9 100644
--- a/webapp/channels/src/components/threading/channel_threads/thread_footer/thread_footer.test.tsx
+++ b/webapp/channels/src/components/threading/channel_threads/thread_footer/thread_footer.test.tsx
@@ -8,8 +8,8 @@ import type {ComponentProps} from 'react';
 import type {UserThread} from '@mattermost/types/threads';
 
 import Timestamp from 'components/timestamp';
-import SimpleTooltip from 'components/widgets/simple_tooltip';
 import Avatars from 'components/widgets/users/avatars';
+import WithTooltip from 'components/with_tooltip';
 
 import {fakeDate} from 'tests/helpers/date';
 import {mockStore} from 'tests/test_store';
@@ -161,7 +161,7 @@ describe('components/threading/channel_threads/thread_footer', () => {
         );
 
         expect(wrapper).toMatchSnapshot();
-        expect(wrapper.find(SimpleTooltip).find('.dot-unreads').exists()).toBe(true);
+        expect(wrapper.find(WithTooltip).find('.dot-unreads').exists()).toBe(true);
     });
 
     test('should not show unread indicator if not following', () => {
@@ -176,7 +176,7 @@ describe('components/threading/channel_threads/thread_footer', () => {
             mountOptions,
         );
 
-        expect(wrapper.find(SimpleTooltip).find('.dot-unreads').exists()).toBe(false);
+        expect(wrapper.find(WithTooltip).find('.dot-unreads').exists()).toBe(false);
     });
 
     test('should have avatars', () => {
diff --git a/webapp/channels/src/components/threading/channel_threads/thread_footer/thread_footer.tsx b/webapp/channels/src/components/threading/channel_threads/thread_footer/thread_footer.tsx
index 2e8b23b2d8..3aa0f8a35c 100644
--- a/webapp/channels/src/components/threading/channel_threads/thread_footer/thread_footer.tsx
+++ b/webapp/channels/src/components/threading/channel_threads/thread_footer/thread_footer.tsx
@@ -22,8 +22,8 @@ import Button from 'components/threading/common/button';
 import FollowButton from 'components/threading/common/follow_button';
 import {THREADING_TIME} from 'components/threading/common/options';
 import Timestamp from 'components/timestamp';
-import SimpleTooltip from 'components/widgets/simple_tooltip';
 import Avatars from 'components/widgets/users/avatars';
+import WithTooltip from 'components/with_tooltip';
 
 import type {GlobalState} from 'types/store';
 
@@ -84,9 +84,10 @@ function ThreadFooter({
             {!isFollowing || threadIsSynthetic(thread) || !thread.unread_replies ? (
                 <div className='indicator'/>
             ) : (
-                <SimpleTooltip
+                <WithTooltip
                     id='threadFooterIndicator'
-                    content={
+                    placement='top'
+                    title={
                         <FormattedMessage
                             id='threading.numNewMessages'
                             defaultMessage='{newReplies, plural, =0 {no unread messages} =1 {one unread message} other {# unread messages}}'
@@ -100,7 +101,7 @@ function ThreadFooter({
                     >
                         <div className='dot-unreads'/>
                     </div>
-                </SimpleTooltip>
+                </WithTooltip>
             )}
 
             {participantIds && participantIds.length > 0 ? (