[MM-58440] Migrate tooltips of 'components/post_view/post_flag_icon' to WithTooltip (#27689)

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
+<WithTooltip
-  className="hidden-xs"
-  defaultOverlayShown={false}
-  delayShow={400}
-  key="flagtooltipkey"
-  overlay={
-    <Tooltip
-      className="hidden-xs"
   id="flagTooltip"
-    >
+  key="flagtooltipkey"
+  placement="top"
+  title={
     <Memo(MemoizedFormattedMessage)
       defaultMessage="Save Message"
       id="flag_post.flag"
     />
-    </Tooltip>
-  }
-  placement="top"
-  trigger={
-    Array [
-      "hover",
-      "focus",
-    ]
   }
 >
   <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
+<WithTooltip
-  className="hidden-xs"
-  defaultOverlayShown={false}
-  delayShow={400}
-  key="flagtooltipkeyflagged"
-  overlay={
-    <Tooltip
-      className="hidden-xs"
   id="flagTooltip"
-    >
+  key="flagtooltipkeyflagged"
+  placement="top"
+  title={
     <Memo(MemoizedFormattedMessage)
       defaultMessage="Remove from Saved"
       id="flag_post.unflag"
     />
-    </Tooltip>
-  }
-  placement="top"
-  trigger={
-    Array [
-      "hover",
-      "focus",
-    ]
   }
 >
   <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>
 `;

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,17 +81,12 @@ const PostFlagIcon = ({
     }
 
     return (
-        <OverlayTrigger
+        <WithTooltip
-            className='hidden-xs'
-            key={`flagtooltipkey${isFlagged ? 'flagged' : ''}`}
-            delayShow={Constants.OVERLAY_TIME_DELAY}
-            placement='top'
-            overlay={
-                <Tooltip
             id='flagTooltip'
-                    className='hidden-xs'
+            key={`flagtooltipkey${isFlagged ? 'flagged' : ''}`}
-                >
+            placement='top'
-                    {isFlagged ? (
+            title={
+                isFlagged ? (
                     <FormattedMessage
                         id='flag_post.unflag'
                         defaultMessage='Remove from Saved'
@@ -102,8 +96,7 @@ const PostFlagIcon = ({
                         id='flag_post.flag'
                         defaultMessage='Save Message'
                     />
-                    )}
+                )
-                </Tooltip>
             }
         >
             <button
@@ -115,7 +108,7 @@ const PostFlagIcon = ({
             >
                 {flagIcon}
             </button>
-        </OverlayTrigger>
+        </WithTooltip>
     );
 };