From 558b14ed3c50c5c4978bb1559f778e9becf7161c Mon Sep 17 00:00:00 2001
From: Arya Khochare <91268931+Aryakoste@users.noreply.github.com>
Date: Mon, 29 Jul 2024 00:23:42 +0530
Subject: [PATCH] [MM-59332] Migrate tooltips of
 "components/post_edit_history/edited_post_item/edited_post_item.tsx" to
 WithTooltip (#27616)

---
 .../edited_post_item.test.tsx.snap            | 22 ++++--------------
 .../edited_post_item/edited_post_item.tsx     | 23 +++++--------------
 2 files changed, 10 insertions(+), 35 deletions(-)

diff --git a/webapp/channels/src/components/post_edit_history/edited_post_item/__snapshots__/edited_post_item.test.tsx.snap b/webapp/channels/src/components/post_edit_history/edited_post_item/__snapshots__/edited_post_item.test.tsx.snap
index 21e0e44ac8..13ce740c4c 100644
--- a/webapp/channels/src/components/post_edit_history/edited_post_item/__snapshots__/edited_post_item.test.tsx.snap
+++ b/webapp/channels/src/components/post_edit_history/edited_post_item/__snapshots__/edited_post_item.test.tsx.snap
@@ -85,24 +85,10 @@ exports[`components/post_edit_history/edited_post_item should match snapshot 1`]
             />
           </span>
         </div>
-        <OverlayTrigger
-          defaultOverlayShown={false}
-          delayShow={400}
-          overlay={
-            <Tooltip
-              className="hidden-xs"
-              id="editPostRestoreTooltip"
-            >
-              Restore this version
-            </Tooltip>
-          }
+        <WithTooltip
+          id="editPostRestoreTooltip"
           placement="left"
-          trigger={
-            Array [
-              "hover",
-              "focus",
-            ]
-          }
+          title="Restore this version"
         >
           <ForwardRef
             aria-label="Select to restore an old message."
@@ -112,7 +98,7 @@ exports[`components/post_edit_history/edited_post_item should match snapshot 1`]
             onClick={[Function]}
             size="sm"
           />
-        </OverlayTrigger>
+        </WithTooltip>
       </div>
     </PostAriaLabelDiv>
   </div>
diff --git a/webapp/channels/src/components/post_edit_history/edited_post_item/edited_post_item.tsx b/webapp/channels/src/components/post_edit_history/edited_post_item/edited_post_item.tsx
index 046713ee53..72c4f2476b 100644
--- a/webapp/channels/src/components/post_edit_history/edited_post_item/edited_post_item.tsx
+++ b/webapp/channels/src/components/post_edit_history/edited_post_item/edited_post_item.tsx
@@ -13,15 +13,14 @@ import type {Theme} from 'mattermost-redux/selectors/entities/preferences';
 
 import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider';
 import InfoToast from 'components/info_toast/info_toast';
-import OverlayTrigger from 'components/overlay_trigger';
 import PostAriaLabelDiv from 'components/post_view/post_aria_label_div';
 import PostMessageContainer from 'components/post_view/post_message_view';
 import Timestamp, {RelativeRanges} from 'components/timestamp';
-import Tooltip from 'components/tooltip';
 import UserProfileComponent from 'components/user_profile';
 import Avatar from 'components/widgets/users/avatar';
+import WithTooltip from 'components/with_tooltip';
 
-import Constants, {ModalIdentifiers} from 'utils/constants';
+import {ModalIdentifiers} from 'utils/constants';
 import {imageURLForUser} from 'utils/utils';
 
 import RestorePostModal from '../restore_post_modal';
@@ -171,21 +170,11 @@ const EditedPostItem = ({post, isCurrent = false, postCurrentVersion, theme, act
         </div>
     );
 
-    const tooltip = (
-        <Tooltip
-            id='editPostRestoreTooltip'
-            className='hidden-xs'
-        >
-            {formatMessage(itemMessages.helpText)}
-        </Tooltip>
-    );
-
     const restoreButton = isCurrent ? null : (
-        <OverlayTrigger
-            trigger={['hover', 'focus']}
-            delayShow={Constants.OVERLAY_TIME_DELAY}
+        <WithTooltip
+            id='editPostRestoreTooltip'
             placement='left'
-            overlay={tooltip}
+            title={formatMessage(itemMessages.helpText)}
         >
             <IconButton
                 className='edit-post-history__icon__button restore-icon'
@@ -195,7 +184,7 @@ const EditedPostItem = ({post, isCurrent = false, postCurrentVersion, theme, act
                 compact={true}
                 aria-label={formatMessage(itemMessages.ariaLabelMessage)}
             />
-        </OverlayTrigger>
+        </WithTooltip>
     );
 
     const postContainerClass = classNames('edit-post-history__container', {'edit-post-history__container__background': open});