[MM-58441] Create a floating-ui Tooltip which will swap out ReactBoot…

…strap tooltip (mattermost#29464) Added a new tooltip - components/team_sidebar/components/team_button.tsx - components/post_view/reaction/reaction_tooltip/reaction_tooltip.tsx - components/post_view/post_recent_reactions/post_recent_reactions.tsx - components/common/comment_icon.tsx
devinbinnie · Dec 9, 2024 · f80afad · f80afad
1 parent cf219b0
commit f80afad
Show file tree

Hide file tree

Showing 32 changed files with 829 additions and 287 deletions.
diff --git a/e2e-tests/cypress/tests/integration/channels/messaging/tooltip_visual_verification_spec.js b/e2e-tests/cypress/tests/integration/channels/messaging/tooltip_visual_verification_spec.js
@@ -35,7 +35,7 @@ describe('Messaging', () => {
 
     it('MM-T133 Visual verification of tooltips on post hover menu', () => {
         cy.getLastPostId().then((postId) => {
-            verifyToolTip(postId, `#CENTER_button_${postId}`, 'More');
+            verifyToolTip(postId, `#CENTER_flagIcon_${postId}`, 'Save Message');
 
             verifyToolTip(postId, `#CENTER_reaction_${postId}`, 'Add Reaction');
 
@@ -46,10 +46,10 @@ describe('Messaging', () => {
     function verifyToolTip(postId, targetElement, label) {
         cy.get(`#post_${postId}`).trigger('mouseover');
 
-        cy.get(targetElement).trigger('mouseover', {force: true});
+        cy.get(targetElement).trigger('mouseenter', {force: true});
         cy.findByText(label).should('be.visible');
 
-        cy.get(targetElement).trigger('mouseout', {force: true});
+        cy.get(targetElement).trigger('mouseleave', {force: true});
         cy.findByText(label).should('not.exist');
     }
 });
diff --git a/webapp/channels/package.json b/webapp/channels/package.json
@@ -6,7 +6,7 @@
   "version": "9.3.0",
   "private": true,
   "dependencies": {
-    "@floating-ui/react": "0.26.6",
+    "@floating-ui/react": "0.26.28",
     "@giphy/js-fetch-api": "5.1.0",
     "@giphy/react-components": "8.1.0",
     "@guyplusplus/turndown-plugin-gfm": "1.0.7",

diff --git a/...pp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx b/...pp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx
@@ -12,6 +12,8 @@ import WithTooltip from 'components/with_tooltip';
 import {AnnouncementBarTypes} from 'utils/constants';
 import {isStringContainingUrl} from 'utils/url';
 
+import './default_announcement_bar.scss';
+
 type Props = {
     id?: string;
     showCloseButton: boolean;

diff --git a/...ls/src/components/announcement_bar/default_announcement_bar/default_announcement_bar.scss b/...ls/src/components/announcement_bar/default_announcement_bar/default_announcement_bar.scss
@@ -0,0 +1,5 @@
+#announcement-bar__tooltip {
+    width: 50%;
+    max-width: 100%;
+    pointer-events: auto;
+}
diff --git a/webapp/channels/src/components/channel_header/channel_header.tsx b/webapp/channels/src/components/channel_header/channel_header.tsx
@@ -4,6 +4,8 @@
 import classNames from 'classnames';
 import React from 'react';
 import type {MouseEvent, ReactNode, RefObject} from 'react';
+// eslint-disable-next-line no-restricted-imports
+import type {OverlayTrigger as BaseOverlayTrigger} from 'react-bootstrap';
 import {Overlay} from 'react-bootstrap';
 import {FormattedMessage, injectIntl} from 'react-intl';
 import type {IntlShape} from 'react-intl';
@@ -18,7 +20,6 @@ import CustomStatusEmoji from 'components/custom_status/custom_status_emoji';
 import CustomStatusText from 'components/custom_status/custom_status_text';
 import EditChannelHeaderModal from 'components/edit_channel_header_modal';
 import Markdown from 'components/markdown';
-import type {BaseOverlayTrigger} from 'components/overlay_trigger';
 import ChannelPermissionGate from 'components/permissions_gates/channel_permission_gate';
 import Timestamp from 'components/timestamp';
 import Popover from 'components/widgets/popover';
@@ -44,6 +45,10 @@ import HeaderIconWrapper from './components/header_icon_wrapper';
 const headerMarkdownOptions = {singleline: true, mentionHighlight: false, atMentions: true};
 const popoverMarkdownOptions = {singleline: false, mentionHighlight: false, atMentions: true};
 
+export type OverlayTrigger = BaseOverlayTrigger & {
+    hide: () => void;
+};
+
 export type Props = {
     teamId: string;
     currentUser: UserProfile;
@@ -94,7 +99,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
     toggleFavoriteRef: RefObject<HTMLButtonElement>;
     headerDescriptionRef: RefObject<HTMLSpanElement>;
     headerPopoverTextMeasurerRef: RefObject<HTMLDivElement>;
-    headerOverlayRef: RefObject<BaseOverlayTrigger>;
+    headerOverlayRef: RefObject<OverlayTrigger>;
     getHeaderMarkdownOptions: (channelNamesMap: Record<string, any>) => Record<string, any>;
     getPopoverMarkdownOptions: (channelNamesMap: Record<string, any>) => Record<string, any>;
 

diff --git a/webapp/channels/src/components/common/comment_icon.tsx b/webapp/channels/src/components/common/comment_icon.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 import {useIntl} from 'react-intl';
 
 import ReplyIcon from 'components/widgets/icons/reply_icon';
-import WithTooltip from 'components/with_tooltip';
+import WithTooltip from 'components/with_tooltip/with_tooltip_new';
 
 import type {Locations} from 'utils/constants';
 
@@ -43,8 +43,6 @@ const CommentIcon = ({
 
     return (
         <WithTooltip
-            id='comment-icon-tooltip'
-            placement='top'
             title={intl.formatMessage({
                 id: 'post_info.comment_icon.tooltip.reply',
                 defaultMessage: 'Reply',

diff --git a/webapp/channels/src/components/overlay_trigger.test.tsx b/webapp/channels/src/components/overlay_trigger.test.tsx
diff --git a/...annels/src/components/post_view/post_flag_icon/__snapshots__/post_flag_icon.test.tsx.snap b/...annels/src/components/post_view/post_flag_icon/__snapshots__/post_flag_icon.test.tsx.snap
@@ -1,10 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/post_view/PostFlagIcon should match snapshot 1`] = `
-<WithTooltip
-  id="flagTooltip"
+<Memo(WithTooltip)
   key="flagtooltipkey"
-  placement="top"
   title={
     <Memo(MemoizedFormattedMessage)
       defaultMessage="Save Message"
@@ -22,14 +20,12 @@ exports[`components/post_view/PostFlagIcon should match snapshot 1`] = `
       className="icon icon--small"
     />
   </button>
-</WithTooltip>
+</Memo(WithTooltip)>
 `;
 
 exports[`components/post_view/PostFlagIcon should match snapshot 2`] = `
-<WithTooltip
-  id="flagTooltip"
+<Memo(WithTooltip)
   key="flagtooltipkeyflagged"
-  placement="top"
   title={
     <Memo(MemoizedFormattedMessage)
       defaultMessage="Remove from Saved"
@@ -47,5 +43,5 @@ exports[`components/post_view/PostFlagIcon should match snapshot 2`] = `
       className="icon icon--small icon--small-filled post-menu__item--selected"
     />
   </button>
-</WithTooltip>
+</Memo(WithTooltip)>
 `;
diff --git a/webapp/channels/src/components/post_view/post_flag_icon/post_flag_icon.tsx b/webapp/channels/src/components/post_view/post_flag_icon/post_flag_icon.tsx
@@ -7,7 +7,7 @@ import {FormattedMessage, useIntl} from 'react-intl';
 
 import FlagIcon from 'components/widgets/icons/flag_icon';
 import FlagIconFilled from 'components/widgets/icons/flag_icon_filled';
-import WithTooltip from 'components/with_tooltip';
+import WithTooltip from 'components/with_tooltip/with_tooltip_new';
 
 import {Locations, A11yCustomEventTypes} from 'utils/constants';
 
@@ -82,9 +82,7 @@ const PostFlagIcon = ({
 
     return (
         <WithTooltip
-            id='flagTooltip'
             key={`flagtooltipkey${isFlagged ? 'flagged' : ''}`}
-            placement='top'
             title={
                 isFlagged ? (
                     <FormattedMessage

diff --git a/...channels/src/components/post_view/post_reaction/__snapshots__/post_reaction.test.tsx.snap b/...channels/src/components/post_view/post_reaction/__snapshots__/post_reaction.test.tsx.snap
@@ -17,9 +17,7 @@ exports[`components/post_view/PostReaction should match snapshot 1`] = `
     target={[MockFunction]}
     topOffset={-7}
   />
-  <WithTooltip
-    id="reaction-icon-tooltip"
-    placement="top"
+  <Memo(WithTooltip)
     title={
       Object {
         "defaultMessage": "Add Reaction",
@@ -38,6 +36,6 @@ exports[`components/post_view/PostReaction should match snapshot 1`] = `
         className="icon icon--small"
       />
     </button>
-  </WithTooltip>
+  </Memo(WithTooltip)>
 </Memo(ChannelPermissionGate)>
 `;
diff --git a/webapp/channels/src/components/post_view/post_reaction/post_reaction.tsx b/webapp/channels/src/components/post_view/post_reaction/post_reaction.tsx
@@ -13,7 +13,7 @@ import {getEmojiName} from 'mattermost-redux/utils/emoji_utils';
 import EmojiPickerOverlay from 'components/emoji_picker/emoji_picker_overlay';
 import ChannelPermissionGate from 'components/permissions_gates/channel_permission_gate';
 import EmojiIcon from 'components/widgets/icons/emoji_icon';
-import WithTooltip from 'components/with_tooltip';
+import WithTooltip from 'components/with_tooltip/with_tooltip_new';
 
 import {Locations} from 'utils/constants';
 import {localizeMessage} from 'utils/utils';
@@ -91,9 +91,7 @@ export default class PostReaction extends React.PureComponent<Props, State> {
                         spaceRequiredBelow={spaceRequiredBelow}
                     />
                     <WithTooltip
-                        id='reaction-icon-tooltip'
                         title={messages.addReaction}
-                        placement='top'
                     >
                         <button
                             data-testid='post-reaction-emoji-icon'