[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>

webapp/channels/src/components/announcement_bar/__snapshots__/announcement_bar.test.tsx.snap

@@ -86,31 +86,17 @@ exports[`components/AnnouncementBar should match snapshot, bar not showing 1`] =
     }
   }
 >
-  <OverlayTrigger
+  <div
-    defaultOverlayShown={false}
+    className="announcement-bar__text"
-    delayHide={0}
-    delayShow={400}
-    overlay={<React.Fragment />}
-    placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
   >
-    <div
+    <span
-      className="announcement-bar__text"
+      onMouseEnter={[Function]}
     >
-      <span
+      <FormattedMarkdownMessage
-        onMouseEnter={[Function]}
+        id="text"
-      >
+      />
-        <FormattedMarkdownMessage
+    </span>
-          id="text"
+  </div>
-        />
-      </span>
-    </div>
-  </OverlayTrigger>
 </_StyledDiv>
 `;
 
@@ -124,31 +110,17 @@ exports[`components/AnnouncementBar should match snapshot, bar showing 1`] = `
     }
   }
 >
-  <OverlayTrigger
+  <div
-    defaultOverlayShown={false}
+    className="announcement-bar__text"
-    delayHide={0}
-    delayShow={400}
-    overlay={<React.Fragment />}
-    placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
   >
-    <div
+    <span
-      className="announcement-bar__text"
+      onMouseEnter={[Function]}
     >
-      <span
+      <FormattedMarkdownMessage
-        onMouseEnter={[Function]}
+        id="text"
-      >
+      />
-        <FormattedMarkdownMessage
+    </span>
-          id="text"
+  </div>
-        />
-      </span>
-    </div>
-  </OverlayTrigger>
 </_StyledDiv>
 `;
 
@@ -162,31 +134,17 @@ exports[`components/AnnouncementBar should match snapshot, bar showing, no dismi
     }
   }
 >
-  <OverlayTrigger
+  <div
-    defaultOverlayShown={false}
+    className="announcement-bar__text"
-    delayHide={0}
-    delayShow={400}
-    overlay={<React.Fragment />}
-    placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
   >
-    <div
+    <span
-      className="announcement-bar__text"
+      onMouseEnter={[Function]}
     >
-      <span
+      <FormattedMarkdownMessage
-        onMouseEnter={[Function]}
+        id="text"
-      >
+      />
-        <FormattedMarkdownMessage
+    </span>
-          id="text"
+  </div>
-        />
-      </span>
-    </div>
-  </OverlayTrigger>
 </_StyledDiv>
 `;
 
@@ -200,31 +158,17 @@ exports[`components/AnnouncementBar should match snapshot, dismissal 1`] = `
     }
   }
 >
-  <OverlayTrigger
+  <div
-    defaultOverlayShown={false}
+    className="announcement-bar__text"
-    delayHide={0}
-    delayShow={400}
-    overlay={<React.Fragment />}
-    placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
   >
-    <div
+    <span
-      className="announcement-bar__text"
+      onMouseEnter={[Function]}
     >
-      <span
+      <FormattedMarkdownMessage
-        onMouseEnter={[Function]}
+        id="text"
-      >
+      />
-        <FormattedMarkdownMessage
+    </span>
-          id="text"
+  </div>
-        />
-      </span>
-    </div>
-  </OverlayTrigger>
 </_StyledDiv>
 `;
 
@@ -238,31 +182,17 @@ exports[`components/AnnouncementBar should match snapshot, dismissal 2`] = `
     }
   }
 >
-  <OverlayTrigger
+  <div
-    defaultOverlayShown={false}
+    className="announcement-bar__text"
-    delayHide={0}
-    delayShow={400}
-    overlay={<React.Fragment />}
-    placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
   >
-    <div
+    <span
-      className="announcement-bar__text"
+      onMouseEnter={[Function]}
     >
-      <span
+      <FormattedMarkdownMessage
-        onMouseEnter={[Function]}
+        id="text"
-      >
+      />
-        <FormattedMarkdownMessage
+    </span>
-          id="text"
+  </div>
-        />
-      </span>
-    </div>
-  </OverlayTrigger>
 </_StyledDiv>
 `;
 
@@ -276,31 +206,17 @@ exports[`components/AnnouncementBar should match snapshot, dismissal 3`] = `
     }
   }
 >
-  <OverlayTrigger
+  <div
-    defaultOverlayShown={false}
+    className="announcement-bar__text"
-    delayHide={0}
-    delayShow={400}
-    overlay={<React.Fragment />}
-    placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
   >
-    <div
+    <span
-      className="announcement-bar__text"
+      onMouseEnter={[Function]}
     >
-      <span
+      <FormattedMarkdownMessage
-        onMouseEnter={[Function]}
+        id="text"
-      >
+      />
-        <FormattedMarkdownMessage
+    </span>
-          id="text"
+  </div>
-        />
-      </span>
-    </div>
-  </OverlayTrigger>
 </_StyledDiv>
 `;
 
@@ -314,31 +230,17 @@ exports[`components/AnnouncementBar should match snapshot, props change 1`] = `
     }
   }
 >
-  <OverlayTrigger
+  <div
-    defaultOverlayShown={false}
+    className="announcement-bar__text"
-    delayHide={0}
-    delayShow={400}
-    overlay={<React.Fragment />}
-    placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
   >
-    <div
+    <span
-      className="announcement-bar__text"
+      onMouseEnter={[Function]}
     >
