[MM-58408] Migrate tooltips of 'components/file_preview_modal/file_preview_modal_main_nav/file_preview_modal_main_nav' to WithTooltip (#27422)

webapp/channels/src/components/file_preview_modal/file_preview_modal_main_nav/__snapshots__/file_preview_modal_main_nav.test.tsx.snap

@@ -4,26 +4,15 @@ exports[`components/file_preview_modal/file_preview_modal_main_nav/FilePreviewMo
 <div
   className="file_preview_modal_main_nav"
 >
-  <OverlayTrigger
+  <WithTooltip
-    defaultOverlayShown={false}
-    delayShow={400}
-    key="previewArrowLeft"
-    overlay={
-      <Tooltip
     id="close-icon-tooltip"
-      >
+    key="previewArrowLeft"
+    placement="bottom"
+    title={
       <Memo(MemoizedFormattedMessage)
         defaultMessage="Close"
         id="generic.close"
       />
-      </Tooltip>
-    }
-    placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
     }
   >
     <button
@@ -35,7 +24,7 @@ exports[`components/file_preview_modal/file_preview_modal_main_nav/FilePreviewMo
         className="icon icon-chevron-left"
       />
     </button>
-  </OverlayTrigger>
+  </WithTooltip>
   <span
     className="modal-bar-file-count"
   >
@@ -50,26 +39,15 @@ exports[`components/file_preview_modal/file_preview_modal_main_nav/FilePreviewMo
       }
     />
   </span>
-  <OverlayTrigger
+  <WithTooltip
-    defaultOverlayShown={false}
-    delayShow={400}
-    key="publicLink"
-    overlay={
-      <Tooltip
     id="close-icon-tooltip"
-      >
+    key="publicLink"
+    placement="bottom"
+    title={
       <Memo(MemoizedFormattedMessage)
         defaultMessage="Next"
         id="generic.next"
       />
-      </Tooltip>
-    }
-    placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
     }
   >
     <button
@@ -81,6 +59,6 @@ exports[`components/file_preview_modal/file_preview_modal_main_nav/FilePreviewMo
         className="icon icon-chevron-right"
       />
     </button>
-  </OverlayTrigger>
+  </WithTooltip>
 </div>
 `;

webapp/channels/src/components/file_preview_modal/file_preview_modal_main_nav/file_preview_modal_main_nav.tsx

@@ -6,10 +6,7 @@ import {FormattedMessage} from 'react-intl';
 
 import './file_preview_modal_main_nav.scss';
 
-import OverlayTrigger from 'components/overlay_trigger';
+import WithTooltip from 'components/with_tooltip';
-import Tooltip from 'components/tooltip';
-
-import Constants from 'utils/constants';
 
 interface Props {
     fileIndex: number;
@@ -20,18 +17,16 @@ interface Props {
 
 const FilePreviewModalMainNav: React.FC<Props> = (props: Props) => {
     const leftArrow = (
-        <OverlayTrigger
+        <WithTooltip
-            delayShow={Constants.OVERLAY_TIME_DELAY}
             key='previewArrowLeft'
-            placement='bottom'
+            id='close-icon-tooltip'
-            overlay={
+            title={
-                <Tooltip id='close-icon-tooltip'>
                 <FormattedMessage
                     id='generic.close'
                     defaultMessage='Close'
                 />
-                </Tooltip>
             }
+            placement='bottom'
         >
             <button
                 id='previewArrowLeft'
@@ -40,22 +35,20 @@ const FilePreviewModalMainNav: React.FC<Props> = (props: Props) => {
             >
                 <i className='icon icon-chevron-left'/>
             </button>
-        </OverlayTrigger>
+        </WithTooltip>
     );
 
     const rightArrow = (
-        <OverlayTrigger
+        <WithTooltip
-            delayShow={Constants.OVERLAY_TIME_DELAY}
             key='publicLink'
-            placement='bottom'
+            id='close-icon-tooltip'
-            overlay={
+            title={
-                <Tooltip id='close-icon-tooltip'>
                 <FormattedMessage
                     id='generic.next'
                     defaultMessage='Next'
                 />
-                </Tooltip>
             }
+            placement='bottom'
         >
             <button
                 id='previewArrowRight'
@@ -64,7 +57,7 @@ const FilePreviewModalMainNav: React.FC<Props> = (props: Props) => {
             >
                 <i className='icon icon-chevron-right'/>
             </button>
-        </OverlayTrigger>
+        </WithTooltip>
     );
     return (
         <div className='file_preview_modal_main_nav'>