From f1cc96defbed3b0cd458743d3a518ae160f809c4 Mon Sep 17 00:00:00 2001
From: M-ZubairAhmed <m-zubairahmed@protonmail.com>
Date: Thu, 30 May 2024 13:04:09 +0000
Subject: [PATCH] [MM-58400] Migrate tooltips of
 'components/rename_channel_modal' & 'components/size_aware_image' to
 WithTooltip (#27145)

---
 .../size_aware_image.test.tsx.snap            | 180 +++++-------------
 .../rename_channel_modal.test.tsx.snap        |  21 +-
 .../rename_channel_modal.tsx                  |  14 +-
 .../src/components/size_aware_image.tsx       |  66 +++----
 4 files changed, 81 insertions(+), 200 deletions(-)

diff --git a/webapp/channels/src/components/__snapshots__/size_aware_image.test.tsx.snap b/webapp/channels/src/components/__snapshots__/size_aware_image.test.tsx.snap
index 3066414075..81a4a98320 100644
--- a/webapp/channels/src/components/__snapshots__/size_aware_image.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/size_aware_image.test.tsx.snap
@@ -46,28 +46,14 @@ exports[`components/SizeAwareImage should load download and copy link buttons wh
       <span
         className="image-preview-utility-buttons-container image-preview-utility-buttons-container--small-image"
       >
-        <OverlayTrigger
-          className="hidden-xs"
-          defaultOverlayShown={false}
-          delayShow={500}
-          overlay={
-            <Tooltip
-              className="hidden-xs"
-              id="copy-link-tooltip"
-            >
-              <Memo(MemoizedFormattedMessage)
-                defaultMessage="Copy link"
-                id="single_image_view.copy_link_tooltip"
-              />
-            </Tooltip>
-          }
+        <WithTooltip
+          id="single_image_view.copy_link_tooltip.text"
           placement="top"
-          rootClose={true}
-          trigger={
-            Array [
-              "hover",
-              "focus",
-            ]
+          title={
+            <Memo(MemoizedFormattedMessage)
+              defaultMessage="Copy link"
+              id="single_image_view.copy_link_tooltip"
+            />
           }
         >
           <button
@@ -80,29 +66,15 @@ exports[`components/SizeAwareImage should load download and copy link buttons wh
               size={20}
             />
           </button>
-        </OverlayTrigger>
-        <OverlayTrigger
-          className="hidden-xs"
-          defaultOverlayShown={false}
-          delayShow={500}
-          overlay={
-            <Tooltip
-              className="hidden-xs"
-              id="download-preview-tooltip"
-            >
-              <Memo(MemoizedFormattedMessage)
-                defaultMessage="Download"
-                id="single_image_view.download_tooltip"
-              />
-            </Tooltip>
-          }
+        </WithTooltip>
+        <WithTooltip
+          id="single_image_view.download_tooltip.text"
           placement="top"
-          rootClose={true}
-          trigger={
-            Array [
-              "hover",
-              "focus",
-            ]
+          title={
+            <Memo(MemoizedFormattedMessage)
+              defaultMessage="Download"
+              id="single_image_view.download_tooltip"
+            />
           }
         >
           <a
@@ -119,7 +91,7 @@ exports[`components/SizeAwareImage should load download and copy link buttons wh
               size={20}
             />
           </a>
-        </OverlayTrigger>
+        </WithTooltip>
       </span>
     </figure>
   </div>
@@ -172,28 +144,14 @@ exports[`components/SizeAwareImage should match snapshot when handleSmallImageCo
       <span
         className="image-preview-utility-buttons-container image-preview-utility-buttons-container--small-image"
       >
-        <OverlayTrigger
-          className="hidden-xs"
-          defaultOverlayShown={false}
-          delayShow={500}
-          overlay={
-            <Tooltip
-              className="hidden-xs"
-              id="copy-link-tooltip"
-            >
-              <Memo(MemoizedFormattedMessage)
-                defaultMessage="Copy link"
-                id="single_image_view.copy_link_tooltip"
-              />
-            </Tooltip>
-          }
+        <WithTooltip
+          id="single_image_view.copy_link_tooltip.text"
           placement="top"
-          rootClose={true}
-          trigger={
-            Array [
-              "hover",
-              "focus",
-            ]
+          title={
+            <Memo(MemoizedFormattedMessage)
+              defaultMessage="Copy link"
+              id="single_image_view.copy_link_tooltip"
+            />
           }
         >
           <button
@@ -206,29 +164,15 @@ exports[`components/SizeAwareImage should match snapshot when handleSmallImageCo
               size={20}
             />
           </button>
-        </OverlayTrigger>
-        <OverlayTrigger
-          className="hidden-xs"
-          defaultOverlayShown={false}
-          delayShow={500}
-          overlay={
-            <Tooltip
-              className="hidden-xs"
-              id="download-preview-tooltip"
-            >
-              <Memo(MemoizedFormattedMessage)
-                defaultMessage="Download"
-                id="single_image_view.download_tooltip"
-              />
-            </Tooltip>
-          }
+        </WithTooltip>
+        <WithTooltip
+          id="single_image_view.download_tooltip.text"
           placement="top"
-          rootClose={true}
-          trigger={
-            Array [
-              "hover",
-              "focus",
-            ]
+          title={
+            <Memo(MemoizedFormattedMessage)
+              defaultMessage="Download"
+              id="single_image_view.download_tooltip"
+            />
           }
         >
           <a
@@ -244,7 +188,7 @@ exports[`components/SizeAwareImage should match snapshot when handleSmallImageCo
               size={20}
             />
           </a>
-        </OverlayTrigger>
+        </WithTooltip>
       </span>
     </figure>
   </div>
@@ -311,28 +255,14 @@ exports[`components/SizeAwareImage should render a placeholder and has loader wh
       <span
         className="image-preview-utility-buttons-container image-preview-utility-buttons-container--small-image"
       >
-        <OverlayTrigger
-          className="hidden-xs"
-          defaultOverlayShown={false}
-          delayShow={500}
-          overlay={
-            <Tooltip
-              className="hidden-xs"
-              id="copy-link-tooltip"
-            >
-              <Memo(MemoizedFormattedMessage)
-                defaultMessage="Copy link"
-                id="single_image_view.copy_link_tooltip"
-              />
-            </Tooltip>
-          }
+        <WithTooltip
+          id="single_image_view.copy_link_tooltip.text"
           placement="top"
-          rootClose={true}
-          trigger={
-            Array [
-              "hover",
-              "focus",
-            ]
+          title={
+            <Memo(MemoizedFormattedMessage)
+              defaultMessage="Copy link"
+              id="single_image_view.copy_link_tooltip"
+            />
           }
         >
           <button
@@ -345,29 +275,15 @@ exports[`components/SizeAwareImage should render a placeholder and has loader wh
               size={20}
             />
           </button>
-        </OverlayTrigger>
-        <OverlayTrigger
-          className="hidden-xs"
-          defaultOverlayShown={false}
-          delayShow={500}
-          overlay={
-            <Tooltip
-              className="hidden-xs"
-              id="download-preview-tooltip"
-            >
-              <Memo(MemoizedFormattedMessage)
-                defaultMessage="Download"
-                id="single_image_view.download_tooltip"
-              />
-            </Tooltip>
-          }
+        </WithTooltip>
+        <WithTooltip
+          id="single_image_view.download_tooltip.text"
           placement="top"
-          rootClose={true}
-          trigger={
-            Array [
-              "hover",
-              "focus",
-            ]
+          title={
+            <Memo(MemoizedFormattedMessage)
+              defaultMessage="Download"
+              id="single_image_view.download_tooltip"
+            />
           }
         >
           <a
@@ -383,7 +299,7 @@ exports[`components/SizeAwareImage should render a placeholder and has loader wh
               size={20}
             />
           </a>
-        </OverlayTrigger>
+        </WithTooltip>
       </span>
     </figure>
   </div>
diff --git a/webapp/channels/src/components/rename_channel_modal/__snapshots__/rename_channel_modal.test.tsx.snap b/webapp/channels/src/components/rename_channel_modal/__snapshots__/rename_channel_modal.test.tsx.snap
index 5980dbffa2..4461507bfd 100644
--- a/webapp/channels/src/components/rename_channel_modal/__snapshots__/rename_channel_modal.test.tsx.snap
+++ b/webapp/channels/src/components/rename_channel_modal/__snapshots__/rename_channel_modal.test.tsx.snap
@@ -87,30 +87,17 @@ exports[`components/RenameChannelModal should match snapshot 1`] = `
         <div
           className="input-group input-group--limit"
         >
-          <OverlayTrigger
-            defaultOverlayShown={false}
-            delayShow={400}
-            overlay={
-              <Tooltip
-                id="urlTooltip"
-              >
-                fake-channel/channels
-              </Tooltip>
-            }
+          <WithTooltip
+            id="renameChannelModalShortUrlTooltip"
             placement="top"
-            trigger={
-              Array [
-                "hover",
-                "focus",
-              ]
-            }
+            title="fake-channel/channels"
           >
             <span
               className="input-group-addon"
             >
               fake-channel/channels/
             </span>
-          </OverlayTrigger>
+          </WithTooltip>
           <input
             aria-label="rename channel"
             className="form-control"
diff --git a/webapp/channels/src/components/rename_channel_modal/rename_channel_modal.tsx b/webapp/channels/src/components/rename_channel_modal/rename_channel_modal.tsx
index 8be7bd99ba..59582e0ab4 100644
--- a/webapp/channels/src/components/rename_channel_modal/rename_channel_modal.tsx
+++ b/webapp/channels/src/components/rename_channel_modal/rename_channel_modal.tsx
@@ -13,8 +13,7 @@ import type {Team} from '@mattermost/types/teams';
 
 import type {ActionResult} from 'mattermost-redux/types/actions';
 
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
+import WithTooltip from 'components/with_tooltip';
 
 import {getHistory} from 'utils/browser_history';
 import Constants from 'utils/constants';
@@ -256,9 +255,6 @@ export class RenameChannelModal extends React.PureComponent<Props, State> {
 
         const fullUrl = this.props.currentTeamUrl + '/channels';
         const shortUrl = `${getShortenedURL(fullUrl, 35)}/`;
-        const urlTooltip = (
-            <Tooltip id='urlTooltip'>{fullUrl}</Tooltip>
-        );
 
         return (
             <Modal
@@ -310,13 +306,13 @@ export class RenameChannelModal extends React.PureComponent<Props, State> {
                             <label className='control-label'>{urlInputLabel}</label>
 
                             <div className={urlInputClass}>
-                                <OverlayTrigger
-                                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                                <WithTooltip
+                                    id='renameChannelModalShortUrlTooltip'
                                     placement='top'
-                                    overlay={urlTooltip}
+                                    title={fullUrl}
                                 >
                                     <span className='input-group-addon'>{shortUrl}</span>
-                                </OverlayTrigger>
+                                </WithTooltip>
                                 <input
                                     onChange={this.onNameChange}
                                     type='text'
diff --git a/webapp/channels/src/components/size_aware_image.tsx b/webapp/channels/src/components/size_aware_image.tsx
index f541fcaa05..cd09167e8c 100644
--- a/webapp/channels/src/components/size_aware_image.tsx
+++ b/webapp/channels/src/components/size_aware_image.tsx
@@ -16,8 +16,7 @@ import type {ActionResult} from 'mattermost-redux/types/actions';
 import {getFileMiniPreviewUrl} from 'mattermost-redux/utils/file_utils';
 
 import LoadingImagePreview from 'components/loading_image_preview';
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
+import WithTooltip from 'components/with_tooltip';
 
 import {localizeMessage, copyToClipboard} from 'utils/utils';
 
@@ -236,31 +235,22 @@ export default class SizeAwareImage extends React.PureComponent<Props, State> {
         // copyLinkTooltip, downloadTooltip are tooltips for the buttons respectively.
         // if linkCopiedRecently is true, defaultMessage would be 'Copy Link', else 'Copied!'
 
-        const copyLinkTooltip = (
-            <Tooltip
-                id='copy-link-tooltip'
-                className='hidden-xs'
-            >
-                {this.state.linkCopiedRecently ? (
-                    <FormattedMessage
-                        id='single_image_view.copied_link_tooltip'
-                        defaultMessage='Copied'
-                    />
-                ) : (
-                    <FormattedMessage
-                        id='single_image_view.copy_link_tooltip'
-                        defaultMessage='Copy link'
-                    />
-                )}
-            </Tooltip>
+        const copyLinkTooltipText = this.state.linkCopiedRecently ? (
+            <FormattedMessage
+                id={'single_image_view.copied_link_tooltip'}
+                defaultMessage={'Copied'}
+            />
+        ) : (
+            <FormattedMessage
+                id={'single_image_view.copy_link_tooltip'}
+                defaultMessage={'Copy link'}
+            />
         );
         const copyLink = (
-            <OverlayTrigger
-                className='hidden-xs'
-                delayShow={500}
+            <WithTooltip
+                id='single_image_view.copy_link_tooltip.text'
+                title={copyLinkTooltipText}
                 placement='top'
-                overlay={copyLinkTooltip}
-                rootClose={true}
             >
                 <button
                     className={classNames('style--none', 'size-aware-image__copy_link', {
@@ -281,28 +271,20 @@ export default class SizeAwareImage extends React.PureComponent<Props, State> {
                         />
                     )}
                 </button>
-            </OverlayTrigger>
+            </WithTooltip>
         );
 
-        const downloadTooltip = (
-            <Tooltip
-                id='download-preview-tooltip'
-                className='hidden-xs'
-            >
-                <FormattedMessage
-                    id='single_image_view.download_tooltip'
-                    defaultMessage='Download'
-                />
-            </Tooltip>
+        const downloadTooltipText = (
+            <FormattedMessage
+                id='single_image_view.download_tooltip'
+                defaultMessage='Download'
+            />
         );
-
         const download = (
-            <OverlayTrigger
-                className='hidden-xs'
-                delayShow={500}
+            <WithTooltip
+                id='single_image_view.download_tooltip.text'
                 placement='top'
-                overlay={downloadTooltip}
-                rootClose={true}
+                title={downloadTooltipText}
             >
                 <a
                     target='_blank'
@@ -318,7 +300,7 @@ export default class SizeAwareImage extends React.PureComponent<Props, State> {
                         size={20}
                     />
                 </a>
-            </OverlayTrigger>
+            </WithTooltip>
         );
 
         if (this.props.handleSmallImageContainer && this.state.isSmallImage) {