From 08e4c9f611312cfb126a7a5bd1f397188f3d27d9 Mon Sep 17 00:00:00 2001
From: Rita Anene <92169163+Camillarhi@users.noreply.github.com>
Date: Fri, 23 Aug 2024 04:01:41 +0100
Subject: [PATCH] [MM-60168] Migrate tooltips of
 "components/widgets/menu/menu_items/restricted_indicator.tsx" to WithTooltip
 (#27993)

---
 .../menu/menu_items/restricted_indicator.tsx  | 24 ++++++++-----------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/webapp/channels/src/components/widgets/menu/menu_items/restricted_indicator.tsx b/webapp/channels/src/components/widgets/menu/menu_items/restricted_indicator.tsx
index 79fc7a3f98..8af881cd4a 100644
--- a/webapp/channels/src/components/widgets/menu/menu_items/restricted_indicator.tsx
+++ b/webapp/channels/src/components/widgets/menu/menu_items/restricted_indicator.tsx
@@ -7,12 +7,11 @@ import {useIntl} from 'react-intl';
 import type {MessageDescriptor} from 'react-intl';
 
 import FeatureRestrictedModal from 'components/feature_restricted_modal/feature_restricted_modal';
-import OverlayTrigger from 'components/overlay_trigger';
 import ToggleModalButton from 'components/toggle_modal_button';
-import Tooltip from 'components/tooltip';
+import WithTooltip from 'components/with_tooltip';
 
 import {FREEMIUM_TO_ENTERPRISE_TRIAL_LENGTH_DAYS} from 'utils/cloud_utils';
-import {Constants, LicenseSkus, ModalIdentifiers} from 'utils/constants';
+import {LicenseSkus, ModalIdentifiers} from 'utils/constants';
 
 import './restricted_indicator.scss';
 
@@ -88,14 +87,10 @@ const RestrictedIndicator = ({
 
     return (
         <span className='RestrictedIndicator__icon-tooltip-container'>
-            <OverlayTrigger
-                delayShow={Constants.OVERLAY_TIME_DELAY}
-                placement='right'
-                overlay={(
-                    <Tooltip
-                        id={`${feature}-tooltip`}
-                        className='RestrictedIndicator__icon-tooltip'
-                    >
+            <WithTooltip
+                id={`${feature}-tooltip`}
+                title={
+                    <div className='RestrictedIndicator__icon-tooltip'>
                         <span className='title'>
                             {tooltipTitle || formatMessage({id: 'restricted_indicator.tooltip.title', defaultMessage: '{minimumPlanRequiredForFeature} feature'}, {minimumPlanRequiredForFeature: capitalizeFirstLetter(minimumPlanRequiredForFeature!)})}
                         </span>
@@ -106,8 +101,9 @@ const RestrictedIndicator = ({
                                 tooltipMessage || formatMessage({id: 'restricted_indicator.tooltip.mesage', defaultMessage: 'During your trial you are able to use this feature.'})
                             )}
                         </span>
-                    </Tooltip>
-                )}
+                    </div>
+                }
+                placement='right'
             >
                 {useModal && blocked ? (
                     <span>
@@ -139,7 +135,7 @@ const RestrictedIndicator = ({
                         {ctaExtraContent}
                     </div>
                 )}
-            </OverlayTrigger>
+            </WithTooltip>
         </span>
     );
 };