[MM-58512] Migrate tooltips of "components/status_dropdown/status_dropdown.tsx" to WithTooltip (#27246)

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
+            <WithTooltip
-              defaultOverlayShown={false}
+              id="InputClearTooltip"
-              delayShow={400}
-              overlay={
-                <Tooltip
-                  id="InputClearTooltip"
-                >
-                  <Memo(MemoizedFormattedMessage)
-                    defaultMessage="Clear"
-                    id="input.clear"
-                  />
-                </Tooltip>
-              }
               placement="left"
-              trigger={
+              title={
-                Array [
+                <Memo(MemoizedFormattedMessage)
-                  "hover",
+                  defaultMessage="Clear"
-                  "focus",
+                  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
+            <WithTooltip
-              defaultOverlayShown={false}
+              id="InputClearTooltip"
-              delayShow={400}
-              overlay={
-                <Tooltip
-                  id="InputClearTooltip"
-                >
-                  <Memo(MemoizedFormattedMessage)
-                    defaultMessage="Clear"
-                    id="input.clear"
-                  />
-                </Tooltip>
-              }
               placement="left"
-              trigger={
+              title={
-                Array [
+                <Memo(MemoizedFormattedMessage)
-                  "hover",
+                  defaultMessage="Clear"
-                  "focus",
+                  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)

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 = (
+        const clearableTooltipText = (
-            <Tooltip id={'InputClearTooltip'}>
+            <FormattedMessage
-                <FormattedMessage
+                id={'input.clear'}
-                    id={'input.clear'}
+                defaultMessage='Clear'
-                    defaultMessage='Clear'
+            />
-                />
-            </Tooltip>
         );
 
         const clearButton = isStatusSet && !pulsatingDot && (
@@ -323,10 +320,10 @@ export class StatusDropdown extends React.PureComponent<Props, State> {
                 onClick={this.handleClearStatus}
                 onTouchEnd={this.handleClearStatus}
             >
-                <OverlayTrigger
+                <WithTooltip
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                    id='InputClearTooltip'
-                    placement={'left'}
+                    placement='left'
-                    overlay={clearableTooltip}
+                    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>
         );