From d1f49a2c177da1807d6ca14b94a66aa26a15c05a Mon Sep 17 00:00:00 2001
From: Ivy Gesare <83957195+Gesare5@users.noreply.github.com>
Date: Sun, 28 Jul 2024 21:50:46 +0300
Subject: [PATCH] [MM-59339] Migrate tooltips of
 "components/quick_input/quick_input.tsx" to WithTooltip (#27594)

---
 .../components/quick_input/quick_input.tsx    | 21 ++++++-------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/webapp/channels/src/components/quick_input/quick_input.tsx b/webapp/channels/src/components/quick_input/quick_input.tsx
index 36fffe78e5..38aec38557 100644
--- a/webapp/channels/src/components/quick_input/quick_input.tsx
+++ b/webapp/channels/src/components/quick_input/quick_input.tsx
@@ -8,10 +8,7 @@ import type {ReactNode} from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import AutosizeTextarea from 'components/autosize_textarea';
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
-
-import Constants from 'utils/constants';
+import WithTooltip from 'components/with_tooltip';
 
 export type Props = {
 
@@ -147,7 +144,7 @@ export class QuickInput extends React.PureComponent<Props> {
     };
 
     render() {
-        let clearableTooltipText = this.props.clearableTooltipText;
+        let clearableTooltipText = this.props.clearableTooltipText || '';
         if (!clearableTooltipText) {
             clearableTooltipText = (
                 <FormattedMessage
@@ -157,12 +154,6 @@ export class QuickInput extends React.PureComponent<Props> {
             );
         }
 
-        const clearableTooltip = (
-            <Tooltip id={'InputClearTooltip'}>
-                {clearableTooltipText}
-            </Tooltip>
-        );
-
         const {
             value,
             inputComponent,
@@ -206,10 +197,10 @@ export class QuickInput extends React.PureComponent<Props> {
                 onTouchEnd={this.onClear}
                 role='button'
             >
-                <OverlayTrigger
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                <WithTooltip
+                    id='inputClearTooltip'
+                    title={clearableTooltipText}
                     placement={tooltipPosition}
-                    overlay={clearableTooltip}
                 >
                     <span
                         className='input-clear-x'
@@ -217,7 +208,7 @@ export class QuickInput extends React.PureComponent<Props> {
                     >
                         <i className='icon icon-close-circle'/>
                     </span>
-                </OverlayTrigger>
+                </WithTooltip>
             </div>
             }
         </div>);