From 1ad39b9da58324939c966a931bbaf7db955d3758 Mon Sep 17 00:00:00 2001
From: Ivy Gesare <83957195+Gesare5@users.noreply.github.com>
Date: Wed, 7 Aug 2024 18:47:19 +0300
Subject: [PATCH] [MM-59895] Migrate tooltips of
 'components/channel_header/channel_header.tsx' to WithTooltip (#27841)

---
 .../channel_header.test.tsx.snap              | 27 ++++++-------------
 .../channel_header/channel_header.tsx         | 25 +++++++----------
 2 files changed, 18 insertions(+), 34 deletions(-)

diff --git a/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap b/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap
index 484fad673a..232993bb2e 100644
--- a/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap
+++ b/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap
@@ -1769,25 +1769,14 @@ exports[`components/ChannelHeader should render correct menu when muted 1`] = `
           <div
             className="channel-header__icons"
           >
-            <OverlayTrigger
-              defaultOverlayShown={false}
-              delayShow={400}
-              overlay={
-                <Tooltip
-                  id="channelMutedTooltip"
-                >
-                  <Memo(MemoizedFormattedMessage)
-                    defaultMessage="Unmute"
-                    id="channelHeader.unmute"
-                  />
-                </Tooltip>
-              }
+            <WithTooltip
+              id="channelMutedTooltip"
               placement="bottom"
-              trigger={
-                Array [
-                  "hover",
-                  "focus",
-                ]
+              title={
+                <Memo(MemoizedFormattedMessage)
+                  defaultMessage="Unmute"
+                  id="channelHeader.unmute"
+                />
               }
             >
               <button
@@ -1800,7 +1789,7 @@ exports[`components/ChannelHeader should render correct menu when muted 1`] = `
                   className="icon icon-bell-off-outline"
                 />
               </button>
-            </OverlayTrigger>
+            </WithTooltip>
             <HeaderIconWrapper
               buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
               buttonId="member_rhs"
diff --git a/webapp/channels/src/components/channel_header/channel_header.tsx b/webapp/channels/src/components/channel_header/channel_header.tsx
index 8177aecfdf..44a20a5465 100644
--- a/webapp/channels/src/components/channel_header/channel_header.tsx
+++ b/webapp/channels/src/components/channel_header/channel_header.tsx
@@ -18,12 +18,11 @@ import CustomStatusEmoji from 'components/custom_status/custom_status_emoji';
 import CustomStatusText from 'components/custom_status/custom_status_text';
 import EditChannelHeaderModal from 'components/edit_channel_header_modal';
 import Markdown from 'components/markdown';
-import OverlayTrigger from 'components/overlay_trigger';
 import type {BaseOverlayTrigger} from 'components/overlay_trigger';
 import ChannelPermissionGate from 'components/permissions_gates/channel_permission_gate';
 import Timestamp from 'components/timestamp';
-import Tooltip from 'components/tooltip';
 import Popover from 'components/widgets/popover';
+import WithTooltip from 'components/with_tooltip';
 
 import CallButton from 'plugins/call_button';
 import ChannelHeaderPlug from 'plugins/channel_header_plug';
@@ -547,22 +546,18 @@ class ChannelHeader extends React.PureComponent<Props, State> {
             );
         }
 
-        const channelMutedTooltip = (
-            <Tooltip id='channelMutedTooltip'>
-                <FormattedMessage
-                    id='channelHeader.unmute'
-                    defaultMessage='Unmute'
-                />
-            </Tooltip>
-        );
-
         let muteTrigger;
         if (channelMuted) {
             muteTrigger = (
-                <OverlayTrigger
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                <WithTooltip
+                    id='channelMutedTooltip'
                     placement='bottom'
-                    overlay={channelMutedTooltip}
+                    title={
+                        <FormattedMessage
+                            id='channelHeader.unmute'
+                            defaultMessage='Unmute'
+                        />
+                    }
                 >
                     <button
                         id='toggleMute'
@@ -572,7 +567,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
                     >
                         <i className={'icon icon-bell-off-outline'}/>
                     </button>
-                </OverlayTrigger>
+                </WithTooltip>
             );
         }