[MM-59898] Migrate tooltips of 'components/search_results/files_filter_menu.tsx' to WithTooltip (#27848)

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
+    <WithTooltip
-      className="hidden-xs"
+      id="files-filter-tooltip"
-      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>
-      }
       placement="top"
-      rootClose={true}
+      title={
-      trigger={
+        <Memo(MemoizedFormattedMessage)
-        Array [
+          defaultMessage="Filter"
-          "hover",
+          id="channel_info_rhs.menu.files.filter"
-          "focus",
+        />
-        ]
       }
     >
       <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
+    <WithTooltip
-      className="hidden-xs"
+      id="files-filter-tooltip"
-      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>
-      }
       placement="top"
-      rootClose={true}
+      title={
-      trigger={
+        <Memo(MemoizedFormattedMessage)
-        Array [
+          defaultMessage="Filter"
-          "hover",
+          id="channel_info_rhs.menu.files.filter"
-          "focus",
+        />
-        ]
       }
     >
       <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
+    <WithTooltip
-      className="hidden-xs"
+      id="files-filter-tooltip"
-      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>
-      }
       placement="top"
-      rootClose={true}
+      title={
-      trigger={
+        <Memo(MemoizedFormattedMessage)
-        Array [
+          defaultMessage="Filter"
-          "hover",
+          id="channel_info_rhs.menu.files.filter"
-          "focus",
+        />
-        ]
       }
     >
       <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
+    <WithTooltip
-      className="hidden-xs"
+      id="files-filter-tooltip"
-      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>
-      }
       placement="top"
-      rootClose={true}
+      title={
-      trigger={
+        <Memo(MemoizedFormattedMessage)
-        Array [
+          defaultMessage="Filter"
-          "hover",
+          id="channel_info_rhs.menu.files.filter"
-          "focus",
+        />
-        ]
       }
     >
       <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
+    <WithTooltip
-      className="hidden-xs"
+      id="files-filter-tooltip"
-      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>
-      }
       placement="top"
-      rootClose={true}
+      title={
-      trigger={
+        <Memo(MemoizedFormattedMessage)
-        Array [
+          defaultMessage="Filter"
-          "hover",
+          id="channel_info_rhs.menu.files.filter"
-          "focus",
+        />
-        ]
       }
     >
       <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
+    <WithTooltip
-      className="hidden-xs"
+      id="files-filter-tooltip"
-      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>
-      }
       placement="top"
-      rootClose={true}
+      title={
-      trigger={
+        <Memo(MemoizedFormattedMessage)
-        Array [
+          defaultMessage="Filter"
-          "hover",
+          id="channel_info_rhs.menu.files.filter"
-          "focus",
+        />
-        ]
       }
     >
       <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
+    <WithTooltip
-      className="hidden-xs"
+      id="files-filter-tooltip"
-      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>
-      }
       placement="top"
-      rootClose={true}
+      title={
-      trigger={
+        <Memo(MemoizedFormattedMessage)
-        Array [
+          defaultMessage="Filter"
-          "hover",
+          id="channel_info_rhs.menu.files.filter"
-          "focus",
+        />
-        ]
       }
     >
       <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
+    <WithTooltip
-      className="hidden-xs"
+      id="files-filter-tooltip"
-      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>
-      }
       placement="top"
-      rootClose={true}
+      title={
-      trigger={
+        <Memo(MemoizedFormattedMessage)
-        Array [
+          defaultMessage="Filter"
-          "hover",
+          id="channel_info_rhs.menu.files.filter"
-          "focus",
+        />
-        ]
       }
     >
       <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}

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
+                <WithTooltip
-                    className='hidden-xs'
+                    id='files-filter-tooltip'
-                    delayShow={500}
+                    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}