[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
+        <WithTooltip
-          defaultOverlayShown={false}
-          delayShow={400}
-          overlay={
-            <Tooltip
           id="drafts-sync-tooltip"
-            >
+          placement="top"
+          title={
             <Memo(MemoizedFormattedMessage)
               defaultMessage="Updated from another device"
               id="drafts.info.sync"
             />
-            </Tooltip>
-          }
-          placement="top"
-          trigger={
-            Array [
-              "hover",
-              "focus",
-            ]
           }
         >
           <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 WithTooltip from 'components/with_tooltip';
-import Constants from 'utils/constants';
 
 import './panel_header.scss';
 
@@ -21,15 +18,7 @@ const TIMESTAMP_PROPS: Partial<ComponentProps<typeof Timestamp>> = {
     day: 'numeric',
     useSemanticOutput: false,
     useTime: false,
-    units: [
+    units: ['now', 'minute', 'hour', 'day', 'week', 'month', 'year'],
-        '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'>
+            <div className='PanelHeader__left'>{title}</div>
-                {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'>
+                    {remote && (
-                        <OverlayTrigger
+                        <div className='PanelHeader__sync-icon'>
-                            trigger={Constants.OVERLAY_DEFAULT_TRIGGER}
+                            <WithTooltip
-                            delayShow={Constants.OVERLAY_TIME_DELAY}
+                                id='drafts-sync-tooltip'
                                 placement='top'
-                            overlay={syncTooltip}
+                                title={
-                        >
+                                    <FormattedMessage
-                            <SyncIcon
+                                        id='drafts.info.sync'
-                                size={18}
+                                        defaultMessage='Updated from another device'
                                     />
-                        </OverlayTrigger>
+                                }
-                    </div>}
+                            >
+                                <SyncIcon size={18}/>
+                            </WithTooltip>
+                        </div>
+                    )}
                     <div className='PanelHeader__timestamp'>
                         {Boolean(timestamp) && (
                             <Timestamp