Device manager - add foundation for extended device info (#9344)

* record device client inforamtion events on app start

* matrix-client-information -> matrix_client_information

* fix types

* remove another unused export

* add docs link

* display device client information in device details

* update snapshots

* integration-ish test client information in metadata

* tests

* fix tests

* export helper

* DeviceClientInformation type

* Device manager - select all devices (#9330)

* add device selection that does nothing

* multi select and sign out of sessions

* test multiple selection

* fix type after rebase

* select all sessions

* rename type

* use ExtendedDevice type everywhere

* rename clientName to appName for less collision with UA parser

* fix bad find and replace

* rename ExtendedDeviceInfo to ExtendedDeviceAppInfo

* rename DeviceType comp to DeviceTypeIcon

* update tests for new required property deviceType

* add stubbed user agent parsing

Author: Kerry

res/css/_components.pcss

@@ -34,7 +34,7 @@
 @import "./components/views/settings/devices/_DeviceExpandDetailsButton.pcss";
 @import "./components/views/settings/devices/_DeviceSecurityCard.pcss";
 @import "./components/views/settings/devices/_DeviceTile.pcss";
-@import "./components/views/settings/devices/_DeviceType.pcss";
+@import "./components/views/settings/devices/_DeviceTypeIcon.pcss";
 @import "./components/views/settings/devices/_FilteredDeviceList.pcss";
 @import "./components/views/settings/devices/_FilteredDeviceListHeader.pcss";
 @import "./components/views/settings/devices/_SecurityRecommendations.pcss";

res/css/components/views/settings/devices/_DeviceType.pcss renamed to res/css/components/views/settings/devices/_DeviceTypeIcon.pcss

@@ -14,15 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_DeviceType {
+.mx_DeviceTypeIcon {
     flex: 0 0 auto;
     position: relative;
     margin-right: $spacing-8;
     /* creates space for verification icon to overlap */
     padding: 0 $spacing-8 $spacing-8 0;
 }
 
-.mx_DeviceType_deviceIcon {
+.mx_DeviceTypeIcon_deviceIcon {
     --background-color: $system;
     --icon-color: $secondary-content;
 
@@ -36,12 +36,12 @@ limitations under the License.
     background-color: var(--background-color);
 }
 
-.mx_DeviceType_selected .mx_DeviceType_deviceIcon {
+.mx_DeviceTypeIcon_selected .mx_DeviceTypeIcon_deviceIcon {
     --background-color: $primary-content;
     --icon-color: $background;
 }
 
-.mx_DeviceType_verificationIcon {
+.mx_DeviceTypeIcon_verificationIcon {
     position: absolute;
     bottom: 0;
     right: 0;

res/css/views/settings/_DevicesPanel.pcss

@@ -58,7 +58,7 @@ limitations under the License.
     min-height: 35px;
     padding: 0 $spacing-8;
 
-    .mx_DeviceType {
+    .mx_DeviceTypeIcon {
         /* hide the new device type in legacy device list
         for backwards compat reasons */
         display: none;

src/components/views/settings/DevicesPanelEntry.tsx

@@ -29,6 +29,7 @@ import VerificationRequestDialog from '../../views/dialogs/VerificationRequestDi
 import LogoutDialog from '../dialogs/LogoutDialog';
 import DeviceTile from './devices/DeviceTile';
 import SelectableDeviceTile from './devices/SelectableDeviceTile';
+import { DeviceType } from '../../../utils/device/parseUserAgent';
 
 interface IProps {
     device: IMyDevice;
@@ -153,25 +154,26 @@ export default class DevicesPanelEntry extends React.Component<IProps, IState> {
                 </AccessibleButton>
             </React.Fragment>;
 
-        const deviceWithVerification = {
+        const extendedDevice = {
             ...this.props.device,
             isVerified: this.props.verified,
+            deviceType: DeviceType.Unknown,
         };
 
         if (this.props.isOwnDevice) {
             return <div className={classNames("mx_DevicesPanel_device", "mx_DevicesPanel_myDevice")}>
                 <div className="mx_DevicesPanel_deviceTrust">
                     <span className={"mx_DevicesPanel_icon mx_E2EIcon " + iconClass} />
                 </div>
-                <DeviceTile device={deviceWithVerification}>
+                <DeviceTile device={extendedDevice}>
                     { buttons }
                 </DeviceTile>
             </div>;
         }
 
         return (
             <div className="mx_DevicesPanel_device">
-                <SelectableDeviceTile device={deviceWithVerification} onClick={this.onDeviceToggled} isSelected={this.props.selected}>
+                <SelectableDeviceTile device={extendedDevice} onClick={this.onDeviceToggled} isSelected={this.props.selected}>
                     { buttons }
                 </SelectableDeviceTile>
             </div>

src/components/views/settings/devices/CurrentDeviceSection.tsx

@@ -24,10 +24,10 @@ import DeviceDetails from './DeviceDetails';
 import DeviceExpandDetailsButton from './DeviceExpandDetailsButton';
 import DeviceTile from './DeviceTile';
 import { DeviceVerificationStatusCard } from './DeviceVerificationStatusCard';
-import { DeviceWithVerification } from './types';
+import { ExtendedDevice } from './types';
 
 interface Props {
-    device?: DeviceWithVerification;
+    device?: ExtendedDevice;
     isLoading: boolean;
     isSigningOut: boolean;
     localNotificationSettings?: LocalNotificationSettings | undefined;

src/components/views/settings/devices/DeviceDetailHeading.tsx

@@ -22,10 +22,10 @@ import Field from '../../elements/Field';
 import Spinner from '../../elements/Spinner';
 import { Caption } from '../../typography/Caption';
 import Heading from '../../typography/Heading';
-import { DeviceWithVerification } from './types';
+import { ExtendedDevice } from './types';
 
 interface Props {
-    device: DeviceWithVerification;
+    device: ExtendedDevice;
     saveDeviceName: (deviceName: string) => Promise<void>;
 }
 

src/components/views/settings/devices/DeviceDetails.tsx

@@ -72,8 +72,8 @@ const DeviceDetails: React.FC<Props> = ({
             id: 'application',
             heading: _t('Application'),
             values: [
-                { label: _t('Name'), value: device.clientName },
-                { label: _t('Version'), value: device.clientVersion },
+                { label: _t('Name'), value: device.appName },
+                { label: _t('Version'), value: device.appVersion },
                 { label: _t('URL'), value: device.url },
             ],
         },

src/components/views/settings/devices/DeviceTile.tsx

@@ -21,16 +21,16 @@ import { _t } from "../../../../languageHandler";
 import { formatDate, formatRelativeTime } from "../../../../DateUtils";
 import Heading from "../../typography/Heading";
 import { INACTIVE_DEVICE_AGE_DAYS, isDeviceInactive } from "./filter";
-import { DeviceWithVerification } from "./types";
-import { DeviceType } from "./DeviceType";
+import { ExtendedDevice } from "./types";
+import { DeviceTypeIcon } from "./DeviceTypeIcon";
 export interface DeviceTileProps {
-    device: DeviceWithVerification;
+    device: ExtendedDevice;
     isSelected?: boolean;
     children?: React.ReactNode;
     onClick?: () => void;
 }
 
-const DeviceTileName: React.FC<{ device: DeviceWithVerification }> = ({ device }) => {
+const DeviceTileName: React.FC<{ device: ExtendedDevice }> = ({ device }) => {
     return <Heading size='h4'>
         { device.display_name || device.device_id }
     </Heading>;
@@ -48,7 +48,7 @@ const formatLastActivity = (timestamp: number, now = new Date().getTime()): stri
     return formatRelativeTime(new Date(timestamp));
 };
 
-const getInactiveMetadata = (device: DeviceWithVerification): { id: string, value: React.ReactNode } | undefined => {
+const getInactiveMetadata = (device: ExtendedDevice): { id: string, value: React.ReactNode } | undefined => {
     const isInactive = isDeviceInactive(device);
 
     if (!isInactive) {
@@ -89,7 +89,11 @@ const DeviceTile: React.FC<DeviceTileProps> = ({
         ];
 
     return <div className="mx_DeviceTile" data-testid={`device-tile-${device.device_id}`}>
-        <DeviceType isVerified={device.isVerified} isSelected={isSelected} />
+        <DeviceTypeIcon
+            isVerified={device.isVerified}
+            isSelected={isSelected}
+            deviceType={device.deviceType}
+        />
         <div className="mx_DeviceTile_info" onClick={onClick}>
             <DeviceTileName device={device} />
             <div className="mx_DeviceTile_metadata">

src/components/views/settings/devices/DeviceType.tsx renamed to src/components/views/settings/devices/DeviceTypeIcon.tsx

@@ -21,33 +21,39 @@ import { Icon as UnknownDeviceIcon } from '../../../../../res/img/element-icons/
 import { Icon as VerifiedIcon } from '../../../../../res/img/e2e/verified.svg';
 import { Icon as UnverifiedIcon } from '../../../../../res/img/e2e/warning.svg';
 import { _t } from '../../../../languageHandler';
-import { DeviceWithVerification } from './types';
+import { ExtendedDevice } from './types';
+import { DeviceType } from '../../../../utils/device/parseUserAgent';
 
 interface Props {
-    isVerified?: DeviceWithVerification['isVerified'];
+    isVerified?: ExtendedDevice['isVerified'];
     isSelected?: boolean;
+    deviceType?: DeviceType;
 }
 
-export const DeviceType: React.FC<Props> = ({ isVerified, isSelected }) => (
-    <div className={classNames('mx_DeviceType', {
-        mx_DeviceType_selected: isSelected,
+export const DeviceTypeIcon: React.FC<Props> = ({
+    isVerified,
+    isSelected,
+    deviceType,
+}) => (
+    <div className={classNames('mx_DeviceTypeIcon', {
+        mx_DeviceTypeIcon_selected: isSelected,
     })}
     >
         { /* TODO(kerrya) all devices have an unknown type until PSG-650 */ }
         <UnknownDeviceIcon
-            className='mx_DeviceType_deviceIcon'
+            className='mx_DeviceTypeIcon_deviceIcon'
             role='img'
             aria-label={_t('Unknown device type')}
         />
         {
             isVerified
                 ? <VerifiedIcon
-                    className={classNames('mx_DeviceType_verificationIcon', 'verified')}
+                    className={classNames('mx_DeviceTypeIcon_verificationIcon', 'verified')}
                     role='img'
                     aria-label={_t('Verified')}
                 />
                 : <UnverifiedIcon
-                    className={classNames('mx_DeviceType_verificationIcon', 'unverified')}
+                    className={classNames('mx_DeviceTypeIcon_verificationIcon', 'unverified')}
                     role='img'
                     aria-label={_t('Unverified')}
                 />

src/components/views/settings/devices/DeviceVerificationStatusCard.tsx

@@ -21,11 +21,11 @@ import AccessibleButton from '../../elements/AccessibleButton';
 import DeviceSecurityCard from './DeviceSecurityCard';
 import {
     DeviceSecurityVariation,
-    DeviceWithVerification,
+    ExtendedDevice,
 } from './types';
 
 interface Props {
-    device: DeviceWithVerification;
+    device: ExtendedDevice;
     onVerifyDevice?: () => void;
 }