From 405e4bd8882d57625bfb5ec3bcae5b899a9977c9 Mon Sep 17 00:00:00 2001
From: Rita Anene <92169163+Camillarhi@users.noreply.github.com>
Date: Fri, 23 Aug 2024 04:00:56 +0100
Subject: [PATCH] [MM-60167] Migrate tooltips of
 "components/sidebar/sidebar_channel/sidebar_channel_link/sidebar_channel_link.tsx"
 to WithTooltip (#27979)

---
 .../sidebar_channel_link.test.tsx.snap        | 22 ++++---------------
 .../sidebar_channel_link.tsx                  | 22 +++++--------------
 2 files changed, 10 insertions(+), 34 deletions(-)

diff --git a/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/__snapshots__/sidebar_channel_link.test.tsx.snap b/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/__snapshots__/sidebar_channel_link.test.tsx.snap
index 7a7a14821a..86d02aa3fd 100644
--- a/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/__snapshots__/sidebar_channel_link.test.tsx.snap
+++ b/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/__snapshots__/sidebar_channel_link.test.tsx.snap
@@ -180,31 +180,17 @@ exports[`components/sidebar/sidebar_channel/sidebar_channel_link should match sn
   <div
     className="SidebarChannelLinkLabel_wrapper"
   >
-    <OverlayTrigger
-      defaultOverlayShown={false}
-      delayShow={400}
-      onEntering={[Function]}
-      overlay={
-        <Tooltip
-          id="channel-displayname__tooltip"
-        >
-          channel_label
-        </Tooltip>
-      }
+    <WithTooltip
+      id="channel-displayname__tooltip"
       placement="top"
-      trigger={
-        Array [
-          "hover",
-          "focus",
-        ]
-      }
+      title="channel_label"
     >
       <span
         className="SidebarChannelLinkLabel"
       >
         channel_label
       </span>
-    </OverlayTrigger>
+    </WithTooltip>
     <Connect(Pluggable)
       channel={
         Object {
diff --git a/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/sidebar_channel_link.tsx b/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/sidebar_channel_link.tsx
index 5f88ef67c6..77275a236b 100644
--- a/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/sidebar_channel_link.tsx
+++ b/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/sidebar_channel_link.tsx
@@ -10,9 +10,8 @@ import type {Channel} from '@mattermost/types/channels';
 import {mark, trackEvent} from 'actions/telemetry_actions';
 
 import CustomStatusEmoji from 'components/custom_status/custom_status_emoji';
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
 import {ChannelsAndDirectMessagesTour} from 'components/tours/onboarding_tour';
+import WithTooltip from 'components/with_tooltip';
 
 import Pluggable from 'plugins/pluggable';
 import Constants, {RHSStates} from 'utils/constants';
@@ -130,9 +129,6 @@ export default class SidebarChannelLink extends React.PureComponent<Props, State
         return ariaLabel.toLowerCase();
     };
 
-    // Bootstrap adds the attr dynamically, removing it to prevent a11y readout
-    removeTooltipLink = (): void => this.labelRef.current?.removeAttribute?.('aria-describedby');
-
     handleChannelClick = (event: React.MouseEvent<HTMLAnchorElement>): void => {
         mark(Mark.ChannelLinkClicked);
         this.handleSelectChannel(event);
@@ -201,20 +197,14 @@ export default class SidebarChannelLink extends React.PureComponent<Props, State
             </span>
         );
         if (this.state.showTooltip) {
-            const displayNameToolTip = (
-                <Tooltip id='channel-displayname__tooltip'>
-                    {label}
-                </Tooltip>
-            );
             labelElement = (
-                <OverlayTrigger
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
-                    placement='top'
-                    overlay={displayNameToolTip}
-                    onEntering={this.removeTooltipLink}
+                <WithTooltip
+                    id='channel-displayname__tooltip'
+                    title={label}
+                    placement={'top'}
                 >
                     {labelElement}
-                </OverlayTrigger>
+                </WithTooltip>
             );
         }