PLT-7221 differentiate between RN and Classic sessions (#7303)

webapp/components/activity_log_modal/activity_log_modal.jsx

@@ -12,6 +12,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {Modal} from 'react-bootstrap';
 import {FormattedMessage, FormattedTime, FormattedDate} from 'react-intl';
+import {General} from 'mattermost-redux/constants';
 
 export default class ActivityLogModal extends React.Component {
     static propTypes = {
@@ -90,6 +91,46 @@ export default class ActivityLogModal extends React.Component {
         this.setState({moreInfo: newMoreInfo});
     }
 
+    isMobileSession = (session) => {
+        return session.device_id && (session.device_id.includes('apple') || session.device_id.includes('android'));
+    };
+
+    mobileSessionInfo = (session) => {
+        let deviceTypeId;
+        let deviceTypeMessage;
+        let devicePicture;
+
+        if (session.device_id.includes('apple')) {
+            devicePicture = 'fa fa-apple';
+            deviceTypeId = 'activity_log_modal.iphoneNativeClassicApp';
+            deviceTypeMessage = 'iPhone Native Classic App';
+
+            if (session.device_id.includes(General.PUSH_NOTIFY_APPLE_REACT_NATIVE)) {
+                deviceTypeId = 'activity_log_modal.iphoneNativeApp';
+                deviceTypeMessage = 'iPhone Native App';
+            }
+        } else if (session.device_id.includes('android')) {
+            devicePicture = 'fa fa-android';
+            deviceTypeId = 'activity_log_modal.androidNativeClassicApp';
+            deviceTypeMessage = 'Android Native Classic App';
+
+            if (session.device_id.includes(General.PUSH_NOTIFY_ANDROID_REACT_NATIVE)) {
+                deviceTypeId = 'activity_log_modal.androidNativeApp';
+                deviceTypeMessage = 'Android Native App';
+            }
+        }
+
+        return {
+            devicePicture,
+            devicePlatform: (
+                <FormattedMessage
+                    id={deviceTypeId}
+                    defaultMessage={deviceTypeMessage}
+                />
+            )
+        };
+    };
+
     render() {
         const activityList = [];
 
@@ -102,22 +143,11 @@ export default class ActivityLogModal extends React.Component {
 
             if (currentSession.props.platform === 'Windows') {
                 devicePicture = 'fa fa-windows';
-            } else if (currentSession.device_id && currentSession.device_id.indexOf('apple') === 0) {
+            } else if (this.isMobileSession(currentSession)) {
-                devicePicture = 'fa fa-apple';
+                const sessionInfo = this.mobileSessionInfo(currentSession);
-                devicePlatform = (
+
-                    <FormattedMessage
+                devicePicture = sessionInfo.devicePicture;
-                        id='activity_log_modal.iphoneNativeApp'
+                devicePlatform = sessionInfo.devicePlatform;
-                        defaultMessage='iPhone Native App'
-                    />
-                );
-            } else if (currentSession.device_id && currentSession.device_id.indexOf('android') === 0) {
-                devicePlatform = (
-                    <FormattedMessage
-                        id='activity_log_modal.androidNativeApp'
-                        defaultMessage='Android Native App'
-                    />
-                );
-                devicePicture = 'fa fa-android';
             } else if (currentSession.props.platform === 'Macintosh' ||
                 currentSession.props.platform === 'iPhone') {
                 devicePicture = 'fa fa-apple';

webapp/i18n/en.json

@@ -28,8 +28,10 @@
   "activity_log.sessionsDescription": "Sessions are created when you log in to a new browser on a device. Sessions let you use Mattermost without having to log in again for a time period specified by the System Admin. If you want to log out sooner, use the 'Logout' button below to end a session.",
   "activity_log_modal.android": "Android",
   "activity_log_modal.androidNativeApp": "Android Native App",
+  "activity_log_modal.androidNativeClassicApp": "Android Native Classic App",
   "activity_log_modal.desktop": "Native Desktop App",
   "activity_log_modal.iphoneNativeApp": "iPhone Native App",
+  "activity_log_modal.iphoneNativeClassicApp": "iPhone Native Classic App",
   "add_command.autocomplete": "Autocomplete",
   "add_command.autocomplete.help": "(Optional) Show slash command in autocomplete list.",
   "add_command.autocompleteDescription": "Autocomplete Description",