[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,37 +5,26 @@ exports[`components/FileUpload should match snapshot 1`] = `
   className="style--none"
 >
   <div>
-    <OverlayTrigger
+    <WithTooltip
-      defaultOverlayShown={false}
+      id="upload-tooltip"
-      delayShow={400}
-      overlay={
-        <Tooltip
-          id="upload-tooltip"
-        >
-          <Memo(KeyboardShortcutSequence)
-            hoistDescription={true}
-            isInsideTooltip={true}
-            shortcut={
-              Object {
-                "default": Object {
-                  "defaultMessage": "Upload files:	Ctrl|U",
-                  "id": "shortcuts.files.upload",
-                },
-                "mac": Object {
-                  "defaultMessage": "Upload files:	⌘|U",
-                  "id": "shortcuts.files.upload.mac",
-                },
-              }
-            }
-          />
-        </Tooltip>
-      }
       placement="top"
-      trigger={
+      title={
-        Array [
+        <Memo(KeyboardShortcutSequence)
-          "hover",
+          hoistDescription={true}
-          "focus",
+          isInsideTooltip={true}
-        ]
+          shortcut={
+            Object {
+              "default": Object {
+                "defaultMessage": "Upload files:	Ctrl|U",
+                "id": "shortcuts.files.upload",
+              },
+              "mac": Object {
+                "defaultMessage": "Upload files:	⌘|U",
+                "id": "shortcuts.files.upload.mac",
+              },
+            }
+          }
+        />
       }
     >
       <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={
+                            <KeyboardShortcutSequence
-                            <Tooltip id='upload-tooltip'>
+                                shortcut={KEYBOARD_SHORTCUTS.filesUpload}
-                                <KeyboardShortcutSequence
+                                hoistDescription={true}
-                                    shortcut={KEYBOARD_SHORTCUTS.filesUpload}
+                                isInsideTooltip={true}
-                                    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={
+                                <KeyboardShortcutSequence
-                                <Tooltip id='upload-tooltip'>
+                                    shortcut={KEYBOARD_SHORTCUTS.filesUpload}
-                                    <KeyboardShortcutSequence
+                                    hoistDescription={true}
-                                        shortcut={KEYBOARD_SHORTCUTS.filesUpload}
+                                    isInsideTooltip={true}
-                                        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}