[MM-58413] Migrate various components to use WithTooltip (#27163)

webapp/channels/src/components/advanced_create_post/priority_labels.tsx

@@ -3,18 +3,15 @@
 
 import React, {memo} from 'react';
 import type {CSSProperties} from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
 import styled from 'styled-components';
 
 import {CheckCircleOutlineIcon, BellRingOutlineIcon} from '@mattermost/compass-icons/components';
 import type {PostPriorityMetadata} from '@mattermost/types/posts';
 
-import OverlayTrigger from 'components/overlay_trigger';
 import {HasNoMentions, HasSpecialMentions} from 'components/post_priority/error_messages';
 import PriorityLabel from 'components/post_priority/post_priority_label';
-import Tooltip from 'components/tooltip';
+import WithTooltip from 'components/with_tooltip';
-
-import Constants from 'utils/constants';
 
 type Props = {
     canRemove: boolean;
@@ -97,6 +94,7 @@ function PriorityLabels({
     priority,
     requestedAck,
 }: Props) {
+    const intl = useIntl();
     return (
         <Priority padding={padding}>
             {priority && (
@@ -106,41 +104,31 @@ function PriorityLabels({
                 />
             )}
             {persistentNotifications && (
-                <OverlayTrigger
+                <WithTooltip
+                    id='post-priority-picker-persistent-notifications-tooltip'
                     placement='top'
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                    title={intl.formatMessage({
-                    trigger={Constants.OVERLAY_DEFAULT_TRIGGER}
+                        id: 'post_priority.persistent_notifications.tooltip',
-                    overlay={(
+                        defaultMessage: 'Persistent notifications will be sent',
-                        <Tooltip id='post-priority-picker-persistent-notifications-tooltip'>
+                    })}
-                            <FormattedMessage
-                                id={'post_priority.persistent_notifications.tooltip'}
-                                defaultMessage={'Persistent notifications will be sent'}
-                            />
-                        </Tooltip>
-                    )}
                 >
                     <Notifications>
                         <BellRingOutlineIcon size={14}/>
                     </Notifications>
-                </OverlayTrigger>
+                </WithTooltip>
             )}
             {requestedAck && (
                 <Acknowledgements hasError={hasError}>
-                    <OverlayTrigger
+                    <WithTooltip
+                        id='post-priority-picker-ack-tooltip'
                         placement='top'
-                        delayShow={Constants.OVERLAY_TIME_DELAY}
+                        title={intl.formatMessage({
-                        trigger={Constants.OVERLAY_DEFAULT_TRIGGER}
+                            id: 'post_priority.request_acknowledgement.tooltip',
-                        overlay={(
+                            defaultMessage: 'Acknowledgement will be requested',
-                            <Tooltip id='post-priority-picker-ack-tooltip'>
+                        })}
-                                <FormattedMessage
-                                    id={'post_priority.request_acknowledgement.tooltip'}
-                                    defaultMessage={'Acknowledgement will be requested'}
-                                />
-                            </Tooltip>
-                        )}
                     >
                         <CheckCircleOutlineIcon size={14}/>
-                    </OverlayTrigger>
+                    </WithTooltip>
                     {!(priority) && (
                         <FormattedMessage
                             id={'post_priority.request_acknowledgement'}
@@ -155,19 +143,13 @@ function PriorityLabels({
                 </Error>
             )}
             {canRemove && (
-                <OverlayTrigger
+                <WithTooltip
+                    id='post-priority-picker-tooltip'
                     placement='top'
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                    title={intl.formatMessage({
-                    trigger={Constants.OVERLAY_DEFAULT_TRIGGER}
+                        id: 'post_priority.remove',
-                    overlay={(
+                        defaultMessage: 'Remove {priority}',
-                        <Tooltip id='post-priority-picker-tooltip'>
+                    }, {priority})}
-                            <FormattedMessage
-                                id={'post_priority.remove'}
-                                defaultMessage={'Remove {priority}'}
-                                values={{priority}}
-                            />
-                        </Tooltip>
-                    )}
                 >
                     <Close
                         type='button'
@@ -183,7 +165,7 @@ function PriorityLabels({
                             />
                         </span>
                     </Close>
-                </OverlayTrigger>
+                </WithTooltip>
             )}
         </Priority>
     );

webapp/channels/src/components/common/comment_icon.tsx

@@ -2,11 +2,10 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage, useIntl} from 'react-intl';
+import {useIntl} from 'react-intl';
 
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
 import ReplyIcon from 'components/widgets/icons/reply_icon';
+import WithTooltip from 'components/with_tooltip';
 
 import type {Locations} from 'utils/constants';
 
@@ -42,23 +41,14 @@ const CommentIcon = ({
         iconStyle = `${iconStyle} ${searchStyle}`;
     }
 
-    const tooltip = (
-        <Tooltip
-            id='comment-icon-tooltip'
-            className='hidden-xs'
-        >
-            <FormattedMessage
-                id='post_info.comment_icon.tooltip.reply'
-                defaultMessage='Reply'
-            />
-        </Tooltip>
-    );
-
     return (
-        <OverlayTrigger
+        <WithTooltip
-            delayShow={500}
+            id='comment-icon-tooltip'
             placement='top'
-            overlay={tooltip}
+            title={intl.formatMessage({
+                id: 'post_info.comment_icon.tooltip.reply',
+                defaultMessage: 'Reply',
+            })}
         >
             <button
                 id={`${location}_commentIcon_${postId}`}
@@ -71,7 +61,7 @@ const CommentIcon = ({
                     {commentCountSpan}
                 </span>
             </button>
-        </OverlayTrigger>
+        </WithTooltip>
     );
 };
 

webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap

@@ -812,20 +812,16 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
                   >
                     <div
                       className="Acknowledgements-kPkVCv dNydui"
+                    >
+                      <WithTooltip
+                        id="post-priority-picker-ack-tooltip"
+                        placement="top"
+                        title="Acknowledgement will be requested"
                       >
                         <OverlayTrigger
                           defaultOverlayShown={false}
-                        delayShow={400}
+                          delay={400}
-                        overlay={
+                          overlay={<Unknown />}
-                          <Tooltip
-                            id="post-priority-picker-ack-tooltip"
-                          >
-                            <Memo(MemoizedFormattedMessage)
-                              defaultMessage="Acknowledgement will be requested"
-                              id="post_priority.request_acknowledgement.tooltip"
-                            />
-                          </Tooltip>
-                        }
                           placement="top"
                           trigger={
                             Array [
@@ -836,10 +832,9 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
                         >
                           <OverlayTrigger
                             defaultOverlayShown={false}
-                          delayShow={400}
+                            delay={400}
                             overlay={
                               <OverlayWrapper
-                              id="post-priority-picker-ack-tooltip"
                                 intl={
                                   Object {
                                     "$t": [Function],
@@ -879,12 +874,7 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
                                     "wrapRichTextChunksInFragment": undefined,
                                   }
                                 }
-                            >
-                              <Memo(MemoizedFormattedMessage)
-                                defaultMessage="Acknowledgement will be requested"
-                                id="post_priority.request_acknowledgement.tooltip"
                               />
-                            </OverlayWrapper>
                             }
                             placement="top"
                             trigger={
@@ -922,6 +912,7 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
                             </CheckCircleOutlineIcon>
                           </OverlayTrigger>
                         </OverlayTrigger>
+                      </WithTooltip>
                       <FormattedMessage
                         defaultMessage="Request acknowledgement"
                         id="post_priority.request_acknowledgement"

webapp/channels/src/components/sidebar/add_channel_dropdown.tsx

@@ -2,15 +2,14 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage, useIntl} from 'react-intl';
+import {useIntl} from 'react-intl';
 
 import {trackEvent} from 'actions/telemetry_actions';
 
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
 import {CreateAndJoinChannelsTour, InvitePeopleTour} from 'components/tours/onboarding_tour';
 import Menu from 'components/widgets/menu/menu';
 import MenuWrapper from 'components/widgets/menu/menu_wrapper';
+import WithTooltip from 'components/with_tooltip';
 
 type Props = {
     canCreateChannel: boolean;
@@ -146,28 +145,19 @@ const AddChannelDropdown = ({
         return null;
     }
 
-    const tooltip = (
-        <Tooltip
-            id='new-group-tooltip'
-            className='hidden-xs'
-        >
-            <FormattedMessage
-                id={'sidebar_left.add_channel_dropdown.browseOrCreateChannels'}
-                defaultMessage='Browse or create channels'
-            />
-        </Tooltip>
-    );
-
     return (
         <MenuWrapper
             className='AddChannelDropdown'
             onToggle={trackOpen}
             open={isAddChannelOpen}
         >
-            <OverlayTrigger
+            <WithTooltip
-                delayShow={500}
+                id='new-group-tooltip'
                 placement='top'
-                overlay={tooltip}
+                title={intl.formatMessage({
+                    id: 'sidebar_left.add_channel_dropdown.browseOrCreateChannels',
+                    defaultMessage: 'Browse or create channels',
+                })}
             >
                 <button
                     className={'AddChannelDropdown_dropdownButton'}
@@ -175,7 +165,7 @@ const AddChannelDropdown = ({
                 >
                     <i className='icon-plus'/>
                 </button>
-            </OverlayTrigger>
+            </WithTooltip>
             <Menu
                 id='AddChannelDropdown'
                 ariaLabel={intl.formatMessage({id: 'sidebar_left.add_channel_dropdown.dropdownAriaLabel', defaultMessage: 'Add Channel Dropdown'})}