[MM-58517] Migrate tooltips of "components/rhs_card_header/rhs_card_header.tsx" to WithTooltip (#27849)

webapp/channels/src/components/rhs_card_header/rhs_card_header.tsx

@@ -7,10 +7,9 @@ import {FormattedMessage, injectIntl, type IntlShape} from 'react-intl';
 import KeyboardShortcutSequence, {
     KEYBOARD_SHORTCUTS,
 } from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence';
-import OverlayTrigger from 'components/overlay_trigger';
+import WithTooltip from 'components/with_tooltip';
-import Tooltip from 'components/tooltip';
 
-import Constants, {RHSStates} from 'utils/constants';
+import {RHSStates} from 'utils/constants';
 
 import type {RhsState} from 'types/store/rhs';
 
@@ -55,53 +54,38 @@ class RhsCardHeader extends React.PureComponent<Props> {
 
     render(): React.ReactNode {
         let back;
-        let backToResultsTooltip;
+        let title;
 
         switch (this.props.previousRhsState) {
         case RHSStates.SEARCH:
         case RHSStates.MENTION:
-            backToResultsTooltip = (
+            title = (
-                <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 = (
+            title = (
-                <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 = (
+            title = (
-                <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 closeSidebarTooltip = (
-            <Tooltip id='closeSidebarTooltip'>
-                <FormattedMessage
-                    id='rhs_header.closeSidebarTooltip'
-                    defaultMessage='Close'
-                />
-            </Tooltip>
-        );
-
         const expandSidebarTooltip = (
-            <Tooltip id='expandSidebarTooltip'>
+            <>
                 <FormattedMessage
                     id='rhs_header.expandSidebarTooltip'
                     defaultMessage='Expand the right sidebar'
@@ -111,11 +95,11 @@ class RhsCardHeader extends React.PureComponent<Props> {
                     hideDescription={true}
                     isInsideTooltip={true}
                 />
-            </Tooltip>
+            </>
         );
 
         const shrinkSidebarTooltip = (
-            <Tooltip id='shrinkSidebarTooltip'>
+            <>
                 <FormattedMessage
                     id='rhs_header.collapseSidebarTooltip'
                     defaultMessage='Collapse the right sidebar'
@@ -125,15 +109,15 @@ class RhsCardHeader extends React.PureComponent<Props> {
                     hideDescription={true}
                     isInsideTooltip={true}
                 />
-            </Tooltip>
+            </>
         );
 
-        if (backToResultsTooltip) {
+        if (title) {
             back = (
-                <OverlayTrigger
+                <WithTooltip
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                    id='backToResultsTooltip'
+                    title={title}
                     placement='top'
-                    overlay={backToResultsTooltip}
                 >
                     <button
                         className='sidebar--right__back btn btn-icon btn-sm'
@@ -144,7 +128,7 @@ class RhsCardHeader extends React.PureComponent<Props> {
                             className='icon icon-arrow-back-ios'
                         />
                     </button>
-                </OverlayTrigger>
+                </WithTooltip>
             );
         }
 
@@ -158,10 +142,10 @@ class RhsCardHeader extends React.PureComponent<Props> {
                     />
                 </span>
                 <div className='pull-right'>
-                    <OverlayTrigger
+                    <WithTooltip
-                        delayShow={Constants.OVERLAY_TIME_DELAY}
+                        id={this.props.isExpanded ? 'shrinkSidebarTooltip' : 'expandSidebarTooltip'}
+                        title={this.props.isExpanded ? shrinkSidebarTooltip : expandSidebarTooltip}
                         placement='bottom'
-                        overlay={this.props.isExpanded ? shrinkSidebarTooltip : expandSidebarTooltip}
                     >
                         <button
                             type='button'
@@ -178,11 +162,16 @@ class RhsCardHeader extends React.PureComponent<Props> {
                                 aria-label={this.props.intl.formatMessage({id: 'rhs_header.collapseSidebarTooltip.icon', defaultMessage: 'Collapse Sidebar Icon'})}
                             />
                         </button>
-                    </OverlayTrigger>
+                    </WithTooltip>
-                    <OverlayTrigger
+                    <WithTooltip
-                        delayShow={Constants.OVERLAY_TIME_DELAY}
+                        id='closeSidebarTooltip'
-                        placement='top'
+                        title={
-                        overlay={closeSidebarTooltip}
+                            <FormattedMessage
+                                id='rhs_header.closeSidebarTooltip'
+                                defaultMessage='Close'
+                            />
+                        }
+                        placement={'top'}
                     >
                         <button
                             type='button'
@@ -195,7 +184,7 @@ class RhsCardHeader extends React.PureComponent<Props> {
                                 aria-label={this.props.intl.formatMessage({id: 'rhs_header.closeTooltip.icon', defaultMessage: 'Close Sidebar Icon'})}
                             />
                         </button>
-                    </OverlayTrigger>
+                    </WithTooltip>
                 </div>
             </div>
         );