[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,19 +86,6 @@ exports[`components/AnnouncementBar should match snapshot, bar not showing 1`] =
     }
   }
 >
-  <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>
 `;
 
@@ -124,19 +110,6 @@ exports[`components/AnnouncementBar should match snapshot, bar showing 1`] = `
     }
   }
 >
-  <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>
 `;
 
@@ -162,19 +134,6 @@ exports[`components/AnnouncementBar should match snapshot, bar showing, no dismi
     }
   }
 >
-  <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>
 `;
 
@@ -200,19 +158,6 @@ exports[`components/AnnouncementBar should match snapshot, dismissal 1`] = `
     }
   }
 >
-  <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>
 `;
 
@@ -238,19 +182,6 @@ exports[`components/AnnouncementBar should match snapshot, dismissal 2`] = `
     }
   }
 >
-  <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>
 `;
 
@@ -276,19 +206,6 @@ exports[`components/AnnouncementBar should match snapshot, dismissal 3`] = `
     }
   }
 >
-  <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>
 `;
 
@@ -314,19 +230,6 @@ exports[`components/AnnouncementBar should match snapshot, props change 1`] = `
     }
   }
 >
-  <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>
 `;
 
@@ -352,19 +254,6 @@ exports[`components/AnnouncementBar should match snapshot, props change 2`] = `
     }
   }
 >
-  <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>
 `;
 
@@ -390,19 +278,6 @@ exports[`components/AnnouncementBar should match snapshot, props change 3`] = `
     }
   }
 >
-  <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>
 `;
 
@@ -428,19 +302,6 @@ exports[`components/AnnouncementBar should match snapshot, props change 4`] = `
     }
   }
 >
-  <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>
 `;

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,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 (
+        let barContent = (<div className='announcement-bar__text'>
-            <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'>
             {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>
+        </div>);
-                </OverlayTrigger>
+
+        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>
         );

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