Device manager - render extended device information (#9360)

* 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

* setup test cases

* detect device type correctly

* 80% working ua parser

* parse asera gents for device info

* combine clientName/Version into one field, remove debug from tests

* add new metadata to device details

* render device info from UA

Author: Kerry

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

@@ -62,6 +62,7 @@ const DeviceDetails: React.FC<Props> = ({
             id: 'session',
             values: [
                 { label: _t('Session ID'), value: device.device_id },
+                { label: _t('Client'), value: device.client },
                 {
                     label: _t('Last activity'),
                     value: device.last_seen_ts && formatDate(new Date(device.last_seen_ts)),
@@ -81,6 +82,8 @@ const DeviceDetails: React.FC<Props> = ({
             id: 'device',
             heading: _t('Device'),
             values: [
+                { label: _t('Model'), value: device.deviceModel },
+                { label: _t('Operating system'), value: device.deviceOperatingSystem },
                 { label: _t('IP address'), value: device.last_seen_ip },
             ],
         },

src/i18n/strings/en_EN.json

@@ -1719,11 +1719,14 @@
     "Rename session": "Rename session",
     "Please be aware that session names are also visible to people you communicate with": "Please be aware that session names are also visible to people you communicate with",
     "Session ID": "Session ID",
+    "Client": "Client",
     "Last activity": "Last activity",
     "Application": "Application",
     "Version": "Version",
     "URL": "URL",
     "Device": "Device",
+    "Model": "Model",
+    "Operating system": "Operating system",
     "IP address": "IP address",
     "Session details": "Session details",
     "Toggle push notifications on this session.": "Toggle push notifications on this session.",

test/components/views/settings/devices/DeviceDetails-test.tsx

@@ -61,6 +61,9 @@ describe('<DeviceDetails />', () => {
             last_seen_ip: '123.456.789',
             last_seen_ts: now - 60000000,
             appName: 'Element Web',
+            client: 'Firefox 100',
+            deviceModel: 'Iphone X',
+            deviceOperatingSystem: 'Windows 95',
         };
         const { container } = render(getComponent({ device }));
         expect(container).toMatchSnapshot();

test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap

@@ -181,6 +181,18 @@ exports[`<DeviceDetails /> renders device with metadata 1`] = `
               my-device
             </td>
           </tr>
+          <tr>
+            <td
+              class="mxDeviceDetails_metadataLabel"
+            >
+              Client
+            </td>
+            <td
+              class="mxDeviceDetails_metadataValue"
+            >
+              Firefox 100
+            </td>
+          </tr>
           <tr>
             <td
               class="mxDeviceDetails_metadataLabel"
@@ -233,6 +245,30 @@ exports[`<DeviceDetails /> renders device with metadata 1`] = `
           </tr>
         </thead>
         <tbody>
+          <tr>
+            <td
+              class="mxDeviceDetails_metadataLabel"
+            >
+              Model
+            </td>
+            <td
+              class="mxDeviceDetails_metadataValue"
+            >
+              Iphone X
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="mxDeviceDetails_metadataLabel"
+            >
+              Operating system
+            </td>
+            <td
+              class="mxDeviceDetails_metadataValue"
+            >
+              Windows 95
+            </td>
+          </tr>
           <tr>
             <td
               class="mxDeviceDetails_metadataLabel"