[MM-60160] Migrate tooltips of "components/global_header/left_controls/history_buttons/history_buttons.tsx" to WithTooltip (#28013)

webapp/channels/src/components/global_header/left_controls/history_buttons/history_buttons.tsx

@@ -14,10 +14,8 @@ import KeyboardShortcutSequence, {
 } from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence';
 import type {
     KeyboardShortcutDescriptor} from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence';
-import OverlayTrigger from 'components/overlay_trigger';
+import WithTooltip from 'components/with_tooltip';
-import Tooltip from 'components/tooltip';
 
-import Constants from 'utils/constants';
 import DesktopApp from 'utils/desktop_api';
 import * as Utils from 'utils/utils';
 
@@ -37,16 +35,13 @@ const HistoryButtons = (): JSX.Element => {
     const [canGoForward, setCanGoForward] = useState(true);
 
     const getTooltip = (shortcut: KeyboardShortcutDescriptor) => (
-        <Tooltip
+        <KeyboardShortcutSequence
-            id='upload-tooltip'
+            shortcut={shortcut}
-        >
+            hoistDescription={true}
-            <KeyboardShortcutSequence
+            isInsideTooltip={true}
-                shortcut={shortcut}
+        />
-                hoistDescription={true}
-                isInsideTooltip={true}
-            />
-        </Tooltip>
     );
+
     const goBack = () => {
         trackEvent('ui', 'ui_history_back');
         history.goBack();
@@ -76,11 +71,10 @@ const HistoryButtons = (): JSX.Element => {
 
     return (
         <HistoryButtonsContainer>
-            <OverlayTrigger
+            <WithTooltip
-                trigger={['hover', 'focus']}
+                id='global_header_history_back'
-                delayShow={Constants.OVERLAY_TIME_DELAY}
                 placement='bottom'
-                overlay={getTooltip(KEYBOARD_SHORTCUTS.browserChannelPrev)}
+                title={getTooltip(KEYBOARD_SHORTCUTS.browserChannelPrev)}
             >
                 <IconButton
                     icon={'arrow-left'}
@@ -91,12 +85,11 @@ const HistoryButtons = (): JSX.Element => {
                     disabled={!canGoBack}
                     aria-label={Utils.localizeMessage('sidebar_left.channel_navigator.goBackLabel', 'Back')}
                 />
-            </OverlayTrigger>
+            </WithTooltip>
-            <OverlayTrigger
+            <WithTooltip
-                trigger={['hover', 'focus']}
+                id='global_header_history_forward'
-                delayShow={Constants.OVERLAY_TIME_DELAY}
                 placement='bottom'
-                overlay={getTooltip(KEYBOARD_SHORTCUTS.browserChannelNext)}
+                title={getTooltip(KEYBOARD_SHORTCUTS.browserChannelNext)}
             >
                 <IconButton
                     icon={'arrow-right'}
@@ -107,7 +100,7 @@ const HistoryButtons = (): JSX.Element => {
                     disabled={!canGoForward}
                     aria-label={Utils.localizeMessage('sidebar_left.channel_navigator.goForwardLabel', 'Forward')}
                 />
-            </OverlayTrigger>
+            </WithTooltip>
         </HistoryButtonsContainer>
     );
 };