diff --git a/webapp/channels/src/components/advanced_create_post/prewritten_chips.tsx b/webapp/channels/src/components/advanced_create_post/prewritten_chips.tsx index 28a00492d9..a16f0ddf5a 100644 --- a/webapp/channels/src/components/advanced_create_post/prewritten_chips.tsx +++ b/webapp/channels/src/components/advanced_create_post/prewritten_chips.tsx @@ -2,7 +2,7 @@ // See LICENSE.txt for license information. import React, {useMemo, memo} from 'react'; -import {useIntl} from 'react-intl'; +import {defineMessage, useIntl} from 'react-intl'; import styled from 'styled-components'; import type {Channel} from '@mattermost/types/channels'; @@ -11,8 +11,6 @@ import {trackEvent} from 'actions/telemetry_actions'; import Chip from 'components/common/chip/chip'; -import {t} from 'utils/i18n'; - type Props = { prefillMessage: (msg: string, shouldFocus: boolean) => void; currentChannel: Channel; @@ -36,10 +34,14 @@ const PrewrittenChips = ({currentChannel, currentUserId, currentChannelTeammateU const chips = useMemo(() => { const customChip = { event: 'prefilled_message_selected_custom', - messageId: '', - message: '', - displayId: t('create_post.prewritten.custom'), - display: 'Custom message...', + message: defineMessage({ + id: '', + defaultMessage: '', + }), + display: defineMessage({ + id: 'create_post.prewritten.custom', + defaultMessage: 'Custom message...', + }), leadingIcon: '', }; @@ -47,26 +49,38 @@ const PrewrittenChips = ({currentChannel, currentUserId, currentChannelTeammateU return [ { event: 'prefilled_message_selected_team_hi', - messageId: t('create_post.prewritten.tip.team_hi_message'), - message: ':wave: Hi team!', - displayId: t('create_post.prewritten.tip.team_hi'), - display: 'Hi team!', + message: defineMessage({ + id: 'create_post.prewritten.tip.team_hi_message', + defaultMessage: ':wave: Hi team!', + }), + display: defineMessage({ + id: 'create_post.prewritten.tip.team_hi', + defaultMessage: 'Hi team!', + }), leadingIcon: 'wave', }, { event: 'prefilled_message_selected_team_excited', - messageId: t('create_post.prewritten.tip.team_excited_message'), - message: ':raised_hands: Excited to be here!', - displayId: t('create_post.prewritten.tip.team_excited'), - display: 'Excited to be here!', + message: defineMessage({ + id: 'create_post.prewritten.tip.team_excited_message', + defaultMessage: ':raised_hands: Excited to be here!', + }), + display: defineMessage({ + id: 'create_post.prewritten.tip.team_excited', + defaultMessage: 'Excited to be here!', + }), leadingIcon: 'raised_hands', }, { event: 'prefilled_message_selected_team_hey', - messageId: t('create_post.prewritten.tip.team_hey_message'), - message: ':smile: Hey everyone!', - displayId: t('create_post.prewritten.tip.team_hey'), - display: 'Hey everyone!', + message: defineMessage({ + id: 'create_post.prewritten.tip.team_hey_message', + defaultMessage: ':smile: Hey everyone!', + }), + display: defineMessage({ + id: 'create_post.prewritten.tip.team_hey', + defaultMessage: 'Hey everyone!', + }), leadingIcon: 'smile', }, customChip, @@ -77,18 +91,26 @@ const PrewrittenChips = ({currentChannel, currentUserId, currentChannelTeammateU return [ { event: 'prefilled_message_selected_self_note', - messageId: t('create_post.prewritten.tip.self_note'), - message: 'Note to self...', - displayId: t('create_post.prewritten.tip.self_note'), - display: 'Note to self...', + message: defineMessage({ + id: 'create_post.prewritten.tip.self_note', + defaultMessage: 'Note to self...', + }), + display: defineMessage({ + id: 'create_post.prewritten.tip.self_note', + defaultMessage: 'Note to self...', + }), leadingIcon: '', }, { event: 'prefilled_message_selected_self_should', - messageId: t('create_post.prewritten.tip.self_should'), - message: 'Tomorrow I should...', - displayId: t('create_post.prewritten.tip.self_should'), - display: 'Tomorrow I should...', + message: defineMessage({ + id: 'create_post.prewritten.tip.self_should', + defaultMessage: 'Tomorrow I should...', + }), + display: defineMessage({ + id: 'create_post.prewritten.tip.self_should', + defaultMessage: 'Tomorrow I should...', + }), leadingIcon: '', }, customChip, @@ -98,18 +120,26 @@ const PrewrittenChips = ({currentChannel, currentUserId, currentChannelTeammateU return [ { event: 'prefilled_message_selected_dm_hey', - messageId: t('create_post.prewritten.tip.dm_hey_message'), - message: ':wave: Hey @{username}', - displayId: t('create_post.prewritten.tip.dm_hey'), - display: 'Hey', + message: defineMessage({ + id: 'create_post.prewritten.tip.dm_hey_message', + defaultMessage: ':wave: Hey @{username}', + }), + display: defineMessage({ + id: 'create_post.prewritten.tip.dm_hey', + defaultMessage: 'Hey', + }), leadingIcon: 'wave', }, { event: 'prefilled_message_selected_dm_hello', - messageId: t('create_post.prewritten.tip.dm_hello_message'), - message: ':v: Oh hello', - displayId: t('create_post.prewritten.tip.dm_hello'), - display: 'Oh hello', + message: defineMessage({ + id: 'create_post.prewritten.tip.dm_hello_message', + defaultMessage: ':v: Oh hello', + }), + display: defineMessage({ + id: 'create_post.prewritten.tip.dm_hello', + defaultMessage: 'Oh hello', + }), leadingIcon: 'v', }, customChip, @@ -118,14 +148,14 @@ const PrewrittenChips = ({currentChannel, currentUserId, currentChannelTeammateU return ( - {chips.map(({event, messageId, message, displayId, display, leadingIcon}) => { + {chips.map(({event, message, display, leadingIcon}) => { const values = {username: currentChannelTeammateUsername}; - const messageToPrefill = messageId ? formatMessage( - {id: messageId, defaultMessage: message}, + const messageToPrefill = message.id ? formatMessage( + message, values, - ) : message; + ) : ''; - const additionalMarkup = displayId === 'create_post.prewritten.tip.dm_hey' ? ( + const additionalMarkup = message.id === 'create_post.prewritten.tip.dm_hey' ? ( {'@'}{currentChannelTeammateUsername} @@ -133,9 +163,9 @@ const PrewrittenChips = ({currentChannel, currentUserId, currentChannelTeammateU return ( { @@ -144,7 +174,7 @@ const PrewrittenChips = ({currentChannel, currentUserId, currentChannelTeammateU } prefillMessage(messageToPrefill, true); }} - otherOption={!messageId} + otherOption={!message.id} leadingIcon={leadingIcon} /> ); diff --git a/webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_icon.tsx b/webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_icon.tsx index 3683a132a1..6fbbb2ed28 100644 --- a/webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_icon.tsx +++ b/webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_icon.tsx @@ -2,7 +2,7 @@ // See LICENSE.txt for license information. import React, {memo} from 'react'; -import {useIntl} from 'react-intl'; +import {defineMessages, useIntl} from 'react-intl'; import type {MessageDescriptor} from 'react-intl'; import styled from 'styled-components'; @@ -28,7 +28,6 @@ import OverlayTrigger from 'components/overlay_trigger'; import Tooltip from 'components/tooltip'; import Constants from 'utils/constants'; -import {t} from 'utils/i18n'; import type {MarkdownMode} from 'utils/markdown/apply_markdown'; export const IconContainer = styled.button` @@ -93,17 +92,17 @@ const MAP_MARKDOWN_MODE_TO_ICON: Record = { - bold: {id: t('accessibility.button.bold'), defaultMessage: 'bold'}, - italic: {id: t('accessibility.button.italic'), defaultMessage: 'italic'}, - link: {id: t('accessibility.button.link'), defaultMessage: 'link'}, - strike: {id: t('accessibility.button.strike'), defaultMessage: 'strike through'}, - code: {id: t('accessibility.button.code'), defaultMessage: 'code'}, - heading: {id: t('accessibility.button.heading'), defaultMessage: 'heading'}, - quote: {id: t('accessibility.button.quote'), defaultMessage: 'quote'}, - ul: {id: t('accessibility.button.bulleted_list'), defaultMessage: 'bulleted list'}, - ol: {id: t('accessibility.button.numbered_list'), defaultMessage: 'numbered list'}, -}; +const MAP_MARKDOWN_MODE_TO_ARIA_LABEL: Record = defineMessages({ + bold: {id: 'accessibility.button.bold', defaultMessage: 'bold'}, + italic: {id: 'accessibility.button.italic', defaultMessage: 'italic'}, + link: {id: 'accessibility.button.link', defaultMessage: 'link'}, + strike: {id: 'accessibility.button.strike', defaultMessage: 'strike through'}, + code: {id: 'accessibility.button.code', defaultMessage: 'code'}, + heading: {id: 'accessibility.button.heading', defaultMessage: 'heading'}, + quote: {id: 'accessibility.button.quote', defaultMessage: 'quote'}, + ul: {id: 'accessibility.button.bulleted_list', defaultMessage: 'bulleted list'}, + ol: {id: 'accessibility.button.numbered_list', defaultMessage: 'numbered list'}, +}); const MAP_MARKDOWN_MODE_TO_KEYBOARD_SHORTCUTS: Record = { bold: KEYBOARD_SHORTCUTS.msgMarkdownBold, diff --git a/webapp/channels/src/components/advanced_text_editor/send_button/send_button.tsx b/webapp/channels/src/components/advanced_text_editor/send_button/send_button.tsx index c933381eb2..a126bb25a5 100644 --- a/webapp/channels/src/components/advanced_text_editor/send_button/send_button.tsx +++ b/webapp/channels/src/components/advanced_text_editor/send_button/send_button.tsx @@ -7,8 +7,6 @@ import styled from 'styled-components'; import {SendIcon} from '@mattermost/compass-icons/components'; -import {t} from 'utils/i18n'; - type SendButtonProps = { handleSubmit: (e: React.FormEvent) => void; disabled: boolean; @@ -66,7 +64,7 @@ const SendButton = ({disabled, handleSubmit}: SendButtonProps) => { size={18} color='currentColor' aria-label={formatMessage({ - id: t('create_post.icon'), + id: 'create_post.icon', defaultMessage: 'Create a post', })} /> diff --git a/webapp/channels/src/components/notify_confirm_modal.tsx b/webapp/channels/src/components/notify_confirm_modal.tsx index eee190a602..8e18a2719e 100644 --- a/webapp/channels/src/components/notify_confirm_modal.tsx +++ b/webapp/channels/src/components/notify_confirm_modal.tsx @@ -2,13 +2,11 @@ // See LICENSE.txt for license information. import React from 'react'; -import {FormattedMessage} from 'react-intl'; +import {FormattedMessage, defineMessages} from 'react-intl'; import ConfirmModalRedux from 'components/confirm_modal_redux'; import FormattedMarkdownMessage from 'components/formatted_markdown_message'; -import {t} from 'utils/i18n'; - type Props = { mentions: string[]; memberNotifyCount: number; @@ -31,14 +29,10 @@ export default class NotifyConfirmModal extends React.PureComponent { /> ); if (channelTimezoneCount > 0) { - const atHereMsg = 'By using **@here** you are about to send notifications to up to **{totalMembers} other people** in **{timezones, number} {timezones, plural, one {timezone} other {timezones}}**. Are you sure you want to do this?'; - const atAllChannelMsg = 'By using **@all** or **@channel** you are about to send notifications to **{totalMembers} people** in **{timezones, number} {timezones, plural, one {timezone} other {timezones}}**. Are you sure you want to do this?'; - const msg = mentions.length === 1 && mentions[0] === '@here' ? atHereMsg : atAllChannelMsg; - const msgID = mentions.length === 1 && mentions[0] === '@here' ? t('notify_here.question_timezone') : t('notify_all.question_timezone'); + const message = mentions.length === 1 && mentions[0] === '@here' ? messages.atHereTimezones : messages.atAllTimezones; notifyAllMessage = ( { /> ); } else { - const atHereMsg = 'By using **@here** you are about to send notifications to up to **{totalMembers} other people**. Are you sure you want to do this?'; - const atAllChannelMsg = 'By using **@all** or **@channel** you are about to send notifications to **{totalMembers} people**. Are you sure you want to do this?'; - const msg = mentions.length === 1 && mentions[0] === '@here' ? atHereMsg : atAllChannelMsg; - const msgID = mentions.length === 1 && mentions[0] === '@here' ? t('notify_here.question') : t('notify_all.question'); + const message = mentions.length === 1 && mentions[0] === '@here' ? messages.atHere : messages.atAll; notifyAllMessage = ( { ); } } + +const messages = defineMessages({ + atAll: { + id: 'notify_all.question', + defaultMessage: 'By using **@all** or **@channel** you are about to send notifications to **{totalMembers} people**. Are you sure you want to do this?', + }, + atAllTimezones: { + id: 'notify_all.question_timezone', + defaultMessage: 'By using **@all** or **@channel** you are about to send notifications to **{totalMembers} people** in **{timezones, number} {timezones, plural, one {timezone} other {timezones}}**. Are you sure you want to do this?', + }, + atHere: { + id: 'notify_here.question', + defaultMessage: 'By using **@here** you are about to send notifications to up to **{totalMembers} other people**. Are you sure you want to do this?', + }, + atHereTimezones: { + id: 'notify_here.question_timezone', + defaultMessage: 'By using **@here** you are about to send notifications to up to **{totalMembers} other people** in **{timezones, number} {timezones, plural, one {timezone} other {timezones}}**. Are you sure you want to do this?', + }, +}); diff --git a/webapp/channels/src/components/post_markdown/system_message_helpers.tsx b/webapp/channels/src/components/post_markdown/system_message_helpers.tsx index f63a7c3456..ffe5b1f4a1 100644 --- a/webapp/channels/src/components/post_markdown/system_message_helpers.tsx +++ b/webapp/channels/src/components/post_markdown/system_message_helpers.tsx @@ -3,7 +3,7 @@ import React from 'react'; import type {ReactNode} from 'react'; -import {FormattedDate, FormattedMessage, FormattedTime} from 'react-intl'; +import {FormattedDate, FormattedMessage, FormattedTime, defineMessages} from 'react-intl'; import type {Channel} from '@mattermost/types/channels'; import type {Post} from '@mattermost/types/posts'; @@ -17,7 +17,6 @@ import CombinedSystemMessage from 'components/post_view/combined_system_message' import GMConversionMessage from 'components/post_view/gm_conversion_message/gm_conversion_message'; import PostAddChannelMember from 'components/post_view/post_add_channel_member'; -import {t} from 'utils/i18n'; import type {TextFormattingOptions} from 'utils/text_formatting'; import {getSiteURL} from 'utils/url'; @@ -491,20 +490,39 @@ export function renderReminderSystemBotMessage(post: Post, currentTeam: Team): R ); } -t('app.post.move_thread_command.direct_or_group.multiple_messages'); -t('app.post.move_thread_command.direct_or_group.one_message'); -t('app.post.move_thread_command.channel.multiple_messages'); -t('app.post.move_thread_command.channel.one_message'); -t('app.post.move_thread.from_another_channel'); +// These messages are used by app.MoveThread on the server +defineMessages({ + channelMultipleMessages: { + id: 'app.post.move_thread_command.channel.multiple_messages', + defaultMessage: 'A thread with {numMessages, number} messages has been moved: {link}\n', + }, + channelOneMessage: { + id: 'app.post.move_thread_command.channel.one_message', + defaultMessage: 'A message has been moved: {link}\n', + }, + dmMultipleMessages: { + id: 'app.post.move_thread_command.direct_or_group.multiple_messages', + defaultMessage: 'A thread with {numMessages, number} messages has been moved to a Direct/Group Message\n', + }, + dmOneMessage: { + id: 'app.post.move_thread_command.direct_or_group.one_message', + defaultMessage: 'A message has been moved to a Direct/Group Message\n', + }, + fromAnotherChannel: { + id: 'app.post.move_thread.from_another_channel', + defaultMessage: 'This thread was moved from another channel', + }, +}); + export function renderWranglerSystemMessage(post: Post): ReactNode { let values = {} as any; const id = post.props.TranslationID; if (post.props && post.props.MovedThreadPermalink) { values = { - Link: post.props.MovedThreadPermalink, + link: post.props.MovedThreadPermalink, }; if (post.props.NumMessages > 1) { - values.NumMessages = post.props.NumMessages; + values.number = post.props.NumMessages; } } return ( diff --git a/webapp/channels/src/components/post_view/combined_system_message/combined_system_message.tsx b/webapp/channels/src/components/post_view/combined_system_message/combined_system_message.tsx index 744679049d..2556577dde 100644 --- a/webapp/channels/src/components/post_view/combined_system_message/combined_system_message.tsx +++ b/webapp/channels/src/components/post_view/combined_system_message/combined_system_message.tsx @@ -2,7 +2,7 @@ // See LICENSE.txt for license information. import React from 'react'; -import {injectIntl} from 'react-intl'; +import {defineMessages, injectIntl} from 'react-intl'; import type {IntlShape, MessageDescriptor} from 'react-intl'; import type {UserProfile} from '@mattermost/types/users'; @@ -11,8 +11,6 @@ import {Posts} from 'mattermost-redux/constants'; import Markdown from 'components/markdown'; -import {t} from 'utils/i18n'; - import LastUsers from './last_users'; const { @@ -21,168 +19,168 @@ const { } = Posts.POST_TYPES; const postTypeMessage = { - [JOIN_CHANNEL]: { + [JOIN_CHANNEL]: defineMessages({ one: { - id: t('combined_system_message.joined_channel.one'), + id: 'combined_system_message.joined_channel.one', defaultMessage: '{firstUser} **joined the channel**.', }, one_you: { - id: t('combined_system_message.joined_channel.one_you'), + id: 'combined_system_message.joined_channel.one_you', defaultMessage: 'You **joined the channel**.', }, two: { - id: t('combined_system_message.joined_channel.two'), + id: 'combined_system_message.joined_channel.two', defaultMessage: '{firstUser} and {secondUser} **joined the channel**.', }, many_expanded: { - id: t('combined_system_message.joined_channel.many_expanded'), + id: 'combined_system_message.joined_channel.many_expanded', defaultMessage: '{users} and {lastUser} **joined the channel**.', }, - }, - [ADD_TO_CHANNEL]: { + }), + [ADD_TO_CHANNEL]: defineMessages({ one: { - id: t('combined_system_message.added_to_channel.one'), + id: 'combined_system_message.added_to_channel.one', defaultMessage: '{firstUser} **added to the channel** by {actor}.', }, one_you: { - id: t('combined_system_message.added_to_channel.one_you'), + id: 'combined_system_message.added_to_channel.one_you', defaultMessage: 'You were **added to the channel** by {actor}.', }, two: { - id: t('combined_system_message.added_to_channel.two'), + id: 'combined_system_message.added_to_channel.two', defaultMessage: '{firstUser} and {secondUser} **added to the channel** by {actor}.', }, many_expanded: { - id: t('combined_system_message.added_to_channel.many_expanded'), + id: 'combined_system_message.added_to_channel.many_expanded', defaultMessage: '{users} and {lastUser} were **added to the channel** by {actor}.', }, - }, - [REMOVE_FROM_CHANNEL]: { + }), + [REMOVE_FROM_CHANNEL]: defineMessages({ one: { - id: t('combined_system_message.removed_from_channel.one'), + id: 'combined_system_message.removed_from_channel.one', defaultMessage: '{firstUser} was **removed from the channel**.', }, one_you: { - id: t('combined_system_message.removed_from_channel.one_you'), + id: 'combined_system_message.removed_from_channel.one_you', defaultMessage: 'You were **removed from the channel**.', }, two: { - id: t('combined_system_message.removed_from_channel.two'), + id: 'combined_system_message.removed_from_channel.two', defaultMessage: '{firstUser} and {secondUser} were **removed from the channel**.', }, many_expanded: { - id: t('combined_system_message.removed_from_channel.many_expanded'), + id: 'combined_system_message.removed_from_channel.many_expanded', defaultMessage: '{users} and {lastUser} were **removed from the channel**.', }, - }, - [LEAVE_CHANNEL]: { + }), + [LEAVE_CHANNEL]: defineMessages({ one: { - id: t('combined_system_message.left_channel.one'), + id: 'combined_system_message.left_channel.one', defaultMessage: '{firstUser} **left the channel**.', }, one_you: { - id: t('combined_system_message.left_channel.one_you'), + id: 'combined_system_message.left_channel.one_you', defaultMessage: 'You **left the channel**.', }, two: { - id: t('combined_system_message.left_channel.two'), + id: 'combined_system_message.left_channel.two', defaultMessage: '{firstUser} and {secondUser} **left the channel**.', }, many_expanded: { - id: t('combined_system_message.left_channel.many_expanded'), + id: 'combined_system_message.left_channel.many_expanded', defaultMessage: '{users} and {lastUser} **left the channel**.', }, - }, - [JOIN_LEAVE_CHANNEL]: { + }), + [JOIN_LEAVE_CHANNEL]: defineMessages({ one: { - id: t('combined_system_message.join_left_channel.one'), + id: 'combined_system_message.join_left_channel.one', defaultMessage: '{firstUser} **joined and left the channel**.', }, one_you: { - id: t('combined_system_message.join_left_channel.one_you'), + id: 'combined_system_message.join_left_channel.one_you', defaultMessage: 'You **joined and left the channel**.', }, two: { - id: t('combined_system_message.join_left_channel.two'), + id: 'combined_system_message.join_left_channel.two', defaultMessage: '{firstUser} and {secondUser} **joined and left the channel**.', }, many_expanded: { - id: t('combined_system_message.join_left_channel.many_expanded'), + id: 'combined_system_message.join_left_channel.many_expanded', defaultMessage: '{users} and {lastUser} **joined and left the channel**.', }, - }, - [JOIN_TEAM]: { + }), + [JOIN_TEAM]: defineMessages({ one: { - id: t('combined_system_message.joined_team.one'), + id: 'combined_system_message.joined_team.one', defaultMessage: '{firstUser} **joined the team**.', }, one_you: { - id: t('combined_system_message.joined_team.one_you'), + id: 'combined_system_message.joined_team.one_you', defaultMessage: 'You **joined the team**.', }, two: { - id: t('combined_system_message.joined_team.two'), + id: 'combined_system_message.joined_team.two', defaultMessage: '{firstUser} and {secondUser} **joined the team**.', }, many_expanded: { - id: t('combined_system_message.joined_team.many_expanded'), + id: 'combined_system_message.joined_team.many_expanded', defaultMessage: '{users} and {lastUser} **joined the team**.', }, - }, - [ADD_TO_TEAM]: { + }), + [ADD_TO_TEAM]: defineMessages({ one: { - id: t('combined_system_message.added_to_team.one'), + id: 'combined_system_message.added_to_team.one', defaultMessage: '{firstUser} **added to the team** by {actor}.', }, one_you: { - id: t('combined_system_message.added_to_team.one_you'), + id: 'combined_system_message.added_to_team.one_you', defaultMessage: 'You were **added to the team** by {actor}.', }, two: { - id: t('combined_system_message.added_to_team.two'), + id: 'combined_system_message.added_to_team.two', defaultMessage: '{firstUser} and {secondUser} **added to the team** by {actor}.', }, many_expanded: { - id: t('combined_system_message.added_to_team.many_expanded'), + id: 'combined_system_message.added_to_team.many_expanded', defaultMessage: '{users} and {lastUser} were **added to the team** by {actor}.', }, - }, - [REMOVE_FROM_TEAM]: { + }), + [REMOVE_FROM_TEAM]: defineMessages({ one: { - id: t('combined_system_message.removed_from_team.one'), + id: 'combined_system_message.removed_from_team.one', defaultMessage: '{firstUser} was **removed from the team**.', }, one_you: { - id: t('combined_system_message.removed_from_team.one_you'), + id: 'combined_system_message.removed_from_team.one_you', defaultMessage: 'You were **removed from the team**.', }, two: { - id: t('combined_system_message.removed_from_team.two'), + id: 'combined_system_message.removed_from_team.two', defaultMessage: '{firstUser} and {secondUser} were **removed from the team**.', }, many_expanded: { - id: t('combined_system_message.removed_from_team.many_expanded'), + id: 'combined_system_message.removed_from_team.many_expanded', defaultMessage: '{users} and {lastUser} were **removed from the team**.', }, - }, - [LEAVE_TEAM]: { + }), + [LEAVE_TEAM]: defineMessages({ one: { - id: t('combined_system_message.left_team.one'), + id: 'combined_system_message.left_team.one', defaultMessage: '{firstUser} **left the team**.', }, one_you: { - id: t('combined_system_message.left_team.one_you'), + id: 'combined_system_message.left_team.one_you', defaultMessage: 'You **left the team**.', }, two: { - id: t('combined_system_message.left_team.two'), + id: 'combined_system_message.left_team.two', defaultMessage: '{firstUser} and {secondUser} **left the team**.', }, many_expanded: { - id: t('combined_system_message.left_team.many_expanded'), + id: 'combined_system_message.left_team.many_expanded', defaultMessage: '{users} and {lastUser} **left the team**.', }, - }, + }), }; export type Props = { @@ -246,7 +244,7 @@ export class CombinedSystemMessage extends React.PureComponent { return acc; }, {}); - const currentUserDisplayName = formatMessage({id: t('combined_system_message.you'), defaultMessage: 'You'}); + const currentUserDisplayName = formatMessage({id: 'combined_system_message.you', defaultMessage: 'You'}); if (allUserIds.includes(currentUserId)) { usernames[currentUserId] = currentUserDisplayName; } else if (allUsernames.includes(currentUsername)) { @@ -262,7 +260,7 @@ export class CombinedSystemMessage extends React.PureComponent { const allUsernames = this.getAllUsernames(); const {formatMessage} = this.props.intl; - const someone = formatMessage({id: t('channel_loader.someone'), defaultMessage: 'Someone'}); + const someone = formatMessage({id: 'channel_loader.someone', defaultMessage: 'Someone'}); const usernames = userIdsArray. filter((userId) => { diff --git a/webapp/channels/src/components/post_view/combined_system_message/last_users.tsx b/webapp/channels/src/components/post_view/combined_system_message/last_users.tsx index e12c9218e9..34ac9d7d15 100644 --- a/webapp/channels/src/components/post_view/combined_system_message/last_users.tsx +++ b/webapp/channels/src/components/post_view/combined_system_message/last_users.tsx @@ -2,54 +2,53 @@ // See LICENSE.txt for license information. import React from 'react'; -import {injectIntl} from 'react-intl'; +import {defineMessages, injectIntl} from 'react-intl'; import type {IntlShape, MessageDescriptor} from 'react-intl'; import {Posts} from 'mattermost-redux/constants'; import Markdown from 'components/markdown'; -import {t} from 'utils/i18n'; import type {TextFormattingOptions} from 'utils/text_formatting'; -const typeMessage = { +const typeMessage = defineMessages({ [Posts.POST_TYPES.ADD_TO_CHANNEL]: { - id: t('last_users_message.added_to_channel.type'), + id: 'last_users_message.added_to_channel.type', defaultMessage: 'were **added to the channel** by {actor}.', }, [Posts.POST_TYPES.JOIN_CHANNEL]: { - id: t('last_users_message.joined_channel.type'), + id: 'last_users_message.joined_channel.type', defaultMessage: '**joined the channel**.', }, [Posts.POST_TYPES.LEAVE_CHANNEL]: { - id: t('last_users_message.left_channel.type'), + id: 'last_users_message.left_channel.type', defaultMessage: '**left the channel**.', }, [Posts.POST_TYPES.JOIN_LEAVE_CHANNEL]: { - id: t('last_users_message.joined_left_channel.type'), + id: 'last_users_message.joined_left_channel.type', defaultMessage: '**joined and left the channel**.', }, [Posts.POST_TYPES.REMOVE_FROM_CHANNEL]: { - id: t('last_users_message.removed_from_channel.type'), + id: 'last_users_message.removed_from_channel.type', defaultMessage: 'were **removed from the channel**.', }, [Posts.POST_TYPES.ADD_TO_TEAM]: { - id: t('last_users_message.added_to_team.type'), + id: 'last_users_message.added_to_team.type', defaultMessage: 'were **added to the team** by {actor}.', }, [Posts.POST_TYPES.JOIN_TEAM]: { - id: t('last_users_message.joined_team.type'), + id: 'last_users_message.joined_team.type', defaultMessage: '**joined the team**.', }, [Posts.POST_TYPES.LEAVE_TEAM]: { - id: t('last_users_message.left_team.type'), + id: 'last_users_message.left_team.type', defaultMessage: '**left the team**.', }, [Posts.POST_TYPES.REMOVE_FROM_TEAM]: { - id: t('last_users_message.removed_from_team.type'), + id: 'last_users_message.removed_from_team.type', defaultMessage: 'were **removed from the team**.', }, -}; +}); type Props = { actor?: string; diff --git a/webapp/channels/src/components/post_view/post_add_channel_member/post_add_channel_member.tsx b/webapp/channels/src/components/post_view/post_add_channel_member/post_add_channel_member.tsx index 5927676118..0271e17551 100644 --- a/webapp/channels/src/components/post_view/post_add_channel_member/post_add_channel_member.tsx +++ b/webapp/channels/src/components/post_view/post_add_channel_member/post_add_channel_member.tsx @@ -12,7 +12,6 @@ import {sendAddToChannelEphemeralPost} from 'actions/global_actions'; import AtMention from 'components/at_mention'; import {Constants} from 'utils/constants'; -import {t} from 'utils/i18n'; interface Actions { addChannelMember: (channelId: string, userId: string, rootId: string) => void; @@ -152,33 +151,50 @@ export default class PostAddChannelMember extends React.PureComponent + ); } else if (channelType === Constants.OPEN_CHANNEL) { - linkId = t('post_body.check_for_out_of_channel_mentions.link.public'); - linkText = 'add them to the channel'; + link = ( + + ); } - let outOfChannelMessageID; - let outOfChannelMessageText; + let outOfChannelMessagePart; const outOfChannelAtMentions = this.generateAtMentions(usernames); if (usernames.length === 1) { - outOfChannelMessageID = t('post_body.check_for_out_of_channel_mentions.message.one'); - outOfChannelMessageText = 'did not get notified by this mention because they are not in the channel. Would you like to '; + outOfChannelMessagePart = ( + + ); } else if (usernames.length > 1) { - outOfChannelMessageID = t('post_body.check_for_out_of_channel_mentions.message.multiple'); - outOfChannelMessageText = 'did not get notified by this mention because they are not in the channel. Would you like to '; + outOfChannelMessagePart = ( + + ); } - let outOfGroupsMessageID; - let outOfGroupsMessageText; + let outOfGroupsMessagePart; const outOfGroupsAtMentions = this.generateAtMentions(noGroupsUsernames); if (noGroupsUsernames.length) { - outOfGroupsMessageID = t('post_body.check_for_out_of_channel_groups_mentions.message'); - outOfGroupsMessageText = 'did not get notified by this mention because they are not in the channel. They cannot be added to the channel because they are not a member of the linked groups. To add them to this channel, they must be added to the linked groups.'; + outOfGroupsMessagePart = ( + + ); } let outOfChannelMessage = null; @@ -189,18 +205,12 @@ export default class PostAddChannelMember extends React.PureComponent {outOfChannelAtMentions} {' '} - + {outOfChannelMessagePart} - + {link} {outOfGroupsAtMentions} {' '} - + {outOfGroupsMessagePart}

); } diff --git a/webapp/channels/src/components/post_view/post_flag_icon/post_flag_icon.tsx b/webapp/channels/src/components/post_view/post_flag_icon/post_flag_icon.tsx index 8da6fa28b9..da008827c5 100644 --- a/webapp/channels/src/components/post_view/post_flag_icon/post_flag_icon.tsx +++ b/webapp/channels/src/components/post_view/post_flag_icon/post_flag_icon.tsx @@ -3,7 +3,7 @@ import classNames from 'classnames'; import React, {useCallback, useEffect, useRef, useState} from 'react'; -import {FormattedMessage} from 'react-intl'; +import {FormattedMessage, useIntl} from 'react-intl'; import OverlayTrigger from 'components/overlay_trigger'; import Tooltip from 'components/tooltip'; @@ -11,8 +11,6 @@ import FlagIcon from 'components/widgets/icons/flag_icon'; import FlagIconFilled from 'components/widgets/icons/flag_icon_filled'; import Constants, {Locations, A11yCustomEventTypes} from 'utils/constants'; -import {t} from 'utils/i18n'; -import {localizeMessage} from 'utils/utils'; export type Actions = { flagPost: (postId: string) => void; @@ -35,6 +33,8 @@ const PostFlagIcon = ({ postId, location = Locations.CENTER, }: Props) => { + const intl = useIntl(); + const buttonRef = useRef(null); const [a11yActive, setA11yActive] = useState(false); @@ -92,17 +92,24 @@ const PostFlagIcon = ({ id='flagTooltip' className='hidden-xs' > - + {isFlagged ? ( + + ) : ( + + )} } >