From daf62a77176b6773b268fe14e54463ce9cb62e41 Mon Sep 17 00:00:00 2001
From: Ivy Gesare <83957195+Gesare5@users.noreply.github.com>
Date: Sun, 28 Jul 2024 21:51:49 +0300
Subject: [PATCH] [MM-59336] Migrate tooltips of
 "components/global_header/right_controls/plan_upgrade_button/index.tsx" to
 WithTooltip (#27612)

---
 .../plan_upgrade_button/index.tsx             | 20 ++++++-------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/webapp/channels/src/components/global_header/right_controls/plan_upgrade_button/index.tsx b/webapp/channels/src/components/global_header/right_controls/plan_upgrade_button/index.tsx
index b8f02abaaa..4b2d269647 100644
--- a/webapp/channels/src/components/global_header/right_controls/plan_upgrade_button/index.tsx
+++ b/webapp/channels/src/components/global_header/right_controls/plan_upgrade_button/index.tsx
@@ -13,10 +13,9 @@ import {isCurrentUserSystemAdmin} from 'mattermost-redux/selectors/entities/user
 
 import useOpenPricingModal from 'components/common/hooks/useOpenPricingModal';
 import type {TelemetryProps} from 'components/common/hooks/useOpenPricingModal';
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
+import WithTooltip from 'components/with_tooltip';
 
-import Constants, {CloudProducts} from 'utils/constants';
+import {CloudProducts} from 'utils/constants';
 
 const UpgradeButton = styled.button`
 background: var(--denim-button-bg);
@@ -83,18 +82,11 @@ const PlanUpgradeButton = (): JSX.Element | null => {
         return null;
     }
 
-    const tooltip = (
-        <Tooltip id='upgrade_button_tooltip'>
-            {formatMessage({id: 'pricing_modal.btn.tooltip', defaultMessage: 'Only visible to system admins'})}
-        </Tooltip>
-    );
-
     return (
-        <OverlayTrigger
-            trigger={['hover']}
-            delayShow={Constants.OVERLAY_TIME_DELAY}
+        <WithTooltip
+            id='upgrade_button_tooltip'
+            title={formatMessage({id: 'pricing_modal.btn.tooltip', defaultMessage: 'Only visible to system admins'})}
             placement='bottom'
-            overlay={tooltip}
         >
             <UpgradeButton
                 id='UpgradeButton'
@@ -103,7 +95,7 @@ const PlanUpgradeButton = (): JSX.Element | null => {
             >
                 {formatMessage({id: 'pricing_modal.btn.viewPlans', defaultMessage: 'View plans'})}
             </UpgradeButton>
-        </OverlayTrigger>);
+        </WithTooltip>);
 };
 
 export default PlanUpgradeButton;