diff --git a/webapp/channels/src/components/activity_log_modal/components/__snapshots__/activity_log.test.tsx.snap b/webapp/channels/src/components/activity_log_modal/components/__snapshots__/activity_log.test.tsx.snap index 174dd38b22..7b59864fdd 100644 --- a/webapp/channels/src/components/activity_log_modal/components/__snapshots__/activity_log.test.tsx.snap +++ b/webapp/channels/src/components/activity_log_modal/components/__snapshots__/activity_log.test.tsx.snap @@ -11,9 +11,14 @@ exports[`components/activity_log_modal/ActivityLog should match snapshot 1`] = `
- - { const baseProps = { @@ -87,8 +86,8 @@ describe('components/activity_log_modal/ActivityLog', () => { id='activity_log_modal.iphoneNativeClassicApp' /> ); - const apple = {devicePicture: 'fa fa-apple', deviceTitle: localizeMessage('device_icons.apple', 'Apple Icon'), devicePlatform: appleText}; - expect(mobileSessionInfo(TestHelper.getSessionMock({device_id: 'apple'}))).toEqual(apple); + const apple = {devicePicture: 'fa fa-apple', devicePlatform: appleText}; + expect(mobileSessionInfo(TestHelper.getSessionMock({device_id: 'apple'}))).toMatchObject(apple); const androidText = ( { id='activity_log_modal.androidNativeClassicApp' /> ); - const android = {devicePicture: 'fa fa-android', deviceTitle: localizeMessage('device_icons.android', 'Android Icon'), devicePlatform: androidText}; - expect(mobileSessionInfo(TestHelper.getSessionMock({device_id: 'android'}))).toEqual(android); + const android = {devicePicture: 'fa fa-android', devicePlatform: androidText}; + expect(mobileSessionInfo(TestHelper.getSessionMock({device_id: 'android'}))).toMatchObject(android); const appleRNText = ( { id='activity_log_modal.iphoneNativeApp' /> ); - const appleRN = {devicePicture: 'fa fa-apple', deviceTitle: localizeMessage('device_icons.apple', 'Apple Icon'), devicePlatform: appleRNText}; - expect(mobileSessionInfo(TestHelper.getSessionMock({device_id: 'apple_rn'}))).toEqual(appleRN); + const appleRN = {devicePicture: 'fa fa-apple', devicePlatform: appleRNText}; + expect(mobileSessionInfo(TestHelper.getSessionMock({device_id: 'apple_rn'}))).toMatchObject(appleRN); const androidRNText = ( { id='activity_log_modal.androidNativeApp' /> ); - const androidRN = {devicePicture: 'fa fa-android', deviceTitle: localizeMessage('device_icons.android', 'Android Icon'), devicePlatform: androidRNText}; - expect(mobileSessionInfo(TestHelper.getSessionMock({device_id: 'android_rn'}))).toEqual(androidRN); + const androidRN = {devicePicture: 'fa fa-android', devicePlatform: androidRNText}; + expect(mobileSessionInfo(TestHelper.getSessionMock({device_id: 'android_rn'}))).toMatchObject(androidRN); }); }); diff --git a/webapp/channels/src/components/activity_log_modal/components/activity_log.tsx b/webapp/channels/src/components/activity_log_modal/components/activity_log.tsx index e5cf9cef0f..c797b20b74 100644 --- a/webapp/channels/src/components/activity_log_modal/components/activity_log.tsx +++ b/webapp/channels/src/components/activity_log_modal/components/activity_log.tsx @@ -2,15 +2,16 @@ // See LICENSE.txt for license information. import React from 'react'; -import {FormattedDate, FormattedMessage, FormattedTime} from 'react-intl'; +import type {MessageDescriptor} from 'react-intl'; +import {FormattedDate, FormattedMessage, FormattedTime, defineMessages} from 'react-intl'; import type {Session} from '@mattermost/types/sessions'; import {General} from 'mattermost-redux/constants'; -import {getMonthLong, t} from 'utils/i18n'; -import {localizeMessage} from 'utils/utils'; +import {getMonthLong} from 'utils/i18n'; +import DeviceIcon from './device_icon'; import MoreInfo from './more_info'; type Props = { @@ -42,8 +43,8 @@ type State = { type MobileSessionInfo = { devicePicture?: string; - deviceTitle?: string; - devicePlatform: JSX.Element; + deviceTitle?: MessageDescriptor; + devicePlatform?: JSX.Element; }; export default class ActivityLog extends React.PureComponent { @@ -68,42 +69,52 @@ export default class ActivityLog extends React.PureComponent { }; mobileSessionInfo = (session: Session): MobileSessionInfo => { - let deviceTypeId; - let deviceTypeMessage; + let devicePlatform; let devicePicture; let deviceTitle; if (session.device_id.includes('apple')) { devicePicture = 'fa fa-apple'; - deviceTitle = localizeMessage('device_icons.apple', 'Apple Icon'); - deviceTypeId = t('activity_log_modal.iphoneNativeClassicApp'); - deviceTypeMessage = 'iPhone Native Classic App'; + deviceTitle = messages.appleIcon; + devicePlatform = ( + + ); if (session.device_id.includes(General.PUSH_NOTIFY_APPLE_REACT_NATIVE)) { - deviceTypeId = t('activity_log_modal.iphoneNativeApp'); - deviceTypeMessage = 'iPhone Native App'; + devicePlatform = ( + + ); } } else if (session.device_id.includes('android')) { devicePicture = 'fa fa-android'; - deviceTitle = localizeMessage('device_icons.android', 'Android Icon'); - deviceTypeId = t('activity_log_modal.androidNativeClassicApp'); - deviceTypeMessage = 'Android Native Classic App'; + deviceTitle = messages.androidIcon; + devicePlatform = ( + + ); if (session.device_id.includes(General.PUSH_NOTIFY_ANDROID_REACT_NATIVE)) { - deviceTypeId = t('activity_log_modal.androidNativeApp'); - deviceTypeMessage = 'Android Native App'; + devicePlatform = ( + + ); } } return { devicePicture, deviceTitle, - devicePlatform: ( - - ), + devicePlatform, }; }; @@ -117,7 +128,7 @@ export default class ActivityLog extends React.PureComponent { const lastAccessTime = new Date(currentSession.last_activity_at); let devicePlatform = currentSession.props.platform; let devicePicture: string | undefined = ''; - let deviceTitle = ''; + let deviceTitle: MessageDescriptor | string = ''; if (this.isMobileSession(currentSession)) { const sessionInfo = this.mobileSessionInfo(currentSession); @@ -127,11 +138,11 @@ export default class ActivityLog extends React.PureComponent { } else { if (currentSession.props.platform === 'Windows') { devicePicture = 'fa fa-windows'; - deviceTitle = localizeMessage('device_icons.windows', 'Windows Icon'); + deviceTitle = messages.windowsIcon; } else if (currentSession.props.platform === 'Macintosh' || currentSession.props.platform === 'iPhone') { devicePicture = 'fa fa-apple'; - deviceTitle = localizeMessage('device_icons.apple', 'Apple Icon'); + deviceTitle = messages.appleIcon; } else if (currentSession.props.platform === 'Linux') { if (currentSession.props.os.indexOf('Android') >= 0) { devicePlatform = ( @@ -141,14 +152,14 @@ export default class ActivityLog extends React.PureComponent { /> ); devicePicture = 'fa fa-android'; - deviceTitle = localizeMessage('device_icons.android', 'Android Icon'); + deviceTitle = messages.androidIcon; } else { devicePicture = 'fa fa-linux'; - deviceTitle = localizeMessage('device_icons.linux', 'Linux Icon'); + deviceTitle = messages.linuxIcon; } } else if (currentSession.props.os.indexOf('Linux') !== -1) { devicePicture = 'fa fa-linux'; - deviceTitle = localizeMessage('device_icons.linux', 'Linux Icon'); + deviceTitle = messages.linuxIcon; } if (currentSession.props.browser.indexOf('Desktop App') !== -1) { @@ -168,10 +179,11 @@ export default class ActivityLog extends React.PureComponent { >
- {devicePlatform} + + {devicePlatform}
@@ -220,3 +232,22 @@ export default class ActivityLog extends React.PureComponent { ); } } + +const messages = defineMessages({ + androidIcon: { + id: 'device_icons.android', + defaultMessage: 'Android Icon', + }, + appleIcon: { + id: 'device_icons.apple', + defaultMessage: 'Apple Icon', + }, + linuxIcon: { + id: 'device_icons.linux', + defaultMessage: 'Linux Icon', + }, + windowsIcon: { + id: 'device_icons.windows', + defaultMessage: 'Windows Icon', + }, +}); diff --git a/webapp/channels/src/components/activity_log_modal/components/device_icon.tsx b/webapp/channels/src/components/activity_log_modal/components/device_icon.tsx new file mode 100644 index 0000000000..6a8241431b --- /dev/null +++ b/webapp/channels/src/components/activity_log_modal/components/device_icon.tsx @@ -0,0 +1,31 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import type {MessageDescriptor} from 'react-intl'; +import {useIntl} from 'react-intl'; + +import {isMessageDescriptor} from 'utils/i18n'; + +type Props = { + devicePicture?: string; + deviceTitle: MessageDescriptor | string; +} + +export default function DeviceIcon(props: Props) { + const intl = useIntl(); + + let title; + if (isMessageDescriptor(props.deviceTitle)) { + title = intl.formatMessage(props.deviceTitle); + } else { + title = props.deviceTitle; + } + + return ( + + ); +}