[MM-54877] Replace usage of LocalizedIcon in "select_team_item.tsx" & "file_upload_overlay.tsx" with i/span tags (#25071)

Этот коммит содержится в:
M-ZubairAhmed
2023-10-24 20:30:19 +05:30
коммит произвёл GitHub
родитель 86812b9b9e
Коммит 4a0cf786be
5 изменённых файлов: 75 добавлений и 96 удалений

Просмотреть файл

@@ -16,14 +16,9 @@ exports[`components/FileUploadOverlay should match snapshot when file upload is
src={null}
/>
<span>
<LocalizedIcon
<i
className="fa fa-upload"
title={
Object {
"defaultMessage": "Upload Icon",
"id": "generic_icons.upload",
}
}
title="Upload Icon"
/>
<MemoizedFormattedMessage
defaultMessage="Drop a file to upload it."
@@ -56,14 +51,9 @@ exports[`components/FileUploadOverlay should match snapshot when file upload is
src={null}
/>
<span>
<LocalizedIcon
<i
className="fa fa-upload"
title={
Object {
"defaultMessage": "Upload Icon",
"id": "generic_icons.upload",
}
}
title="Upload Icon"
/>
<MemoizedFormattedMessage
defaultMessage="Drop a file to upload it."
@@ -96,14 +86,9 @@ exports[`components/FileUploadOverlay should match snapshot when file upload is
src={null}
/>
<span>
<LocalizedIcon
<i
className="fa fa-upload"
title={
Object {
"defaultMessage": "Upload Icon",
"id": "generic_icons.upload",
}
}
title="Upload Icon"
/>
<MemoizedFormattedMessage
defaultMessage="Drop a file to upload it."

Просмотреть файл

@@ -2,19 +2,18 @@
// See LICENSE.txt for license information.
import React from 'react';
import {FormattedMessage} from 'react-intl';
import {FormattedMessage, useIntl} from 'react-intl';
import fileOverlayImage from 'images/filesOverlay.png';
import overlayLogoImage from 'images/logoWhite.png';
import {t} from 'utils/i18n';
import LocalizedIcon from './localized_icon';
type Props = {
overlayType: string;
}
const FileUploadOverlay: React.FC<Props> = (props: Props) => {
const FileUploadOverlay = (props: Props) => {
const {formatMessage} = useIntl();
let overlayClass = 'file-overlay hidden';
if (props.overlayType === 'right') {
overlayClass += ' right-file-overlay';
@@ -32,9 +31,9 @@ const FileUploadOverlay: React.FC<Props> = (props: Props) => {
alt='Files'
/>
<span>
<LocalizedIcon
<i
className='fa fa-upload'
title={{id: t('generic_icons.upload'), defaultMessage: 'Upload Icon'}}
title={formatMessage({id: 'generic_icons.upload', defaultMessage: 'Upload Icon'})}
/>
<FormattedMessage
id='upload_overlay.info'

Просмотреть файл

@@ -15,15 +15,8 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
>
team_display_name
</span>
<LocalizedIcon
<span
className="fa fa-refresh fa-spin right signup-team__icon"
component="span"
title={
Object {
"defaultMessage": "Loading Icon",
"id": "generic_icons.loading",
}
}
/>
</a>
</div>
@@ -44,24 +37,11 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
>
team_display_name
</span>
<LocalizedIcon
<i
className="fa fa-lock light"
title={
Object {
"defaultMessage": "Private team",
"id": "select_team.private.icon",
}
}
/>
<LocalizedIcon
<span
className="fa fa-angle-right right signup-team__icon"
component="span"
title={
Object {
"defaultMessage": "Join Team Icon",
"id": "select_team.join.icon",
}
}
/>
</a>
</div>
@@ -81,14 +61,8 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
>
team_display_name
</span>
<LocalizedIcon
<i
className="fa fa-lock light"
title={
Object {
"defaultMessage": "Private team",
"id": "select_team.private.icon",
}
}
/>
</a>
</div>
@@ -109,15 +83,8 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
>
team_display_name
</span>
<LocalizedIcon
<span
className="fa fa-angle-right right signup-team__icon"
component="span"
title={
Object {
"defaultMessage": "Join Team Icon",
"id": "select_team.join.icon",
}
}
/>
</a>
</div>
@@ -153,6 +120,24 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
"props": Object {
"canJoinPrivateTeams": false,
"canJoinPublicTeams": true,
"intl": Object {
"formatMessage": [MockFunction] {
"calls": Array [
Array [
Object {
"defaultMessage": "Join Team Icon",
"id": "select_team.join.icon",
},
],
],
"results": Array [
Object {
"type": "return",
"value": undefined,
},
],
},
},
"loading": false,
"onTeamClick": [MockFunction],
"team": Object {
@@ -192,6 +177,26 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
"_element": <SelectTeamItem
canJoinPrivateTeams={false}
canJoinPublicTeams={true}
intl={
Object {
"formatMessage": [MockFunction] {
"calls": Array [
Array [
Object {
"defaultMessage": "Join Team Icon",
"id": "select_team.join.icon",
},
],
],
"results": Array [
Object {
"type": "return",
"value": undefined,
},
],
},
}
}
loading={false}
onTeamClick={[MockFunction]}
team={
@@ -248,15 +253,8 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
>
team_display_name
</span>
<LocalizedIcon
<span
className="fa fa-angle-right right signup-team__icon"
component="span"
title={
Object {
"defaultMessage": "Join Team Icon",
"id": "select_team.join.icon",
}
}
/>
</a>
</div>,
@@ -300,15 +298,8 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
>
team_display_name
</span>
<LocalizedIcon
<span
className="fa fa-angle-right right signup-team__icon"
component="span"
title={
Object {
"defaultMessage": "Join Team Icon",
"id": "select_team.join.icon",
}
}
/>
</a>
</div>

Просмотреть файл

@@ -6,7 +6,9 @@ import React from 'react';
import type {Team} from '@mattermost/types/teams';
import SelectTeamItem from './select_team_item';
import type {MockIntl} from 'tests/helpers/intl-test-helper';
import {SelectTeamItem} from './select_team_item';
describe('components/select_team/components/SelectTeamItem', () => {
const baseProps = {
@@ -15,6 +17,9 @@ describe('components/select_team/components/SelectTeamItem', () => {
loading: false,
canJoinPublicTeams: true,
canJoinPrivateTeams: false,
intl: {
formatMessage: jest.fn(),
} as MockIntl,
};
test('should match snapshot, on public joinable', () => {

Просмотреть файл

@@ -3,26 +3,25 @@
import React from 'react';
import type {ReactNode, MouseEvent} from 'react';
import {injectIntl, type WrappedComponentProps} from 'react-intl';
import type {Team} from '@mattermost/types/teams';
import LocalizedIcon from 'components/localized_icon';
import OverlayTrigger from 'components/overlay_trigger';
import Tooltip from 'components/tooltip';
import TeamInfoIcon from 'components/widgets/icons/team_info_icon';
import {t} from 'utils/i18n';
import * as Utils from 'utils/utils';
type Props = {
interface Props extends WrappedComponentProps {
team: Team;
onTeamClick: (team: Team) => void;
loading: boolean;
canJoinPublicTeams: boolean;
canJoinPrivateTeams: boolean;
};
}
export default class SelectTeamItem extends React.PureComponent<Props> {
export class SelectTeamItem extends React.PureComponent<Props> {
handleTeamClick = (e: MouseEvent): void => {
e.preventDefault();
this.props.onTeamClick(this.props.team);
@@ -58,18 +57,16 @@ export default class SelectTeamItem extends React.PureComponent<Props> {
let icon;
if (loading) {
icon = (
<LocalizedIcon
<span
className='fa fa-refresh fa-spin right signup-team__icon'
component='span'
title={{id: t('generic_icons.loading'), defaultMessage: 'Loading Icon'}}
title={this.props.intl.formatMessage({id: 'generic_icons.loading', defaultMessage: 'Loading Icon'})}
/>
);
} else {
icon = (
<LocalizedIcon
<span
className='fa fa-angle-right right signup-team__icon'
component='span'
title={{id: t('select_team.join.icon'), defaultMessage: 'Join Team Icon'}}
title={this.props.intl.formatMessage({id: 'select_team.join.icon', defaultMessage: 'Join Team Icon'})}
/>
);
}
@@ -87,9 +84,9 @@ export default class SelectTeamItem extends React.PureComponent<Props> {
>
<span className='signup-team-dir__name'>{team.display_name}</span>
{!team.allow_open_invite &&
<LocalizedIcon
<i
className='fa fa-lock light'
title={{id: t('select_team.private.icon'), defaultMessage: 'Private team'}}
title={this.props.intl.formatMessage({id: 'select_team.private.icon', defaultMessage: 'Private team'})}
/>}
{canJoin && icon}
</a>
@@ -97,3 +94,5 @@ export default class SelectTeamItem extends React.PureComponent<Props> {
);
}
}
export default injectIntl(SelectTeamItem);