[MM-56387] Replace missed usage of LocalizedIcon in 'search_results_header.tsx' with i/span tags (#25826)

webapp/channels/src/components/channel_info_rhs/header.tsx

@@ -23,11 +23,6 @@ const Icon = styled.i`
     font-size:12px;
 `;
 
-const BackButton = styled.button`
-    border: 0px;
-    background: transparent;
-`;
-
 const HeaderTitle = styled.span`
     line-height: 2.4rem;
 `;
@@ -46,19 +41,17 @@ const Header = ({channel, isArchived, isMobile, onClose}: Props) => {
     return (
         <div className='sidebar--right__header'>
             <span className='sidebar--right__title'>
-
                 {isMobile && (
-                    <BackButton
+                    <button
-                        className='sidebar--right__back'
+                        className='sidebar--right__back btn btn-icon btn-sm'
                         onClick={onClose}
+                        aria-label={formatMessage({id: 'rhs_header.back.icon', defaultMessage: 'Back Icon'})}
                     >
                         <i
                             className='icon icon-arrow-back-ios'
-                            aria-label='Back Icon'
                         />
-                    </BackButton>
+                    </button>
                 )}
-
                 <HeaderTitle>
                     <FormattedMessage
                         id='channel_info_rhs.header.title'

webapp/channels/src/components/channel_members_rhs/header.tsx

@@ -20,11 +20,6 @@ interface Props {
     goBack: () => void;
 }
 
-const BackButton = styled.button`
-    border: 0;
-    background: transparent;
-`;
-
 const HeaderTitle = styled.span`
     line-height: 2.4rem;
 `;
@@ -46,15 +41,15 @@ const Header = ({channel, canGoBack, onClose, goBack}: Props) => {
             <span className='sidebar--right__title'>
 
                 {canGoBack && (
-                    <BackButton
+                    <button
-                        className='sidebar--right__back'
+                        className='sidebar--right__back btn btn-icon btn-sm'
                         onClick={goBack}
+                        aria-label={formatMessage({id: 'rhs_header.back.icon', defaultMessage: 'Back Icon'})}
                     >
                         <i
                             className='icon icon-arrow-back-ios'
-                            aria-label='Back Icon'
                         />
-                    </BackButton>
+                    </button>
                 )}
 
                 <HeaderTitle>

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

@@ -29,7 +29,7 @@ type Props = {
 };
 
 class RhsCardHeader extends React.PureComponent<Props> {
-    handleBack = (e: React.MouseEvent<HTMLAnchorElement>): void => {
+    handleBack = (e: React.MouseEvent<HTMLButtonElement>): void => {
         e.preventDefault();
 
         switch (this.props.previousRhsState) {
@@ -135,16 +135,15 @@ class RhsCardHeader extends React.PureComponent<Props> {
                     placement='top'
                     overlay={backToResultsTooltip}
                 >
-                    <a
+                    <button
-                        href='#'
+                        className='sidebar--right__back btn btn-icon btn-sm'
                         onClick={this.handleBack}
-                        className='sidebar--right__back'
+                        aria-label={this.props.intl.formatMessage({id: 'rhs_header.back.icon', defaultMessage: 'Back Icon'})}
                     >
                         <i
                             className='icon icon-arrow-back-ios'
-                            aria-label={this.props.intl.formatMessage({id: 'generic_icons.back', defaultMessage: 'Back Icon'})}
                         />
-                    </a>
+                    </button>
                 </OverlayTrigger>
             );
         }

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

@@ -160,16 +160,15 @@ class RhsHeaderPost extends React.PureComponent<Props> {
                     placement='top'
                     overlay={backToResultsTooltip}
                 >
-                    <a
+                    <button
-                        href='#'
+                        className='sidebar--right__back btn btn-icon btn-sm'
                         onClick={this.handleBack}
-                        className='sidebar--right__back'
+                        aria-label={formatMessage({id: 'rhs_header.back.icon', defaultMessage: 'Back Icon'})}
                     >
                         <i
                             className='icon icon-arrow-back-ios'
-                            aria-label={formatMessage({id: 'generic_icons.back', defaultMessage: 'Back Icon'})}
                         />
-                    </a>
+                    </button>
                 </OverlayTrigger>
             );
         }

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

@@ -1,6 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import type {ConnectedProps} from 'react-redux';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import type {AnyAction, Dispatch} from 'redux';
@@ -45,4 +46,8 @@ function mapDispatchToProps(dispatch: Dispatch<AnyAction>) {
     };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(SearchResultsHeader);
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+export type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export default connector(SearchResultsHeader);

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

@@ -8,15 +8,16 @@ import {RHSStates} from 'utils/constants';
 
 import type {RhsState} from 'types/store/rhs';
 
-import Header from './search_results_header';
+import SearchResultsHeader from './search_results_header';
 
 describe('search_results_header', () => {
     test('should display back button when the parent is channel info', () => {
         renderWithContext(
-            <Header
+            <SearchResultsHeader
                 previousRhsState={RHSStates.CHANNEL_INFO as RhsState}
                 canGoBack={true}
                 isExpanded={false}
+                channelId='channel_id'
                 actions={{
                     closeRightHandSide: jest.fn(),
                     toggleRhsExpanded: jest.fn(),
@@ -24,17 +25,18 @@ describe('search_results_header', () => {
                 }}
             >
                 {'Title'}
-            </Header>,
+            </SearchResultsHeader>,
         );
 
         expect(screen.getByLabelText('Back Icon')).toBeInTheDocument();
     });
     test('should NOT diplay expand when the parent is channel info', () => {
         renderWithContext(
-            <Header
+            <SearchResultsHeader
                 previousRhsState={RHSStates.CHANNEL_INFO as RhsState}
                 canGoBack={true}
                 isExpanded={false}
+                channelId='channel_id'
                 actions={{
                     closeRightHandSide: jest.fn(),
                     toggleRhsExpanded: jest.fn(),
@@ -42,17 +44,18 @@ describe('search_results_header', () => {
                 }}
             >
                 {'Title'}
-            </Header>,
+            </SearchResultsHeader>,
         );
 
         expect(screen.queryByLabelText('Expand Sidebar Icon')).not.toBeInTheDocument();
     });
     test('should diplay expand when the parent is NOT channel info', () => {
         renderWithContext(
-            <Header
+            <SearchResultsHeader
                 previousRhsState={RHSStates.FLAG as RhsState}
                 canGoBack={true}
                 isExpanded={false}
+                channelId='channel_id'
                 actions={{
                     closeRightHandSide: jest.fn(),
                     toggleRhsExpanded: jest.fn(),
@@ -60,7 +63,7 @@ describe('search_results_header', () => {
                 }}
             >
                 {'Title'}
-            </Header>,
+            </SearchResultsHeader>,
         );
 
         expect(screen.getByLabelText('Expand Sidebar Icon')).toBeInTheDocument();

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

@@ -2,148 +2,120 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage, type WrappedComponentProps, injectIntl} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
-import styled from 'styled-components';
 
-import KeyboardShortcutSequence, {
+import KeyboardShortcutSequence, {KEYBOARD_SHORTCUTS} from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence';
-    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';
+import type {PropsFromRedux} from './index';
 
-const BackButton = styled.button`
+export interface Props extends PropsFromRedux {
-    border: 0px;
+    children: React.ReactNode;
-    background: transparent;
-`;
-
-const BackButtonIcon = styled(LocalizedIcon)`
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 18px;
-`;
-
-interface Props extends WrappedComponentProps {
-    isExpanded: boolean;
-    previousRhsState?: RhsState;
-    canGoBack: boolean;
-    children?: React.ReactNode;
-    actions: {
-        closeRightHandSide: () => void;
-        toggleRhsExpanded: () => void;
-        goBack: () => void;
-    };
 }
 
-class SearchResultsHeader extends React.PureComponent<Props> {
+function SearchResultsHeader(props: Props) {
-    render(): React.ReactNode {
+    const {formatMessage} = useIntl();
-        const closeSidebarTooltip = (
-            <Tooltip id='closeSidebarTooltip'>
-                <FormattedMessage
-                    id='rhs_header.closeSidebarTooltip'
-                    defaultMessage='Close'
-                />
-            </Tooltip>
-        );
 
-        const expandSidebarTooltip = (
+    const closeSidebarTooltip = (
-            <Tooltip id='expandSidebarTooltip'>
+        <Tooltip id='closeSidebarTooltip'>
-                <FormattedMessage
+            <FormattedMessage
-                    id='rhs_header.expandSidebarTooltip'
+                id='rhs_header.closeSidebarTooltip'
-                    defaultMessage='Expand the right sidebar'
+                defaultMessage='Close'
-                />
+            />
-                <KeyboardShortcutSequence
+        </Tooltip>
-                    shortcut={KEYBOARD_SHORTCUTS.navExpandSidebar}
+    );
-                    hideDescription={true}
-                    isInsideTooltip={true}
-                />
-            </Tooltip>
-        );
 
-        const shrinkSidebarTooltip = (
+    const expandSidebarTooltip = (
-            <Tooltip id='shrinkSidebarTooltip'>
+        <Tooltip id='expandSidebarTooltip'>
-                <FormattedMessage
+            <FormattedMessage
-                    id='rhs_header.collapseSidebarTooltip'
+                id='rhs_header.expandSidebarTooltip'
-                    defaultMessage='Collapse the right sidebar'
+                defaultMessage='Expand the right sidebar'
-                />
+            />
-                <KeyboardShortcutSequence
+            <KeyboardShortcutSequence
-                    shortcut={KEYBOARD_SHORTCUTS.navExpandSidebar}
+                shortcut={KEYBOARD_SHORTCUTS.navExpandSidebar}
-                    hideDescription={true}
+                hideDescription={true}
-                    isInsideTooltip={true}
+                isInsideTooltip={true}
-                />
+            />
-            </Tooltip>
+        </Tooltip>
-        );
+    );
 
-        const showExpand = this.props.previousRhsState !== RHSStates.CHANNEL_INFO;
+    const shrinkSidebarTooltip = (
+        <Tooltip id='shrinkSidebarTooltip'>
+            <FormattedMessage
+                id='rhs_header.collapseSidebarTooltip'
+                defaultMessage='Collapse the right sidebar'
+            />
+            <KeyboardShortcutSequence
+                shortcut={KEYBOARD_SHORTCUTS.navExpandSidebar}
+                hideDescription={true}
+                isInsideTooltip={true}
+            />
+        </Tooltip>
+    );
 
-        return (
+    const showExpand = props.previousRhsState !== RHSStates.CHANNEL_INFO;
-            <div className='sidebar--right__header'>
-                <span className='sidebar--right__title'>
-                    {this.props.canGoBack && (
-                        <BackButton
-                            className='sidebar--right__back'
-                            onClick={() => this.props.actions.goBack()}
-                        >
-                            <BackButtonIcon
-                                className='icon-arrow-back-ios'
-                                ariaLabel={{id: t('rhs_header.back.icon'), defaultMessage: 'Back Icon'}}
-                            />
-                        </BackButton>
-                    )}
-                    {this.props.children}
-                </span>
 
-                <div className='pull-right'>
+    return (
-                    {showExpand && (
+        <div className='sidebar--right__header'>
-                        <OverlayTrigger
+            <span className='sidebar--right__title'>
-                            delayShow={Constants.OVERLAY_TIME_DELAY}
+                {props.canGoBack && (
-                            placement='bottom'
+                    <button
-                            overlay={this.props.isExpanded ? shrinkSidebarTooltip : expandSidebarTooltip}
+                        className='sidebar--right__back btn btn-icon btn-sm'
-                        >
+                        onClick={props.actions.goBack}
-                            <button
+                        aria-label={formatMessage({id: 'rhs_header.back.icon', defaultMessage: 'Back Icon'})}
-                                type='button'
+                    >
-                                className='sidebar--right__expand btn btn-icon btn-sm'
+                        <i className='icon icon-arrow-back-ios'/>
-                                onClick={this.props.actions.toggleRhsExpanded}
+                    </button>
-                            >
+                )}
-                                <i
+                {props.children}
-                                    className='icon icon-arrow-expand'
+            </span>
-                                    aria-label={this.props.intl.formatMessage({id: 'rhs_header.expandSidebarTooltip.icon', defaultMessage: 'Expand Sidebar Icon'})}
+            <div className='pull-right'>
-                                />
+                {showExpand && (
-                                <i
-                                    className='icon icon-arrow-collapse'
-                                    aria-label={this.props.intl.formatMessage({id: 'rhs_header.collapseSidebarTooltip.icon', defaultMessage: 'Collapse Sidebar Icon'})}
-                                />
-                            </button>
-                        </OverlayTrigger>
-                    )}
                     <OverlayTrigger
                         delayShow={Constants.OVERLAY_TIME_DELAY}
-                        placement='top'
+                        placement='bottom'
-                        overlay={closeSidebarTooltip}
+                        overlay={props.isExpanded ? shrinkSidebarTooltip : expandSidebarTooltip}
                     >
                         <button
-                            id='searchResultsCloseButton'
                             type='button'
-                            className='sidebar--right__close btn btn-icon btn-sm'
+                            className='sidebar--right__expand btn btn-icon btn-sm'
-                            aria-label='Close'
+                            onClick={props.actions.toggleRhsExpanded}
-                            onClick={this.props.actions.closeRightHandSide}
                         >
                             <i
-                                className='icon icon-close'
+                                className='icon icon-arrow-expand'
-                                aria-label={this.props.intl.formatMessage({id: 'rhs_header.closeTooltip.icon', defaultMessage: 'Close Sidebar Icon'})}
+                                aria-label={formatMessage({id: 'rhs_header.expandSidebarTooltip.icon', defaultMessage: 'Expand Sidebar Icon'})}
+                            />
+                            <i
+                                className='icon icon-arrow-collapse'
+                                aria-label={formatMessage({id: 'rhs_header.collapseSidebarTooltip.icon', defaultMessage: 'Collapse Sidebar Icon'})}
                             />
                         </button>
                     </OverlayTrigger>
-                </div>
+                )}
+                <OverlayTrigger
+                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                    placement='top'
+                    overlay={closeSidebarTooltip}
+                >
+                    <button
+                        id='searchResultsCloseButton'
+                        type='button'
+                        className='sidebar--right__close btn btn-icon btn-sm'
+                        aria-label='Close'
+                        onClick={props.actions.closeRightHandSide}
+                    >
+                        <i
+                            className='icon icon-close'
+                            aria-label={formatMessage({id: 'rhs_header.closeTooltip.icon', defaultMessage: 'Close Sidebar Icon'})}
+                        />
+                    </button>
+                </OverlayTrigger>
             </div>
-        );
+        </div>
-    }
+    );
 }
 
-export default injectIntl(SearchResultsHeader);
+export default SearchResultsHeader;

webapp/channels/src/sass/layout/_sidebar-right.scss

@@ -87,30 +87,6 @@
         flex-direction: column;
     }
 
-    .sidebar--right__back {
-        display: flex;
-        width: 2.4rem;
-        height: 2.4rem;
-        align-items: center;
-        justify-content: center;
-        margin-right: 4px;
-        border-radius: 4px;
-        color: rgba(var(--center-channel-color-rgb), 0.56);
-        font-size: 12px;
-        text-decoration: none;
-        transition: all 0.2s ease-in;
-
-        &:hover {
-            background-color: rgba(var(--center-channel-color-rgb), 0.08);
-            color: rgba(var(--center-channel-color-rgb), 0.72);
-        }
-
-        &:active {
-            background-color: rgba(var(--button-bg-rgb), 0.08);
-            color: v(button-bg);
-        }
-    }
-
     .sidebar-right__body {
         display: flex;
         height: 100%;
@@ -237,6 +213,10 @@
             font-size: 20px;
         }
 
+        .sidebar--right__back {
+            margin-right: 4px !important;
+        }
+
         .controls {
             display: flex;
             align-items: center;