From 64cbdba3d71910256bb8d950e88d96d51b4c8926 Mon Sep 17 00:00:00 2001
From: Michael <74271024+KvngMikey@users.noreply.github.com>
Date: Wed, 7 Aug 2024 16:47:55 +0100
Subject: [PATCH] [MM-59898] Migrate tooltips of
 'components/search_results/files_filter_menu.tsx' to WithTooltip (#27848)

---
 .../files_filter_menu.test.tsx.snap           | 240 +++++-------------
 .../search_results/files_filter_menu.tsx      |  29 +--
 2 files changed, 74 insertions(+), 195 deletions(-)

diff --git a/webapp/channels/src/components/search_results/__snapshots__/files_filter_menu.test.tsx.snap b/webapp/channels/src/components/search_results/__snapshots__/files_filter_menu.test.tsx.snap
index 4427709d7a..47c4921cdd 100644
--- a/webapp/channels/src/components/search_results/__snapshots__/files_filter_menu.test.tsx.snap
+++ b/webapp/channels/src/components/search_results/__snapshots__/files_filter_menu.test.tsx.snap
@@ -8,28 +8,14 @@ exports[`components/search_results/FilesFilterMenu should match snapshot, on all
     animationComponent={[Function]}
     className=""
   >
-    <OverlayTrigger
-      className="hidden-xs"
-      defaultOverlayShown={false}
-      delayShow={500}
-      overlay={
-        <Tooltip
-          className="hidden-xs"
-          id="files-filter-tooltip"
-        >
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="Filter"
-            id="channel_info_rhs.menu.files.filter"
-          />
-        </Tooltip>
-      }
+    <WithTooltip
+      id="files-filter-tooltip"
       placement="top"
-      rootClose={true}
-      trigger={
-        Array [
-          "hover",
-          "focus",
-        ]
+      title={
+        <Memo(MemoizedFormattedMessage)
+          defaultMessage="Filter"
+          id="channel_info_rhs.menu.files.filter"
+        />
       }
     >
       <IconContainer
@@ -42,7 +28,7 @@ exports[`components/search_results/FilesFilterMenu should match snapshot, on all
           size={18}
         />
       </IconContainer>
-    </OverlayTrigger>
+    </WithTooltip>
     <Menu
       ariaLabel="file menu"
       openLeft={true}
@@ -120,28 +106,14 @@ exports[`components/search_results/FilesFilterMenu should match snapshot, on aud
     animationComponent={[Function]}
     className=""
   >
-    <OverlayTrigger
-      className="hidden-xs"
-      defaultOverlayShown={false}
-      delayShow={500}
-      overlay={
-        <Tooltip
-          className="hidden-xs"
-          id="files-filter-tooltip"
-        >
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="Filter"
-            id="channel_info_rhs.menu.files.filter"
-          />
-        </Tooltip>
-      }
+    <WithTooltip
+      id="files-filter-tooltip"
       placement="top"
-      rootClose={true}
-      trigger={
-        Array [
-          "hover",
-          "focus",
-        ]
+      title={
+        <Memo(MemoizedFormattedMessage)
+          defaultMessage="Filter"
+          id="channel_info_rhs.menu.files.filter"
+        />
       }
     >
       <IconContainer
@@ -157,7 +129,7 @@ exports[`components/search_results/FilesFilterMenu should match snapshot, on aud
           size={18}
         />
       </IconContainer>
-    </OverlayTrigger>
+    </WithTooltip>
     <Menu
       ariaLabel="file menu"
       openLeft={true}
@@ -235,28 +207,14 @@ exports[`components/search_results/FilesFilterMenu should match snapshot, on cod
     animationComponent={[Function]}
     className=""
   >
-    <OverlayTrigger
-      className="hidden-xs"
-      defaultOverlayShown={false}
-      delayShow={500}
-      overlay={
-        <Tooltip
-          className="hidden-xs"
-          id="files-filter-tooltip"
-        >
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="Filter"
-            id="channel_info_rhs.menu.files.filter"
-          />
-        </Tooltip>
-      }
+    <WithTooltip
+      id="files-filter-tooltip"
       placement="top"
-      rootClose={true}
-      trigger={
-        Array [
-          "hover",
-          "focus",
-        ]
+      title={
+        <Memo(MemoizedFormattedMessage)
+          defaultMessage="Filter"
+          id="channel_info_rhs.menu.files.filter"
+        />
       }
     >
       <IconContainer
@@ -272,7 +230,7 @@ exports[`components/search_results/FilesFilterMenu should match snapshot, on cod
           size={18}
         />
       </IconContainer>
-    </OverlayTrigger>
+    </WithTooltip>
     <Menu
       ariaLabel="file menu"
       openLeft={true}
@@ -350,28 +308,14 @@ exports[`components/search_results/FilesFilterMenu should match snapshot, on doc
     animationComponent={[Function]}
     className=""
   >
-    <OverlayTrigger
-      className="hidden-xs"
-      defaultOverlayShown={false}
-      delayShow={500}
-      overlay={
-        <Tooltip
-          className="hidden-xs"
-          id="files-filter-tooltip"
-        >
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="Filter"
-            id="channel_info_rhs.menu.files.filter"
-          />
-        </Tooltip>
-      }
+    <WithTooltip
+      id="files-filter-tooltip"
       placement="top"
-      rootClose={true}
-      trigger={
-        Array [
-          "hover",
-          "focus",
-        ]
+      title={
+        <Memo(MemoizedFormattedMessage)
+          defaultMessage="Filter"
+          id="channel_info_rhs.menu.files.filter"
+        />
       }
     >
       <IconContainer
@@ -387,7 +331,7 @@ exports[`components/search_results/FilesFilterMenu should match snapshot, on doc
           size={18}
         />
       </IconContainer>
-    </OverlayTrigger>
+    </WithTooltip>
     <Menu
       ariaLabel="file menu"
       openLeft={true}
@@ -465,28 +409,14 @@ exports[`components/search_results/FilesFilterMenu should match snapshot, on ima
     animationComponent={[Function]}
     className=""
   >
-    <OverlayTrigger
-      className="hidden-xs"
-      defaultOverlayShown={false}
-      delayShow={500}
-      overlay={
-        <Tooltip
-          className="hidden-xs"
-          id="files-filter-tooltip"
-        >
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="Filter"
-            id="channel_info_rhs.menu.files.filter"
-          />
-        </Tooltip>
-      }
+    <WithTooltip
+      id="files-filter-tooltip"
       placement="top"
-      rootClose={true}
-      trigger={
-        Array [
-          "hover",
-          "focus",
-        ]
+      title={
+        <Memo(MemoizedFormattedMessage)
+          defaultMessage="Filter"
+          id="channel_info_rhs.menu.files.filter"
+        />
       }
     >
       <IconContainer
@@ -502,7 +432,7 @@ exports[`components/search_results/FilesFilterMenu should match snapshot, on ima
           size={18}
         />
       </IconContainer>
-    </OverlayTrigger>
+    </WithTooltip>
     <Menu
       ariaLabel="file menu"
       openLeft={true}
@@ -580,28 +510,14 @@ exports[`components/search_results/FilesFilterMenu should match snapshot, on pre
     animationComponent={[Function]}
     className=""
   >
-    <OverlayTrigger
-      className="hidden-xs"
-      defaultOverlayShown={false}
-      delayShow={500}
-      overlay={
-        <Tooltip
-          className="hidden-xs"
-          id="files-filter-tooltip"
-        >
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="Filter"
-            id="channel_info_rhs.menu.files.filter"
-          />
-        </Tooltip>
-      }
+    <WithTooltip
+      id="files-filter-tooltip"
       placement="top"
-      rootClose={true}
-      trigger={
-        Array [
-          "hover",
-          "focus",
-        ]
+      title={
+        <Memo(MemoizedFormattedMessage)
+          defaultMessage="Filter"
+          id="channel_info_rhs.menu.files.filter"
+        />
       }
     >
       <IconContainer
@@ -617,7 +533,7 @@ exports[`components/search_results/FilesFilterMenu should match snapshot, on pre
           size={18}
         />
       </IconContainer>
-    </OverlayTrigger>
+    </WithTooltip>
     <Menu
       ariaLabel="file menu"
       openLeft={true}
@@ -695,28 +611,14 @@ exports[`components/search_results/FilesFilterMenu should match snapshot, on spr
     animationComponent={[Function]}
     className=""
   >
-    <OverlayTrigger
-      className="hidden-xs"
-      defaultOverlayShown={false}
-      delayShow={500}
-      overlay={
-        <Tooltip
-          className="hidden-xs"
-          id="files-filter-tooltip"
-        >
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="Filter"
-            id="channel_info_rhs.menu.files.filter"
-          />
-        </Tooltip>
-      }
+    <WithTooltip
+      id="files-filter-tooltip"
       placement="top"
-      rootClose={true}
-      trigger={
-        Array [
-          "hover",
-          "focus",
-        ]
+      title={
+        <Memo(MemoizedFormattedMessage)
+          defaultMessage="Filter"
+          id="channel_info_rhs.menu.files.filter"
+        />
       }
     >
       <IconContainer
@@ -732,7 +634,7 @@ exports[`components/search_results/FilesFilterMenu should match snapshot, on spr
           size={18}
         />
       </IconContainer>
-    </OverlayTrigger>
+    </WithTooltip>
     <Menu
       ariaLabel="file menu"
       openLeft={true}
@@ -810,28 +712,14 @@ exports[`components/search_results/FilesFilterMenu should match snapshot, on vid
     animationComponent={[Function]}
     className=""
   >
-    <OverlayTrigger
-      className="hidden-xs"
-      defaultOverlayShown={false}
-      delayShow={500}
-      overlay={
-        <Tooltip
-          className="hidden-xs"
-          id="files-filter-tooltip"
-        >
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="Filter"
-            id="channel_info_rhs.menu.files.filter"
-          />
-        </Tooltip>
-      }
+    <WithTooltip
+      id="files-filter-tooltip"
       placement="top"
-      rootClose={true}
-      trigger={
-        Array [
-          "hover",
-          "focus",
-        ]
+      title={
+        <Memo(MemoizedFormattedMessage)
+          defaultMessage="Filter"
+          id="channel_info_rhs.menu.files.filter"
+        />
       }
     >
       <IconContainer
@@ -847,7 +735,7 @@ exports[`components/search_results/FilesFilterMenu should match snapshot, on vid
           size={18}
         />
       </IconContainer>
-    </OverlayTrigger>
+    </WithTooltip>
     <Menu
       ariaLabel="file menu"
       openLeft={true}
diff --git a/webapp/channels/src/components/search_results/files_filter_menu.tsx b/webapp/channels/src/components/search_results/files_filter_menu.tsx
index 6fec9b6a44..6cf21efdb3 100644
--- a/webapp/channels/src/components/search_results/files_filter_menu.tsx
+++ b/webapp/channels/src/components/search_results/files_filter_menu.tsx
@@ -7,11 +7,10 @@ import {FormattedMessage} from 'react-intl';
 import {FilterVariantIcon} from '@mattermost/compass-icons/components';
 
 import {IconContainer} from 'components/advanced_text_editor/formatting_bar/formatting_icon';
-import OverlayTrigger from 'components/overlay_trigger';
 import type {SearchFilterType} from 'components/search/types';
-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 './files_filter_menu.scss';
 
@@ -21,26 +20,17 @@ type Props = {
 };
 
 export default function FilesFilterMenu(props: Props): JSX.Element {
-    const toolTip = (
-        <Tooltip
-            id='files-filter-tooltip'
-            className='hidden-xs'
-        >
-            <FormattedMessage
-                id='channel_info_rhs.menu.files.filter'
-                defaultMessage='Filter'
-            />
-        </Tooltip>
-    );
     return (
         <div className='FilesFilterMenu'>
             <MenuWrapper>
-                <OverlayTrigger
-                    className='hidden-xs'
-                    delayShow={500}
+                <WithTooltip
+                    id='files-filter-tooltip'
+                    title={
+                        <FormattedMessage
+                            id='channel_info_rhs.menu.files.filter'
+                            defaultMessage='Filter'
+                        />}
                     placement='top'
-                    overlay={toolTip}
-                    rootClose={true}
                 >
                     <IconContainer
                         id='filesFilterButton'
@@ -53,7 +43,8 @@ export default function FilesFilterMenu(props: Props): JSX.Element {
                             color='currentColor'
                         />
                     </IconContainer>
-                </OverlayTrigger>
+                </WithTooltip>
+
                 <Menu
                     ariaLabel={'file menu'}
                     openLeft={true}