From 8012275ca1a52d96115e685fad68ace9e0301861 Mon Sep 17 00:00:00 2001
From: Rita Anene <92169163+Camillarhi@users.noreply.github.com>
Date: Fri, 23 Aug 2024 03:58:13 +0100
Subject: [PATCH] [MM-60155] Migrate tooltips of
 "components/advanced_text_editor/show_formatting/show_formatting.tsx" to
 WithTooltip (#27981)

---
 .../show_formatting/show_formatting.test.tsx  | 49 +++++++++++++++++++
 .../show_formatting/show_formatting.tsx       | 30 +++++-------
 2 files changed, 60 insertions(+), 19 deletions(-)
 create mode 100644 webapp/channels/src/components/advanced_text_editor/show_formatting/show_formatting.test.tsx

diff --git a/webapp/channels/src/components/advanced_text_editor/show_formatting/show_formatting.test.tsx b/webapp/channels/src/components/advanced_text_editor/show_formatting/show_formatting.test.tsx
new file mode 100644
index 0000000000..4ed2392835
--- /dev/null
+++ b/webapp/channels/src/components/advanced_text_editor/show_formatting/show_formatting.test.tsx
@@ -0,0 +1,49 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import {renderWithContext, fireEvent, screen} from 'tests/react_testing_utils';
+
+import ShowFormatting from './show_formatting';
+
+jest.mock('components/with_tooltip', () => {
+    return ({children}: { children: React.ReactNode }) => <div>{children}</div>;
+});
+
+describe('ShowFormatting Component', () => {
+    it('should render correctly with default props', () => {
+        renderWithContext(
+            <ShowFormatting
+                onClick={jest.fn()}
+                active={false}
+            />,
+        );
+
+        expect(screen.getByLabelText('Eye Icon')).toBeInTheDocument();
+    });
+
+    it('should call onClick handler when clicked', () => {
+        const onClick = jest.fn();
+        renderWithContext(
+            <ShowFormatting
+                onClick={onClick}
+                active={false}
+            />,
+        );
+
+        fireEvent.click(screen.getByLabelText('Eye Icon'));
+        expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should apply the active class when active prop is true', () => {
+        const {container} = renderWithContext(
+            <ShowFormatting
+                onClick={jest.fn()}
+                active={true}
+            />,
+        );
+
+        expect(container.querySelector('button')).toHaveClass('active');
+    });
+});
diff --git a/webapp/channels/src/components/advanced_text_editor/show_formatting/show_formatting.tsx b/webapp/channels/src/components/advanced_text_editor/show_formatting/show_formatting.tsx
index 2f165c85a6..9016ad8cb6 100644
--- a/webapp/channels/src/components/advanced_text_editor/show_formatting/show_formatting.tsx
+++ b/webapp/channels/src/components/advanced_text_editor/show_formatting/show_formatting.tsx
@@ -8,10 +8,7 @@ import {useIntl} from 'react-intl';
 import {EyeOutlineIcon} from '@mattermost/compass-icons/components';
 
 import KeyboardShortcutSequence, {KEYBOARD_SHORTCUTS} from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence';
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
-
-import Constants from 'utils/constants';
+import WithTooltip from 'components/with_tooltip';
 
 import {IconContainer} from '../formatting_bar/formatting_icon';
 
@@ -26,22 +23,17 @@ const ShowFormatting = (props: ShowFormatProps): JSX.Element => {
     const buttonAriaLabel = formatMessage({id: 'accessibility.button.preview', defaultMessage: 'preview'});
     const iconAriaLabel = formatMessage({id: 'generic_icons.preview', defaultMessage: 'Eye Icon'});
 
-    const tooltip = (
-        <Tooltip id='PreviewInputTextButtonTooltip'>
-            <KeyboardShortcutSequence
-                shortcut={KEYBOARD_SHORTCUTS.msgMarkdownPreview}
-                hoistDescription={true}
-                isInsideTooltip={true}
-            />
-        </Tooltip>
-    );
-
     return (
-        <OverlayTrigger
+        <WithTooltip
+            id='PreviewInputTextButtonTooltip'
+            title={
+                <KeyboardShortcutSequence
+                    shortcut={KEYBOARD_SHORTCUTS.msgMarkdownPreview}
+                    hoistDescription={true}
+                    isInsideTooltip={true}
+                />
+            }
             placement='left'
-            delayShow={Constants.OVERLAY_TIME_DELAY}
-            trigger={Constants.OVERLAY_DEFAULT_TRIGGER}
-            overlay={tooltip}
         >
             <IconContainer
                 type='button'
@@ -56,7 +48,7 @@ const ShowFormatting = (props: ShowFormatProps): JSX.Element => {
                     aria-label={iconAriaLabel}
                 />
             </IconContainer>
-        </OverlayTrigger>
+        </WithTooltip>
     );
 };