-      <span
+      <FormattedMarkdownMessage
-        onMouseEnter={[Function]}
+        id="text"
-      >
+      />
-        <FormattedMarkdownMessage
+    </span>
-          id="text"
+  </div>
-        />
-      </span>
-    </div>
-  </OverlayTrigger>
 </_StyledDiv>
 `;
 
@@ -352,31 +254,17 @@ exports[`components/AnnouncementBar should match snapshot, props change 2`] = `
     }
   }
 >
-  <OverlayTrigger
+  <div
-    defaultOverlayShown={false}
+    className="announcement-bar__text"
-    delayHide={0}
-    delayShow={400}
-    overlay={<React.Fragment />}
-    placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
   >
-    <div
+    <span
-      className="announcement-bar__text"
+      onMouseEnter={[Function]}
     >
-      <span
+      <FormattedMarkdownMessage
-        onMouseEnter={[Function]}
+        id="text"
-      >
+      />
-        <FormattedMarkdownMessage
+    </span>
-          id="text"
+  </div>
-        />
-      </span>
-    </div>
-  </OverlayTrigger>
 </_StyledDiv>
 `;
 
@@ -390,31 +278,17 @@ exports[`components/AnnouncementBar should match snapshot, props change 3`] = `
     }
   }
 >
-  <OverlayTrigger
+  <div
-    defaultOverlayShown={false}
+    className="announcement-bar__text"
-    delayHide={0}
-    delayShow={400}
-    overlay={<React.Fragment />}
-    placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
   >
-    <div
+    <span
-      className="announcement-bar__text"
+      onMouseEnter={[Function]}
     >
-      <span
+      <FormattedMarkdownMessage
-        onMouseEnter={[Function]}
+        id="text"
-      >
+      />
-        <FormattedMarkdownMessage
+    </span>
-          id="text"
+  </div>
-        />
-      </span>
-    </div>
-  </OverlayTrigger>
 </_StyledDiv>
 `;
 
@@ -428,30 +302,16 @@ exports[`components/AnnouncementBar should match snapshot, props change 4`] = `
     }
   }
 >
-  <OverlayTrigger
+  <div
-    defaultOverlayShown={false}
+    className="announcement-bar__text"
-    delayHide={0}
-    delayShow={400}
-    overlay={<React.Fragment />}
-    placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
   >
-    <div
+    <span
-      className="announcement-bar__text"
+      onMouseEnter={[Function]}
     >
-      <span
+      <FormattedMarkdownMessage
-        onMouseEnter={[Function]}
+        id="text"
-      >
+      />
-        <FormattedMarkdownMessage
+    </span>
-          id="text"
+  </div>
-        />
-      </span>
-    </div>
-  </OverlayTrigger>
 </_StyledDiv>
 `;

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();
+    });
+});

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 WithTooltip from 'components/with_tooltip';
-import Tooltip from 'components/tooltip';
 
-import {Constants, AnnouncementBarTypes} from 'utils/constants';
+import {AnnouncementBarTypes} from 'utils/constants';
 import {isStringContainingUrl} from 'utils/url';
 
 type Props = {
@@ -156,17 +155,55 @@ 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'/>);
         };
 
+        let barContent = (<div className='announcement-bar__text'>
+            {this.props.icon ? this.props.icon : announcementIcon()}
+            <span
+                ref={this.messageRef}
+                onMouseEnter={this.enableToolTipIfNeeded}
+            >
+                {message}
+            </span>
+            {
+                this.props.showLinkAsButton && this.props.showCTA && this.props.modalButtonText &&
+                <button
+                    onClick={this.props.onButtonClick}
+                    disabled={this.props.ctaDisabled}
+                >
+                    <FormattedMessage
+                        {...this.props.modalButtonText}
+                    />
+                </button>
+            }
+            {
+                this.props.showLinkAsButton && this.props.showCTA && this.props.ctaText &&
+                <button
+                    onClick={this.props.onButtonClick}
+                    disabled={this.props.ctaDisabled}
+                >
+                    {this.props.ctaText}
+                </button>
+            }
+        </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}
@@ -175,42 +212,7 @@ export default class AnnouncementBar extends React.PureComponent<Props, State> {
                 css={{gridArea: 'announcement'}}
                 data-testid={this.props.id}
             >
-                <OverlayTrigger
+                {barContent}
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
-                    placement='bottom'
-                    overlay={announcementTooltip}
-                    delayHide={this.state.isStringContainingUrl ? OVERLAY_ANNOUNCEMENT_HIDE_DELAY : 0}
-                >
-                    <div className='announcement-bar__text'>
-                        {this.props.icon ? this.props.icon : announcementIcon()}
-                        <span
-                            ref={this.messageRef}
-                            onMouseEnter={this.enableToolTipIfNeeded}
-                        >
-                            {message}
-                        </span>
-                        {
-                            this.props.showLinkAsButton && this.props.showCTA && this.props.modalButtonText &&
-                            <button
-                                onClick={this.props.onButtonClick}
-                                disabled={this.props.ctaDisabled}
-                            >
-                                <FormattedMessage
-                                    {...this.props.modalButtonText}
-                                />
-                            </button>
-                        }
-                        {
-                            this.props.showLinkAsButton && this.props.showCTA && this.props.ctaText &&
-                            <button
-                                onClick={this.props.onButtonClick}
-                                disabled={this.props.ctaDisabled}
-                            >
-                                {this.props.ctaText}
-                            </button>
-                        }
-                    </div>
-                </OverlayTrigger>
                 {closeButton}
             </div>
         );

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}
         >