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

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