[MM-58405] Migrate tooltips of 'components/announcement_bar/default_announcement_bar/announcement_bar' to WithTooltip (#27244)

* Migrate tooltips of 'components/announcement_bar/default_announcement_bar/announcement_bar' to WithTooltip * Review fixes * Review fix * Fix imports * Update snapshots * Test fix --------- Co-authored-by: Mattermost Build <build@mattermost.com>
2025-02-25 18:55:24 -06:00 · 2024-07-01 09:33:52 +02:00 · 2024-07-01 09:33:52 +02:00 · f36eb59f21
commit f36eb59f21
parent f12eb75d25
4 changed files with 182 additions and 274 deletions
--- a/webapp/channels/src/components/announcement_bar/snapshots/announcement_bar.test.tsx.snap
+++ b/webapp/channels/src/components/announcement_bar/snapshots/announcement_bar.test.tsx.snap
@ -85,19 +85,6 @@ exports[`components/AnnouncementBar should match snapshot, bar not showing 1`] =
      "color": "",
    }
  }
->
-  <OverlayTrigger
-    defaultOverlayShown={false}
-    delayHide={0}
-    delayShow={400}
-    overlay={<React.Fragment />}
-    placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
 >
  <div
    className="announcement-bar__text"
@ -110,7 +97,6 @@ exports[`components/AnnouncementBar should match snapshot, bar not showing 1`] =
      />
    </span>
  </div>
-  </OverlayTrigger>
 </_StyledDiv>
 `;

@ -123,19 +109,6 @@ exports[`components/AnnouncementBar should match snapshot, bar showing 1`] = `
      "color": "",
    }
  }
->
-  <OverlayTrigger
-    defaultOverlayShown={false}
-    delayHide={0}
-    delayShow={400}
-    overlay={<React.Fragment />}
-    placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
 >
  <div
    className="announcement-bar__text"
@ -148,7 +121,6 @@ exports[`components/AnnouncementBar should match snapshot, bar showing 1`] = `
      />
    </span>
  </div>
-  </OverlayTrigger>
 </_StyledDiv>
 `;

@ -161,19 +133,6 @@ exports[`components/AnnouncementBar should match snapshot, bar showing, no dismi
      "color": "",
    }
  }
->
-  <OverlayTrigger
-    defaultOverlayShown={false}
-    delayHide={0}
-    delayShow={400}
-    overlay={<React.Fragment />}
-    placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
 >
  <div
    className="announcement-bar__text"
@ -186,7 +145,6 @@ exports[`components/AnnouncementBar should match snapshot, bar showing, no dismi
      />
    </span>
  </div>
-  </OverlayTrigger>
 </_StyledDiv>
 `;

@ -199,19 +157,6 @@ exports[`components/AnnouncementBar should match snapshot, dismissal 1`] = `
      "color": "",
    }
  }
->
-  <OverlayTrigger
-    defaultOverlayShown={false}
-    delayHide={0}
-    delayShow={400}
-    overlay={<React.Fragment />}
-    placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
 >
  <div
    className="announcement-bar__text"
@ -224,7 +169,6 @@ exports[`components/AnnouncementBar should match snapshot, dismissal 1`] = `
      />
    </span>
  </div>
-  </OverlayTrigger>
 </_StyledDiv>
 `;

@ -237,19 +181,6 @@ exports[`components/AnnouncementBar should match snapshot, dismissal 2`] = `
      "color": "",
    }
  }
->
-  <OverlayTrigger
-    defaultOverlayShown={false}
-    delayHide={0}
-    delayShow={400}
-    overlay={<React.Fragment />}
-    placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
 >
  <div
    className="announcement-bar__text"
@ -262,7 +193,6 @@ exports[`components/AnnouncementBar should match snapshot, dismissal 2`] = `
      />
    </span>
  </div>
-  </OverlayTrigger>
 </_StyledDiv>
 `;

@ -275,19 +205,6 @@ exports[`components/AnnouncementBar should match snapshot, dismissal 3`] = `
      "color": "",
    }
  }
