Remove t and localizeMessage from components/activity_log_modal (#26987)

* Remove t from components/activity_log_modal

* Remove localizeMessage from components/activity_log_modal

I wanted to do more to simplify the various values we pass around for
icon, title, and text so that we'd just pass around a single "type"
value, but since this logic is weird, I gave up on that to focus on
localizeMessage and t.

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`] = `
     <div
       className="report__platform"
     >
-      <i
+      <DeviceIcon
-        className="fa fa-linux"
+        devicePicture="fa fa-linux"
-        title="Linux Icon"
+        deviceTitle={
+          Object {
+            "defaultMessage": "Linux Icon",
+            "id": "device_icons.linux",
+          }
+        }
       />
       <MemoizedFormattedMessage
         defaultMessage="Native Desktop App"
@@ -98,9 +103,14 @@ exports[`components/activity_log_modal/ActivityLog should match snapshot with mo
     <div
       className="report__platform"
     >
-      <i
+      <DeviceIcon
-        className="fa fa-apple"
+        devicePicture="fa fa-apple"
-        title="Apple Icon"
+        deviceTitle={
+          Object {
+            "defaultMessage": "Apple Icon",
+            "id": "device_icons.apple",
+          }
+        }
       />
       <MemoizedFormattedMessage
         defaultMessage="iPhone Native Classic App"

webapp/channels/src/components/activity_log_modal/components/activity_log.test.tsx

@@ -10,7 +10,6 @@ import {General} from 'mattermost-redux/constants';
 import ActivityLog from 'components/activity_log_modal/components/activity_log';
 
 import {TestHelper} from 'utils/test_helper';
-import {localizeMessage} from 'utils/utils';
 
 describe('components/activity_log_modal/ActivityLog', () => {
     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};
+        const apple = {devicePicture: 'fa fa-apple', devicePlatform: appleText};
-        expect(mobileSessionInfo(TestHelper.getSessionMock({device_id: 'apple'}))).toEqual(apple);
+        expect(mobileSessionInfo(TestHelper.getSessionMock({device_id: 'apple'}))).toMatchObject(apple);
 
         const androidText = (
             <FormattedMessage
@@ -96,8 +95,8 @@ describe('components/activity_log_modal/ActivityLog', () => {
                 id='activity_log_modal.androidNativeClassicApp'
             />
         );
-        const android = {devicePicture: 'fa fa-android', deviceTitle: localizeMessage('device_icons.android', 'Android Icon'), devicePlatform: androidText};
+        const android = {devicePicture: 'fa fa-android', devicePlatform: androidText};
-        expect(mobileSessionInfo(TestHelper.getSessionMock({device_id: 'android'}))).toEqual(android);
+        expect(mobileSessionInfo(TestHelper.getSessionMock({device_id: 'android'}))).toMatchObject(android);
 
         const appleRNText = (
             <FormattedMessage
@@ -105,8 +104,8 @@ describe('components/activity_log_modal/ActivityLog', () => {
                 id='activity_log_modal.iphoneNativeApp'
             />
         );
-        const appleRN = {devicePicture: 'fa fa-apple', deviceTitle: localizeMessage('device_icons.apple', 'Apple Icon'), devicePlatform: appleRNText};
+        const appleRN = {devicePicture: 'fa fa-apple', devicePlatform: appleRNText};
-        expect(mobileSessionInfo(TestHelper.getSessionMock({device_id: 'apple_rn'}))).toEqual(appleRN);
+        expect(mobileSessionInfo(TestHelper.getSessionMock({device_id: 'apple_rn'}))).toMatchObject(appleRN);
 
         const androidRNText = (
             <FormattedMessage
@@ -114,7 +113,7 @@ describe('components/activity_log_modal/ActivityLog', () => {
                 id='activity_log_modal.androidNativeApp'
             />
         );
-        const androidRN = {devicePicture: 'fa fa-android', deviceTitle: localizeMessage('device_icons.android', 'Android Icon'), devicePlatform: androidRNText};
+        const androidRN = {devicePicture: 'fa fa-android', devicePlatform: androidRNText};
-        expect(mobileSessionInfo(TestHelper.getSessionMock({device_id: 'android_rn'}))).toEqual(androidRN);
+        expect(mobileSessionInfo(TestHelper.getSessionMock({device_id: 'android_rn'}))).toMatchObject(androidRN);
     });
 });

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 {getMonthLong} from 'utils/i18n';
-import {localizeMessage} from 'utils/utils';
 
+import DeviceIcon from './device_icon';
 import MoreInfo from './more_info';
 
 type Props = {
@@ -42,8 +43,8 @@ type State = {
 
 type MobileSessionInfo = {
     devicePicture?: string;
-    deviceTitle?: string;
+    deviceTitle?: MessageDescriptor;
-    devicePlatform: JSX.Element;
+    devicePlatform?: JSX.Element;
 };
 
 export default class ActivityLog extends React.PureComponent<Props, State> {
@@ -68,42 +69,52 @@ export default class ActivityLog extends React.PureComponent<Props, State> {
     };
 
     mobileSessionInfo = (session: Session): MobileSessionInfo => {
-        let deviceTypeId;
+        let devicePlatform;
-        let deviceTypeMessage;
         let devicePicture;
         let deviceTitle;
 
         if (session.device_id.includes('apple')) {
             devicePicture = 'fa fa-apple';
-            deviceTitle = localizeMessage('device_icons.apple', 'Apple Icon');
+            deviceTitle = messages.appleIcon;
-            deviceTypeId = t('activity_log_modal.iphoneNativeClassicApp');
+            devicePlatform = (
-            deviceTypeMessage = 'iPhone Native Classic App';
+                <FormattedMessage
+                    id='activity_log_modal.iphoneNativeClassicApp'
+                    defaultMessage='iPhone Native Classic App'
+                />
+            );
 
             if (session.device_id.includes(General.PUSH_NOTIFY_APPLE_REACT_NATIVE)) {
-                deviceTypeId = t('activity_log_modal.iphoneNativeApp');
+                devicePlatform = (
-                deviceTypeMessage = 'iPhone Native App';
+                    <FormattedMessage
+                        id='activity_log_modal.iphoneNativeApp'
+                        defaultMessage='iPhone Native App'
+                    />
+                );
             }
         } else if (session.device_id.includes('android')) {
             devicePicture = 'fa fa-android';
-            deviceTitle = localizeMessage('device_icons.android', 'Android Icon');
+            deviceTitle = messages.androidIcon;
-            deviceTypeId = t('activity_log_modal.androidNativeClassicApp');
+            devicePlatform = (
-            deviceTypeMessage = 'Android Native Classic App';
+                <FormattedMessage
+                    id='activity_log_modal.androidNativeClassicApp'
+                    defaultMessage='Android Native Classic App'
+                />
+            );
 
             if (session.device_id.includes(General.PUSH_NOTIFY_ANDROID_REACT_NATIVE)) {
-                deviceTypeId = t('activity_log_modal.androidNativeApp');
+                devicePlatform = (
-                deviceTypeMessage = 'Android Native App';
+                    <FormattedMessage
+                        id='activity_log_modal.androidNativeApp'
+                        defaultMessage='Android Native App'
+                    />
+                );
             }
         }
 
         return {
             devicePicture,
             deviceTitle,
-            devicePlatform: (
+            devicePlatform,
-                <FormattedMessage
-                    id={deviceTypeId}
-                    defaultMessage={deviceTypeMessage}
-                />
-            ),
         };
     };
 
@@ -117,7 +128,7 @@ export default class ActivityLog extends React.PureComponent<Props, State> {
         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<Props, State> {
         } 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<Props, State> {
                         />
                     );
                     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<Props, State> {
             >
                 <div className='activity-log__report'>
                     <div className='report__platform'>
-                        <i
+                        <DeviceIcon
-                            className={devicePicture}
+                            devicePicture={devicePicture}
-                            title={deviceTitle}
+                            deviceTitle={deviceTitle}
-                        />{devicePlatform}
+                        />
+                        {devicePlatform}
                     </div>
                     <div className='report__info'>
                         <div>
@@ -220,3 +232,22 @@ export default class ActivityLog extends React.PureComponent<Props, State> {
         );
     }
 }
+
+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',
+    },
+});

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 (
+        <i
+            className={props.devicePicture}
+            title={title}
+        />
+    );
+}