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
matrix-org · Oct 7, 2022 · c9f5d57 · c9f5d57
1 parent c4432a8
commit c9f5d57
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 0 deletions.
diff --git a/src/components/views/settings/devices/DeviceDetails.tsx b/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 },
             ],
         },

diff --git a/src/i18n/strings/en_EN.json b/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.",

diff --git a/test/components/views/settings/devices/DeviceDetails-test.tsx b/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();

diff --git a/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap b/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"