mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

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

Просмотр исходного кода
Этот коммит содержится в:
M-ZubairAhmed
2024-01-02 10:36:33 +00:00
коммит произвёл GitHub
родитель 64232a106e
Коммит 47bf846731
8 изменённых файлов: 127 добавлений и 181 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

15
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
className='sidebar--right__back'
<button
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'

13
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
className='sidebar--right__back'
<button
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>

11
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
href='#'
<button
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>
);
}

9
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
href='#'
<button
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>
);
}

7
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);

17
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();

208
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 styled from 'styled-components';
import {FormattedMessage, useIntl} from 'react-intl';
import KeyboardShortcutSequence, {
KEYBOARD_SHORTCUTS,
} from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence';
import LocalizedIcon from 'components/localized_icon';
import KeyboardShortcutSequence, {KEYBOARD_SHORTCUTS} from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence';
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`
border: 0px;
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;
};
export interface Props extends PropsFromRedux {
children: React.ReactNode;
}
class SearchResultsHeader extends React.PureComponent<Props> {
render(): React.ReactNode {
const closeSidebarTooltip = (
<Tooltip id='closeSidebarTooltip'>
<FormattedMessage
id='rhs_header.closeSidebarTooltip'
defaultMessage='Close'
/>
</Tooltip>
);
function SearchResultsHeader(props: Props) {
const {formatMessage} = useIntl();
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 closeSidebarTooltip = (
<Tooltip id='closeSidebarTooltip'>
<FormattedMessage
id='rhs_header.closeSidebarTooltip'
defaultMessage='Close'
/>
</Tooltip>
);
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>
);
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 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 (
<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>
const showExpand = props.previousRhsState !== RHSStates.CHANNEL_INFO;
<div className='pull-right'>
{showExpand && (
<OverlayTrigger
delayShow={Constants.OVERLAY_TIME_DELAY}
placement='bottom'
overlay={this.props.isExpanded ? shrinkSidebarTooltip : expandSidebarTooltip}
>
<button
type='button'
className='sidebar--right__expand btn btn-icon btn-sm'
onClick={this.props.actions.toggleRhsExpanded}
>
<i
className='icon icon-arrow-expand'
aria-label={this.props.intl.formatMessage({id: 'rhs_header.expandSidebarTooltip.icon', defaultMessage: 'Expand Sidebar Icon'})}
/>
<i
className='icon icon-arrow-collapse'
aria-label={this.props.intl.formatMessage({id: 'rhs_header.collapseSidebarTooltip.icon', defaultMessage: 'Collapse Sidebar Icon'})}
/>
</button>
</OverlayTrigger>
)}
return (
<div className='sidebar--right__header'>
<span className='sidebar--right__title'>
{props.canGoBack && (
<button
className='sidebar--right__back btn btn-icon btn-sm'
onClick={props.actions.goBack}
aria-label={formatMessage({id: 'rhs_header.back.icon', defaultMessage: 'Back Icon'})}
>
<i className='icon icon-arrow-back-ios'/>
</button>
)}
{props.children}
</span>
<div className='pull-right'>
{showExpand && (
<OverlayTrigger
delayShow={Constants.OVERLAY_TIME_DELAY}
placement='top'
overlay={closeSidebarTooltip}
placement='bottom'
overlay={props.isExpanded ? shrinkSidebarTooltip : expandSidebarTooltip}
>
<button
id='searchResultsCloseButton'
type='button'
className='sidebar--right__close btn btn-icon btn-sm'
aria-label='Close'
onClick={this.props.actions.closeRightHandSide}
className='sidebar--right__expand btn btn-icon btn-sm'
onClick={props.actions.toggleRhsExpanded}
>
<i
className='icon icon-close'
aria-label={this.props.intl.formatMessage({id: 'rhs_header.closeTooltip.icon', defaultMessage: 'Close Sidebar Icon'})}
className='icon icon-arrow-expand'
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;

28
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;