[MM-60156] Migrate tooltips of 'components/file_upload/file_upload.tsx' to WithTooltip (#27970)

webapp/channels/src/components/file_upload/__snapshots__/file_upload.test.tsx.snap

@@ -5,13 +5,10 @@ exports[`components/FileUpload should match snapshot 1`] = `
   className="style--none"
 >
   <div>
-    <OverlayTrigger
+    <WithTooltip
-      defaultOverlayShown={false}
-      delayShow={400}
-      overlay={
-        <Tooltip
       id="upload-tooltip"
-        >
+      placement="top"
+      title={
         <Memo(KeyboardShortcutSequence)
           hoistDescription={true}
           isInsideTooltip={true}
@@ -28,14 +25,6 @@ exports[`components/FileUpload should match snapshot 1`] = `
             }
           }
         />
-        </Tooltip>
-      }
-      placement="top"
-      trigger={
-        Array [
-          "hover",
-          "focus",
-        ]
       }
     >
       <button
@@ -52,7 +41,7 @@ exports[`components/FileUpload should match snapshot 1`] = `
           size={18}
         />
       </button>
-    </OverlayTrigger>
+    </WithTooltip>
     <input
       accept=""
       aria-label="Upload files"

webapp/channels/src/components/file_upload/file_upload.tsx

@@ -15,10 +15,9 @@ import type {UploadFile} from 'actions/file_actions';
 
 import type {FilePreviewInfo} from 'components/file_preview/file_preview';
 import KeyboardShortcutSequence, {KEYBOARD_SHORTCUTS} from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence';
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
 import Menu from 'components/widgets/menu/menu';
 import MenuWrapper from 'components/widgets/menu/menu_wrapper';
+import WithTooltip from 'components/with_tooltip';
 
 import Constants from 'utils/constants';
 import DelayedAction from 'utils/delayed_action';
@@ -569,18 +568,15 @@ export class FileUpload extends PureComponent<Props, State> {
         if (this.props.pluginFileUploadMethods.length === 0) {
             bodyAction = (
                 <div>
-                    <OverlayTrigger
+                    <WithTooltip
-                        delayShow={Constants.OVERLAY_TIME_DELAY}
+                        id='upload-tooltip'
                         placement='top'
-                        trigger={['hover', 'focus']}
+                        title={
-                        overlay={
-                            <Tooltip id='upload-tooltip'>
                             <KeyboardShortcutSequence
                                 shortcut={KEYBOARD_SHORTCUTS.filesUpload}
                                 hoistDescription={true}
                                 isInsideTooltip={true}
                             />
-                            </Tooltip>
                         }
                     >
                         <button
@@ -599,7 +595,7 @@ export class FileUpload extends PureComponent<Props, State> {
                                 aria-label={iconAriaLabel}
                             />
                         </button>
-                    </OverlayTrigger>
+                    </WithTooltip>
                     <input
                         id='fileUploadInput'
                         tabIndex={-1}
@@ -648,18 +644,15 @@ export class FileUpload extends PureComponent<Props, State> {
                         accept={accept}
                     />
                     <MenuWrapper>
-                        <OverlayTrigger
+                        <WithTooltip
-                            delayShow={Constants.OVERLAY_TIME_DELAY}
+                            id='upload-tooltip'
                             placement='top'
-                            trigger={['hover', 'focus']}
+                            title={
-                            overlay={
-                                <Tooltip id='upload-tooltip'>
                                 <KeyboardShortcutSequence
                                     shortcut={KEYBOARD_SHORTCUTS.filesUpload}
                                     hoistDescription={true}
                                     isInsideTooltip={true}
                                 />
-                                </Tooltip>
                             }
                         >
                             <button
@@ -674,7 +667,7 @@ export class FileUpload extends PureComponent<Props, State> {
                                     aria-label={iconAriaLabel}
                                 />
                             </button>
-                        </OverlayTrigger>
+                        </WithTooltip>
                         <Menu
                             id='fileUploadOptions'
                             openLeft={true}