From 9150d5084ed0ad8a2027da38adce4e7686b95a2c Mon Sep 17 00:00:00 2001
From: Dipan Dhali <121673023+dipandhali2021@users.noreply.github.com>
Date: Fri, 27 Oct 2023 13:56:33 +0000
Subject: [PATCH] [MM-55103] Replace usage of LocalizedIcon in
 'rhs_card_header.tsx' with i/span tags (#25162)

---
 .../__snapshots__/rhs_card.test.tsx.snap      |  6 ++---
 .../rhs_card_header/rhs_card_header.tsx       | 25 ++++++++++---------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/webapp/channels/src/components/rhs_card/__snapshots__/rhs_card.test.tsx.snap b/webapp/channels/src/components/rhs_card/__snapshots__/rhs_card.test.tsx.snap
index f50152e24f..1cb350cf18 100644
--- a/webapp/channels/src/components/rhs_card/__snapshots__/rhs_card.test.tsx.snap
+++ b/webapp/channels/src/components/rhs_card/__snapshots__/rhs_card.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`comoponents/rhs_card/RhsCard should match on post when no plugin defini
 <div
   className="sidebar-right__body sidebar-right__card"
 >
-  <Connect(RhsCardHeader)
+  <Connect(injectIntl(RhsCardHeader))
     previousRhsState={Object {}}
   />
   <Scrollbars
@@ -108,7 +108,7 @@ exports[`comoponents/rhs_card/RhsCard should match on post when plugin defining
 <div
   className="sidebar-right__body sidebar-right__card"
 >
-  <Connect(RhsCardHeader)
+  <Connect(injectIntl(RhsCardHeader))
     previousRhsState={Object {}}
   />
   <Scrollbars
@@ -212,7 +212,7 @@ exports[`comoponents/rhs_card/RhsCard should match on post when plugin defining
 <div
   className="sidebar-right__body sidebar-right__card"
 >
-  <Connect(RhsCardHeader)
+  <Connect(injectIntl(RhsCardHeader))
     previousRhsState={Object {}}
   />
   <Scrollbars
diff --git a/webapp/channels/src/components/rhs_card_header/rhs_card_header.tsx b/webapp/channels/src/components/rhs_card_header/rhs_card_header.tsx
index 662ddb4bce..1afc07d13f 100644
--- a/webapp/channels/src/components/rhs_card_header/rhs_card_header.tsx
+++ b/webapp/channels/src/components/rhs_card_header/rhs_card_header.tsx
@@ -2,21 +2,20 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, injectIntl, type IntlShape} from 'react-intl';
 
 import KeyboardShortcutSequence, {
     KEYBOARD_SHORTCUTS,
 } from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence';
-import LocalizedIcon from 'components/localized_icon';
 import OverlayTrigger from 'components/overlay_trigger';
 import Tooltip from 'components/tooltip';
 
 import Constants, {RHSStates} from 'utils/constants';
-import {t} from 'utils/i18n';
 
 import type {RhsState} from 'types/store/rhs';
 
 type Props = {
+    intl: IntlShape;
     previousRhsState?: RhsState;
     isExpanded: boolean;
     actions: {
@@ -29,7 +28,7 @@ type Props = {
     };
 };
 
-export default class RhsCardHeader extends React.PureComponent<Props> {
+class RhsCardHeader extends React.PureComponent<Props> {
     handleBack = (e: React.MouseEvent<HTMLAnchorElement>): void => {
         e.preventDefault();
 
@@ -141,9 +140,9 @@ export default class RhsCardHeader extends React.PureComponent<Props> {
                         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={this.props.intl.formatMessage({id: 'generic_icons.back', defaultMessage: 'Back Icon'})}
                         />
                     </a>
                 </OverlayTrigger>
@@ -171,13 +170,13 @@ export default class RhsCardHeader extends React.PureComponent<Props> {
                             aria-label='Expand'
                             onClick={this.props.actions.toggleRhsExpanded}
                         >
-                            <LocalizedIcon
+                            <i
                                 className='icon icon-arrow-expand'
-                                ariaLabel={{id: t('rhs_header.expandSidebarTooltip.icon'), defaultMessage: 'Expand Sidebar Icon'}}
+                                aria-label={this.props.intl.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={this.props.intl.formatMessage({id: 'rhs_header.collapseSidebarTooltip.icon', defaultMessage: 'Collapse Sidebar Icon'})}
                             />
                         </button>
                     </OverlayTrigger>
@@ -192,9 +191,9 @@ export default class RhsCardHeader extends React.PureComponent<Props> {
                             aria-label='Close'
                             onClick={this.props.actions.closeRightHandSide}
                         >
-                            <LocalizedIcon
+                            <i
                                 className='icon icon-close'
-                                ariaLabel={{id: t('rhs_header.closeTooltip.icon'), defaultMessage: 'Close Sidebar Icon'}}
+                                aria-label={this.props.intl.formatMessage({id: 'rhs_header.closeTooltip.icon', defaultMessage: 'Close Sidebar Icon'})}
                             />
                         </button>
                     </OverlayTrigger>
@@ -203,3 +202,5 @@ export default class RhsCardHeader extends React.PureComponent<Props> {
         );
     }
 }
+
+export default injectIntl(RhsCardHeader);