From 29553008fa87993f70c09d0906e934c8f6bb086a Mon Sep 17 00:00:00 2001
From: Zubair Imtiaz <106450046+ZubairImtiaz3@users.noreply.github.com>
Date: Sun, 28 Jul 2024 23:59:07 +0500
Subject: [PATCH] [MM-59357] Migrate tooltips of
 "components/custom_status/custom_status_suggestion.tsx" to WithTooltip
 (#27637)

---
 .../custom_status_suggestion.tsx              | 24 +++++++++----------
 webapp/channels/src/i18n/en.json              |  1 +
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/webapp/channels/src/components/custom_status/custom_status_suggestion.tsx b/webapp/channels/src/components/custom_status/custom_status_suggestion.tsx
index 260e82c4c6..43ca8f6ea6 100644
--- a/webapp/channels/src/components/custom_status/custom_status_suggestion.tsx
+++ b/webapp/channels/src/components/custom_status/custom_status_suggestion.tsx
@@ -9,10 +9,9 @@ import type {UserCustomStatus} from '@mattermost/types/users';
 import {CustomStatusDuration} from '@mattermost/types/users';
 
 import RenderEmoji from 'components/emoji/render_emoji';
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
+import WithTooltip from 'components/with_tooltip';
 
-import Constants, {durationValues} from 'utils/constants';
+import {durationValues} from 'utils/constants';
 
 import CustomStatusText from './custom_status_text';
 
@@ -42,17 +41,16 @@ const CustomStatusSuggestion: React.FC<Props> = (props: Props) => {
     };
 
     const clearButton = handleClear ? (
-        <div
-            className='suggestion-clear'
-        >
-            <OverlayTrigger
-                delayShow={Constants.OVERLAY_TIME_DELAY}
+        <div className='suggestion-clear'>
+            <WithTooltip
                 placement='top'
-                overlay={
-                    <Tooltip id='clear-recent-custom-status'>
-                        {'Clear'}
-                    </Tooltip>
+                title={
+                    <FormattedMessage
+                        id='custom_status.suggestions.clear'
+                        defaultMessage='Clear'
+                    />
                 }
+                id='clear-recent-custom-status'
             >
                 <button
                     className='style--none input-clear-x'
@@ -60,7 +58,7 @@ const CustomStatusSuggestion: React.FC<Props> = (props: Props) => {
                 >
                     <i className='icon icon-close-circle'/>
                 </button>
-            </OverlayTrigger>
+            </WithTooltip>
         </div>
     ) : null;
 
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index b730b5c7a8..e7cc8f810c 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -3404,6 +3404,7 @@
   "custom_status.modal_cancel": "Clear Status",
   "custom_status.modal_confirm": "Set Status",
   "custom_status.set_status": "Set a status",
+  "custom_status.suggestions.clear": "Clear",
   "custom_status.suggestions.in_a_meeting": "In a meeting",
   "custom_status.suggestions.on_a_vacation": "On a vacation",
   "custom_status.suggestions.out_for_lunch": "Out for lunch",