->
-  <OverlayTrigger
-    defaultOverlayShown={false}
-    delayHide={0}
-    delayShow={400}
-    overlay={<React.Fragment />}
-    placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
 >
  <div
    className="announcement-bar__text"
@ -300,7 +217,6 @@ exports[`components/AnnouncementBar should match snapshot, dismissal 3`] = `
      />
    </span>
  </div>
-  </OverlayTrigger>
 </_StyledDiv>
 `;

@ -313,19 +229,6 @@ exports[`components/AnnouncementBar should match snapshot, props change 1`] = `
      "color": "",
    }
  }
->
-  <OverlayTrigger
-    defaultOverlayShown={false}
-    delayHide={0}
-    delayShow={400}
-    overlay={<React.Fragment />}
-    placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
 >
  <div
    className="announcement-bar__text"
@ -338,7 +241,6 @@ exports[`components/AnnouncementBar should match snapshot, props change 1`] = `
      />
    </span>
  </div>
-  </OverlayTrigger>
 </_StyledDiv>
 `;

@ -351,19 +253,6 @@ exports[`components/AnnouncementBar should match snapshot, props change 2`] = `
      "color": "",
    }
  }
->
-  <OverlayTrigger
-    defaultOverlayShown={false}
-    delayHide={0}
-    delayShow={400}
-    overlay={<React.Fragment />}
-    placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
 >
  <div
    className="announcement-bar__text"
@ -376,7 +265,6 @@ exports[`components/AnnouncementBar should match snapshot, props change 2`] = `
      />
    </span>
  </div>
-  </OverlayTrigger>
 </_StyledDiv>
 `;

@ -389,19 +277,6 @@ exports[`components/AnnouncementBar should match snapshot, props change 3`] = `
      "color": "",
    }
  }
->
-  <OverlayTrigger
-    defaultOverlayShown={false}
-    delayHide={0}
-    delayShow={400}
-    overlay={<React.Fragment />}
-    placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
 >
  <div
    className="announcement-bar__text"
@ -414,7 +289,6 @@ exports[`components/AnnouncementBar should match snapshot, props change 3`] = `
      />
    </span>
  </div>
-  </OverlayTrigger>
 </_StyledDiv>
 `;

@ -427,19 +301,6 @@ exports[`components/AnnouncementBar should match snapshot, props change 4`] = `
      "color": "",
    }
  }
->
-  <OverlayTrigger
-    defaultOverlayShown={false}
-    delayHide={0}
-    delayShow={400}
-    overlay={<React.Fragment />}
-    placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
 >
  <div
    className="announcement-bar__text"
@ -452,6 +313,5 @@ exports[`components/AnnouncementBar should match snapshot, props change 4`] = `
      />
    </span>
  </div>
-  </OverlayTrigger>
 </_StyledDiv>
 `;
--- a/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.test.tsx
+++ b/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.test.tsx
@ -0,0 +1,43 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {screen} from '@testing-library/react';
+import React from 'react';
+
+import AnnouncementBar from 'components/announcement_bar/default_announcement_bar';
+
+import {renderWithContext, userEvent} from 'tests/react_testing_utils';
+
+describe('components/announcement_bar/default_announcement_bar', () => {
+    const originalOffsetWidth = Object.getOwnPropertyDescriptor(
+        HTMLElement.prototype,
+        'offsetWidth',
+    ) as PropertyDescriptor;
+
+    beforeAll(() => {
+        Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+            configurable: true,
+            value: 20,
+        });
+    });
+
+    afterAll(() => {
+        Object.defineProperty(HTMLElement.prototype, 'offsetWidth', originalOffsetWidth);
+    });
+
+    test('should not show tooltip by default', () => {
+        const wrapper = renderWithContext(<AnnouncementBar message={<span>{'Lorem Ipsum'}</span>}/>);
+
+        wrapper.getByText('Lorem Ipsum');
+
+        expect(wrapper.queryByRole('tooltip')).toBeNull();
+    });
+
+    test('should show tooltip on hover', async () => {
+        const wrapper = renderWithContext(<AnnouncementBar message={<span>{'Lorem Ipsum'}</span>}/>);
+
+        userEvent.hover(wrapper.getByText('Lorem Ipsum'));
+
+        expect(screen.findByRole('tooltip')).not.toBeNull();
+    });
+});
--- a/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx
+++ b/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx
@ -7,10 +7,9 @@ import type {MessageDescriptor} from 'react-intl';
 import {FormattedMessage} from 'react-intl';

 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
