[MM-60158] Migrate tooltips of "components/search_results_header/search_results_header.tsx" to WithTooltip (#28005)

webapp/channels/src/components/search_results_header/search_results_header.tsx

@@ -5,10 +5,9 @@ import React from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
 import KeyboardShortcutSequence, {KEYBOARD_SHORTCUTS} from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence';
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
+import WithTooltip from 'components/with_tooltip';
 
-import Constants, {RHSStates} from 'utils/constants';
+import {RHSStates} from 'utils/constants';
 
 import type {PropsFromRedux} from './index';
 
@@ -19,31 +18,12 @@ export interface Props extends PropsFromRedux {
 function SearchResultsHeader(props: Props) {
     const {formatMessage} = useIntl();
 
-    const closeSidebarTooltip = (
-        <Tooltip id='closeSidebarTooltip'>
-            <FormattedMessage
-                id='rhs_header.closeSidebarTooltip'
-                defaultMessage='Close'
-            />
-        </Tooltip>
-    );
+    const showExpand = props.previousRhsState !== RHSStates.CHANNEL_INFO;
 
-    const expandSidebarTooltip = (
-        <Tooltip id='expandSidebarTooltip'>
-            <FormattedMessage
-                id='rhs_header.expandSidebarTooltip'
-                defaultMessage='Expand the right sidebar'
-            />
-            <KeyboardShortcutSequence
-                shortcut={KEYBOARD_SHORTCUTS.navExpandSidebar}
-                hideDescription={true}
-                isInsideTooltip={true}
-            />
-        </Tooltip>
-    );
-
-    const shrinkSidebarTooltip = (
-        <Tooltip id='shrinkSidebarTooltip'>
+    // sidebarTooltipContent contains tooltips content for expand or shrink sidebarTooltip.
+    // if props.isExpanded is true, defaultMessage would feed from 'shrinkTooltip', else 'expandTooltip'
+    const sidebarTooltipContent = props.isExpanded ? (
+        <>
             <FormattedMessage
                 id='rhs_header.collapseSidebarTooltip'
                 defaultMessage='Collapse the right sidebar'
@@ -53,11 +33,21 @@ function SearchResultsHeader(props: 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 showExpand = props.previousRhsState !== RHSStates.CHANNEL_INFO;
-
     return (
         <div className='sidebar--right__header'>
             <span className='sidebar--right__title'>
@@ -74,10 +64,10 @@ function SearchResultsHeader(props: Props) {
             </span>
             <div className='pull-right'>
                 {showExpand && (
-                    <OverlayTrigger
-                        delayShow={Constants.OVERLAY_TIME_DELAY}
+                    <WithTooltip
                         placement='bottom'
-                        overlay={props.isExpanded ? shrinkSidebarTooltip : expandSidebarTooltip}
+                        id={props.isExpanded ? 'shrinkSidebarTooltip' : 'expandSidebarTooltip'}
+                        title={sidebarTooltipContent}
                     >
                         <button
                             type='button'
@@ -93,12 +83,17 @@ function SearchResultsHeader(props: Props) {
                                 aria-label={formatMessage({id: 'rhs_header.collapseSidebarTooltip.icon', defaultMessage: 'Collapse Sidebar Icon'})}
                             />
                         </button>
-                    </OverlayTrigger>
+                    </WithTooltip>
                 )}
-                <OverlayTrigger
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                <WithTooltip
                     placement='top'
-                    overlay={closeSidebarTooltip}
+                    id='closeSidebarTooltip'
+                    title={
+                        <FormattedMessage
+                            id='rhs_header.closeSidebarTooltip'
+                            defaultMessage='Close'
+                        />
+                    }
                 >
                     <button
                         id='searchResultsCloseButton'
@@ -112,7 +107,7 @@ function SearchResultsHeader(props: Props) {
                             aria-label={formatMessage({id: 'rhs_header.closeTooltip.icon', defaultMessage: 'Close Sidebar Icon'})}
                         />
                     </button>
-                </OverlayTrigger>
+                </WithTooltip>
             </div>
         </div>
     );