[MM-55104] Replace usage of LocalizedIcon in 'rhs_header_post.tsx' with i/span tags (#25159)

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

@@ -2,14 +2,13 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, injectIntl, type WrappedComponentProps} from 'react-intl';
 
 import type {Channel} from '@mattermost/types/channels';
 
 import KeyboardShortcutSequence, {
     KEYBOARD_SHORTCUTS,
 } from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence';
-import LocalizedIcon from 'components/localized_icon';
 import OverlayTrigger from 'components/overlay_trigger';
 import FollowButton from 'components/threading/common/follow_button';
 import Tooltip from 'components/tooltip';
@@ -18,11 +17,10 @@ import CRTThreadsPaneTutorialTip
 
 import {getHistory} from 'utils/browser_history';
 import Constants, {RHSStates} from 'utils/constants';
-import {t} from 'utils/i18n';
 
 import type {RhsState} from 'types/store/rhs';
 
-interface RhsHeaderPostProps {
+interface Props extends WrappedComponentProps {
     isExpanded: boolean;
     isMobileView: boolean;
     rootPostId: string;
@@ -45,7 +43,7 @@ interface RhsHeaderPostProps {
     setThreadFollow: (userId: string, teamId: string, threadId: string, newState: boolean) => void;
 }
 
-export default class RhsHeaderPost extends React.PureComponent<RhsHeaderPostProps> {
+class RhsHeaderPost extends React.PureComponent<Props> {
     handleBack = (e: React.MouseEvent) => {
         e.preventDefault();
 
@@ -79,6 +77,7 @@ export default class RhsHeaderPost extends React.PureComponent<RhsHeaderPostProp
     render() {
         let back;
         const {isFollowingThread} = this.props;
+        const {formatMessage} = this.props.intl;
         const closeSidebarTooltip = (
             <Tooltip id='closeSidebarTooltip'>
                 <FormattedMessage
@@ -166,9 +165,9 @@ export default class RhsHeaderPost extends React.PureComponent<RhsHeaderPostProp
                         onClick={this.handleBack}
                         className='sidebar--right__back'
                     >
-                        <LocalizedIcon
+                        <i
                             className='icon icon-arrow-back-ios'
-                            ariaLabel={{id: t('generic_icons.back'), defaultMessage: 'Back Icon'}}
+                            aria-label={formatMessage({id: 'generic_icons.back', defaultMessage: 'Back Icon'})}
                         />
                     </a>
                 </OverlayTrigger>
@@ -212,13 +211,13 @@ export default class RhsHeaderPost extends React.PureComponent<RhsHeaderPostProp
                             aria-label='Expand'
                             onClick={this.props.toggleRhsExpanded}
                         >
-                            <LocalizedIcon
+                            <i
                                 className='icon icon-arrow-expand'
-                                ariaLabel={{id: t('rhs_header.expandSidebarTooltip.icon'), defaultMessage: 'Expand Sidebar Icon'}}
+                                aria-label={formatMessage({id: 'rhs_header.expandSidebarTooltip.icon', defaultMessage: 'Expand Sidebar Icon'})}
                             />
-                            <LocalizedIcon
+                            <i
                                 className='icon icon-arrow-collapse'
-                                ariaLabel={{id: t('rhs_header.collapseSidebarTooltip.icon'), defaultMessage: 'Collapse Sidebar Icon'}}
+                                aria-label={formatMessage({id: 'rhs_header.collapseSidebarTooltip.icon', defaultMessage: 'Collapse Sidebar Icon'})}
                             />
                         </button>
                     </OverlayTrigger>
@@ -235,9 +234,9 @@ export default class RhsHeaderPost extends React.PureComponent<RhsHeaderPostProp
                             aria-label='Close'
                             onClick={this.props.closeRightHandSide}
                         >
-                            <LocalizedIcon
+                            <i
                                 className='icon icon-close'
-                                ariaLabel={{id: t('rhs_header.closeTooltip.icon'), defaultMessage: 'Close Sidebar Icon'}}
+                                aria-label={formatMessage({id: 'rhs_header.closeTooltip.icon', defaultMessage: 'Close Sidebar Icon'})}
                             />
                         </button>
                     </OverlayTrigger>
@@ -247,3 +246,5 @@ export default class RhsHeaderPost extends React.PureComponent<RhsHeaderPostProp
         );
     }
 }
+
+export default injectIntl(RhsHeaderPost);

webapp/channels/src/components/rhs_thread/__snapshots__/rhs_thread.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`components/RhsThread should match snapshot 1`] = `
   className="sidebar-right__body"
   id="rhsContainer"
 >
-  <Connect(RhsHeaderPost)
+  <Connect(injectIntl(RhsHeaderPost))
     channel={
       Object {
         "create_at": 0,