[MM-59330] Migrate tooltips of "components/drafts/draft_actions/action.tsx" to WithTooltip (#27650)

webapp/channels/src/components/drafts/draft_actions/__snapshots__/action.test.tsx.snap

@@ -4,27 +4,10 @@ exports[`components/drafts/draft_actions/action should match snapshot 1`] = `
 <div
   className="DraftAction"
 >
-  <OverlayTrigger
+  <WithTooltip
-    className="hidden-xs"
+    id="drafts_action_tooltip_"
-    defaultOverlayShown={false}
-    delayShow={400}
-    overlay={
-      <Tooltip
-        bsClass="tooltip"
-        className="hidden-xs"
-        id="tooltip_"
-        placement="right"
-      >
-        
-      </Tooltip>
-    }
     placement="top"
-    trigger={
+    title=""
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
   >
     <button
       className="DraftAction__button"
@@ -35,6 +18,6 @@ exports[`components/drafts/draft_actions/action should match snapshot 1`] = `
         className="icon "
       />
     </button>
-  </OverlayTrigger>
+  </WithTooltip>
 </div>
 `;

webapp/channels/src/components/drafts/draft_actions/action.tsx

@@ -3,37 +3,25 @@
 
 import classNames from 'classnames';
 import React from 'react';
-import {Tooltip} from 'react-bootstrap';
-
-import OverlayTrigger from 'components/overlay_trigger';
-
-import Constants from 'utils/constants';
 
 import './action.scss';
+import WithTooltip from 'components/with_tooltip';
 
 type Props = {
     icon: string;
     id: string;
     name: string;
     onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    tooltipText: React.ReactNode;
+    tooltipText: React.ReactElement | string;
 };
 
 function Action({name, icon, onClick, id, tooltipText}: Props) {
     return (
         <div className='DraftAction'>
-            <OverlayTrigger
+            <WithTooltip
-                className='hidden-xs'
+                id={`drafts_action_tooltip_${id}`}
-                delayShow={Constants.OVERLAY_TIME_DELAY}
                 placement='top'
-                overlay={
+                title={tooltipText}
-                    <Tooltip
-                        id={`tooltip_${id}`}
-                        className='hidden-xs'
-                    >
-                        {tooltipText}
-                    </Tooltip>
-                }
             >
                 <button
                     className={classNames(
@@ -45,7 +33,7 @@ function Action({name, icon, onClick, id, tooltipText}: Props) {
                 >
                     <i className={`icon ${icon}`}/>
                 </button>
-            </OverlayTrigger>
+            </WithTooltip>
         </div>
     );
 }