[MM-59901] Migrate tooltips of 'components/file_search_results/file_search_result_item.tsx' to WithTooltip (#27836)

webapp/channels/src/components/file_search_results/__snapshots__/file_search_result_item.test.tsx.snap

@@ -75,23 +75,10 @@ exports[`components/file_search_result/FileSearchResultItem should match snapsho
         />
       </div>
     </div>
-    <OverlayTrigger
+    <WithTooltip
-      defaultOverlayShown={false}
+      id="file-name__tooltip"
-      delayShow={1000}
-      overlay={
-        <Tooltip
-          id="file-name__tooltip"
-        >
-          Download
-        </Tooltip>
-      }
       placement="top"
-      trigger={
+      title="Download"
-        Array [
-          "hover",
-          "focus",
-        ]
-      }
     >
       <a
         className="action-icon download-icon"
@@ -102,7 +89,7 @@ exports[`components/file_search_result/FileSearchResultItem should match snapsho
           className="icon icon-download-outline"
         />
       </a>
-    </OverlayTrigger>
+    </WithTooltip>
   </button>
 </div>
 `;
@@ -191,23 +178,10 @@ exports[`components/file_search_result/FileSearchResultItem should match snapsho
         />
       </div>
     </div>
-    <OverlayTrigger
+    <WithTooltip
-      defaultOverlayShown={false}
+      id="file-name__tooltip"
-      delayShow={1000}
-      overlay={
-        <Tooltip
-          id="file-name__tooltip"
-        >
-          Download
-        </Tooltip>
-      }
       placement="top"
-      trigger={
+      title="Download"
-        Array [
-          "hover",
-          "focus",
-        ]
-      }
     >
       <a
         className="action-icon download-icon"
@@ -218,7 +192,7 @@ exports[`components/file_search_result/FileSearchResultItem should match snapsho
           className="icon icon-download-outline"
         />
       </a>
-    </OverlayTrigger>
+    </WithTooltip>
   </button>
 </div>
 `;
@@ -307,23 +281,10 @@ exports[`components/file_search_result/FileSearchResultItem should match snapsho
         />
       </div>
     </div>
-    <OverlayTrigger
+    <WithTooltip
-      defaultOverlayShown={false}
+      id="file-name__tooltip"
-      delayShow={1000}
-      overlay={
-        <Tooltip
-          id="file-name__tooltip"
-        >
-          Download
-        </Tooltip>
-      }
       placement="top"
-      trigger={
+      title="Download"
-        Array [
-          "hover",
-          "focus",
-        ]
-      }
     >
       <a
         className="action-icon download-icon"
@@ -334,7 +295,7 @@ exports[`components/file_search_result/FileSearchResultItem should match snapsho
           className="icon icon-download-outline"
         />
       </a>
-    </OverlayTrigger>
+    </WithTooltip>
   </button>
 </div>
 `;
@@ -418,23 +379,10 @@ exports[`components/file_search_result/FileSearchResultItem should match snapsho
         />
       </div>
     </div>
-    <OverlayTrigger
+    <WithTooltip
-      defaultOverlayShown={false}
+      id="file-name__tooltip"
-      delayShow={1000}
-      overlay={
-        <Tooltip
-          id="file-name__tooltip"
-        >
-          Download
-        </Tooltip>
-      }
       placement="top"
-      trigger={
+      title="Download"
-        Array [
-          "hover",
-          "focus",
-        ]
-      }
     >
       <a
         className="action-icon download-icon"
@@ -445,7 +393,7 @@ exports[`components/file_search_result/FileSearchResultItem should match snapsho
           className="icon icon-download-outline"
         />
       </a>
-    </OverlayTrigger>
+    </WithTooltip>
   </button>
 </div>
 `;

webapp/channels/src/components/file_search_results/file_search_result_item.tsx

@@ -8,12 +8,11 @@ import {getFileDownloadUrl} from 'mattermost-redux/utils/file_utils';
 
 import FileThumbnail from 'components/file_attachment/file_thumbnail';
 import FilePreviewModal from 'components/file_preview_modal';
-import OverlayTrigger from 'components/overlay_trigger';
 import Timestamp, {RelativeRanges} from 'components/timestamp';
-import Tooltip from 'components/tooltip';
 import Menu from 'components/widgets/menu/menu';
 import MenuWrapper from 'components/widgets/menu/menu_wrapper';
 import Tag from 'components/widgets/tag/tag';
+import WithTooltip from 'components/with_tooltip';
 
 import {getHistory} from 'utils/browser_history';
 import Constants, {ModalIdentifiers} from 'utils/constants';
@@ -146,14 +145,10 @@ export default class FileSearchResultItem extends React.PureComponent<Props, Sta
                         </div>
                     </div>
                     {this.props.fileInfo.post_id && (
-                        <OverlayTrigger
+                        <WithTooltip
-                            delayShow={1000}
+                            id='file-name__tooltip'
-                            placement='top'
+                            title={localizeMessage('file_search_result_item.more_actions', 'More Actions')}
-                            overlay={
+                            placement={'top'}
-                                <Tooltip id='file-name__tooltip'>
-                                    {localizeMessage('file_search_result_item.more_actions', 'More Actions')}
-                                </Tooltip>
-                            }
                         >
                             <MenuWrapper
                                 onToggle={this.keepOpen}
@@ -182,16 +177,12 @@ export default class FileSearchResultItem extends React.PureComponent<Props, Sta
                                     {this.renderPluginItems()}
                                 </Menu>
                             </MenuWrapper>
-                        </OverlayTrigger>
+                        </WithTooltip>
                     )}
-                    <OverlayTrigger
+                    <WithTooltip
-                        delayShow={1000}
+                        id='file-name__tooltip'
-                        placement='top'
+                        title={localizeMessage('file_search_result_item.download', 'Download')}
-                        overlay={
+                        placement={'top'}
-                            <Tooltip id='file-name__tooltip'>
-                                {localizeMessage('file_search_result_item.download', 'Download')}
-                            </Tooltip>
-                        }
                     >
                         <a
                             className='action-icon download-icon'
@@ -200,7 +191,7 @@ export default class FileSearchResultItem extends React.PureComponent<Props, Sta
                         >
                             <i className='icon icon-download-outline'/>
                         </a>
-                    </OverlayTrigger>
+                    </WithTooltip>
                 </button>
             </div>
         );