+import WithTooltip from 'components/with_tooltip';

-import {Constants, AnnouncementBarTypes} from 'utils/constants';
+import {AnnouncementBarTypes} from 'utils/constants';
 import {isStringContainingUrl} from 'utils/url';

 type Props = {
@ -156,32 +155,13 @@ export default class AnnouncementBar extends React.PureComponent<Props, State> {
                <FormattedMarkdownMessage id={this.props.message as string}/>
            );
        }
-        const announcementTooltip = this.state.showTooltip ? (
-            <Tooltip id='announcement-bar__tooltip'>
-                {this.props.tooltipMsg ? this.props.tooltipMsg : message}
-            </Tooltip>
-        ) : <></>;

        const announcementIcon = () => {
            return this.props.showLinkAsButton &&
            (this.props.showCloseButton ? <i className='icon icon-alert-circle-outline'/> : <i className='icon icon-alert-outline'/>);
        };

-        return (
-            <div
-                className={barClass}
-                style={barStyle}
-                // eslint-disable-next-line react/no-unknown-property
-                css={{gridArea: 'announcement'}}
-                data-testid={this.props.id}
-            >
-                <OverlayTrigger
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
-                    placement='bottom'
-                    overlay={announcementTooltip}
-                    delayHide={this.state.isStringContainingUrl ? OVERLAY_ANNOUNCEMENT_HIDE_DELAY : 0}
-                >
-                    <div className='announcement-bar__text'>
+        let barContent = (<div className='announcement-bar__text'>
            {this.props.icon ? this.props.icon : announcementIcon()}
            <span
                ref={this.messageRef}
@ -209,8 +189,30 @@ export default class AnnouncementBar extends React.PureComponent<Props, State> {
                    {this.props.ctaText}
                </button>
            }
-                    </div>
-                </OverlayTrigger>
+        </div>);
+
+        if (this.state.showTooltip) {
+            barContent = (
+                <WithTooltip
+                    id='announcement-bar__tooltip'
+                    title={this.props.tooltipMsg ? this.props.tooltipMsg : message}
+                    placement='bottom'
+                    delayHide={this.state.isStringContainingUrl ? OVERLAY_ANNOUNCEMENT_HIDE_DELAY : 0}
+                >
+                    {barContent}
+
+                </WithTooltip>);
+        }
+
+        return (
+            <div
+                className={barClass}
+                style={barStyle}
+                // eslint-disable-next-line react/no-unknown-property
+                css={{gridArea: 'announcement'}}
+                data-testid={this.props.id}
+            >
+                {barContent}
                {closeButton}
            </div>
        );
--- a/webapp/channels/src/components/with_tooltip/index.tsx
+++ b/webapp/channels/src/components/with_tooltip/index.tsx
@ -17,6 +17,7 @@ type WithTooltipProps = {
    children: OverlayTriggerProps['children'];
    placement: OverlayTriggerProps['placement'];
    onShow?: () => void;
+    delayHide?: number;
    onExit?: () => void;
 } & CommonTooltipProps;
 const WithTooltip = ({
@ -28,6 +29,7 @@ const WithTooltip = ({
    shortcut,
    placement,
    onShow,
+    delayHide,
    children,
    onExit,
    shouldUpdatePosition,
@ -47,6 +49,7 @@ const WithTooltip = ({
            overlay={<ThisTooltip/>}
            placement={placement}
            onEnter={onShow}
+            delayHide={delayHide}
            onExit={onExit}
            shouldUpdatePosition={shouldUpdatePosition}
        >