[MM-58442] Migrate tooltips of 'components/drafts/panel/panel_header' to WithTooltip (#27197)

webapp/channels/src/components/drafts/panel/__snapshots__/panel_header.test.tsx.snap

@@ -137,31 +137,20 @@ exports[`components/drafts/panel/panel_header should show sync icon when draft i
       <div
         className="PanelHeader__sync-icon"
       >
-        <OverlayTrigger
-          defaultOverlayShown={false}
-          delayShow={400}
-          overlay={
-            <Tooltip
-              id="drafts-sync-tooltip"
-            >
-              <Memo(MemoizedFormattedMessage)
-                defaultMessage="Updated from another device"
-                id="drafts.info.sync"
-              />
-            </Tooltip>
-          }
+        <WithTooltip
+          id="drafts-sync-tooltip"
           placement="top"
-          trigger={
-            Array [
-              "hover",
-              "focus",
-            ]
+          title={
+            <Memo(MemoizedFormattedMessage)
+              defaultMessage="Updated from another device"
+              id="drafts.info.sync"
+            />
           }
         >
           <SyncIcon
             size={18}
           />
-        </OverlayTrigger>
+        </WithTooltip>
       </div>
       <div
         className="PanelHeader__timestamp"

webapp/channels/src/components/drafts/panel/panel_header.test.tsx

@@ -4,7 +4,7 @@
 import {shallow} from 'enzyme';
 import React from 'react';
 
-import OverlayTrigger from 'components/overlay_trigger';
+import WithTooltip from 'components/with_tooltip';
 
 import PanelHeader from './panel_header';
 
@@ -25,7 +25,7 @@ describe('components/drafts/panel/panel_header', () => {
         );
 
         expect(wrapper.find('div.PanelHeader__actions').hasClass('PanelHeader__actions show')).toBe(false);
-        expect(wrapper.find(OverlayTrigger).exists()).toBe(false);
+        expect(wrapper.find(WithTooltip).exists()).toBe(false);
         expect(wrapper).toMatchSnapshot();
     });
 
@@ -41,7 +41,7 @@ describe('components/drafts/panel/panel_header', () => {
             />,
         );
 
-        expect(wrapper.find(OverlayTrigger).exists()).toBe(true);
+        expect(wrapper.find(WithTooltip).exists()).toBe(true);
         expect(wrapper).toMatchSnapshot();
     });
 

webapp/channels/src/components/drafts/panel/panel_header.tsx

@@ -8,12 +8,9 @@ import {FormattedMessage} from 'react-intl';
 
 import {SyncIcon} from '@mattermost/compass-icons/components';
 
-import OverlayTrigger from 'components/overlay_trigger';
 import Timestamp from 'components/timestamp';
-import Tooltip from 'components/tooltip';
 import Tag from 'components/widgets/tag/tag';
-
-import Constants from 'utils/constants';
+import WithTooltip from 'components/with_tooltip';
 
 import './panel_header.scss';
 
@@ -21,15 +18,7 @@ const TIMESTAMP_PROPS: Partial<ComponentProps<typeof Timestamp>> = {
     day: 'numeric',
     useSemanticOutput: false,
     useTime: false,
-    units: [
-        'now',
-        'minute',
-        'hour',
-        'day',
-        'week',
-        'month',
-        'year',
-    ],
+    units: ['now', 'minute', 'hour', 'day', 'week', 'month', 'year'],
 };
 
 type Props = {
@@ -38,46 +27,33 @@ type Props = {
     timestamp: number;
     remote: boolean;
     title: React.ReactNode;
-}
-
-function PanelHeader({
-    actions,
-    hover,
-    timestamp,
-    remote,
-    title,
-}: Props) {
-    const syncTooltip = (
-        <Tooltip id='drafts-sync-tooltip'>
-            <FormattedMessage
-                id='drafts.info.sync'
-                defaultMessage='Updated from another device'
-            />
-        </Tooltip>
-    );
+};
 
+function PanelHeader({actions, hover, timestamp, remote, title}: Props) {
     return (
         <header className='PanelHeader'>
-            <div className='PanelHeader__left'>
-                {title}
-            </div>
+            <div className='PanelHeader__left'>{title}</div>
             <div className='PanelHeader__right'>
                 <div className={cn('PanelHeader__actions', {show: hover})}>
                     {actions}
                 </div>
                 <div className={cn('PanelHeader__info', {hide: hover})}>
-                    {remote && <div className='PanelHeader__sync-icon'>
-                        <OverlayTrigger
-                            trigger={Constants.OVERLAY_DEFAULT_TRIGGER}
-                            delayShow={Constants.OVERLAY_TIME_DELAY}
-                            placement='top'
-                            overlay={syncTooltip}
-                        >
-                            <SyncIcon
-                                size={18}
-                            />
-                        </OverlayTrigger>
-                    </div>}
+                    {remote && (
+                        <div className='PanelHeader__sync-icon'>
+                            <WithTooltip
+                                id='drafts-sync-tooltip'
+                                placement='top'
+                                title={
+                                    <FormattedMessage
+                                        id='drafts.info.sync'
+                                        defaultMessage='Updated from another device'
+                                    />
+                                }
+                            >
+                                <SyncIcon size={18}/>
+                            </WithTooltip>
+                        </div>
+                    )}
                     <div className='PanelHeader__timestamp'>
                         {Boolean(timestamp) && (
                             <Timestamp