Change: Use WithTooltip instead of OverlayTrigger on filename_overlay (#27439)

webapp/channels/src/components/file_attachment/__snapshots__/filename_overlay.test.tsx.snap

@@ -1,23 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/file_attachment/FilenameOverlay should match snapshot, compact display 1`] = `
-<OverlayTrigger
+<WithTooltip
-  defaultOverlayShown={false}
-  delayShow={1000}
-  overlay={
-    <Tooltip
   id="file-name__tooltip"
-    >
-      test_filename
-    </Tooltip>
-  }
   placement="top"
-  trigger={
+  title="test_filename"
-    Array [
-      "hover",
-      "focus",
-    ]
-  }
 >
   <a
     className="post-image__name"
@@ -30,7 +17,7 @@ exports[`components/file_attachment/FilenameOverlay should match snapshot, compa
     />
     test_filename
   </a>
-</OverlayTrigger>
+</WithTooltip>
 `;
 
 exports[`components/file_attachment/FilenameOverlay should match snapshot, standard but not downloadable 1`] = `
@@ -45,23 +32,10 @@ exports[`components/file_attachment/FilenameOverlay should match snapshot, stand
 <div
   className="post-image__name"
 >
-  <OverlayTrigger
+  <WithTooltip
-    defaultOverlayShown={false}
-    delayShow={1000}
-    overlay={
-      <Tooltip
     id="file-name__tooltip"
-      >
-        Download
-      </Tooltip>
-    }
     placement="top"
-    trigger={
+    title="Download"
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
   >
     <ExternalLink
       aria-label="download"
@@ -71,7 +45,7 @@ exports[`components/file_attachment/FilenameOverlay should match snapshot, stand
     >
       test_filename
     </ExternalLink>
-  </OverlayTrigger>
+  </WithTooltip>
 </div>
 `;
 
@@ -79,23 +53,10 @@ exports[`components/file_attachment/FilenameOverlay should match snapshot, with
 <div
   className="post-image__name"
 >
-  <OverlayTrigger
+  <WithTooltip
-    defaultOverlayShown={false}
-    delayShow={1000}
-    overlay={
-      <Tooltip
     id="file-name__tooltip"
-      >
-        Download
-      </Tooltip>
-    }
     placement="top"
-    trigger={
+    title="Download"
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
   >
     <ExternalLink
       aria-label="download"
@@ -105,6 +66,6 @@ exports[`components/file_attachment/FilenameOverlay should match snapshot, with
     >
       <AttachmentIcon />
     </ExternalLink>
-  </OverlayTrigger>
+  </WithTooltip>
 </div>
 `;

webapp/channels/src/components/file_attachment/filename_overlay.tsx

@@ -8,9 +8,8 @@ import type {FileInfo} from '@mattermost/types/files';
 import {getFileDownloadUrl} from 'mattermost-redux/utils/file_utils';
 
 import ExternalLink from 'components/external_link';
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
 import AttachmentIcon from 'components/widgets/icons/attachment_icon';
+import WithTooltip from 'components/with_tooltip';
 
 import {trimFilename} from 'utils/file_utils';
 import {localizeMessage} from 'utils/utils';
@@ -65,10 +64,10 @@ export default class FilenameOverlay extends React.PureComponent<Props> {
         let filenameOverlay;
         if (compactDisplay) {
             filenameOverlay = (
-                <OverlayTrigger
+                <WithTooltip
-                    delayShow={1000}
+                    id='file-name__tooltip'
+                    title={fileName}
                     placement='top'
-                    overlay={<Tooltip id='file-name__tooltip'>{fileName}</Tooltip>}
                 >
                     <a
                         href='#'
@@ -79,19 +78,15 @@ export default class FilenameOverlay extends React.PureComponent<Props> {
                         <AttachmentIcon className='icon'/>
                         {trimmedFilename}
                     </a>
-                </OverlayTrigger>
+                </WithTooltip>
             );
         } else if (canDownload) {
             filenameOverlay = (
                 <div className={iconClass || 'post-image__name'}>
-                    <OverlayTrigger
+                    <WithTooltip
-                        delayShow={1000}
+                        id='file-name__tooltip'
+                        title={localizeMessage('view_image_popover.download', 'Download')}
                         placement='top'
-                        overlay={
-                            <Tooltip id='file-name__tooltip'>
-                                {localizeMessage('view_image_popover.download', 'Download')}
-                            </Tooltip>
-                        }
                     >
                         <ExternalLink
                             href={getFileDownloadUrl(fileInfo.id)}
@@ -101,7 +96,7 @@ export default class FilenameOverlay extends React.PureComponent<Props> {
                         >
                             {children || trimmedFilename}
                         </ExternalLink>
-                    </OverlayTrigger>
+                    </WithTooltip>
                 </div>
             );
         } else {