Device manager - display client information in device details (PSG-682) (#9315)

* 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

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

@@ -26,10 +26,10 @@ import Spinner from '../../elements/Spinner';
 import ToggleSwitch from '../../elements/ToggleSwitch';
 import { DeviceDetailHeading } from './DeviceDetailHeading';
 import { DeviceVerificationStatusCard } from './DeviceVerificationStatusCard';
-import { DeviceWithVerification } from './types';
+import { ExtendedDevice } from './types';
 
 interface Props {
-    device: DeviceWithVerification;
+    device: ExtendedDevice;
     pusher?: IPusher | undefined;
     localNotificationSettings?: LocalNotificationSettings | undefined;
     isSigningOut: boolean;
@@ -41,6 +41,7 @@ interface Props {
 }
 
 interface MetadataTable {
+    id: string;
     heading?: string;
     values: { label: string, value?: string | React.ReactNode }[];
 }
@@ -58,6 +59,7 @@ const DeviceDetails: React.FC<Props> = ({
 }) => {
     const metadata: MetadataTable[] = [
         {
+            id: 'session',
             values: [
                 { label: _t('Session ID'), value: device.device_id },
                 {
@@ -67,12 +69,28 @@ 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('URL'), value: device.url },
+            ],
+        },
+        {
+            id: 'device',
             heading: _t('Device'),
             values: [
                 { label: _t('IP address'), value: device.last_seen_ip },
             ],
         },
-    ];
+    ].map(section =>
+        // filter out falsy values
+        ({ ...section, values: section.values.filter(row => !!row.value) }))
+        .filter(section =>
+        // then filter out sections with no values
+            section.values.length,
+        );
 
     const showPushNotificationSection = !!pusher || !!localNotificationSettings;
 
@@ -101,9 +119,10 @@ const DeviceDetails: React.FC<Props> = ({
         </section>
         <section className='mx_DeviceDetails_section'>
             <p className='mx_DeviceDetails_sectionHeading'>{ _t('Session details') }</p>
-            { metadata.map(({ heading, values }, index) => <table
+            { metadata.map(({ heading, values, id }, index) => <table
                 className='mx_DeviceDetails_metadataTable'
                 key={index}
+                data-testid={`device-detail-metadata-${id}`}
             >
                 { heading &&
                     <thead>

src/components/views/settings/devices/types.ts

@@ -17,7 +17,13 @@ limitations under the License.
 import { IMyDevice } from "matrix-js-sdk/src/matrix";
 
 export type DeviceWithVerification = IMyDevice & { isVerified: boolean | null };
-export type DevicesDictionary = Record<DeviceWithVerification['device_id'], DeviceWithVerification>;
+export type ExtendedDeviceInfo = {
+    clientName?: string;
+    clientVersion?: string;
+    url?: string;
+};
+export type ExtendedDevice = DeviceWithVerification & ExtendedDeviceInfo;
+export type DevicesDictionary = Record<DeviceWithVerification['device_id'], ExtendedDevice>;
 
 export enum DeviceSecurityVariation {
     Verified = 'Verified',

src/components/views/settings/devices/useOwnDevices.ts

@@ -33,7 +33,8 @@ import { LocalNotificationSettings } from "matrix-js-sdk/src/@types/local_notifi
 
 import MatrixClientContext from "../../../../contexts/MatrixClientContext";
 import { _t } from "../../../../languageHandler";
-import { DevicesDictionary, DeviceWithVerification } from "./types";
+import { getDeviceClientInformation } from "../../../../utils/device/clientInformation";
+import { DevicesDictionary, DeviceWithVerification, ExtendedDeviceInfo } from "./types";
 import { useEventEmitter } from "../../../../hooks/useEventEmitter";
 
 const isDeviceVerified = (
@@ -62,6 +63,16 @@ const isDeviceVerified = (
     }
 };
 
+const parseDeviceExtendedInformation = (matrixClient: MatrixClient, device: IMyDevice): ExtendedDeviceInfo => {
+    const { name, version, url } = getDeviceClientInformation(matrixClient, device.device_id);
+
+    return {
+        clientName: name,
+        clientVersion: version,
+        url,
+    };
+};
+
 const fetchDevicesWithVerification = async (
     matrixClient: MatrixClient,
     userId: string,
@@ -75,6 +86,7 @@ const fetchDevicesWithVerification = async (
         [device.device_id]: {
             ...device,
             isVerified: isDeviceVerified(matrixClient, crossSigningInfo, device),
+            ...parseDeviceExtendedInformation(matrixClient, device),
         },
     }), {});