From 2bf47c69f790346e55d41e122bc9d42a4ee147b1 Mon Sep 17 00:00:00 2001
From: Ivy Gesare <83957195+Gesare5@users.noreply.github.com>
Date: Mon, 29 Jul 2024 10:05:38 +0300
Subject: [PATCH] [MM-59334] Migrate tooltips of
 "components/sidebar/sidebar_header/sidebar_header.tsx" to WithTooltip
 (#27635)

---
 .../sidebar/sidebar_header/sidebar_header.tsx | 34 ++++++++-----------
 1 file changed, 14 insertions(+), 20 deletions(-)

diff --git a/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx b/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx
index 3f31637902..0b8cfd7bf8 100644
--- a/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx
+++ b/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx
@@ -17,14 +17,11 @@ import {isAddChannelDropdownOpen} from 'selectors/views/add_channel_dropdown';
 import useGetUsageDeltas from 'components/common/hooks/useGetUsageDeltas';
 import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider';
 import MainMenu from 'components/main_menu';
-import OverlayTrigger from 'components/overlay_trigger';
 import AddChannelDropdown from 'components/sidebar/add_channel_dropdown';
-import Tooltip from 'components/tooltip';
 import {OnboardingTourSteps} from 'components/tours';
 import {useShowOnboardingTutorialStep} from 'components/tours/onboarding_tour';
 import MenuWrapper from 'components/widgets/menu/menu_wrapper';
-
-import Constants from 'utils/constants';
+import WithTooltip from 'components/with_tooltip';
 
 import type {GlobalState} from 'types/store';
 
@@ -124,17 +121,14 @@ const SidebarHeader = (props: Props) => {
             <SidebarHeaderContainer
                 id={'sidebar-header-container'}
             >
-                <OverlayTrigger
-
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
-                    placement='bottom'
-                    overlay={currentTeam.description?.length ? (
-                        <Tooltip id='team-name__tooltip'>{currentTeam.description}</Tooltip>
-                    ) : <></>}
+                <MenuWrapper
+                    onToggle={handleMenuToggle}
+                    className='SidebarHeaderMenuWrapper test-team-header'
                 >
-                    <MenuWrapper
-                        onToggle={handleMenuToggle}
-                        className='SidebarHeaderMenuWrapper test-team-header'
+                    <WithTooltip
+                        id='team-name__tooltip'
+                        title={currentTeam.description ? currentTeam.description : currentTeam.display_name}
+                        placement='bottom'
                     >
                         <SidebarHeading>
                             <button className='style--none sidebar-header'>
@@ -142,12 +136,12 @@ const SidebarHeader = (props: Props) => {
                                 <i className='icon icon-chevron-down'/>
                             </button>
                         </SidebarHeading>
-                        <MainMenu
-                            id='sidebarDropdownMenu'
-                            usageDeltaTeams={usageDeltas.teams.active}
-                        />
-                    </MenuWrapper>
-                </OverlayTrigger>
+                    </WithTooltip>
+                    <MainMenu
+                        id='sidebarDropdownMenu'
+                        usageDeltaTeams={usageDeltas.teams.active}
+                    />
+                </MenuWrapper>
                 <AddChannelDropdown
                     showNewChannelModal={props.showNewChannelModal}
                     showMoreChannelsModal={props.showMoreChannelsModal}