From 926c7aeac83db60f14abce2cc31bb9ab15cfaeca Mon Sep 17 00:00:00 2001
From: Arya Khochare <91268931+Aryakoste@users.noreply.github.com>
Date: Tue, 25 Jun 2024 12:32:03 +0530
Subject: [PATCH]  [MM-58512] Migrate tooltips of
 "components/status_dropdown/status_dropdown.tsx" to WithTooltip (#27246)

---
 .../status_dropdown.test.tsx.snap             | 54 ++++++-------------
 .../status_dropdown/status_dropdown.tsx       | 27 +++++-----
 2 files changed, 28 insertions(+), 53 deletions(-)

diff --git a/webapp/channels/src/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap b/webapp/channels/src/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap
index ebe335aac3..c7bdf48da5 100644
--- a/webapp/channels/src/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap
+++ b/webapp/channels/src/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap
@@ -356,25 +356,14 @@ exports[`components/StatusDropdown should match snapshot with custom status and
             onClick={[Function]}
             onTouchEnd={[Function]}
           >
-            <OverlayTrigger
-              defaultOverlayShown={false}
-              delayShow={400}
-              overlay={
-                <Tooltip
-                  id="InputClearTooltip"
-                >
-                  <Memo(MemoizedFormattedMessage)
-                    defaultMessage="Clear"
-                    id="input.clear"
-                  />
-                </Tooltip>
-              }
+            <WithTooltip
+              id="InputClearTooltip"
               placement="left"
-              trigger={
-                Array [
-                  "hover",
-                  "focus",
-                ]
+              title={
+                <Memo(MemoizedFormattedMessage)
+                  defaultMessage="Clear"
+                  id="input.clear"
+                />
               }
             >
               <span
@@ -385,7 +374,7 @@ exports[`components/StatusDropdown should match snapshot with custom status and
                   className="icon icon-close-circle"
                 />
               </span>
-            </OverlayTrigger>
+            </WithTooltip>
           </div>
         </span>
         <Memo(ExpiryTime)
@@ -2309,25 +2298,14 @@ exports[`components/StatusDropdown should show clear status button when custom s
             onClick={[Function]}
             onTouchEnd={[Function]}
           >
-            <OverlayTrigger
-              defaultOverlayShown={false}
-              delayShow={400}
-              overlay={
-                <Tooltip
-                  id="InputClearTooltip"
-                >
-                  <Memo(MemoizedFormattedMessage)
-                    defaultMessage="Clear"
-                    id="input.clear"
-                  />
-                </Tooltip>
-              }
+            <WithTooltip
+              id="InputClearTooltip"
               placement="left"
-              trigger={
-                Array [
-                  "hover",
-                  "focus",
-                ]
+              title={
+                <Memo(MemoizedFormattedMessage)
+                  defaultMessage="Clear"
+                  id="input.clear"
+                />
               }
             >
               <span
@@ -2338,7 +2316,7 @@ exports[`components/StatusDropdown should show clear status button when custom s
                   className="icon icon-close-circle"
                 />
               </span>
-            </OverlayTrigger>
+            </WithTooltip>
           </div>
         </span>
         <Memo(ExpiryTime)
diff --git a/webapp/channels/src/components/status_dropdown/status_dropdown.tsx b/webapp/channels/src/components/status_dropdown/status_dropdown.tsx
index b33d09fd50..f78f7576bd 100644
--- a/webapp/channels/src/components/status_dropdown/status_dropdown.tsx
+++ b/webapp/channels/src/components/status_dropdown/status_dropdown.tsx
@@ -25,17 +25,16 @@ import CustomStatusText from 'components/custom_status/custom_status_text';
 import ExpiryTime from 'components/custom_status/expiry_time';
 import DndCustomTimePicker from 'components/dnd_custom_time_picker_modal';
 import {OnboardingTaskCategory, OnboardingTasksName, TaskNameMapToSteps, CompleteYourProfileTour} from 'components/onboarding_tasks';
-import OverlayTrigger from 'components/overlay_trigger';
 import ResetStatusModal from 'components/reset_status_modal';
-import Tooltip from 'components/tooltip';
 import UserSettingsModal from 'components/user_settings/modal';
 import EmojiIcon from 'components/widgets/icons/emoji_icon';
 import Menu from 'components/widgets/menu/menu';
 import MenuWrapper from 'components/widgets/menu/menu_wrapper';
 import Avatar from 'components/widgets/users/avatar/avatar';
 import type {TAvatarSizeToken} from 'components/widgets/users/avatar/avatar';
+import WithTooltip from 'components/with_tooltip';
 
-import {Constants, ModalIdentifiers, UserStatuses} from 'utils/constants';
+import {ModalIdentifiers, UserStatuses} from 'utils/constants';
 import {getBrowserTimezone, getCurrentDateTimeForTimezone, getCurrentMomentForTimezone} from 'utils/timezone';
 
 import type {ModalData} from 'types/actions';
@@ -308,13 +307,11 @@ export class StatusDropdown extends React.PureComponent<Props, State> {
             <PulsatingDot/>
         );
 
-        const clearableTooltip = (
-            <Tooltip id={'InputClearTooltip'}>
-                <FormattedMessage
-                    id={'input.clear'}
-                    defaultMessage='Clear'
-                />
-            </Tooltip>
+        const clearableTooltipText = (
+            <FormattedMessage
+                id={'input.clear'}
+                defaultMessage='Clear'
+            />
         );
 
         const clearButton = isStatusSet && !pulsatingDot && (
@@ -323,10 +320,10 @@ export class StatusDropdown extends React.PureComponent<Props, State> {
                 onClick={this.handleClearStatus}
                 onTouchEnd={this.handleClearStatus}
             >
-                <OverlayTrigger
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
-                    placement={'left'}
-                    overlay={clearableTooltip}
+                <WithTooltip
+                    id='InputClearTooltip'
+                    placement='left'
+                    title={clearableTooltipText}
                 >
                     <span
                         className='input-clear-x'
@@ -334,7 +331,7 @@ export class StatusDropdown extends React.PureComponent<Props, State> {
                     >
                         <i className='icon icon-close-circle'/>
                     </span>
-                </OverlayTrigger>
+                </WithTooltip>
             </div>
         );