From d8b01bde2e90c4bce1419807988658f925abb959 Mon Sep 17 00:00:00 2001
From: Zubair Imtiaz <106450046+ZubairImtiaz3@users.noreply.github.com>
Date: Fri, 26 Jul 2024 11:04:09 +0500
Subject: [PATCH] [MM-58440] Migrate tooltips of
 'components/post_view/post_flag_icon' to WithTooltip (#27689)

---
 .../post_flag_icon.test.tsx.snap              | 58 +++++--------------
 .../post_flag_icon/post_flag_icon.tsx         | 41 ++++++-------
 2 files changed, 33 insertions(+), 66 deletions(-)

diff --git a/webapp/channels/src/components/post_view/post_flag_icon/__snapshots__/post_flag_icon.test.tsx.snap b/webapp/channels/src/components/post_view/post_flag_icon/__snapshots__/post_flag_icon.test.tsx.snap
index 2cd01128ac..049996f811 100644
--- a/webapp/channels/src/components/post_view/post_flag_icon/__snapshots__/post_flag_icon.test.tsx.snap
+++ b/webapp/channels/src/components/post_view/post_flag_icon/__snapshots__/post_flag_icon.test.tsx.snap
@@ -1,28 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/post_view/PostFlagIcon should match snapshot 1`] = `
-<OverlayTrigger
-  className="hidden-xs"
-  defaultOverlayShown={false}
-  delayShow={400}
+<WithTooltip
+  id="flagTooltip"
   key="flagtooltipkey"
-  overlay={
-    <Tooltip
-      className="hidden-xs"
-      id="flagTooltip"
-    >
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="Save Message"
-        id="flag_post.flag"
-      />
-    </Tooltip>
-  }
   placement="top"
-  trigger={
-    Array [
-      "hover",
-      "focus",
-    ]
+  title={
+    <Memo(MemoizedFormattedMessage)
+      defaultMessage="Save Message"
+      id="flag_post.flag"
+    />
   }
 >
   <button
@@ -35,32 +22,19 @@ exports[`components/post_view/PostFlagIcon should match snapshot 1`] = `
       className="icon icon--small"
     />
   </button>
-</OverlayTrigger>
+</WithTooltip>
 `;
 
 exports[`components/post_view/PostFlagIcon should match snapshot 2`] = `
-<OverlayTrigger
-  className="hidden-xs"
-  defaultOverlayShown={false}
-  delayShow={400}
+<WithTooltip
+  id="flagTooltip"
   key="flagtooltipkeyflagged"
-  overlay={
-    <Tooltip
-      className="hidden-xs"
-      id="flagTooltip"
-    >
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="Remove from Saved"
-        id="flag_post.unflag"
-      />
-    </Tooltip>
-  }
   placement="top"
-  trigger={
-    Array [
-      "hover",
-      "focus",
-    ]
+  title={
+    <Memo(MemoizedFormattedMessage)
+      defaultMessage="Remove from Saved"
+      id="flag_post.unflag"
+    />
   }
 >
   <button
@@ -73,5 +47,5 @@ exports[`components/post_view/PostFlagIcon should match snapshot 2`] = `
       className="icon icon--small icon--small-filled post-menu__item--selected"
     />
   </button>
-</OverlayTrigger>
+</WithTooltip>
 `;
diff --git a/webapp/channels/src/components/post_view/post_flag_icon/post_flag_icon.tsx b/webapp/channels/src/components/post_view/post_flag_icon/post_flag_icon.tsx
index da008827c5..b60f02553b 100644
--- a/webapp/channels/src/components/post_view/post_flag_icon/post_flag_icon.tsx
+++ b/webapp/channels/src/components/post_view/post_flag_icon/post_flag_icon.tsx
@@ -5,12 +5,11 @@ import classNames from 'classnames';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
 import FlagIcon from 'components/widgets/icons/flag_icon';
 import FlagIconFilled from 'components/widgets/icons/flag_icon_filled';
+import WithTooltip from 'components/with_tooltip';
 
-import Constants, {Locations, A11yCustomEventTypes} from 'utils/constants';
+import {Locations, A11yCustomEventTypes} from 'utils/constants';
 
 export type Actions = {
     flagPost: (postId: string) => void;
@@ -82,28 +81,22 @@ const PostFlagIcon = ({
     }
 
     return (
-        <OverlayTrigger
-            className='hidden-xs'
+        <WithTooltip
+            id='flagTooltip'
             key={`flagtooltipkey${isFlagged ? 'flagged' : ''}`}
-            delayShow={Constants.OVERLAY_TIME_DELAY}
             placement='top'
-            overlay={
-                <Tooltip
-                    id='flagTooltip'
-                    className='hidden-xs'
-                >
-                    {isFlagged ? (
-                        <FormattedMessage
-                            id='flag_post.unflag'
-                            defaultMessage='Remove from Saved'
-                        />
-                    ) : (
-                        <FormattedMessage
-                            id='flag_post.flag'
-                            defaultMessage='Save Message'
-                        />
-                    )}
-                </Tooltip>
+            title={
+                isFlagged ? (
+                    <FormattedMessage
+                        id='flag_post.unflag'
+                        defaultMessage='Remove from Saved'
+                    />
+                ) : (
+                    <FormattedMessage
+                        id='flag_post.flag'
+                        defaultMessage='Save Message'
+                    />
+                )
             }
         >
             <button
@@ -115,7 +108,7 @@ const PostFlagIcon = ({
             >
                 {flagIcon}
             </button>
-        </OverlayTrigger>
+        </WithTooltip>
     );
 };