[MM-60159] Migrate tooltips of "components/rhs_header_post/rhs_header_post.tsx" to WithTooltip (#28015)

webapp/channels/src/components/rhs_header_post/rhs_header_post.tsx

@@ -9,14 +9,13 @@ import type {Channel} from '@mattermost/types/channels';
 import KeyboardShortcutSequence, {
     KEYBOARD_SHORTCUTS,
 } from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence';
-import OverlayTrigger from 'components/overlay_trigger';
 import FollowButton from 'components/threading/common/follow_button';
-import Tooltip from 'components/tooltip';
 import CRTThreadsPaneTutorialTip
     from 'components/tours/crt_tour/crt_threads_pane_tutorial_tip';
+import WithTooltip from 'components/with_tooltip';
 
 import {getHistory} from 'utils/browser_history';
-import Constants, {RHSStates} from 'utils/constants';
+import {RHSStates} from 'utils/constants';
 
 import type {RhsState} from 'types/store/rhs';
 
@@ -79,12 +78,10 @@ class RhsHeaderPost extends React.PureComponent<Props> {
         const {isFollowingThread} = this.props;
         const {formatMessage} = this.props.intl;
         const closeSidebarTooltip = (
-            <Tooltip id='closeSidebarTooltip'>
+            <FormattedMessage
-                <FormattedMessage
+                id='rhs_header.closeSidebarTooltip'
-                    id='rhs_header.closeSidebarTooltip'
+                defaultMessage='Close'
-                    defaultMessage='Close'
+            />
-                />
-            </Tooltip>
         );
 
         let backToResultsTooltip;
@@ -93,52 +90,34 @@ class RhsHeaderPost extends React.PureComponent<Props> {
         case RHSStates.SEARCH:
         case RHSStates.MENTION:
             backToResultsTooltip = (
-                <Tooltip id='backToResultsTooltip'>
+                <FormattedMessage
-                    <FormattedMessage
+                    id='rhs_header.backToResultsTooltip'
-                        id='rhs_header.backToResultsTooltip'
+                    defaultMessage='Back to search results'
-                        defaultMessage='Back to search results'
+                />
-                    />
-                </Tooltip>
             );
             break;
         case RHSStates.FLAG:
             backToResultsTooltip = (
-                <Tooltip id='backToResultsTooltip'>
+                <FormattedMessage
-                    <FormattedMessage
+                    id='rhs_header.backToFlaggedTooltip'
-                        id='rhs_header.backToFlaggedTooltip'
+                    defaultMessage='Back to saved messages'
-                        defaultMessage='Back to saved messages'
+                />
-                    />
-                </Tooltip>
             );
             break;
         case RHSStates.PIN:
             backToResultsTooltip = (
-                <Tooltip id='backToResultsTooltip'>
+                <FormattedMessage
-                    <FormattedMessage
+                    id='rhs_header.backToPinnedTooltip'
-                        id='rhs_header.backToPinnedTooltip'
+                    defaultMessage='Back to pinned messages'
-                        defaultMessage='Back to pinned messages'
+                />
-                    />
-                </Tooltip>
             );
             break;
         }
 
-        const expandSidebarTooltip = (
+        //rhsHeaderTooltipContent contains tooltips content for expand or shrink sidebarTooltip.
-            <Tooltip id='expandSidebarTooltip'>
+        // if props.isExpanded is true, defaultMessage would feed from 'shrinkTooltip', else 'expandTooltip'
-                <FormattedMessage
+        const rhsHeaderTooltipContent = this.props.isExpanded ? (
-                    id='rhs_header.expandSidebarTooltip'
+            <>
-                    defaultMessage='Expand the right sidebar'
-                />
-                <KeyboardShortcutSequence
-                    shortcut={KEYBOARD_SHORTCUTS.navExpandSidebar}
-                    hideDescription={true}
-                    isInsideTooltip={true}
-                />
-            </Tooltip>
-        );
-
-        const shrinkSidebarTooltip = (
-            <Tooltip id='shrinkSidebarTooltip'>
                 <FormattedMessage
                     id='rhs_header.collapseSidebarTooltip'
                     defaultMessage='Collapse the right sidebar'
@@ -148,17 +127,29 @@ class RhsHeaderPost extends React.PureComponent<Props> {
                     hideDescription={true}
                     isInsideTooltip={true}
                 />
-            </Tooltip>
+            </>
+        ) : (
+            <>
+                <FormattedMessage
+                    id='rhs_header.expandSidebarTooltip'
+                    defaultMessage='Expand the right sidebar'
+                />
+                <KeyboardShortcutSequence
+                    shortcut={KEYBOARD_SHORTCUTS.navExpandSidebar}
+                    hideDescription={true}
+                    isInsideTooltip={true}
+                />
+            </>
         );
 
         const channelName = this.props.channel.display_name;
 
         if (backToResultsTooltip) {
             back = (
-                <OverlayTrigger
+                <WithTooltip
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                    id='backToResultsTooltip'
                     placement='top'
-                    overlay={backToResultsTooltip}
+                    title={backToResultsTooltip}
                 >
                     <button
                         className='sidebar--right__back btn btn-icon btn-sm'
@@ -169,7 +160,7 @@ class RhsHeaderPost extends React.PureComponent<Props> {
                             className='icon icon-arrow-back-ios'
                         />
                     </button>
-                </OverlayTrigger>
+                </WithTooltip>
             );
         }
 
@@ -199,10 +190,10 @@ class RhsHeaderPost extends React.PureComponent<Props> {
                         />
                     ) : null}
 
-                    <OverlayTrigger
+                    <WithTooltip
-                        delayShow={Constants.OVERLAY_TIME_DELAY}
+                        id={this.props.isExpanded ? 'shrinkSidebarTooltip' : 'expandSidebarTooltip'}
                         placement='bottom'
-                        overlay={this.props.isExpanded ? shrinkSidebarTooltip : expandSidebarTooltip}
+                        title={rhsHeaderTooltipContent}
                     >
                         <button
                             type='button'
@@ -219,12 +210,12 @@ class RhsHeaderPost extends React.PureComponent<Props> {
                                 aria-label={formatMessage({id: 'rhs_header.collapseSidebarTooltip.icon', defaultMessage: 'Collapse Sidebar Icon'})}
                             />
                         </button>
-                    </OverlayTrigger>
+                    </WithTooltip>
 
-                    <OverlayTrigger
+                    <WithTooltip
-                        delayShow={Constants.OVERLAY_TIME_DELAY}
+                        id='closeSidebarTooltip'
                         placement='top'
-                        overlay={closeSidebarTooltip}
+                        title={closeSidebarTooltip}
                     >
                         <button
                             id='rhsCloseButton'
@@ -238,7 +229,7 @@ class RhsHeaderPost extends React.PureComponent<Props> {
                                 aria-label={formatMessage({id: 'rhs_header.closeTooltip.icon', defaultMessage: 'Close Sidebar Icon'})}
                             />
                         </button>
-                    </OverlayTrigger>
+                    </WithTooltip>
                 </div>
                 {this.props.showThreadsTutorialTip && <CRTThreadsPaneTutorialTip/>}
             </div>