From a37682e64d5788028138d26fce76b62c76d5b111 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Fri, 23 Sep 2022 17:10:15 +0200
Subject: [PATCH 01/27] record device client inforamtion events on app start

---
 src/DeviceListener.ts                       | 19 +++++
 src/utils/device/clientInformation.ts       | 62 +++++++++++++++
 test/DeviceListener-test.ts                 | 50 ++++++++++++
 test/utils/device/clientInformation-test.ts | 86 +++++++++++++++++++++
 4 files changed, 217 insertions(+)
 create mode 100644 src/utils/device/clientInformation.ts
 create mode 100644 test/utils/device/clientInformation-test.ts

diff --git a/src/DeviceListener.ts b/src/DeviceListener.ts
index cf9af5befc4..c6d920c2eac 100644
--- a/src/DeviceListener.ts
+++ b/src/DeviceListener.ts
@@ -40,6 +40,9 @@ import { isSecureBackupRequired } from './utils/WellKnownUtils';
 import { ActionPayload } from "./dispatcher/payloads";
 import { Action } from "./dispatcher/actions";
 import { isLoggedIn } from "./utils/login";
+import SdkConfig from "./SdkConfig";
+import PlatformPeg from "./PlatformPeg";
+import { recordClientInformation } from "./utils/device/clientInformation";
 
 const KEY_BACKUP_POLL_INTERVAL = 5 * 60 * 1000;
 
@@ -78,6 +81,7 @@ export default class DeviceListener {
         MatrixClientPeg.get().on(RoomStateEvent.Events, this.onRoomStateEvents);
         this.dispatcherRef = dis.register(this.onAction);
         this.recheck();
+        this.recordClientInformation();
     }
 
     public stop() {
@@ -200,6 +204,7 @@ export default class DeviceListener {
     private onAction = ({ action }: ActionPayload) => {
         if (action !== Action.OnLoggedIn) return;
         this.recheck();
+        this.recordClientInformation();
     };
 
     // The server doesn't tell us when key backup is set up, so we poll
@@ -343,4 +348,18 @@ export default class DeviceListener {
             dis.dispatch({ action: Action.ReportKeyBackupNotEnabled });
         }
     };
+
+    private recordClientInformation = async () => {
+        try {
+            await recordClientInformation(
+                MatrixClientPeg.get(),
+                SdkConfig.get(),
+                PlatformPeg.get(),
+            );
+        } catch (error) {
+            // this is a best effort operation
+            // log the error without rethrowing
+            logger.error('Failed to record client information', error);
+        }
+    };
 }
diff --git a/src/utils/device/clientInformation.ts b/src/utils/device/clientInformation.ts
new file mode 100644
index 00000000000..9dfa5c03ff4
--- /dev/null
+++ b/src/utils/device/clientInformation.ts
@@ -0,0 +1,62 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MatrixClient } from "matrix-js-sdk/src/client";
+
+import BasePlatform from "../../BasePlatform";
+import { IConfigOptions } from "../../IConfigOptions";
+
+export type DeviceClientInformation = {
+    name?: string;
+    version?: string;
+    url?: string;
+};
+
+const formatUrl = (): string | undefined => {
+    // don't record url for electron clients
+    if (window.electron) {
+        return undefined;
+    }
+
+    // strip query-string and fragment from uri
+    const url = new URL(window.location.href);
+
+    return [
+        url.host,
+        url.pathname.replace(/\/$/, ""), // Remove trailing slash if present
+    ].join("");
+};
+
+export const getClientInformationEventType = (deviceId: string): string =>
+    `io.element.matrix-client-information.${deviceId}`;
+
+export const recordClientInformation = async (
+    matrixClient: MatrixClient,
+    sdkConfig: IConfigOptions,
+    platform: BasePlatform,
+): Promise<void> => {
+    const deviceId = matrixClient.getDeviceId();
+    const { brand } = sdkConfig;
+    const version = await platform.getAppVersion();
+    const type = getClientInformationEventType(deviceId);
+    const url = formatUrl();
+
+    await matrixClient.setAccountData(type, {
+        name: brand,
+        version,
+        url,
+    });
+};
diff --git a/test/DeviceListener-test.ts b/test/DeviceListener-test.ts
index 06405674416..6e7f68896cc 100644
--- a/test/DeviceListener-test.ts
+++ b/test/DeviceListener-test.ts
@@ -18,6 +18,7 @@ limitations under the License.
 import { EventEmitter } from "events";
 import { mocked } from "jest-mock";
 import { Room } from "matrix-js-sdk/src/matrix";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import DeviceListener from "../src/DeviceListener";
 import { MatrixClientPeg } from "../src/MatrixClientPeg";
@@ -27,6 +28,7 @@ import * as BulkUnverifiedSessionsToast from "../src/toasts/BulkUnverifiedSessio
 import { isSecretStorageBeingAccessed } from "../src/SecurityManager";
 import dis from "../src/dispatcher/dispatcher";
 import { Action } from "../src/dispatcher/actions";
+import { mockPlatformPeg } from "./test-utils";
 
 // don't litter test console with logs
 jest.mock("matrix-js-sdk/src/logger");
@@ -40,6 +42,8 @@ jest.mock("../src/SecurityManager", () => ({
     isSecretStorageBeingAccessed: jest.fn(), accessSecretStorage: jest.fn(),
 }));
 
+const deviceId = 'my-device-id';
+
 class MockClient extends EventEmitter {
     getUserId = jest.fn();
     getKeyBackupVersion = jest.fn().mockResolvedValue(undefined);
@@ -57,6 +61,8 @@ class MockClient extends EventEmitter {
     downloadKeys = jest.fn();
     isRoomEncrypted = jest.fn();
     getClientWellKnown = jest.fn();
+    getDeviceId = jest.fn().mockReturnValue(deviceId);
+    setAccountData = jest.fn();
 }
 const mockDispatcher = mocked(dis);
 const flushPromises = async () => await new Promise(process.nextTick);
@@ -75,6 +81,9 @@ describe('DeviceListener', () => {
 
     beforeEach(() => {
         jest.resetAllMocks();
+        mockPlatformPeg({
+            getAppVersion: jest.fn().mockResolvedValue('1.2.3'),
+        });
         mockClient = new MockClient();
         jest.spyOn(MatrixClientPeg, 'get').mockReturnValue(mockClient);
     });
@@ -86,6 +95,47 @@ describe('DeviceListener', () => {
         return instance;
     };
 
+    describe('client information', () => {
+        it('saves client information on start', async () => {
+            await createAndStart();
+
+            expect(mockClient.setAccountData).toHaveBeenCalledWith(
+                `io.element.matrix-client-information.${deviceId}`,
+                { name: 'Element', url: 'localhost', version: '1.2.3' },
+            );
+        });
+
+        it('catches error and logs when saving client information fails', async () => {
+            const errorLogSpy = jest.spyOn(logger, 'error');
+            const error = new Error('oups');
+            mockClient.setAccountData.mockRejectedValue(error);
+
+            // doesn't throw
+            await createAndStart();
+
+            expect(errorLogSpy).toHaveBeenCalledWith(
+                'Failed to record client information',
+                error,
+            );
+        });
+
+        it('saves client information on logged in action', async () => {
+            const instance = await createAndStart();
+
+            mockClient.setAccountData.mockClear();
+
+            // @ts-ignore calling private function
+            instance.onAction({ action: Action.OnLoggedIn });
+
+            await flushPromises();
+
+            expect(mockClient.setAccountData).toHaveBeenCalledWith(
+                `io.element.matrix-client-information.${deviceId}`,
+                { name: 'Element', url: 'localhost', version: '1.2.3' },
+            );
+        });
+    });
+
     describe('recheck', () => {
         it('does nothing when cross signing feature is not supported', async () => {
             mockClient.doesServerSupportUnstableFeature.mockResolvedValue(false);
diff --git a/test/utils/device/clientInformation-test.ts b/test/utils/device/clientInformation-test.ts
new file mode 100644
index 00000000000..e6b470437e8
--- /dev/null
+++ b/test/utils/device/clientInformation-test.ts
@@ -0,0 +1,86 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import BasePlatform from "../../../src/BasePlatform";
+import { IConfigOptions } from "../../../src/IConfigOptions";
+import { recordClientInformation } from "../../../src/utils/device/clientInformation";
+import { getMockClientWithEventEmitter } from "../../test-utils";
+
+describe('recordClientInformation()', () => {
+    const deviceId = 'my-device-id';
+    const version = '1.2.3';
+    const isElectron = window.electron;
+
+    const mockClient = getMockClientWithEventEmitter({
+        getDeviceId: jest.fn().mockReturnValue(deviceId),
+        setAccountData: jest.fn(),
+    });
+
+    const sdkConfig: IConfigOptions = {
+        brand: 'Test Brand',
+        element_call: { url: '' },
+    };
+
+    const platform = {
+        getAppVersion: jest.fn().mockResolvedValue(version),
+    } as unknown as BasePlatform;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        window.electron = false;
+    });
+
+    afterAll(() => {
+        // restore global
+        window.electron = isElectron;
+    });
+
+    it('saves client information without url for electron clients', async () => {
+        window.electron = true;
+
+        await recordClientInformation(
+            mockClient,
+            sdkConfig,
+            platform,
+        );
+
+        expect(mockClient.setAccountData).toHaveBeenCalledWith(
+            `io.element.matrix-client-information.${deviceId}`,
+            {
+                name: sdkConfig.brand,
+                version,
+                url: undefined,
+            },
+        );
+    });
+
+    it('saves client information with url for non-electron clients', async () => {
+        await recordClientInformation(
+            mockClient,
+            sdkConfig,
+            platform,
+        );
+
+        expect(mockClient.setAccountData).toHaveBeenCalledWith(
+            `io.element.matrix-client-information.${deviceId}`,
+            {
+                name: sdkConfig.brand,
+                version,
+                url: 'localhost',
+            },
+        );
+    });
+});

From 94b027b9c94ef1732b8d1a0d06329ea35fc1797d Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Mon, 26 Sep 2022 10:35:29 +0200
Subject: [PATCH 02/27] matrix-client-information -> matrix_client_information

---
 src/utils/device/clientInformation.ts       | 2 +-
 test/DeviceListener-test.ts                 | 4 ++--
 test/utils/device/clientInformation-test.ts | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/utils/device/clientInformation.ts b/src/utils/device/clientInformation.ts
index 9dfa5c03ff4..f45fafbd1e3 100644
--- a/src/utils/device/clientInformation.ts
+++ b/src/utils/device/clientInformation.ts
@@ -41,7 +41,7 @@ const formatUrl = (): string | undefined => {
 };
 
 export const getClientInformationEventType = (deviceId: string): string =>
-    `io.element.matrix-client-information.${deviceId}`;
+    `io.element.matrix_client_information.${deviceId}`;
 
 export const recordClientInformation = async (
     matrixClient: MatrixClient,
diff --git a/test/DeviceListener-test.ts b/test/DeviceListener-test.ts
index 6e7f68896cc..466ea39c49b 100644
--- a/test/DeviceListener-test.ts
+++ b/test/DeviceListener-test.ts
@@ -100,7 +100,7 @@ describe('DeviceListener', () => {
             await createAndStart();
 
             expect(mockClient.setAccountData).toHaveBeenCalledWith(
-                `io.element.matrix-client-information.${deviceId}`,
+                `io.element.matrix_client_information.${deviceId}`,
                 { name: 'Element', url: 'localhost', version: '1.2.3' },
             );
         });
@@ -130,7 +130,7 @@ describe('DeviceListener', () => {
             await flushPromises();
 
             expect(mockClient.setAccountData).toHaveBeenCalledWith(
-                `io.element.matrix-client-information.${deviceId}`,
+                `io.element.matrix_client_information.${deviceId}`,
                 { name: 'Element', url: 'localhost', version: '1.2.3' },
             );
         });
diff --git a/test/utils/device/clientInformation-test.ts b/test/utils/device/clientInformation-test.ts
index e6b470437e8..0c4a6cf2648 100644
--- a/test/utils/device/clientInformation-test.ts
+++ b/test/utils/device/clientInformation-test.ts
@@ -58,7 +58,7 @@ describe('recordClientInformation()', () => {
         );
 
         expect(mockClient.setAccountData).toHaveBeenCalledWith(
-            `io.element.matrix-client-information.${deviceId}`,
+            `io.element.matrix_client_information.${deviceId}`,
             {
                 name: sdkConfig.brand,
                 version,
@@ -75,7 +75,7 @@ describe('recordClientInformation()', () => {
         );
 
         expect(mockClient.setAccountData).toHaveBeenCalledWith(
-            `io.element.matrix-client-information.${deviceId}`,
+            `io.element.matrix_client_information.${deviceId}`,
             {
                 name: sdkConfig.brand,
                 version,

From 593465ae04d3f5cb671b3cca994cee9dd9a2376a Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Mon, 26 Sep 2022 11:16:46 +0200
Subject: [PATCH 03/27] fix types

---
 src/utils/device/clientInformation.ts       | 2 +-
 test/utils/device/clientInformation-test.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/device/clientInformation.ts b/src/utils/device/clientInformation.ts
index f45fafbd1e3..d12d4cd8ae2 100644
--- a/src/utils/device/clientInformation.ts
+++ b/src/utils/device/clientInformation.ts
@@ -40,7 +40,7 @@ const formatUrl = (): string | undefined => {
     ].join("");
 };
 
-export const getClientInformationEventType = (deviceId: string): string =>
+const getClientInformationEventType = (deviceId: string): string =>
     `io.element.matrix_client_information.${deviceId}`;
 
 export const recordClientInformation = async (
diff --git a/test/utils/device/clientInformation-test.ts b/test/utils/device/clientInformation-test.ts
index 0c4a6cf2648..628c9729d14 100644
--- a/test/utils/device/clientInformation-test.ts
+++ b/test/utils/device/clientInformation-test.ts
@@ -31,7 +31,7 @@ describe('recordClientInformation()', () => {
 
     const sdkConfig: IConfigOptions = {
         brand: 'Test Brand',
-        element_call: { url: '' },
+        element_call: { url: '', use_exclusively: false },
     };
 
     const platform = {

From c85865607fb354dc99345e21a4d528a77306155d Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Mon, 26 Sep 2022 11:25:18 +0200
Subject: [PATCH 04/27] remove another unused export

---
 src/utils/device/clientInformation.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/utils/device/clientInformation.ts b/src/utils/device/clientInformation.ts
index d12d4cd8ae2..83277b11363 100644
--- a/src/utils/device/clientInformation.ts
+++ b/src/utils/device/clientInformation.ts
@@ -19,12 +19,6 @@ import { MatrixClient } from "matrix-js-sdk/src/client";
 import BasePlatform from "../../BasePlatform";
 import { IConfigOptions } from "../../IConfigOptions";
 
-export type DeviceClientInformation = {
-    name?: string;
-    version?: string;
-    url?: string;
-};
-
 const formatUrl = (): string | undefined => {
     // don't record url for electron clients
     if (window.electron) {

From 950f61cdb09d210e4fa424a3ee69fd0a9cb4ca3c Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Tue, 27 Sep 2022 10:26:46 +0200
Subject: [PATCH 05/27] add docs link

---
 src/utils/device/clientInformation.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/utils/device/clientInformation.ts b/src/utils/device/clientInformation.ts
index 83277b11363..32445334f5a 100644
--- a/src/utils/device/clientInformation.ts
+++ b/src/utils/device/clientInformation.ts
@@ -37,6 +37,10 @@ const formatUrl = (): string | undefined => {
 const getClientInformationEventType = (deviceId: string): string =>
     `io.element.matrix_client_information.${deviceId}`;
 
+/**
+ * Record extra client information for the current device
+ * https://github.com/vector-im/element-meta/blob/develop/spec/matrix_client_information.md
+ */
 export const recordClientInformation = async (
     matrixClient: MatrixClient,
     sdkConfig: IConfigOptions,

From 258d36488c8067474c07f156b5695da6723d33ed Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Fri, 23 Sep 2022 17:44:27 +0200
Subject: [PATCH 06/27] display device client information in device details

---
 .../views/settings/devices/DeviceDetails.tsx  | 20 ++++++++++++++++---
 .../views/settings/devices/types.ts           |  8 +++++++-
 .../views/settings/devices/useOwnDevices.ts   | 14 ++++++++++++-
 src/i18n/strings/en_EN.json                   |  3 +++
 src/utils/device/clientInformation.ts         | 20 +++++++++++++++++++
 5 files changed, 60 insertions(+), 5 deletions(-)

diff --git a/src/components/views/settings/devices/DeviceDetails.tsx b/src/components/views/settings/devices/DeviceDetails.tsx
index 53c095a33bd..f6fd825964d 100644
--- a/src/components/views/settings/devices/DeviceDetails.tsx
+++ b/src/components/views/settings/devices/DeviceDetails.tsx
@@ -22,10 +22,10 @@ import AccessibleButton from '../../elements/AccessibleButton';
 import Spinner from '../../elements/Spinner';
 import { DeviceDetailHeading } from './DeviceDetailHeading';
 import { DeviceVerificationStatusCard } from './DeviceVerificationStatusCard';
-import { DeviceWithVerification } from './types';
+import { ExtendedDevice } from './types';
 
 interface Props {
-    device: DeviceWithVerification;
+    device: ExtendedDevice;
     isSigningOut: boolean;
     onVerifyDevice?: () => void;
     onSignOutDevice: () => void;
@@ -54,13 +54,27 @@ const DeviceDetails: React.FC<Props> = ({
                 },
             ],
         },
+        {
+            heading: _t('Application'),
+            values: [
+                { label: _t('Name'), value: device.clientName },
+                { label: _t('Version'), value: device.clientVersion },
+                { label: _t('URL'), value: device.url },
+            ],
+        },
         {
             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,
+        );
     return <div className='mx_DeviceDetails' data-testid={`device-detail-${device.device_id}`}>
         <section className='mx_DeviceDetails_section'>
             <DeviceDetailHeading
diff --git a/src/components/views/settings/devices/types.ts b/src/components/views/settings/devices/types.ts
index 1f3328c09ef..9543ac2b32e 100644
--- a/src/components/views/settings/devices/types.ts
+++ b/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',
diff --git a/src/components/views/settings/devices/useOwnDevices.ts b/src/components/views/settings/devices/useOwnDevices.ts
index 0f7d1044da6..4ca0fface13 100644
--- a/src/components/views/settings/devices/useOwnDevices.ts
+++ b/src/components/views/settings/devices/useOwnDevices.ts
@@ -23,7 +23,8 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 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";
 
 const isDeviceVerified = (
     matrixClient: MatrixClient,
@@ -51,6 +52,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,
@@ -64,6 +75,7 @@ const fetchDevicesWithVerification = async (
         [device.device_id]: {
             ...device,
             isVerified: isDeviceVerified(matrixClient, crossSigningInfo, device),
+            ...parseDeviceExtendedInformation(matrixClient, device),
         },
     }), {});
 
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 9bd1dd8124f..80031659e8b 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1716,6 +1716,9 @@
     "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",
     "Last activity": "Last activity",
+    "Application": "Application",
+    "Version": "Version",
+    "URL": "URL",
     "Device": "Device",
     "IP address": "IP address",
     "Session details": "Session details",
diff --git a/src/utils/device/clientInformation.ts b/src/utils/device/clientInformation.ts
index 32445334f5a..0eeed294652 100644
--- a/src/utils/device/clientInformation.ts
+++ b/src/utils/device/clientInformation.ts
@@ -58,3 +58,23 @@ export const recordClientInformation = async (
         url,
     });
 };
+
+const sanitizeContentString = (value: unknown): string | undefined =>
+    value && typeof value === 'string' ? value : undefined;
+
+export const getDeviceClientInformation = (matrixClient: MatrixClient, deviceId: string): DeviceClientInformation => {
+    const event = matrixClient.getAccountData(getClientInformationEventType(deviceId));
+
+    if (!event) {
+        return {};
+    }
+
+    const { name, version, url } = event.getContent();
+
+    return {
+        name: sanitizeContentString(name),
+        version: sanitizeContentString(version),
+        url: sanitizeContentString(url),
+    };
+};
+

From a3cf263ed621dcab37dc644fd516a89429ae9b91 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Fri, 23 Sep 2022 17:46:44 +0200
Subject: [PATCH 07/27] update snapshots

---
 .../CurrentDeviceSection-test.tsx.snap        | 33 ----------
 .../__snapshots__/DeviceDetails-test.tsx.snap | 66 -------------------
 .../tabs/user/SessionManagerTab-test.tsx      |  1 +
 3 files changed, 1 insertion(+), 99 deletions(-)

diff --git a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
index 65ed96604de..d270b0132f4 100644
--- a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
@@ -90,39 +90,6 @@ HTMLCollection [
               alices_device
             </td>
           </tr>
-          <tr>
-            <td
-              class="mxDeviceDetails_metadataLabel"
-            >
-              Last activity
-            </td>
-            <td
-              class="mxDeviceDetails_metadataValue"
-            />
-          </tr>
-        </tbody>
-      </table>
-      <table
-        class="mx_DeviceDetails_metadataTable"
-      >
-        <thead>
-          <tr>
-            <th>
-              Device
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td
-              class="mxDeviceDetails_metadataLabel"
-            >
-              IP address
-            </td>
-            <td
-              class="mxDeviceDetails_metadataValue"
-            />
-          </tr>
         </tbody>
       </table>
     </section>
diff --git a/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
index ce9655456ef..14ecdf7c356 100644
--- a/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
@@ -78,39 +78,6 @@ exports[`<DeviceDetails /> renders a verified device 1`] = `
               my-device
             </td>
           </tr>
-          <tr>
-            <td
-              class="mxDeviceDetails_metadataLabel"
-            >
-              Last activity
-            </td>
-            <td
-              class="mxDeviceDetails_metadataValue"
-            />
-          </tr>
-        </tbody>
-      </table>
-      <table
-        class="mx_DeviceDetails_metadataTable"
-      >
-        <thead>
-          <tr>
-            <th>
-              Device
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td
-              class="mxDeviceDetails_metadataLabel"
-            >
-              IP address
-            </td>
-            <td
-              class="mxDeviceDetails_metadataValue"
-            />
-          </tr>
         </tbody>
       </table>
     </section>
@@ -350,39 +317,6 @@ exports[`<DeviceDetails /> renders device without metadata 1`] = `
               my-device
             </td>
           </tr>
-          <tr>
-            <td
-              class="mxDeviceDetails_metadataLabel"
-            >
-              Last activity
-            </td>
-            <td
-              class="mxDeviceDetails_metadataValue"
-            />
-          </tr>
-        </tbody>
-      </table>
-      <table
-        class="mx_DeviceDetails_metadataTable"
-      >
-        <thead>
-          <tr>
-            <th>
-              Device
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td
-              class="mxDeviceDetails_metadataLabel"
-            >
-              IP address
-            </td>
-            <td
-              class="mxDeviceDetails_metadataValue"
-            />
-          </tr>
         </tbody>
       </table>
     </section>
diff --git a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
index c69e71c32cf..d15731994e7 100644
--- a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
+++ b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
@@ -67,6 +67,7 @@ describe('<SessionManagerTab />', () => {
         deleteMultipleDevices: jest.fn(),
         generateClientSecret: jest.fn(),
         setDeviceDetails: jest.fn(),
+        getAccountData: jest.fn(),
     });
 
     const defaultProps = {};

From d316ec6ff66b13dbce270e7d1fba9552fc34c57c Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Fri, 23 Sep 2022 17:58:52 +0200
Subject: [PATCH 08/27] integration-ish test client information in metadata

---
 .../views/settings/devices/DeviceDetails.tsx  |  7 ++-
 .../CurrentDeviceSection-test.tsx.snap        |  1 +
 .../__snapshots__/DeviceDetails-test.tsx.snap |  4 ++
 .../tabs/user/SessionManagerTab-test.tsx      | 46 ++++++++++++++++++-
 4 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/src/components/views/settings/devices/DeviceDetails.tsx b/src/components/views/settings/devices/DeviceDetails.tsx
index f6fd825964d..a59de991e30 100644
--- a/src/components/views/settings/devices/DeviceDetails.tsx
+++ b/src/components/views/settings/devices/DeviceDetails.tsx
@@ -33,6 +33,7 @@ interface Props {
 }
 
 interface MetadataTable {
+    id: string;
     heading?: string;
     values: { label: string, value?: string | React.ReactNode }[];
 }
@@ -46,6 +47,7 @@ const DeviceDetails: React.FC<Props> = ({
 }) => {
     const metadata: MetadataTable[] = [
         {
+            id: 'session',
             values: [
                 { label: _t('Session ID'), value: device.device_id },
                 {
@@ -55,6 +57,7 @@ const DeviceDetails: React.FC<Props> = ({
             ],
         },
         {
+            id: 'application',
             heading: _t('Application'),
             values: [
                 { label: _t('Name'), value: device.clientName },
@@ -63,6 +66,7 @@ const DeviceDetails: React.FC<Props> = ({
             ],
         },
         {
+            id: 'device',
             heading: _t('Device'),
             values: [
                 { label: _t('IP address'), value: device.last_seen_ip },
@@ -88,9 +92,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>
diff --git a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
index d270b0132f4..a5930a42fa4 100644
--- a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
@@ -76,6 +76,7 @@ HTMLCollection [
       </p>
       <table
         class="mx_DeviceDetails_metadataTable"
+        data-testid="device-detail-metadata-session"
       >
         <tbody>
           <tr>
diff --git a/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
index 14ecdf7c356..a774c8fac54 100644
--- a/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
@@ -64,6 +64,7 @@ exports[`<DeviceDetails /> renders a verified device 1`] = `
       </p>
       <table
         class="mx_DeviceDetails_metadataTable"
+        data-testid="device-detail-metadata-session"
       >
         <tbody>
           <tr>
@@ -165,6 +166,7 @@ exports[`<DeviceDetails /> renders device with metadata 1`] = `
       </p>
       <table
         class="mx_DeviceDetails_metadataTable"
+        data-testid="device-detail-metadata-session"
       >
         <tbody>
           <tr>
@@ -195,6 +197,7 @@ exports[`<DeviceDetails /> renders device with metadata 1`] = `
       </table>
       <table
         class="mx_DeviceDetails_metadataTable"
+        data-testid="device-detail-metadata-device"
       >
         <thead>
           <tr>
@@ -303,6 +306,7 @@ exports[`<DeviceDetails /> renders device without metadata 1`] = `
       </p>
       <table
         class="mx_DeviceDetails_metadataTable"
+        data-testid="device-detail-metadata-session"
       >
         <tbody>
           <tr>
diff --git a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
index d15731994e7..28fd65f8351 100644
--- a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
+++ b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
@@ -22,7 +22,7 @@ import { logger } from 'matrix-js-sdk/src/logger';
 import { DeviceTrustLevel } from 'matrix-js-sdk/src/crypto/CrossSigning';
 import { VerificationRequest } from 'matrix-js-sdk/src/crypto/verification/request/VerificationRequest';
 import { sleep } from 'matrix-js-sdk/src/utils';
-import { IMyDevice } from 'matrix-js-sdk/src/matrix';
+import { IMyDevice, MatrixEvent } from 'matrix-js-sdk/src/matrix';
 
 import SessionManagerTab from '../../../../../../src/components/views/settings/tabs/user/SessionManagerTab';
 import MatrixClientContext from '../../../../../../src/contexts/MatrixClientContext';
@@ -102,6 +102,8 @@ describe('<SessionManagerTab />', () => {
         mockClient.getDevices
             .mockReset()
             .mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] });
+
+        mockClient.getAccountData.mockReturnValue(undefined);
     });
 
     it('renders spinner while devices load', () => {
@@ -167,6 +169,48 @@ describe('<SessionManagerTab />', () => {
         expect(getByTestId(`device-tile-${alicesDevice.device_id}`)).toMatchSnapshot();
     });
 
+    it('extends device with client information when available', async () => {
+        mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] });
+        mockClient.getAccountData.mockImplementation((eventType: string) => {
+            const content = {
+                    name: 'Element Web',
+                    version: '1.2.3',
+                    url: 'test.com',
+                };
+            return new MatrixEvent({
+                type: eventType,
+                content,
+            });
+        });
+
+        const { getByTestId } = render(getComponent());
+
+        await act(async () => {
+            await flushPromisesWithFakeTimers();
+        });
+
+        // once for each device
+        expect(mockClient.getAccountData).toHaveBeenCalledTimes(2);
+
+        toggleDeviceDetails(getByTestId, alicesDevice.device_id);
+        // application metadata section rendered
+        expect(getByTestId('device-detail-metadata-application')).toBeTruthy();
+    });
+
+    it('renders devices without available client information without error', async () => {
+        mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] });
+
+        const { getByTestId, queryByTestId } = render(getComponent());
+
+        await act(async () => {
+            await flushPromisesWithFakeTimers();
+        });
+
+        toggleDeviceDetails(getByTestId, alicesDevice.device_id);
+        // application metadata section not rendered
+        expect(queryByTestId('device-detail-metadata-application')).toBeFalsy();
+    });
+
     it('renders current session section with an unverified session', async () => {
         mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] });
         const { getByTestId } = render(getComponent());

From f24e983842e6fe1ca78bae3572d770e62e95c200 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Fri, 23 Sep 2022 18:17:26 +0200
Subject: [PATCH 09/27] tests

---
 .../settings/devices/DeviceDetails-test.tsx   |  1 +
 .../__snapshots__/DeviceDetails-test.tsx.snap | 26 ++++++++
 .../tabs/user/SessionManagerTab-test.tsx      |  8 +--
 test/utils/device/clientInformation-test.ts   | 62 ++++++++++++++++++-
 4 files changed, 92 insertions(+), 5 deletions(-)

diff --git a/test/components/views/settings/devices/DeviceDetails-test.tsx b/test/components/views/settings/devices/DeviceDetails-test.tsx
index dad0ce625be..3fabc4737ef 100644
--- a/test/components/views/settings/devices/DeviceDetails-test.tsx
+++ b/test/components/views/settings/devices/DeviceDetails-test.tsx
@@ -51,6 +51,7 @@ describe('<DeviceDetails />', () => {
             display_name: 'My Device',
             last_seen_ip: '123.456.789',
             last_seen_ts: now - 60000000,
+            clientName: 'Element Web',
         };
         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
index a774c8fac54..68f0bd7d59a 100644
--- a/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
@@ -195,6 +195,32 @@ exports[`<DeviceDetails /> renders device with metadata 1`] = `
           </tr>
         </tbody>
       </table>
+      <table
+        class="mx_DeviceDetails_metadataTable"
+        data-testid="device-detail-metadata-application"
+      >
+        <thead>
+          <tr>
+            <th>
+              Application
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td
+              class="mxDeviceDetails_metadataLabel"
+            >
+              Name
+            </td>
+            <td
+              class="mxDeviceDetails_metadataValue"
+            >
+              Element Web
+            </td>
+          </tr>
+        </tbody>
+      </table>
       <table
         class="mx_DeviceDetails_metadataTable"
         data-testid="device-detail-metadata-device"
diff --git a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
index 28fd65f8351..263acebc1f2 100644
--- a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
+++ b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
@@ -173,10 +173,10 @@ describe('<SessionManagerTab />', () => {
         mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] });
         mockClient.getAccountData.mockImplementation((eventType: string) => {
             const content = {
-                    name: 'Element Web',
-                    version: '1.2.3',
-                    url: 'test.com',
-                };
+                name: 'Element Web',
+                version: '1.2.3',
+                url: 'test.com',
+            };
             return new MatrixEvent({
                 type: eventType,
                 content,
diff --git a/test/utils/device/clientInformation-test.ts b/test/utils/device/clientInformation-test.ts
index 628c9729d14..1760c8a873e 100644
--- a/test/utils/device/clientInformation-test.ts
+++ b/test/utils/device/clientInformation-test.ts
@@ -14,9 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+
 import BasePlatform from "../../../src/BasePlatform";
 import { IConfigOptions } from "../../../src/IConfigOptions";
-import { recordClientInformation } from "../../../src/utils/device/clientInformation";
+import {
+    getDeviceClientInformation,
+    recordClientInformation,
+} from "../../../src/utils/device/clientInformation";
 import { getMockClientWithEventEmitter } from "../../test-utils";
 
 describe('recordClientInformation()', () => {
@@ -84,3 +89,58 @@ describe('recordClientInformation()', () => {
         );
     });
 });
+
+describe('getDeviceClientInformation()', () => {
+    const deviceId = 'my-device-id';
+
+    const mockClient = getMockClientWithEventEmitter({
+        getAccountData: jest.fn(),
+    });
+
+    beforeEach(() => {
+        jest.resetAllMocks();
+    });
+
+    it('returns an empty object when no event exists for the device', () => {
+        expect(getDeviceClientInformation(mockClient, deviceId)).toEqual({});
+
+        expect(mockClient.getAccountData).toHaveBeenCalledWith(
+            `io.element.matrix-client-information.${deviceId}`,
+        );
+    });
+
+    it('returns client information for the device', () => {
+        const eventContent = {
+            name: 'Element Web',
+            version: '1.2.3',
+            url: 'test.com',
+        };
+        const event = new MatrixEvent({
+            type: `io.element.matrix-client-information.${deviceId}`,
+            content: eventContent,
+        });
+        mockClient.getAccountData.mockReturnValue(event);
+        expect(getDeviceClientInformation(mockClient, deviceId)).toEqual(eventContent);
+    });
+
+    it('excludes values with incorrect types', () => {
+        const eventContent = {
+            extraField: 'hello',
+            name: 'Element Web',
+            // wrong format
+            version: { value: '1.2.3' },
+            url: 'test.com',
+        };
+        const event = new MatrixEvent({
+            type: `io.element.matrix-client-information.${deviceId}`,
+            content: eventContent,
+        });
+        mockClient.getAccountData.mockReturnValue(event);
+        // invalid fields excluded
+        expect(getDeviceClientInformation(mockClient, deviceId)).toEqual({
+            name: eventContent.name,
+            url: eventContent.url,
+        });
+    });
+});
+

From e79934f3902ecaea6a68d5d194aefc07ef8efb90 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Mon, 26 Sep 2022 11:13:38 +0200
Subject: [PATCH 10/27] fix tests

---
 test/utils/device/clientInformation-test.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/utils/device/clientInformation-test.ts b/test/utils/device/clientInformation-test.ts
index 1760c8a873e..0f1d030e791 100644
--- a/test/utils/device/clientInformation-test.ts
+++ b/test/utils/device/clientInformation-test.ts
@@ -105,7 +105,7 @@ describe('getDeviceClientInformation()', () => {
         expect(getDeviceClientInformation(mockClient, deviceId)).toEqual({});
 
         expect(mockClient.getAccountData).toHaveBeenCalledWith(
-            `io.element.matrix-client-information.${deviceId}`,
+            `io.element.matrix_client_information.${deviceId}`,
         );
     });
 
@@ -116,7 +116,7 @@ describe('getDeviceClientInformation()', () => {
             url: 'test.com',
         };
         const event = new MatrixEvent({
-            type: `io.element.matrix-client-information.${deviceId}`,
+            type: `io.element.matrix_client_information.${deviceId}`,
             content: eventContent,
         });
         mockClient.getAccountData.mockReturnValue(event);
@@ -132,7 +132,7 @@ describe('getDeviceClientInformation()', () => {
             url: 'test.com',
         };
         const event = new MatrixEvent({
-            type: `io.element.matrix-client-information.${deviceId}`,
+            type: `io.element.matrix_client_information.${deviceId}`,
             content: eventContent,
         });
         mockClient.getAccountData.mockReturnValue(event);

From 9e86e9e119cb509035e9ba771b9989c06c845cd5 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Mon, 26 Sep 2022 11:20:06 +0200
Subject: [PATCH 11/27] export helper

---
 src/utils/device/clientInformation.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/device/clientInformation.ts b/src/utils/device/clientInformation.ts
index 0eeed294652..f63fed6cbda 100644
--- a/src/utils/device/clientInformation.ts
+++ b/src/utils/device/clientInformation.ts
@@ -34,7 +34,7 @@ const formatUrl = (): string | undefined => {
     ].join("");
 };
 
-const getClientInformationEventType = (deviceId: string): string =>
+export const getClientInformationEventType = (deviceId: string): string =>
     `io.element.matrix_client_information.${deviceId}`;
 
 /**

From ad81d2c6394bc587ff7dbb6c6bf20156dffbe06a Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Mon, 26 Sep 2022 11:26:59 +0200
Subject: [PATCH 12/27] DeviceClientInformation type

---
 src/utils/device/clientInformation.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/utils/device/clientInformation.ts b/src/utils/device/clientInformation.ts
index f63fed6cbda..c31d1c690ea 100644
--- a/src/utils/device/clientInformation.ts
+++ b/src/utils/device/clientInformation.ts
@@ -19,6 +19,12 @@ import { MatrixClient } from "matrix-js-sdk/src/client";
 import BasePlatform from "../../BasePlatform";
 import { IConfigOptions } from "../../IConfigOptions";
 
+export type DeviceClientInformation = {
+    name?: string;
+    version?: string;
+    url?: string;
+};
+
 const formatUrl = (): string | undefined => {
     // don't record url for electron clients
     if (window.electron) {

From 0e273d9708e3703bee25757d11d7d834c6b25018 Mon Sep 17 00:00:00 2001
From: Kerry <kerrya@element.io>
Date: Tue, 4 Oct 2022 10:12:07 +0200
Subject: [PATCH 13/27] 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
---
 .../settings/devices/_FilteredDeviceList.pcss |   2 +-
 .../settings/devices/FilteredDeviceList.tsx   |  15 ++-
 .../devices/FilteredDeviceListHeader.tsx      |  21 +++
 .../devices/FilteredDeviceListHeader-test.tsx |  17 ++-
 .../FilteredDeviceListHeader-test.tsx.snap    |  69 ++++++++++
 .../tabs/user/SessionManagerTab-test.tsx      | 121 +++++++++++++++++-
 .../SessionManagerTab-test.tsx.snap           |  25 ++++
 7 files changed, 266 insertions(+), 4 deletions(-)

diff --git a/res/css/components/views/settings/devices/_FilteredDeviceList.pcss b/res/css/components/views/settings/devices/_FilteredDeviceList.pcss
index a871b080496..d60c9628fb4 100644
--- a/res/css/components/views/settings/devices/_FilteredDeviceList.pcss
+++ b/res/css/components/views/settings/devices/_FilteredDeviceList.pcss
@@ -25,7 +25,7 @@ limitations under the License.
     display: grid;
     grid-gap: $spacing-16;
     margin: 0;
-    padding: 0 $spacing-8;
+    padding: 0 $spacing-16;
 }
 
 .mx_FilteredDeviceList_listItem {
diff --git a/src/components/views/settings/devices/FilteredDeviceList.tsx b/src/components/views/settings/devices/FilteredDeviceList.tsx
index 6d6668a854c..4cf7ac1a635 100644
--- a/src/components/views/settings/devices/FilteredDeviceList.tsx
+++ b/src/components/views/settings/devices/FilteredDeviceList.tsx
@@ -266,8 +266,21 @@ export const FilteredDeviceList =
             onFilterChange(filterId === ALL_FILTER_ID ? undefined : filterId as DeviceSecurityVariation);
         };
 
+        const isAllSelected = selectedDeviceIds.length >= sortedDevices.length;
+        const toggleSelectAll = () => {
+            if (isAllSelected) {
+                setSelectedDeviceIds([]);
+            } else {
+                setSelectedDeviceIds(sortedDevices.map(device => device.device_id));
+            }
+        };
+
         return <div className='mx_FilteredDeviceList' ref={ref}>
-            <FilteredDeviceListHeader selectedDeviceCount={selectedDeviceIds.length}>
+            <FilteredDeviceListHeader
+                selectedDeviceCount={selectedDeviceIds.length}
+                isAllSelected={isAllSelected}
+                toggleSelectAll={toggleSelectAll}
+            >
                 { selectedDeviceIds.length
                     ? <>
                         <AccessibleButton
diff --git a/src/components/views/settings/devices/FilteredDeviceListHeader.tsx b/src/components/views/settings/devices/FilteredDeviceListHeader.tsx
index 6ecee4c8d23..561431d12ef 100644
--- a/src/components/views/settings/devices/FilteredDeviceListHeader.tsx
+++ b/src/components/views/settings/devices/FilteredDeviceListHeader.tsx
@@ -17,18 +17,39 @@ limitations under the License.
 import React, { HTMLProps } from 'react';
 
 import { _t } from '../../../../languageHandler';
+import StyledCheckbox, { CheckboxStyle } from '../../elements/StyledCheckbox';
+import { Alignment } from '../../elements/Tooltip';
+import TooltipTarget from '../../elements/TooltipTarget';
 
 interface Props extends Omit<HTMLProps<HTMLDivElement>, 'className'> {
     selectedDeviceCount: number;
+    isAllSelected: boolean;
+    toggleSelectAll: () => void;
     children?: React.ReactNode;
 }
 
 const FilteredDeviceListHeader: React.FC<Props> = ({
     selectedDeviceCount,
+    isAllSelected,
+    toggleSelectAll,
     children,
     ...rest
 }) => {
+    const checkboxLabel = isAllSelected ? _t('Deselect all') : _t('Select all');
     return <div className='mx_FilteredDeviceListHeader' {...rest}>
+        <TooltipTarget
+            label={checkboxLabel}
+            alignment={Alignment.Top}
+        >
+            <StyledCheckbox
+                kind={CheckboxStyle.Solid}
+                checked={isAllSelected}
+                onChange={toggleSelectAll}
+                id='device-select-all-checkbox'
+                data-testid='device-select-all-checkbox'
+                aria-label={checkboxLabel}
+            />
+        </TooltipTarget>
         <span className='mx_FilteredDeviceListHeader_label'>
             { selectedDeviceCount > 0
                 ? _t('%(selectedDeviceCount)s sessions selected', { selectedDeviceCount })
diff --git a/test/components/views/settings/devices/FilteredDeviceListHeader-test.tsx b/test/components/views/settings/devices/FilteredDeviceListHeader-test.tsx
index 8f7ecdc9248..49e8d9a8611 100644
--- a/test/components/views/settings/devices/FilteredDeviceListHeader-test.tsx
+++ b/test/components/views/settings/devices/FilteredDeviceListHeader-test.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 
 import FilteredDeviceListHeader from '../../../../../src/components/views/settings/devices/FilteredDeviceListHeader';
@@ -22,6 +22,8 @@ import FilteredDeviceListHeader from '../../../../../src/components/views/settin
 describe('<FilteredDeviceListHeader />', () => {
     const defaultProps = {
         selectedDeviceCount: 0,
+        isAllSelected: false,
+        toggleSelectAll: jest.fn(),
         children: <div>test</div>,
         ['data-testid']: 'test123',
     };
@@ -32,8 +34,21 @@ describe('<FilteredDeviceListHeader />', () => {
         expect(container).toMatchSnapshot();
     });
 
+    it('renders correctly when all devices are selected', () => {
+        const { container } = render(getComponent({ isAllSelected: true }));
+        expect(container).toMatchSnapshot();
+    });
+
     it('renders correctly when some devices are selected', () => {
         const { getByText } = render(getComponent({ selectedDeviceCount: 2 }));
         expect(getByText('2 sessions selected')).toBeTruthy();
     });
+
+    it('clicking checkbox toggles selection', () => {
+        const toggleSelectAll = jest.fn();
+        const { getByTestId } = render(getComponent({ toggleSelectAll }));
+        fireEvent.click(getByTestId('device-select-all-checkbox'));
+
+        expect(toggleSelectAll).toHaveBeenCalled();
+    });
 });
diff --git a/test/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap
index f474cca8112..b8b2330ce95 100644
--- a/test/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap
@@ -1,11 +1,80 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<FilteredDeviceListHeader /> renders correctly when all devices are selected 1`] = `
+<div>
+  <div
+    class="mx_FilteredDeviceListHeader"
+    data-testid="test123"
+  >
+    <div
+      tabindex="0"
+    >
+      <span
+        class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+      >
+        <input
+          aria-label="Deselect all"
+          checked=""
+          data-testid="device-select-all-checkbox"
+          id="device-select-all-checkbox"
+          type="checkbox"
+        />
+        <label
+          for="device-select-all-checkbox"
+        >
+          <div
+            class="mx_Checkbox_background"
+          >
+            <div
+              class="mx_Checkbox_checkmark"
+            />
+          </div>
+        </label>
+      </span>
+    </div>
+    <span
+      class="mx_FilteredDeviceListHeader_label"
+    >
+      Sessions
+    </span>
+    <div>
+      test
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<FilteredDeviceListHeader /> renders correctly when no devices are selected 1`] = `
 <div>
   <div
     class="mx_FilteredDeviceListHeader"
     data-testid="test123"
   >
+    <div
+      tabindex="0"
+    >
+      <span
+        class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+      >
+        <input
+          aria-label="Select all"
+          data-testid="device-select-all-checkbox"
+          id="device-select-all-checkbox"
+          type="checkbox"
+        />
+        <label
+          for="device-select-all-checkbox"
+        >
+          <div
+            class="mx_Checkbox_background"
+          >
+            <div
+              class="mx_Checkbox_checkmark"
+            />
+          </div>
+        </label>
+      </span>
+    </div>
     <span
       class="mx_FilteredDeviceListHeader_label"
     >
diff --git a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
index cdd289db52b..ed64703fedf 100644
--- a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
+++ b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
@@ -38,10 +38,17 @@ import {
     getMockClientWithEventEmitter,
     mkPusher,
     mockClientMethodsUser,
+    mockPlatformPeg,
 } from '../../../../../test-utils';
 import Modal from '../../../../../../src/Modal';
 import LogoutDialog from '../../../../../../src/components/views/dialogs/LogoutDialog';
-import { DeviceWithVerification } from '../../../../../../src/components/views/settings/devices/types';
+import {
+    DeviceSecurityVariation,
+    DeviceWithVerification,
+} from '../../../../../../src/components/views/settings/devices/types';
+import { INACTIVE_DEVICE_AGE_MS } from '../../../../../../src/components/views/settings/devices/filter';
+
+mockPlatformPeg();
 
 describe('<SessionManagerTab />', () => {
     const aliceId = '@alice:server.org';
@@ -61,6 +68,11 @@ describe('<SessionManagerTab />', () => {
         last_seen_ts: Date.now() - 600000,
     };
 
+    const alicesInactiveDevice = {
+        device_id: 'alices_older_mobile_device',
+        last_seen_ts: Date.now() - (INACTIVE_DEVICE_AGE_MS + 1000),
+    };
+
     const mockCrossSigningInfo = {
         checkDeviceTrust: jest.fn(),
     };
@@ -108,11 +120,28 @@ describe('<SessionManagerTab />', () => {
         fireEvent.click(checkbox);
     };
 
+    const setFilter = async (
+        container: HTMLElement,
+        option: DeviceSecurityVariation | string,
+    ) => await act(async () => {
+        const dropdown = container.querySelector('[aria-label="Filter devices"]');
+
+        fireEvent.click(dropdown as Element);
+        // tick to let dropdown render
+        await flushPromisesWithFakeTimers();
+
+        fireEvent.click(container.querySelector(`#device-list-filter__${option}`) as Element);
+    });
+
     const isDeviceSelected = (
         getByTestId: ReturnType<typeof render>['getByTestId'],
         deviceId: DeviceWithVerification['device_id'],
     ): boolean => !!(getByTestId(`device-tile-checkbox-${deviceId}`) as HTMLInputElement).checked;
 
+    const isSelectAllChecked = (
+        getByTestId: ReturnType<typeof render>['getByTestId'],
+    ): boolean => !!(getByTestId('device-select-all-checkbox') as HTMLInputElement).checked;
+
     beforeEach(() => {
         jest.clearAllMocks();
         jest.spyOn(logger, 'error').mockRestore();
@@ -853,6 +882,96 @@ describe('<SessionManagerTab />', () => {
             // unselected
             expect(isDeviceSelected(getByTestId, alicesOlderMobileDevice.device_id)).toBeFalsy();
         });
+
+        describe('toggling select all', () => {
+            it('selects all sessions when there is not existing selection', async () => {
+                const { getByTestId, getByText } = render(getComponent());
+
+                await act(async () => {
+                    await flushPromisesWithFakeTimers();
+                });
+
+                fireEvent.click(getByTestId('device-select-all-checkbox'));
+
+                // header displayed correctly
+                expect(getByText('2 sessions selected')).toBeTruthy();
+                expect(isSelectAllChecked(getByTestId)).toBeTruthy();
+
+                // devices selected
+                expect(isDeviceSelected(getByTestId, alicesMobileDevice.device_id)).toBeTruthy();
+                expect(isDeviceSelected(getByTestId, alicesOlderMobileDevice.device_id)).toBeTruthy();
+            });
+
+            it('selects all sessions when some sessions are already selected', async () => {
+                const { getByTestId, getByText } = render(getComponent());
+
+                await act(async () => {
+                    await flushPromisesWithFakeTimers();
+                });
+
+                toggleDeviceSelection(getByTestId, alicesMobileDevice.device_id);
+
+                fireEvent.click(getByTestId('device-select-all-checkbox'));
+
+                // header displayed correctly
+                expect(getByText('2 sessions selected')).toBeTruthy();
+                expect(isSelectAllChecked(getByTestId)).toBeTruthy();
+
+                // devices selected
+                expect(isDeviceSelected(getByTestId, alicesMobileDevice.device_id)).toBeTruthy();
+                expect(isDeviceSelected(getByTestId, alicesOlderMobileDevice.device_id)).toBeTruthy();
+            });
+
+            it('deselects all sessions when all sessions are selected', async () => {
+                const { getByTestId, getByText } = render(getComponent());
+
+                await act(async () => {
+                    await flushPromisesWithFakeTimers();
+                });
+
+                fireEvent.click(getByTestId('device-select-all-checkbox'));
+
+                // header displayed correctly
+                expect(getByText('2 sessions selected')).toBeTruthy();
+                expect(isSelectAllChecked(getByTestId)).toBeTruthy();
+
+                // devices selected
+                expect(isDeviceSelected(getByTestId, alicesMobileDevice.device_id)).toBeTruthy();
+                expect(isDeviceSelected(getByTestId, alicesOlderMobileDevice.device_id)).toBeTruthy();
+            });
+
+            it('selects only sessions that are part of the active filter', async () => {
+                mockClient.getDevices.mockResolvedValue({ devices: [
+                    alicesDevice,
+                    alicesMobileDevice,
+                    alicesInactiveDevice,
+                ] });
+                const { getByTestId, container } = render(getComponent());
+
+                await act(async () => {
+                    await flushPromisesWithFakeTimers();
+                });
+
+                // filter for inactive sessions
+                await setFilter(container, DeviceSecurityVariation.Inactive);
+
+                // select all inactive sessions
+                fireEvent.click(getByTestId('device-select-all-checkbox'));
+
+                expect(isSelectAllChecked(getByTestId)).toBeTruthy();
+
+                // sign out of all selected sessions
+                fireEvent.click(getByTestId('sign-out-selection-cta'));
+
+                // only called with session from active filter
+                expect(mockClient.deleteMultipleDevices).toHaveBeenCalledWith(
+                    [
+                        alicesInactiveDevice.device_id,
+                    ],
+                    undefined,
+                );
+            });
+        });
     });
 
     it("lets you change the pusher state", async () => {
diff --git a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
index 32af1a3fa66..89d4c1db842 100644
--- a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
@@ -19,6 +19,31 @@ exports[`<SessionManagerTab /> goes to filtered list from security recommendatio
 <div
   class="mx_FilteredDeviceListHeader"
 >
+  <div
+    tabindex="0"
+  >
+    <span
+      class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+    >
+      <input
+        aria-label="Select all"
+        data-testid="device-select-all-checkbox"
+        id="device-select-all-checkbox"
+        type="checkbox"
+      />
+      <label
+        for="device-select-all-checkbox"
+      >
+        <div
+          class="mx_Checkbox_background"
+        >
+          <div
+            class="mx_Checkbox_checkmark"
+          />
+        </div>
+      </label>
+    </span>
+  </div>
   <span
     class="mx_FilteredDeviceListHeader_label"
   >

From ae76c77c767d425ea588e1d471b228550f1f5e83 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Tue, 4 Oct 2022 11:01:49 +0200
Subject: [PATCH 14/27] rename type

---
 .../views/settings/devices/types.ts           |  4 +-
 .../views/settings/devices/useOwnDevices.ts   |  4 +-
 src/utils/device/parseUserAgent.ts            | 42 +++++++++++++++++++
 test/utils/device/parseUserAgent-test.ts      |  0
 4 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 src/utils/device/parseUserAgent.ts
 create mode 100644 test/utils/device/parseUserAgent-test.ts

diff --git a/src/components/views/settings/devices/types.ts b/src/components/views/settings/devices/types.ts
index 9543ac2b32e..89182bb7c9b 100644
--- a/src/components/views/settings/devices/types.ts
+++ b/src/components/views/settings/devices/types.ts
@@ -17,12 +17,12 @@ limitations under the License.
 import { IMyDevice } from "matrix-js-sdk/src/matrix";
 
 export type DeviceWithVerification = IMyDevice & { isVerified: boolean | null };
-export type ExtendedDeviceInfo = {
+export type ExtendedDeviceClientInfo = {
     clientName?: string;
     clientVersion?: string;
     url?: string;
 };
-export type ExtendedDevice = DeviceWithVerification & ExtendedDeviceInfo;
+export type ExtendedDevice = DeviceWithVerification & ExtendedDeviceClientInfo;
 export type DevicesDictionary = Record<DeviceWithVerification['device_id'], ExtendedDevice>;
 
 export enum DeviceSecurityVariation {
diff --git a/src/components/views/settings/devices/useOwnDevices.ts b/src/components/views/settings/devices/useOwnDevices.ts
index 2441a63a2ba..62039305cec 100644
--- a/src/components/views/settings/devices/useOwnDevices.ts
+++ b/src/components/views/settings/devices/useOwnDevices.ts
@@ -34,7 +34,7 @@ import { LocalNotificationSettings } from "matrix-js-sdk/src/@types/local_notifi
 import MatrixClientContext from "../../../../contexts/MatrixClientContext";
 import { _t } from "../../../../languageHandler";
 import { getDeviceClientInformation } from "../../../../utils/device/clientInformation";
-import { DevicesDictionary, DeviceWithVerification, ExtendedDeviceInfo } from "./types";
+import { DevicesDictionary, DeviceWithVerification, ExtendedDeviceClientInfo } from "./types";
 import { useEventEmitter } from "../../../../hooks/useEventEmitter";
 
 const isDeviceVerified = (
@@ -63,7 +63,7 @@ const isDeviceVerified = (
     }
 };
 
-const parseDeviceExtendedInformation = (matrixClient: MatrixClient, device: IMyDevice): ExtendedDeviceInfo => {
+const parseDeviceExtendedInformation = (matrixClient: MatrixClient, device: IMyDevice): ExtendedDeviceClientInfo => {
     const { name, version, url } = getDeviceClientInformation(matrixClient, device.device_id);
 
     return {
diff --git a/src/utils/device/parseUserAgent.ts b/src/utils/device/parseUserAgent.ts
new file mode 100644
index 00000000000..bd2aa7450b6
--- /dev/null
+++ b/src/utils/device/parseUserAgent.ts
@@ -0,0 +1,42 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export enum DeviceType {
+    Desktop = 'Desktop',
+    Mobile = 'Mobile',
+    Web = 'Web',
+    Unknown = 'Unknown',
+}
+export type ExtendedDeviceInformation = {
+    deviceType: DeviceType;
+    // eg Google Pixel 6
+    deviceModel?: string;
+    // eg Android 11
+    deviceOperatingSystem?: string;
+    // eg Element Nightly.
+    clientName?: string;
+    // eg 1.1.0
+    clientVersion?: string;
+};
+
+export const parseUserAgent = (userAgent?: string): ExtendedDeviceInformation => {
+    if (!userAgent) {
+        return {
+            deviceType: DeviceType.Unknown,
+        };
+    }
+    throw new Error('not yet implemented');
+};
diff --git a/test/utils/device/parseUserAgent-test.ts b/test/utils/device/parseUserAgent-test.ts
new file mode 100644
index 00000000000..e69de29bb2d

From 295c6d7b61b12f723584e44eac2302b53bcd9b2a Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Tue, 4 Oct 2022 12:07:07 +0200
Subject: [PATCH 15/27] use ExtendedDevice type everywhere

---
 .../views/settings/DevicesPanelEntry.tsx      |  6 ++--
 .../settings/devices/CurrentDeviceSection.tsx |  4 +--
 .../settings/devices/DeviceDetailHeading.tsx  |  4 +--
 .../views/settings/devices/DeviceTile.tsx     |  8 +++---
 .../views/settings/devices/DeviceType.tsx     |  4 +--
 .../devices/DeviceVerificationStatusCard.tsx  |  4 +--
 .../settings/devices/FilteredDeviceList.tsx   | 28 +++++++++----------
 .../devices/SecurityRecommendations.tsx       |  6 ++--
 .../views/settings/devices/filter.ts          |  6 ++--
 .../views/settings/devices/types.ts           |  2 +-
 .../views/settings/devices/useOwnDevices.ts   | 14 +++++-----
 .../settings/tabs/user/SessionManagerTab.tsx  | 18 ++++++------
 .../tabs/user/SessionManagerTab-test.tsx      |  8 +++---
 13 files changed, 56 insertions(+), 56 deletions(-)

diff --git a/src/components/views/settings/DevicesPanelEntry.tsx b/src/components/views/settings/DevicesPanelEntry.tsx
index 0109c37b9ba..6b9e396d375 100644
--- a/src/components/views/settings/DevicesPanelEntry.tsx
+++ b/src/components/views/settings/DevicesPanelEntry.tsx
@@ -153,7 +153,7 @@ export default class DevicesPanelEntry extends React.Component<IProps, IState> {
                 </AccessibleButton>
             </React.Fragment>;
 
-        const deviceWithVerification = {
+        const ExtendedDevice = {
             ...this.props.device,
             isVerified: this.props.verified,
         };
@@ -163,7 +163,7 @@ export default class DevicesPanelEntry extends React.Component<IProps, IState> {
                 <div className="mx_DevicesPanel_deviceTrust">
                     <span className={"mx_DevicesPanel_icon mx_E2EIcon " + iconClass} />
                 </div>
-                <DeviceTile device={deviceWithVerification}>
+                <DeviceTile device={ExtendedDevice}>
                     { buttons }
                 </DeviceTile>
             </div>;
@@ -171,7 +171,7 @@ export default class DevicesPanelEntry extends React.Component<IProps, IState> {
 
         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>
diff --git a/src/components/views/settings/devices/CurrentDeviceSection.tsx b/src/components/views/settings/devices/CurrentDeviceSection.tsx
index 615c9c69f06..fc58617d313 100644
--- a/src/components/views/settings/devices/CurrentDeviceSection.tsx
+++ b/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;
diff --git a/src/components/views/settings/devices/DeviceDetailHeading.tsx b/src/components/views/settings/devices/DeviceDetailHeading.tsx
index dea79d3b23f..2673ef4e897 100644
--- a/src/components/views/settings/devices/DeviceDetailHeading.tsx
+++ b/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>;
 }
 
diff --git a/src/components/views/settings/devices/DeviceTile.tsx b/src/components/views/settings/devices/DeviceTile.tsx
index bfeabfabb3b..a00286d029e 100644
--- a/src/components/views/settings/devices/DeviceTile.tsx
+++ b/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 { ExtendedDevice } from "./types";
 import { DeviceType } from "./DeviceType";
 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) {
diff --git a/src/components/views/settings/devices/DeviceType.tsx b/src/components/views/settings/devices/DeviceType.tsx
index a0fbe75c565..2b596b8fda6 100644
--- a/src/components/views/settings/devices/DeviceType.tsx
+++ b/src/components/views/settings/devices/DeviceType.tsx
@@ -21,10 +21,10 @@ 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';
 
 interface Props {
-    isVerified?: DeviceWithVerification['isVerified'];
+    isVerified?: ExtendedDevice['isVerified'];
     isSelected?: boolean;
 }
 
diff --git a/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx b/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx
index 11e806e54e4..127f5eedf60 100644
--- a/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx
+++ b/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;
 }
 
diff --git a/src/components/views/settings/devices/FilteredDeviceList.tsx b/src/components/views/settings/devices/FilteredDeviceList.tsx
index 6d6668a854c..faee675b6aa 100644
--- a/src/components/views/settings/devices/FilteredDeviceList.tsx
+++ b/src/components/views/settings/devices/FilteredDeviceList.tsx
@@ -33,7 +33,7 @@ import SelectableDeviceTile from './SelectableDeviceTile';
 import {
     DevicesDictionary,
     DeviceSecurityVariation,
-    DeviceWithVerification,
+    ExtendedDevice,
 } from './types';
 import { DevicesState } from './useOwnDevices';
 import FilteredDeviceListHeader from './FilteredDeviceListHeader';
@@ -42,27 +42,27 @@ interface Props {
     devices: DevicesDictionary;
     pushers: IPusher[];
     localNotificationSettings: Map<string, LocalNotificationSettings>;
-    expandedDeviceIds: DeviceWithVerification['device_id'][];
-    signingOutDeviceIds: DeviceWithVerification['device_id'][];
-    selectedDeviceIds: DeviceWithVerification['device_id'][];
+    expandedDeviceIds: ExtendedDevice['device_id'][];
+    signingOutDeviceIds: ExtendedDevice['device_id'][];
+    selectedDeviceIds: ExtendedDevice['device_id'][];
     filter?: DeviceSecurityVariation;
     onFilterChange: (filter: DeviceSecurityVariation | undefined) => void;
-    onDeviceExpandToggle: (deviceId: DeviceWithVerification['device_id']) => void;
-    onSignOutDevices: (deviceIds: DeviceWithVerification['device_id'][]) => void;
+    onDeviceExpandToggle: (deviceId: ExtendedDevice['device_id']) => void;
+    onSignOutDevices: (deviceIds: ExtendedDevice['device_id'][]) => void;
     saveDeviceName: DevicesState['saveDeviceName'];
-    onRequestDeviceVerification?: (deviceId: DeviceWithVerification['device_id']) => void;
+    onRequestDeviceVerification?: (deviceId: ExtendedDevice['device_id']) => void;
     setPushNotifications: (deviceId: string, enabled: boolean) => Promise<void>;
-    setSelectedDeviceIds: (deviceIds: DeviceWithVerification['device_id'][]) => void;
+    setSelectedDeviceIds: (deviceIds: ExtendedDevice['device_id'][]) => void;
     supportsMSC3881?: boolean | undefined;
 }
 
 const isDeviceSelected = (
-    deviceId: DeviceWithVerification['device_id'],
-    selectedDeviceIds: DeviceWithVerification['device_id'][],
+    deviceId: ExtendedDevice['device_id'],
+    selectedDeviceIds: ExtendedDevice['device_id'][],
 ) => selectedDeviceIds.includes(deviceId);
 
 // devices without timestamp metadata should be sorted last
-const sortDevicesByLatestActivity = (left: DeviceWithVerification, right: DeviceWithVerification) =>
+const sortDevicesByLatestActivity = (left: ExtendedDevice, right: ExtendedDevice) =>
     (right.last_seen_ts || 0) - (left.last_seen_ts || 0);
 
 const getFilteredSortedDevices = (devices: DevicesDictionary, filter?: DeviceSecurityVariation) =>
@@ -149,7 +149,7 @@ const NoResults: React.FC<NoResultsProps> = ({ filter, clearFilter }) =>
     </div>;
 
 const DeviceListItem: React.FC<{
-    device: DeviceWithVerification;
+    device: ExtendedDevice;
     pusher?: IPusher | undefined;
     localNotificationSettings?: LocalNotificationSettings | undefined;
     isExpanded: boolean;
@@ -227,11 +227,11 @@ export const FilteredDeviceList =
     }: Props, ref: ForwardedRef<HTMLDivElement>) => {
         const sortedDevices = getFilteredSortedDevices(devices, filter);
 
-        function getPusherForDevice(device: DeviceWithVerification): IPusher | undefined {
+        function getPusherForDevice(device: ExtendedDevice): IPusher | undefined {
             return pushers.find(pusher => pusher[PUSHER_DEVICE_ID.name] === device.device_id);
         }
 
-        const toggleSelection = (deviceId: DeviceWithVerification['device_id']): void => {
+        const toggleSelection = (deviceId: ExtendedDevice['device_id']): void => {
             if (isDeviceSelected(deviceId, selectedDeviceIds)) {
                 // remove from selection
                 setSelectedDeviceIds(selectedDeviceIds.filter(id => id !== deviceId));
diff --git a/src/components/views/settings/devices/SecurityRecommendations.tsx b/src/components/views/settings/devices/SecurityRecommendations.tsx
index 3132eba38a3..ddeb2f2e2e8 100644
--- a/src/components/views/settings/devices/SecurityRecommendations.tsx
+++ b/src/components/views/settings/devices/SecurityRecommendations.tsx
@@ -23,13 +23,13 @@ import DeviceSecurityCard from './DeviceSecurityCard';
 import { filterDevicesBySecurityRecommendation, INACTIVE_DEVICE_AGE_DAYS } from './filter';
 import {
     DeviceSecurityVariation,
-    DeviceWithVerification,
+    ExtendedDevice,
     DevicesDictionary,
 } from './types';
 
 interface Props {
     devices: DevicesDictionary;
-    currentDeviceId: DeviceWithVerification['device_id'];
+    currentDeviceId: ExtendedDevice['device_id'];
     goToFilteredList: (filter: DeviceSecurityVariation) => void;
 }
 
@@ -38,7 +38,7 @@ const SecurityRecommendations: React.FC<Props> = ({
     currentDeviceId,
     goToFilteredList,
 }) => {
-    const devicesArray = Object.values<DeviceWithVerification>(devices);
+    const devicesArray = Object.values<ExtendedDevice>(devices);
 
     const unverifiedDevicesCount = filterDevicesBySecurityRecommendation(
         devicesArray,
diff --git a/src/components/views/settings/devices/filter.ts b/src/components/views/settings/devices/filter.ts
index ad2bc92152c..05ceb9c6972 100644
--- a/src/components/views/settings/devices/filter.ts
+++ b/src/components/views/settings/devices/filter.ts
@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { DeviceWithVerification, DeviceSecurityVariation } from "./types";
+import { ExtendedDevice, DeviceSecurityVariation } from "./types";
 
-type DeviceFilterCondition = (device: DeviceWithVerification) => boolean;
+type DeviceFilterCondition = (device: ExtendedDevice) => boolean;
 
 const MS_DAY = 24 * 60 * 60 * 1000;
 export const INACTIVE_DEVICE_AGE_MS = 7.776e+9; // 90 days
@@ -32,7 +32,7 @@ const filters: Record<DeviceSecurityVariation, DeviceFilterCondition> = {
 };
 
 export const filterDevicesBySecurityRecommendation = (
-    devices: DeviceWithVerification[],
+    devices: ExtendedDevice[],
     securityVariations: DeviceSecurityVariation[],
 ) => {
     const activeFilters = securityVariations.map(variation => filters[variation]);
diff --git a/src/components/views/settings/devices/types.ts b/src/components/views/settings/devices/types.ts
index 9543ac2b32e..59a482ebf4f 100644
--- a/src/components/views/settings/devices/types.ts
+++ b/src/components/views/settings/devices/types.ts
@@ -23,7 +23,7 @@ export type ExtendedDeviceInfo = {
     url?: string;
 };
 export type ExtendedDevice = DeviceWithVerification & ExtendedDeviceInfo;
-export type DevicesDictionary = Record<DeviceWithVerification['device_id'], ExtendedDevice>;
+export type DevicesDictionary = Record<ExtendedDevice['device_id'], ExtendedDevice>;
 
 export enum DeviceSecurityVariation {
     Verified = 'Verified',
diff --git a/src/components/views/settings/devices/useOwnDevices.ts b/src/components/views/settings/devices/useOwnDevices.ts
index 2441a63a2ba..305d9cddc1c 100644
--- a/src/components/views/settings/devices/useOwnDevices.ts
+++ b/src/components/views/settings/devices/useOwnDevices.ts
@@ -34,7 +34,7 @@ import { LocalNotificationSettings } from "matrix-js-sdk/src/@types/local_notifi
 import MatrixClientContext from "../../../../contexts/MatrixClientContext";
 import { _t } from "../../../../languageHandler";
 import { getDeviceClientInformation } from "../../../../utils/device/clientInformation";
-import { DevicesDictionary, DeviceWithVerification, ExtendedDeviceInfo } from "./types";
+import { DevicesDictionary, ExtendedDevice, ExtendedDeviceInfo } from "./types";
 import { useEventEmitter } from "../../../../hooks/useEventEmitter";
 
 const isDeviceVerified = (
@@ -104,10 +104,10 @@ export type DevicesState = {
     currentDeviceId: string;
     isLoadingDeviceList: boolean;
     // not provided when current session cannot request verification
-    requestDeviceVerification?: (deviceId: DeviceWithVerification['device_id']) => Promise<VerificationRequest>;
+    requestDeviceVerification?: (deviceId: ExtendedDevice['device_id']) => Promise<VerificationRequest>;
     refreshDevices: () => Promise<void>;
-    saveDeviceName: (deviceId: DeviceWithVerification['device_id'], deviceName: string) => Promise<void>;
-    setPushNotifications: (deviceId: DeviceWithVerification['device_id'], enabled: boolean) => Promise<void>;
+    saveDeviceName: (deviceId: ExtendedDevice['device_id'], deviceName: string) => Promise<void>;
+    setPushNotifications: (deviceId: ExtendedDevice['device_id'], enabled: boolean) => Promise<void>;
     error?: OwnDevicesError;
     supportsMSC3881?: boolean | undefined;
 };
@@ -189,7 +189,7 @@ export const useOwnDevices = (): DevicesState => {
     const isCurrentDeviceVerified = !!devices[currentDeviceId]?.isVerified;
 
     const requestDeviceVerification = isCurrentDeviceVerified && userId
-        ? async (deviceId: DeviceWithVerification['device_id']) => {
+        ? async (deviceId: ExtendedDevice['device_id']) => {
             return await matrixClient.requestVerification(
                 userId,
                 [deviceId],
@@ -198,7 +198,7 @@ export const useOwnDevices = (): DevicesState => {
         : undefined;
 
     const saveDeviceName = useCallback(
-        async (deviceId: DeviceWithVerification['device_id'], deviceName: string): Promise<void> => {
+        async (deviceId: ExtendedDevice['device_id'], deviceName: string): Promise<void> => {
             const device = devices[deviceId];
 
             // no change
@@ -219,7 +219,7 @@ export const useOwnDevices = (): DevicesState => {
         }, [matrixClient, devices, refreshDevices]);
 
     const setPushNotifications = useCallback(
-        async (deviceId: DeviceWithVerification['device_id'], enabled: boolean): Promise<void> => {
+        async (deviceId: ExtendedDevice['device_id'], enabled: boolean): Promise<void> => {
             try {
                 const pusher = pushers.find(pusher => pusher[PUSHER_DEVICE_ID.name] === deviceId);
                 if (pusher) {
diff --git a/src/components/views/settings/tabs/user/SessionManagerTab.tsx b/src/components/views/settings/tabs/user/SessionManagerTab.tsx
index ed1d04a7546..2c94d5a5c2f 100644
--- a/src/components/views/settings/tabs/user/SessionManagerTab.tsx
+++ b/src/components/views/settings/tabs/user/SessionManagerTab.tsx
@@ -29,7 +29,7 @@ import { useOwnDevices } from '../../devices/useOwnDevices';
 import { FilteredDeviceList } from '../../devices/FilteredDeviceList';
 import CurrentDeviceSection from '../../devices/CurrentDeviceSection';
 import SecurityRecommendations from '../../devices/SecurityRecommendations';
-import { DeviceSecurityVariation, DeviceWithVerification } from '../../devices/types';
+import { DeviceSecurityVariation, ExtendedDevice } from '../../devices/types';
 import { deleteDevicesWithInteractiveAuth } from '../../devices/deleteDevices';
 import SettingsTab from '../SettingsTab';
 
@@ -38,10 +38,10 @@ const useSignOut = (
     onSignoutResolvedCallback: () => Promise<void>,
 ): {
         onSignOutCurrentDevice: () => void;
-        onSignOutOtherDevices: (deviceIds: DeviceWithVerification['device_id'][]) => Promise<void>;
-        signingOutDeviceIds: DeviceWithVerification['device_id'][];
+        onSignOutOtherDevices: (deviceIds: ExtendedDevice['device_id'][]) => Promise<void>;
+        signingOutDeviceIds: ExtendedDevice['device_id'][];
     } => {
-    const [signingOutDeviceIds, setSigningOutDeviceIds] = useState<DeviceWithVerification['device_id'][]>([]);
+    const [signingOutDeviceIds, setSigningOutDeviceIds] = useState<ExtendedDevice['device_id'][]>([]);
 
     const onSignOutCurrentDevice = () => {
         Modal.createDialog(
@@ -53,7 +53,7 @@ const useSignOut = (
         );
     };
 
-    const onSignOutOtherDevices = async (deviceIds: DeviceWithVerification['device_id'][]) => {
+    const onSignOutOtherDevices = async (deviceIds: ExtendedDevice['device_id'][]) => {
         if (!deviceIds.length) {
             return;
         }
@@ -96,8 +96,8 @@ const SessionManagerTab: React.FC = () => {
         supportsMSC3881,
     } = useOwnDevices();
     const [filter, setFilter] = useState<DeviceSecurityVariation>();
-    const [expandedDeviceIds, setExpandedDeviceIds] = useState<DeviceWithVerification['device_id'][]>([]);
-    const [selectedDeviceIds, setSelectedDeviceIds] = useState<DeviceWithVerification['device_id'][]>([]);
+    const [expandedDeviceIds, setExpandedDeviceIds] = useState<ExtendedDevice['device_id'][]>([]);
+    const [selectedDeviceIds, setSelectedDeviceIds] = useState<ExtendedDevice['device_id'][]>([]);
     const filteredDeviceListRef = useRef<HTMLDivElement>(null);
     const scrollIntoViewTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
 
@@ -105,7 +105,7 @@ const SessionManagerTab: React.FC = () => {
     const userId = matrixClient.getUserId();
     const currentUserMember = userId && matrixClient.getUser(userId) || undefined;
 
-    const onDeviceExpandToggle = (deviceId: DeviceWithVerification['device_id']): void => {
+    const onDeviceExpandToggle = (deviceId: ExtendedDevice['device_id']): void => {
         if (expandedDeviceIds.includes(deviceId)) {
             setExpandedDeviceIds(expandedDeviceIds.filter(id => id !== deviceId));
         } else {
@@ -136,7 +136,7 @@ const SessionManagerTab: React.FC = () => {
         );
     };
 
-    const onTriggerDeviceVerification = useCallback((deviceId: DeviceWithVerification['device_id']) => {
+    const onTriggerDeviceVerification = useCallback((deviceId: ExtendedDevice['device_id']) => {
         if (!requestDeviceVerification) {
             return;
         }
diff --git a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
index cdd289db52b..891da8b70e0 100644
--- a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
+++ b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
@@ -41,7 +41,7 @@ import {
 } from '../../../../../test-utils';
 import Modal from '../../../../../../src/Modal';
 import LogoutDialog from '../../../../../../src/components/views/dialogs/LogoutDialog';
-import { DeviceWithVerification } from '../../../../../../src/components/views/settings/devices/types';
+import { ExtendedDevice } from '../../../../../../src/components/views/settings/devices/types';
 
 describe('<SessionManagerTab />', () => {
     const aliceId = '@alice:server.org';
@@ -92,7 +92,7 @@ describe('<SessionManagerTab />', () => {
 
     const toggleDeviceDetails = (
         getByTestId: ReturnType<typeof render>['getByTestId'],
-        deviceId: DeviceWithVerification['device_id'],
+        deviceId: ExtendedDevice['device_id'],
     ) => {
         // open device detail
         const tile = getByTestId(`device-tile-${deviceId}`);
@@ -102,7 +102,7 @@ describe('<SessionManagerTab />', () => {
 
     const toggleDeviceSelection = (
         getByTestId: ReturnType<typeof render>['getByTestId'],
-        deviceId: DeviceWithVerification['device_id'],
+        deviceId: ExtendedDevice['device_id'],
     ) => {
         const checkbox = getByTestId(`device-tile-checkbox-${deviceId}`);
         fireEvent.click(checkbox);
@@ -110,7 +110,7 @@ describe('<SessionManagerTab />', () => {
 
     const isDeviceSelected = (
         getByTestId: ReturnType<typeof render>['getByTestId'],
-        deviceId: DeviceWithVerification['device_id'],
+        deviceId: ExtendedDevice['device_id'],
     ): boolean => !!(getByTestId(`device-tile-checkbox-${deviceId}`) as HTMLInputElement).checked;
 
     beforeEach(() => {

From b733f61b245cc1f9362ce26c0780d2ce9f2fbfbc Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Tue, 4 Oct 2022 12:08:34 +0200
Subject: [PATCH 16/27] rename clientName to appName for less collision with UA
 parser

---
 src/components/views/settings/devices/DeviceDetails.tsx      | 4 ++--
 src/components/views/settings/devices/types.ts               | 5 +++--
 src/components/views/settings/devices/useOwnDevices.ts       | 4 ++--
 .../components/views/settings/devices/DeviceDetails-test.tsx | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/views/settings/devices/DeviceDetails.tsx b/src/components/views/settings/devices/DeviceDetails.tsx
index b87bfcef3c4..4ed50c07b7c 100644
--- a/src/components/views/settings/devices/DeviceDetails.tsx
+++ b/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 },
             ],
         },
diff --git a/src/components/views/settings/devices/types.ts b/src/components/views/settings/devices/types.ts
index 59a482ebf4f..047a941362e 100644
--- a/src/components/views/settings/devices/types.ts
+++ b/src/components/views/settings/devices/types.ts
@@ -18,8 +18,9 @@ import { IMyDevice } from "matrix-js-sdk/src/matrix";
 
 export type DeviceWithVerification = IMyDevice & { isVerified: boolean | null };
 export type ExtendedDeviceInfo = {
-    clientName?: string;
-    clientVersion?: string;
+    // eg Element Web
+    appName?: string;
+    appVersion?: string;
     url?: string;
 };
 export type ExtendedDevice = DeviceWithVerification & ExtendedDeviceInfo;
diff --git a/src/components/views/settings/devices/useOwnDevices.ts b/src/components/views/settings/devices/useOwnDevices.ts
index 305d9cddc1c..da1757db114 100644
--- a/src/components/views/settings/devices/useOwnDevices.ts
+++ b/src/components/views/settings/devices/useOwnDevices.ts
@@ -67,8 +67,8 @@ const parseDeviceExtendedInformation = (matrixClient: MatrixClient, device: IMyD
     const { name, version, url } = getDeviceClientInformation(matrixClient, device.device_id);
 
     return {
-        clientName: name,
-        clientVersion: version,
+        appName: name,
+        appVersion: version,
         url,
     };
 };
diff --git a/test/components/views/settings/devices/DeviceDetails-test.tsx b/test/components/views/settings/devices/DeviceDetails-test.tsx
index a1c31f2a8e4..13ffdd88ada 100644
--- a/test/components/views/settings/devices/DeviceDetails-test.tsx
+++ b/test/components/views/settings/devices/DeviceDetails-test.tsx
@@ -58,7 +58,7 @@ describe('<DeviceDetails />', () => {
             display_name: 'My Device',
             last_seen_ip: '123.456.789',
             last_seen_ts: now - 60000000,
-            clientName: 'Element Web',
+            appName: 'Element Web',
         };
         const { container } = render(getComponent({ device }));
         expect(container).toMatchSnapshot();

From 605019c4b438b48def614f939281abb64f6588b1 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Tue, 4 Oct 2022 12:10:30 +0200
Subject: [PATCH 17/27] fix bad find and replace

---
 src/components/views/settings/DevicesPanelEntry.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/views/settings/DevicesPanelEntry.tsx b/src/components/views/settings/DevicesPanelEntry.tsx
index 6b9e396d375..611b725bc47 100644
--- a/src/components/views/settings/DevicesPanelEntry.tsx
+++ b/src/components/views/settings/DevicesPanelEntry.tsx
@@ -153,7 +153,7 @@ export default class DevicesPanelEntry extends React.Component<IProps, IState> {
                 </AccessibleButton>
             </React.Fragment>;
 
-        const ExtendedDevice = {
+        const extendedDevice = {
             ...this.props.device,
             isVerified: this.props.verified,
         };
@@ -163,7 +163,7 @@ export default class DevicesPanelEntry extends React.Component<IProps, IState> {
                 <div className="mx_DevicesPanel_deviceTrust">
                     <span className={"mx_DevicesPanel_icon mx_E2EIcon " + iconClass} />
                 </div>
-                <DeviceTile device={ExtendedDevice}>
+                <DeviceTile device={extendedDevice}>
                     { buttons }
                 </DeviceTile>
             </div>;
@@ -171,7 +171,7 @@ export default class DevicesPanelEntry extends React.Component<IProps, IState> {
 
         return (
             <div className="mx_DevicesPanel_device">
-                <SelectableDeviceTile device={ExtendedDevice} onClick={this.onDeviceToggled} isSelected={this.props.selected}>
+                <SelectableDeviceTile device={extendedDevice} onClick={this.onDeviceToggled} isSelected={this.props.selected}>
                     { buttons }
                 </SelectableDeviceTile>
             </div>

From b8c3ea1e187a759df0bcd94f63f13500c60ccc4a Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Tue, 4 Oct 2022 12:14:11 +0200
Subject: [PATCH 18/27] rename ExtendedDeviceInfo to ExtendedDeviceAppInfo

---
 src/components/views/settings/devices/types.ts         | 4 ++--
 src/components/views/settings/devices/useOwnDevices.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/views/settings/devices/types.ts b/src/components/views/settings/devices/types.ts
index 047a941362e..f43671f6362 100644
--- a/src/components/views/settings/devices/types.ts
+++ b/src/components/views/settings/devices/types.ts
@@ -17,13 +17,13 @@ limitations under the License.
 import { IMyDevice } from "matrix-js-sdk/src/matrix";
 
 export type DeviceWithVerification = IMyDevice & { isVerified: boolean | null };
-export type ExtendedDeviceInfo = {
+export type ExtendedDeviceAppInfo = {
     // eg Element Web
     appName?: string;
     appVersion?: string;
     url?: string;
 };
-export type ExtendedDevice = DeviceWithVerification & ExtendedDeviceInfo;
+export type ExtendedDevice = DeviceWithVerification & ExtendedDeviceAppInfo;
 export type DevicesDictionary = Record<ExtendedDevice['device_id'], ExtendedDevice>;
 
 export enum DeviceSecurityVariation {
diff --git a/src/components/views/settings/devices/useOwnDevices.ts b/src/components/views/settings/devices/useOwnDevices.ts
index da1757db114..6bf56b45278 100644
--- a/src/components/views/settings/devices/useOwnDevices.ts
+++ b/src/components/views/settings/devices/useOwnDevices.ts
@@ -34,7 +34,7 @@ import { LocalNotificationSettings } from "matrix-js-sdk/src/@types/local_notifi
 import MatrixClientContext from "../../../../contexts/MatrixClientContext";
 import { _t } from "../../../../languageHandler";
 import { getDeviceClientInformation } from "../../../../utils/device/clientInformation";
-import { DevicesDictionary, ExtendedDevice, ExtendedDeviceInfo } from "./types";
+import { DevicesDictionary, ExtendedDevice, ExtendedDeviceAppInfo } from "./types";
 import { useEventEmitter } from "../../../../hooks/useEventEmitter";
 
 const isDeviceVerified = (
@@ -63,7 +63,7 @@ const isDeviceVerified = (
     }
 };
 
-const parseDeviceExtendedInformation = (matrixClient: MatrixClient, device: IMyDevice): ExtendedDeviceInfo => {
+const parseDeviceExtendedInformation = (matrixClient: MatrixClient, device: IMyDevice): ExtendedDeviceAppInfo => {
     const { name, version, url } = getDeviceClientInformation(matrixClient, device.device_id);
 
     return {

From 2569c0c5193ab7163a01ce4e9e94c12b4b7dcded Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Tue, 4 Oct 2022 12:18:50 +0200
Subject: [PATCH 19/27] rename DeviceType comp to DeviceTypeIcon

---
 res/css/_components.pcss                      |  2 +-
 ...{_DeviceType.pcss => _DeviceTypeIcon.pcss} |  8 ++--
 .../{DeviceType.tsx => DeviceTypeIcon.tsx}    |  8 +++-
 .../settings/devices/DeviceType-test.tsx      |  6 +--
 .../settings/devices/DeviceTypeIcon-test.tsx  | 44 +++++++++++++++++++
 .../__snapshots__/DeviceType-test.tsx.snap    |  6 +--
 6 files changed, 62 insertions(+), 12 deletions(-)
 rename res/css/components/views/settings/devices/{_DeviceType.pcss => _DeviceTypeIcon.pcss} (91%)
 rename src/components/views/settings/devices/{DeviceType.tsx => DeviceTypeIcon.tsx} (90%)
 create mode 100644 test/components/views/settings/devices/DeviceTypeIcon-test.tsx

diff --git a/res/css/_components.pcss b/res/css/_components.pcss
index 9161942d87e..17fb679f247 100644
--- a/res/css/_components.pcss
+++ b/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";
diff --git a/res/css/components/views/settings/devices/_DeviceType.pcss b/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss
similarity index 91%
rename from res/css/components/views/settings/devices/_DeviceType.pcss
rename to res/css/components/views/settings/devices/_DeviceTypeIcon.pcss
index 66372bbdea0..546d4f7ea12 100644
--- a/res/css/components/views/settings/devices/_DeviceType.pcss
+++ b/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss
@@ -14,7 +14,7 @@ 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;
@@ -22,7 +22,7 @@ limitations under the License.
     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;
diff --git a/src/components/views/settings/devices/DeviceType.tsx b/src/components/views/settings/devices/DeviceTypeIcon.tsx
similarity index 90%
rename from src/components/views/settings/devices/DeviceType.tsx
rename to src/components/views/settings/devices/DeviceTypeIcon.tsx
index 2b596b8fda6..04352c76150 100644
--- a/src/components/views/settings/devices/DeviceType.tsx
+++ b/src/components/views/settings/devices/DeviceTypeIcon.tsx
@@ -22,13 +22,19 @@ 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 { ExtendedDevice } from './types';
+import { DeviceType } from '../../../../utils/device/parseUserAgent';
 
 interface Props {
     isVerified?: ExtendedDevice['isVerified'];
     isSelected?: boolean;
+    deviceType?: DeviceType;
 }
 
-export const DeviceType: React.FC<Props> = ({ isVerified, isSelected }) => (
+export const DeviceTypeIcon: React.FC<Props> = ({
+    isVerified,
+    isSelected,
+    deviceType,
+}) => (
     <div className={classNames('mx_DeviceType', {
         mx_DeviceType_selected: isSelected,
     })}
diff --git a/test/components/views/settings/devices/DeviceType-test.tsx b/test/components/views/settings/devices/DeviceType-test.tsx
index ac1c867eb7a..9b307449312 100644
--- a/test/components/views/settings/devices/DeviceType-test.tsx
+++ b/test/components/views/settings/devices/DeviceType-test.tsx
@@ -17,15 +17,15 @@ limitations under the License.
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { DeviceType } from '../../../../../src/components/views/settings/devices/DeviceType';
+import { DeviceTypeIcon } from '../../../../../src/components/views/settings/devices/DeviceTypeIcon';
 
-describe('<DeviceType />', () => {
+describe('<DeviceTypeIcon />', () => {
     const defaultProps = {
         isVerified: false,
         isSelected: false,
     };
     const getComponent = (props = {}) =>
-        <DeviceType {...defaultProps} {...props} />;
+        <DeviceTypeIcon {...defaultProps} {...props} />;
 
     it('renders an unverified device', () => {
         const { container } = render(getComponent());
diff --git a/test/components/views/settings/devices/DeviceTypeIcon-test.tsx b/test/components/views/settings/devices/DeviceTypeIcon-test.tsx
new file mode 100644
index 00000000000..9b307449312
--- /dev/null
+++ b/test/components/views/settings/devices/DeviceTypeIcon-test.tsx
@@ -0,0 +1,44 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { DeviceTypeIcon } from '../../../../../src/components/views/settings/devices/DeviceTypeIcon';
+
+describe('<DeviceTypeIcon />', () => {
+    const defaultProps = {
+        isVerified: false,
+        isSelected: false,
+    };
+    const getComponent = (props = {}) =>
+        <DeviceTypeIcon {...defaultProps} {...props} />;
+
+    it('renders an unverified device', () => {
+        const { container } = render(getComponent());
+        expect(container).toMatchSnapshot();
+    });
+
+    it('renders a verified device', () => {
+        const { container } = render(getComponent({ isVerified: true }));
+        expect(container).toMatchSnapshot();
+    });
+
+    it('renders correctly when selected', () => {
+        const { container } = render(getComponent({ isSelected: true }));
+        expect(container).toMatchSnapshot();
+    });
+});
diff --git a/test/components/views/settings/devices/__snapshots__/DeviceType-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/DeviceType-test.tsx.snap
index b056bd0beed..3cadabc35df 100644
--- a/test/components/views/settings/devices/__snapshots__/DeviceType-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/DeviceType-test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<DeviceType /> renders a verified device 1`] = `
+exports[`<DeviceTypeIcon /> renders a verified device 1`] = `
 <div>
   <div
     class="mx_DeviceType"
@@ -19,7 +19,7 @@ exports[`<DeviceType /> renders a verified device 1`] = `
 </div>
 `;
 
-exports[`<DeviceType /> renders an unverified device 1`] = `
+exports[`<DeviceTypeIcon /> renders an unverified device 1`] = `
 <div>
   <div
     class="mx_DeviceType"
@@ -38,7 +38,7 @@ exports[`<DeviceType /> renders an unverified device 1`] = `
 </div>
 `;
 
-exports[`<DeviceType /> renders correctly when selected 1`] = `
+exports[`<DeviceTypeIcon /> renders correctly when selected 1`] = `
 <div>
   <div
     class="mx_DeviceType mx_DeviceType_selected"

From 82dbfb68ed92296c84944d203920f2cc7ebf276c Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Tue, 4 Oct 2022 12:25:58 +0200
Subject: [PATCH 20/27] update tests for new required property deviceType

---
 .../__snapshots__/DevicesPanel-test.tsx.snap  | 18 ++++----
 .../devices/CurrentDeviceSection-test.tsx     |  3 ++
 .../devices/DeviceDetailHeading-test.tsx      |  2 +
 .../settings/devices/DeviceDetails-test.tsx   |  2 +
 .../settings/devices/DeviceTile-test.tsx      |  2 +
 .../settings/devices/DeviceType-test.tsx      | 44 -------------------
 .../devices/FilteredDeviceList-test.tsx       | 19 ++++++--
 .../devices/SelectableDeviceTile-test.tsx     |  2 +
 .../CurrentDeviceSection-test.tsx.snap        | 12 ++---
 .../__snapshots__/DeviceTile-test.tsx.snap    | 24 +++++-----
 ....tsx.snap => DeviceTypeIcon-test.tsx.snap} | 18 ++++----
 .../SelectableDeviceTile-test.tsx.snap        |  6 +--
 .../views/settings/devices/filter-test.ts     | 28 ++++++++++--
 .../SessionManagerTab-test.tsx.snap           | 18 ++++----
 14 files changed, 99 insertions(+), 99 deletions(-)
 delete mode 100644 test/components/views/settings/devices/DeviceType-test.tsx
 rename test/components/views/settings/devices/__snapshots__/{DeviceType-test.tsx.snap => DeviceTypeIcon-test.tsx.snap} (63%)

diff --git a/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap b/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap
index df46340de37..05c0ca8c98d 100644
--- a/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap
+++ b/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap
@@ -112,16 +112,16 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
         data-testid="device-tile-device_1"
       >
         <div
-          class="mx_DeviceType"
+          class="mx_DeviceTypeIcon"
         >
           <div
             aria-label="Unknown device type"
-            class="mx_DeviceType_deviceIcon"
+            class="mx_DeviceTypeIcon_deviceIcon"
             role="img"
           />
           <div
             aria-label="Unverified"
-            class="mx_DeviceType_verificationIcon unverified"
+            class="mx_DeviceTypeIcon_verificationIcon unverified"
             role="img"
           />
         </div>
@@ -235,16 +235,16 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
           data-testid="device-tile-device_2"
         >
           <div
-            class="mx_DeviceType"
+            class="mx_DeviceTypeIcon"
           >
             <div
               aria-label="Unknown device type"
-              class="mx_DeviceType_deviceIcon"
+              class="mx_DeviceTypeIcon_deviceIcon"
               role="img"
             />
             <div
               aria-label="Unverified"
-              class="mx_DeviceType_verificationIcon unverified"
+              class="mx_DeviceTypeIcon_verificationIcon unverified"
               role="img"
             />
           </div>
@@ -317,16 +317,16 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
           data-testid="device-tile-device_3"
         >
           <div
-            class="mx_DeviceType"
+            class="mx_DeviceTypeIcon"
           >
             <div
               aria-label="Unknown device type"
-              class="mx_DeviceType_deviceIcon"
+              class="mx_DeviceTypeIcon_deviceIcon"
               role="img"
             />
             <div
               aria-label="Unverified"
-              class="mx_DeviceType_verificationIcon unverified"
+              class="mx_DeviceTypeIcon_verificationIcon unverified"
               role="img"
             />
           </div>
diff --git a/test/components/views/settings/devices/CurrentDeviceSection-test.tsx b/test/components/views/settings/devices/CurrentDeviceSection-test.tsx
index dfb6bf626ed..2466b5ea3d7 100644
--- a/test/components/views/settings/devices/CurrentDeviceSection-test.tsx
+++ b/test/components/views/settings/devices/CurrentDeviceSection-test.tsx
@@ -19,6 +19,7 @@ import { fireEvent, render } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 
 import CurrentDeviceSection from '../../../../../src/components/views/settings/devices/CurrentDeviceSection';
+import { DeviceType } from '../../../../../src/utils/device/parseUserAgent';
 
 describe('<CurrentDeviceSection />', () => {
     const deviceId = 'alices_device';
@@ -26,10 +27,12 @@ describe('<CurrentDeviceSection />', () => {
     const alicesVerifiedDevice = {
         device_id: deviceId,
         isVerified: false,
+        deviceType: DeviceType.Unknown,
     };
     const alicesUnverifiedDevice = {
         device_id: deviceId,
         isVerified: false,
+        deviceType: DeviceType.Unknown,
     };
 
     const defaultProps = {
diff --git a/test/components/views/settings/devices/DeviceDetailHeading-test.tsx b/test/components/views/settings/devices/DeviceDetailHeading-test.tsx
index 1bda0a04f54..8db38146452 100644
--- a/test/components/views/settings/devices/DeviceDetailHeading-test.tsx
+++ b/test/components/views/settings/devices/DeviceDetailHeading-test.tsx
@@ -19,6 +19,7 @@ import { fireEvent, render, RenderResult } from '@testing-library/react';
 
 import { DeviceDetailHeading } from '../../../../../src/components/views/settings/devices/DeviceDetailHeading';
 import { flushPromisesWithFakeTimers } from '../../../../test-utils';
+import { DeviceType } from '../../../../../src/utils/device/parseUserAgent';
 
 jest.useFakeTimers();
 
@@ -27,6 +28,7 @@ describe('<DeviceDetailHeading />', () => {
         device_id: '123',
         display_name: 'My device',
         isVerified: true,
+        deviceType: DeviceType.Unknown,
     };
     const defaultProps = {
         device,
diff --git a/test/components/views/settings/devices/DeviceDetails-test.tsx b/test/components/views/settings/devices/DeviceDetails-test.tsx
index 13ffdd88ada..a6852f9f35d 100644
--- a/test/components/views/settings/devices/DeviceDetails-test.tsx
+++ b/test/components/views/settings/devices/DeviceDetails-test.tsx
@@ -20,11 +20,13 @@ import { PUSHER_ENABLED } from 'matrix-js-sdk/src/@types/event';
 
 import DeviceDetails from '../../../../../src/components/views/settings/devices/DeviceDetails';
 import { mkPusher } from '../../../../test-utils/test-utils';
+import { DeviceType } from '../../../../../src/utils/device/parseUserAgent';
 
 describe('<DeviceDetails />', () => {
     const baseDevice = {
         device_id: 'my-device',
         isVerified: false,
+        deviceType: DeviceType.Unknown,
     };
     const defaultProps = {
         device: baseDevice,
diff --git a/test/components/views/settings/devices/DeviceTile-test.tsx b/test/components/views/settings/devices/DeviceTile-test.tsx
index c8bc8733902..5f4816a2b01 100644
--- a/test/components/views/settings/devices/DeviceTile-test.tsx
+++ b/test/components/views/settings/devices/DeviceTile-test.tsx
@@ -19,12 +19,14 @@ import { render } from '@testing-library/react';
 import { IMyDevice } from 'matrix-js-sdk/src/matrix';
 
 import DeviceTile from '../../../../../src/components/views/settings/devices/DeviceTile';
+import { DeviceType } from '../../../../../src/utils/device/parseUserAgent';
 
 describe('<DeviceTile />', () => {
     const defaultProps = {
         device: {
             device_id: '123',
             isVerified: false,
+            deviceType: DeviceType.Unknown,
         },
     };
     const getComponent = (props = {}) => (
diff --git a/test/components/views/settings/devices/DeviceType-test.tsx b/test/components/views/settings/devices/DeviceType-test.tsx
deleted file mode 100644
index 9b307449312..00000000000
--- a/test/components/views/settings/devices/DeviceType-test.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { render } from '@testing-library/react';
-import React from 'react';
-
-import { DeviceTypeIcon } from '../../../../../src/components/views/settings/devices/DeviceTypeIcon';
-
-describe('<DeviceTypeIcon />', () => {
-    const defaultProps = {
-        isVerified: false,
-        isSelected: false,
-    };
-    const getComponent = (props = {}) =>
-        <DeviceTypeIcon {...defaultProps} {...props} />;
-
-    it('renders an unverified device', () => {
-        const { container } = render(getComponent());
-        expect(container).toMatchSnapshot();
-    });
-
-    it('renders a verified device', () => {
-        const { container } = render(getComponent({ isVerified: true }));
-        expect(container).toMatchSnapshot();
-    });
-
-    it('renders correctly when selected', () => {
-        const { container } = render(getComponent({ isSelected: true }));
-        expect(container).toMatchSnapshot();
-    });
-});
diff --git a/test/components/views/settings/devices/FilteredDeviceList-test.tsx b/test/components/views/settings/devices/FilteredDeviceList-test.tsx
index 92701d08cf3..6f188cea236 100644
--- a/test/components/views/settings/devices/FilteredDeviceList-test.tsx
+++ b/test/components/views/settings/devices/FilteredDeviceList-test.tsx
@@ -20,6 +20,7 @@ import { act, fireEvent, render } from '@testing-library/react';
 import { FilteredDeviceList } from '../../../../../src/components/views/settings/devices/FilteredDeviceList';
 import { DeviceSecurityVariation } from '../../../../../src/components/views/settings/devices/types';
 import { flushPromises, mockPlatformPeg } from '../../../../test-utils';
+import { DeviceType } from '../../../../../src/utils/device/parseUserAgent';
 
 mockPlatformPeg();
 
@@ -31,14 +32,26 @@ describe('<FilteredDeviceList />', () => {
         last_seen_ip: '123.456.789',
         display_name: 'My Device',
         isVerified: true,
+        deviceType: DeviceType.Unknown,
     };
-    const unverifiedNoMetadata = { device_id: 'unverified-no-metadata', isVerified: false };
-    const verifiedNoMetadata = { device_id: 'verified-no-metadata', isVerified: true };
-    const hundredDaysOld = { device_id: '100-days-old', isVerified: true, last_seen_ts: Date.now() - (MS_DAY * 100) };
+    const unverifiedNoMetadata = {
+        device_id: 'unverified-no-metadata',
+        isVerified: false,
+        deviceType: DeviceType.Unknown };
+    const verifiedNoMetadata = {
+        device_id: 'verified-no-metadata',
+        isVerified: true,
+        deviceType: DeviceType.Unknown };
+    const hundredDaysOld = {
+        device_id: '100-days-old',
+        isVerified: true,
+        last_seen_ts: Date.now() - (MS_DAY * 100),
+        deviceType: DeviceType.Unknown };
     const hundredDaysOldUnverified = {
         device_id: 'unverified-100-days-old',
         isVerified: false,
         last_seen_ts: Date.now() - (MS_DAY * 100),
+        deviceType: DeviceType.Unknown,
     };
     const defaultProps = {
         onFilterChange: jest.fn(),
diff --git a/test/components/views/settings/devices/SelectableDeviceTile-test.tsx b/test/components/views/settings/devices/SelectableDeviceTile-test.tsx
index 5c0fe47828b..2f41ff1a79e 100644
--- a/test/components/views/settings/devices/SelectableDeviceTile-test.tsx
+++ b/test/components/views/settings/devices/SelectableDeviceTile-test.tsx
@@ -19,6 +19,7 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 
 import SelectableDeviceTile from '../../../../../src/components/views/settings/devices/SelectableDeviceTile';
+import { DeviceType } from '../../../../../src/utils/device/parseUserAgent';
 
 describe('<SelectableDeviceTile />', () => {
     const device = {
@@ -26,6 +27,7 @@ describe('<SelectableDeviceTile />', () => {
         device_id: 'my-device',
         last_seen_ip: '123.456.789',
         isVerified: false,
+        deviceType: DeviceType.Unknown,
     };
     const defaultProps = {
         onClick: jest.fn(),
diff --git a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
index a5930a42fa4..a35b6bcbc2d 100644
--- a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
@@ -151,16 +151,16 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
         data-testid="device-tile-alices_device"
       >
         <div
-          class="mx_DeviceType"
+          class="mx_DeviceTypeIcon"
         >
           <div
             aria-label="Unknown device type"
-            class="mx_DeviceType_deviceIcon"
+            class="mx_DeviceTypeIcon_deviceIcon"
             role="img"
           />
           <div
             aria-label="Unverified"
-            class="mx_DeviceType_verificationIcon unverified"
+            class="mx_DeviceTypeIcon_verificationIcon unverified"
             role="img"
           />
         </div>
@@ -267,16 +267,16 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
         data-testid="device-tile-alices_device"
       >
         <div
-          class="mx_DeviceType"
+          class="mx_DeviceTypeIcon"
         >
           <div
             aria-label="Unknown device type"
-            class="mx_DeviceType_deviceIcon"
+            class="mx_DeviceTypeIcon_deviceIcon"
             role="img"
           />
           <div
             aria-label="Unverified"
-            class="mx_DeviceType_verificationIcon unverified"
+            class="mx_DeviceTypeIcon_verificationIcon unverified"
             role="img"
           />
         </div>
diff --git a/test/components/views/settings/devices/__snapshots__/DeviceTile-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/DeviceTile-test.tsx.snap
index 48f05d92597..6bb86d3aa51 100644
--- a/test/components/views/settings/devices/__snapshots__/DeviceTile-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/DeviceTile-test.tsx.snap
@@ -7,16 +7,16 @@ exports[`<DeviceTile /> renders a device with no metadata 1`] = `
     data-testid="device-tile-123"
   >
     <div
-      class="mx_DeviceType"
+      class="mx_DeviceTypeIcon"
     >
       <div
         aria-label="Unknown device type"
-        class="mx_DeviceType_deviceIcon"
+        class="mx_DeviceTypeIcon_deviceIcon"
         role="img"
       />
       <div
         aria-label="Unverified"
-        class="mx_DeviceType_verificationIcon unverified"
+        class="mx_DeviceTypeIcon_verificationIcon unverified"
         role="img"
       />
     </div>
@@ -58,16 +58,16 @@ exports[`<DeviceTile /> renders a verified device with no metadata 1`] = `
     data-testid="device-tile-123"
   >
     <div
-      class="mx_DeviceType"
+      class="mx_DeviceTypeIcon"
     >
       <div
         aria-label="Unknown device type"
-        class="mx_DeviceType_deviceIcon"
+        class="mx_DeviceTypeIcon_deviceIcon"
         role="img"
       />
       <div
         aria-label="Unverified"
-        class="mx_DeviceType_verificationIcon unverified"
+        class="mx_DeviceTypeIcon_verificationIcon unverified"
         role="img"
       />
     </div>
@@ -109,16 +109,16 @@ exports[`<DeviceTile /> renders display name with a tooltip 1`] = `
     data-testid="device-tile-123"
   >
     <div
-      class="mx_DeviceType"
+      class="mx_DeviceTypeIcon"
     >
       <div
         aria-label="Unknown device type"
-        class="mx_DeviceType_deviceIcon"
+        class="mx_DeviceTypeIcon_deviceIcon"
         role="img"
       />
       <div
         aria-label="Unverified"
-        class="mx_DeviceType_verificationIcon unverified"
+        class="mx_DeviceTypeIcon_verificationIcon unverified"
         role="img"
       />
     </div>
@@ -160,16 +160,16 @@ exports[`<DeviceTile /> separates metadata with a dot 1`] = `
     data-testid="device-tile-123"
   >
     <div
-      class="mx_DeviceType"
+      class="mx_DeviceTypeIcon"
     >
       <div
         aria-label="Unknown device type"
-        class="mx_DeviceType_deviceIcon"
+        class="mx_DeviceTypeIcon_deviceIcon"
         role="img"
       />
       <div
         aria-label="Unverified"
-        class="mx_DeviceType_verificationIcon unverified"
+        class="mx_DeviceTypeIcon_verificationIcon unverified"
         role="img"
       />
     </div>
diff --git a/test/components/views/settings/devices/__snapshots__/DeviceType-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/DeviceTypeIcon-test.tsx.snap
similarity index 63%
rename from test/components/views/settings/devices/__snapshots__/DeviceType-test.tsx.snap
rename to test/components/views/settings/devices/__snapshots__/DeviceTypeIcon-test.tsx.snap
index 3cadabc35df..3c5879f564a 100644
--- a/test/components/views/settings/devices/__snapshots__/DeviceType-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/DeviceTypeIcon-test.tsx.snap
@@ -3,16 +3,16 @@
 exports[`<DeviceTypeIcon /> renders a verified device 1`] = `
 <div>
   <div
-    class="mx_DeviceType"
+    class="mx_DeviceTypeIcon"
   >
     <div
       aria-label="Unknown device type"
-      class="mx_DeviceType_deviceIcon"
+      class="mx_DeviceTypeIcon_deviceIcon"
       role="img"
     />
     <div
       aria-label="Verified"
-      class="mx_DeviceType_verificationIcon verified"
+      class="mx_DeviceTypeIcon_verificationIcon verified"
       role="img"
     />
   </div>
@@ -22,16 +22,16 @@ exports[`<DeviceTypeIcon /> renders a verified device 1`] = `
 exports[`<DeviceTypeIcon /> renders an unverified device 1`] = `
 <div>
   <div
-    class="mx_DeviceType"
+    class="mx_DeviceTypeIcon"
   >
     <div
       aria-label="Unknown device type"
-      class="mx_DeviceType_deviceIcon"
+      class="mx_DeviceTypeIcon_deviceIcon"
       role="img"
     />
     <div
       aria-label="Unverified"
-      class="mx_DeviceType_verificationIcon unverified"
+      class="mx_DeviceTypeIcon_verificationIcon unverified"
       role="img"
     />
   </div>
@@ -41,16 +41,16 @@ exports[`<DeviceTypeIcon /> renders an unverified device 1`] = `
 exports[`<DeviceTypeIcon /> renders correctly when selected 1`] = `
 <div>
   <div
-    class="mx_DeviceType mx_DeviceType_selected"
+    class="mx_DeviceTypeIcon mx_DeviceTypeIcon_selected"
   >
     <div
       aria-label="Unknown device type"
-      class="mx_DeviceType_deviceIcon"
+      class="mx_DeviceTypeIcon_deviceIcon"
       role="img"
     />
     <div
       aria-label="Unverified"
-      class="mx_DeviceType_verificationIcon unverified"
+      class="mx_DeviceTypeIcon_verificationIcon unverified"
       role="img"
     />
   </div>
diff --git a/test/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
index 2984d265ed7..a853bf5d946 100644
--- a/test/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
@@ -39,16 +39,16 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 1
       data-testid="device-tile-my-device"
     >
       <div
-        class="mx_DeviceType"
+        class="mx_DeviceTypeIcon"
       >
         <div
           aria-label="Unknown device type"
-          class="mx_DeviceType_deviceIcon"
+          class="mx_DeviceTypeIcon_deviceIcon"
           role="img"
         />
         <div
           aria-label="Unverified"
-          class="mx_DeviceType_verificationIcon unverified"
+          class="mx_DeviceTypeIcon_verificationIcon unverified"
           role="img"
         />
       </div>
diff --git a/test/components/views/settings/devices/filter-test.ts b/test/components/views/settings/devices/filter-test.ts
index f46b8838ca7..5da256b763a 100644
--- a/test/components/views/settings/devices/filter-test.ts
+++ b/test/components/views/settings/devices/filter-test.ts
@@ -20,18 +20,38 @@ import {
 import {
     DeviceSecurityVariation,
 } from "../../../../../src/components/views/settings/devices/types";
+import { DeviceType } from "../../../../../src/utils/device/parseUserAgent";
 
 const MS_DAY = 86400000;
 describe('filterDevicesBySecurityRecommendation()', () => {
-    const unverifiedNoMetadata = { device_id: 'unverified-no-metadata', isVerified: false };
-    const verifiedNoMetadata = { device_id: 'verified-no-metadata', isVerified: true };
-    const hundredDaysOld = { device_id: '100-days-old', isVerified: true, last_seen_ts: Date.now() - (MS_DAY * 100) };
+    const unverifiedNoMetadata = {
+        device_id: 'unverified-no-metadata',
+        isVerified: false,
+        deviceType: DeviceType.Unknown,
+    };
+    const verifiedNoMetadata = {
+        device_id: 'verified-no-metadata',
+        isVerified: true,
+        deviceType: DeviceType.Unknown,
+    };
+    const hundredDaysOld = {
+        device_id: '100-days-old',
+        isVerified: true,
+        last_seen_ts: Date.now() - (MS_DAY * 100),
+        deviceType: DeviceType.Unknown,
+    };
     const hundredDaysOldUnverified = {
         device_id: 'unverified-100-days-old',
         isVerified: false,
         last_seen_ts: Date.now() - (MS_DAY * 100),
+        deviceType: DeviceType.Unknown,
+    };
+    const fiftyDaysOld = {
+        device_id: '50-days-old',
+        isVerified: true,
+        last_seen_ts: Date.now() - (MS_DAY * 50),
+        deviceType: DeviceType.Unknown,
     };
-    const fiftyDaysOld = { device_id: '50-days-old', isVerified: true, last_seen_ts: Date.now() - (MS_DAY * 50) };
 
     const devices = [
         unverifiedNoMetadata,
diff --git a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
index 89d4c1db842..65163209516 100644
--- a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
@@ -94,16 +94,16 @@ exports[`<SessionManagerTab /> renders current session section with a verified s
       data-testid="device-tile-alices_device"
     >
       <div
-        class="mx_DeviceType"
+        class="mx_DeviceTypeIcon"
       >
         <div
           aria-label="Unknown device type"
-          class="mx_DeviceType_deviceIcon"
+          class="mx_DeviceTypeIcon_deviceIcon"
           role="img"
         />
         <div
           aria-label="Verified"
-          class="mx_DeviceType_verificationIcon verified"
+          class="mx_DeviceTypeIcon_verificationIcon verified"
           role="img"
         />
       </div>
@@ -196,16 +196,16 @@ exports[`<SessionManagerTab /> renders current session section with an unverifie
       data-testid="device-tile-alices_device"
     >
       <div
-        class="mx_DeviceType"
+        class="mx_DeviceTypeIcon"
       >
         <div
           aria-label="Unknown device type"
-          class="mx_DeviceType_deviceIcon"
+          class="mx_DeviceTypeIcon_deviceIcon"
           role="img"
         />
         <div
           aria-label="Unverified"
-          class="mx_DeviceType_verificationIcon unverified"
+          class="mx_DeviceTypeIcon_verificationIcon unverified"
           role="img"
         />
       </div>
@@ -298,16 +298,16 @@ exports[`<SessionManagerTab /> sets device verification status correctly 1`] = `
   data-testid="device-tile-alices_device"
 >
   <div
-    class="mx_DeviceType"
+    class="mx_DeviceTypeIcon"
   >
     <div
       aria-label="Unknown device type"
-      class="mx_DeviceType_deviceIcon"
+      class="mx_DeviceTypeIcon_deviceIcon"
       role="img"
     />
     <div
       aria-label="Verified"
-      class="mx_DeviceType_verificationIcon verified"
+      class="mx_DeviceTypeIcon_verificationIcon verified"
       role="img"
     />
   </div>

From b10c1976e0ac1e584e730d93693c780351edf175 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Tue, 4 Oct 2022 12:27:17 +0200
Subject: [PATCH 21/27] add stubbed user agent parsing

---
 res/css/views/settings/_DevicesPanel.pcss     |  2 +-
 .../views/settings/DevicesPanelEntry.tsx      |  2 ++
 .../views/settings/devices/DeviceTile.tsx     |  8 ++++--
 .../views/settings/devices/DeviceTypeIcon.tsx | 10 ++++----
 .../views/settings/devices/types.ts           |  4 ++-
 .../views/settings/devices/useOwnDevices.ts   |  3 +++
 src/utils/device/parseUserAgent.ts            |  7 ++++--
 test/utils/device/parseUserAgent-test.ts      | 25 +++++++++++++++++++
 8 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/res/css/views/settings/_DevicesPanel.pcss b/res/css/views/settings/_DevicesPanel.pcss
index 23a737c9779..8a7842d4d0f 100644
--- a/res/css/views/settings/_DevicesPanel.pcss
+++ b/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;
diff --git a/src/components/views/settings/DevicesPanelEntry.tsx b/src/components/views/settings/DevicesPanelEntry.tsx
index 611b725bc47..aa152826bf3 100644
--- a/src/components/views/settings/DevicesPanelEntry.tsx
+++ b/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;
@@ -156,6 +157,7 @@ export default class DevicesPanelEntry extends React.Component<IProps, IState> {
         const extendedDevice = {
             ...this.props.device,
             isVerified: this.props.verified,
+            deviceType: DeviceType.Unknown,
         };
 
         if (this.props.isOwnDevice) {
diff --git a/src/components/views/settings/devices/DeviceTile.tsx b/src/components/views/settings/devices/DeviceTile.tsx
index a00286d029e..4c8e2647513 100644
--- a/src/components/views/settings/devices/DeviceTile.tsx
+++ b/src/components/views/settings/devices/DeviceTile.tsx
@@ -22,7 +22,7 @@ import { formatDate, formatRelativeTime } from "../../../../DateUtils";
 import Heading from "../../typography/Heading";
 import { INACTIVE_DEVICE_AGE_DAYS, isDeviceInactive } from "./filter";
 import { ExtendedDevice } from "./types";
-import { DeviceType } from "./DeviceType";
+import { DeviceTypeIcon } from "./DeviceTypeIcon";
 export interface DeviceTileProps {
     device: ExtendedDevice;
     isSelected?: boolean;
@@ -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">
diff --git a/src/components/views/settings/devices/DeviceTypeIcon.tsx b/src/components/views/settings/devices/DeviceTypeIcon.tsx
index 04352c76150..03b921f711d 100644
--- a/src/components/views/settings/devices/DeviceTypeIcon.tsx
+++ b/src/components/views/settings/devices/DeviceTypeIcon.tsx
@@ -35,25 +35,25 @@ export const DeviceTypeIcon: React.FC<Props> = ({
     isSelected,
     deviceType,
 }) => (
-    <div className={classNames('mx_DeviceType', {
-        mx_DeviceType_selected: isSelected,
+    <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')}
                 />
diff --git a/src/components/views/settings/devices/types.ts b/src/components/views/settings/devices/types.ts
index f43671f6362..3fa125a09f8 100644
--- a/src/components/views/settings/devices/types.ts
+++ b/src/components/views/settings/devices/types.ts
@@ -16,6 +16,8 @@ limitations under the License.
 
 import { IMyDevice } from "matrix-js-sdk/src/matrix";
 
+import { ExtendedDeviceInformation } from "../../../../utils/device/parseUserAgent";
+
 export type DeviceWithVerification = IMyDevice & { isVerified: boolean | null };
 export type ExtendedDeviceAppInfo = {
     // eg Element Web
@@ -23,7 +25,7 @@ export type ExtendedDeviceAppInfo = {
     appVersion?: string;
     url?: string;
 };
-export type ExtendedDevice = DeviceWithVerification & ExtendedDeviceAppInfo;
+export type ExtendedDevice = DeviceWithVerification & ExtendedDeviceAppInfo & ExtendedDeviceInformation;
 export type DevicesDictionary = Record<ExtendedDevice['device_id'], ExtendedDevice>;
 
 export enum DeviceSecurityVariation {
diff --git a/src/components/views/settings/devices/useOwnDevices.ts b/src/components/views/settings/devices/useOwnDevices.ts
index 6bf56b45278..c3b8cb0212a 100644
--- a/src/components/views/settings/devices/useOwnDevices.ts
+++ b/src/components/views/settings/devices/useOwnDevices.ts
@@ -24,6 +24,7 @@ import {
     MatrixEvent,
     PUSHER_DEVICE_ID,
     PUSHER_ENABLED,
+    UNSTABLE_MSC3852_LAST_SEEN_UA,
 } from "matrix-js-sdk/src/matrix";
 import { CrossSigningInfo } from "matrix-js-sdk/src/crypto/CrossSigning";
 import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
@@ -36,6 +37,7 @@ import { _t } from "../../../../languageHandler";
 import { getDeviceClientInformation } from "../../../../utils/device/clientInformation";
 import { DevicesDictionary, ExtendedDevice, ExtendedDeviceAppInfo } from "./types";
 import { useEventEmitter } from "../../../../hooks/useEventEmitter";
+import { parseUserAgent } from "../../../../utils/device/parseUserAgent";
 
 const isDeviceVerified = (
     matrixClient: MatrixClient,
@@ -87,6 +89,7 @@ const fetchDevicesWithVerification = async (
             ...device,
             isVerified: isDeviceVerified(matrixClient, crossSigningInfo, device),
             ...parseDeviceExtendedInformation(matrixClient, device),
+            ...parseUserAgent(device[UNSTABLE_MSC3852_LAST_SEEN_UA.name]),
         },
     }), {});
 
diff --git a/src/utils/device/parseUserAgent.ts b/src/utils/device/parseUserAgent.ts
index bd2aa7450b6..32c57b7624d 100644
--- a/src/utils/device/parseUserAgent.ts
+++ b/src/utils/device/parseUserAgent.ts
@@ -26,7 +26,7 @@ export type ExtendedDeviceInformation = {
     deviceModel?: string;
     // eg Android 11
     deviceOperatingSystem?: string;
-    // eg Element Nightly.
+    // eg Firefox
     clientName?: string;
     // eg 1.1.0
     clientVersion?: string;
@@ -38,5 +38,8 @@ export const parseUserAgent = (userAgent?: string): ExtendedDeviceInformation =>
             deviceType: DeviceType.Unknown,
         };
     }
-    throw new Error('not yet implemented');
+    // @TODO(kerrya) not yet implemented
+    return {
+        deviceType: DeviceType.Unknown,
+    };
 };
diff --git a/test/utils/device/parseUserAgent-test.ts b/test/utils/device/parseUserAgent-test.ts
index e69de29bb2d..e98fdc26edc 100644
--- a/test/utils/device/parseUserAgent-test.ts
+++ b/test/utils/device/parseUserAgent-test.ts
@@ -0,0 +1,25 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { DeviceType, parseUserAgent } from "../../../src/utils/device/parseUserAgent";
+
+describe('parseUserAgent()', () => {
+    it('returns deviceType unknown when user agent is falsy', () => {
+        expect(parseUserAgent(undefined)).toEqual({
+            deviceType: DeviceType.Unknown,
+        });
+    });
+});

From 906dfbd290c0451a8cdae57d24e4f504c6bec959 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 5 Oct 2022 13:42:23 +0200
Subject: [PATCH 22/27] add icons

---
 res/img/element-icons/settings/desktop.svg | 3 +++
 res/img/element-icons/settings/mobile.svg  | 3 +++
 res/img/element-icons/settings/web.svg     | 3 +++
 3 files changed, 9 insertions(+)
 create mode 100644 res/img/element-icons/settings/desktop.svg
 create mode 100644 res/img/element-icons/settings/mobile.svg
 create mode 100644 res/img/element-icons/settings/web.svg

diff --git a/res/img/element-icons/settings/desktop.svg b/res/img/element-icons/settings/desktop.svg
new file mode 100644
index 00000000000..7d6ca100792
--- /dev/null
+++ b/res/img/element-icons/settings/desktop.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="19" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 15.5C2.45 15.5 1.97933 15.3043 1.588 14.913C1.196 14.521 1 14.05 1 13.5V2.5C1 1.95 1.196 1.479 1.588 1.087C1.97933 0.695667 2.45 0.5 3 0.5H19C19.55 0.5 20.021 0.695667 20.413 1.087C20.8043 1.479 21 1.95 21 2.5V13.5C21 14.05 20.8043 14.521 20.413 14.913C20.021 15.3043 19.55 15.5 19 15.5H3ZM3 13.5H19V2.5H3V13.5ZM1 18.5C0.716667 18.5 0.479333 18.404 0.288 18.212C0.096 18.0207 0 17.7833 0 17.5C0 17.2167 0.096 16.9793 0.288 16.788C0.479333 16.596 0.716667 16.5 1 16.5H21C21.2833 16.5 21.5207 16.596 21.712 16.788C21.904 16.9793 22 17.2167 22 17.5C22 17.7833 21.904 18.0207 21.712 18.212C21.5207 18.404 21.2833 18.5 21 18.5H1ZM3 13.5V2.5V13.5Z" fill="currentColor"/>
+</svg>
diff --git a/res/img/element-icons/settings/mobile.svg b/res/img/element-icons/settings/mobile.svg
new file mode 100644
index 00000000000..45170b2c15b
--- /dev/null
+++ b/res/img/element-icons/settings/mobile.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="23" viewBox="0 0 14 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 0.51L2 0.5C0.9 0.5 0 1.4 0 2.5V20.5C0 21.6 0.9 22.5 2 22.5H12C13.1 22.5 14 21.6 14 20.5V2.5C14 1.4 13.1 0.51 12 0.51ZM12 18.5H2V4.5H12V18.5Z" fill="currentColor"/>
+</svg>
diff --git a/res/img/element-icons/settings/web.svg b/res/img/element-icons/settings/web.svg
new file mode 100644
index 00000000000..95bd1ba24ee
--- /dev/null
+++ b/res/img/element-icons/settings/web.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 16.5H2C1.45 16.5 0.979333 16.3043 0.588 15.913C0.196 15.521 0 15.05 0 14.5V2.5C0 1.95 0.196 1.47933 0.588 1.088C0.979333 0.696 1.45 0.5 2 0.5H18C18.55 0.5 19.021 0.696 19.413 1.088C19.8043 1.47933 20 1.95 20 2.5V14.5C20 15.05 19.8043 15.521 19.413 15.913C19.021 16.3043 18.55 16.5 18 16.5ZM2 4.5V14.5H18V4.5H2Z" fill="currentColor"/>
+</svg>

From b65688c998f47d738e33c76ee6a39e73460fea3b Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 5 Oct 2022 15:38:19 +0200
Subject: [PATCH 23/27] set device type icon

---
 .../settings/devices/_DeviceTypeIcon.pcss     |  9 ++-
 res/img/element-icons/settings/desktop.svg    |  2 +-
 .../views/settings/devices/DeviceTypeIcon.tsx | 67 ++++++++++++-------
 3 files changed, 52 insertions(+), 26 deletions(-)

diff --git a/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss b/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss
index 546d4f7ea12..a092112d8a1 100644
--- a/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss
+++ b/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss
@@ -22,7 +22,7 @@ limitations under the License.
     padding: 0 $spacing-8 $spacing-8 0;
 }
 
-.mx_DeviceTypeIcon_deviceIcon {
+.mx_DeviceTypeIcon_deviceIconWrapper {
     --background-color: $system;
     --icon-color: $secondary-content;
 
@@ -36,11 +36,16 @@ limitations under the License.
     background-color: var(--background-color);
 }
 
-.mx_DeviceTypeIcon_selected .mx_DeviceTypeIcon_deviceIcon {
+.mx_DeviceTypeIcon_selected .mx_DeviceTypeIcon_deviceIconWrapper {
     --background-color: $primary-content;
     --icon-color: $background;
 }
 
+.mx_DeviceTypeIcon_deviceIcon {
+    height: 24px;
+    width: 24px;
+}
+
 .mx_DeviceTypeIcon_verificationIcon {
     position: absolute;
     bottom: 0;
diff --git a/res/img/element-icons/settings/desktop.svg b/res/img/element-icons/settings/desktop.svg
index 7d6ca100792..e1e5d38118c 100644
--- a/res/img/element-icons/settings/desktop.svg
+++ b/res/img/element-icons/settings/desktop.svg
@@ -1,3 +1,3 @@
-<svg width="22" height="19" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M3 15.5C2.45 15.5 1.97933 15.3043 1.588 14.913C1.196 14.521 1 14.05 1 13.5V2.5C1 1.95 1.196 1.479 1.588 1.087C1.97933 0.695667 2.45 0.5 3 0.5H19C19.55 0.5 20.021 0.695667 20.413 1.087C20.8043 1.479 21 1.95 21 2.5V13.5C21 14.05 20.8043 14.521 20.413 14.913C20.021 15.3043 19.55 15.5 19 15.5H3ZM3 13.5H19V2.5H3V13.5ZM1 18.5C0.716667 18.5 0.479333 18.404 0.288 18.212C0.096 18.0207 0 17.7833 0 17.5C0 17.2167 0.096 16.9793 0.288 16.788C0.479333 16.596 0.716667 16.5 1 16.5H21C21.2833 16.5 21.5207 16.596 21.712 16.788C21.904 16.9793 22 17.2167 22 17.5C22 17.7833 21.904 18.0207 21.712 18.212C21.5207 18.404 21.2833 18.5 21 18.5H1ZM3 13.5V2.5V13.5Z" fill="currentColor"/>
 </svg>
diff --git a/src/components/views/settings/devices/DeviceTypeIcon.tsx b/src/components/views/settings/devices/DeviceTypeIcon.tsx
index 03b921f711d..5ae30485eb0 100644
--- a/src/components/views/settings/devices/DeviceTypeIcon.tsx
+++ b/src/components/views/settings/devices/DeviceTypeIcon.tsx
@@ -18,6 +18,9 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { Icon as UnknownDeviceIcon } from '../../../../../res/img/element-icons/settings/unknown-device.svg';
+import { Icon as DesktopIcon } from '../../../../../res/img/element-icons/settings/desktop.svg';
+import { Icon as WebIcon } from '../../../../../res/img/element-icons/settings/web.svg';
+import { Icon as MobileIcon } from '../../../../../res/img/element-icons/settings/mobile.svg';
 import { Icon as VerifiedIcon } from '../../../../../res/img/e2e/verified.svg';
 import { Icon as UnverifiedIcon } from '../../../../../res/img/e2e/warning.svg';
 import { _t } from '../../../../languageHandler';
@@ -30,33 +33,51 @@ interface Props {
     deviceType?: DeviceType;
 }
 
+const deviceTypeIcon: Record<DeviceType, React.FC<React.SVGProps<SVGSVGElement>>> = {
+    [DeviceType.Desktop]: DesktopIcon,
+    [DeviceType.Mobile]: MobileIcon,
+    [DeviceType.Web]: WebIcon,
+    [DeviceType.Unknown]: UnknownDeviceIcon,
+};
+const deviceTypeLabel: Record<DeviceType, string> = {
+    [DeviceType.Desktop]: _t('Desktop session'),
+    [DeviceType.Mobile]: _t('Mobile session'),
+    [DeviceType.Web]: _t('Web session'),
+    [DeviceType.Unknown]: _t('Unknown session type'),
+};
+
 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_DeviceTypeIcon_deviceIcon'
-            role='img'
-            aria-label={_t('Unknown device type')}
-        />
-        {
-            isVerified
-                ? <VerifiedIcon
-                    className={classNames('mx_DeviceTypeIcon_verificationIcon', 'verified')}
-                    role='img'
-                    aria-label={_t('Verified')}
-                />
-                : <UnverifiedIcon
-                    className={classNames('mx_DeviceTypeIcon_verificationIcon', 'unverified')}
+}) => {
+    const Icon = deviceTypeIcon[deviceType] || deviceTypeIcon[DeviceType.Unknown];
+    const label = deviceTypeLabel[deviceType] || deviceTypeLabel[DeviceType.Unknown];
+    return (
+        <div className={classNames('mx_DeviceTypeIcon', {
+            mx_DeviceTypeIcon_selected: isSelected,
+        })}
+        >
+            <div className='mx_DeviceTypeIcon_deviceIconWrapper'>
+                <Icon
+                    className='mx_DeviceTypeIcon_deviceIcon'
                     role='img'
-                    aria-label={_t('Unverified')}
+                    aria-label={label}
                 />
-        }
-    </div>);
+            </div>
+            {
+                isVerified
+                    ? <VerifiedIcon
+                        className={classNames('mx_DeviceTypeIcon_verificationIcon', 'verified')}
+                        role='img'
+                        aria-label={_t('Verified')}
+                    />
+                    : <UnverifiedIcon
+                        className={classNames('mx_DeviceTypeIcon_verificationIcon', 'unverified')}
+                        role='img'
+                        aria-label={_t('Unverified')}
+                    />
+            }
+        </div>);
+};
 

From 9f46becf411cb4ca301a1b1bc7e6747eff1444cc Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 5 Oct 2022 15:42:50 +0200
Subject: [PATCH 24/27] device type icon tets

---
 .../settings/devices/DeviceTypeIcon-test.tsx  | 30 ++++++++++++++++
 .../DeviceTypeIcon-test.tsx.snap              | 36 ++++++++++++-------
 2 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/test/components/views/settings/devices/DeviceTypeIcon-test.tsx b/test/components/views/settings/devices/DeviceTypeIcon-test.tsx
index 9b307449312..9d11a7e659d 100644
--- a/test/components/views/settings/devices/DeviceTypeIcon-test.tsx
+++ b/test/components/views/settings/devices/DeviceTypeIcon-test.tsx
@@ -18,6 +18,7 @@ import { render } from '@testing-library/react';
 import React from 'react';
 
 import { DeviceTypeIcon } from '../../../../../src/components/views/settings/devices/DeviceTypeIcon';
+import { DeviceType } from '../../../../../src/utils/device/parseUserAgent';
 
 describe('<DeviceTypeIcon />', () => {
     const defaultProps = {
@@ -41,4 +42,33 @@ describe('<DeviceTypeIcon />', () => {
         const { container } = render(getComponent({ isSelected: true }));
         expect(container).toMatchSnapshot();
     });
+
+    it('renders an unknown device icon when no device type given', () => {
+        const { getByLabelText } = render(getComponent());
+        expect(getByLabelText('Unknown session type')).toBeTruthy();
+    });
+
+    it('renders a desktop device type', () => {
+        const deviceType = DeviceType.Desktop;
+        const { getByLabelText } = render(getComponent({ deviceType }));
+        expect(getByLabelText('Desktop session')).toBeTruthy();
+    });
+
+    it('renders a web device type', () => {
+        const deviceType = DeviceType.Web;
+        const { getByLabelText } = render(getComponent({ deviceType }));
+        expect(getByLabelText('Web session')).toBeTruthy();
+    });
+
+    it('renders a mobile device type', () => {
+        const deviceType = DeviceType.Mobile;
+        const { getByLabelText } = render(getComponent({ deviceType }));
+        expect(getByLabelText('Mobile session')).toBeTruthy();
+    });
+
+    it('renders an unknown device type', () => {
+        const deviceType = DeviceType.Unknown;
+        const { getByLabelText } = render(getComponent({ deviceType }));
+        expect(getByLabelText('Unknown session type')).toBeTruthy();
+    });
 });
diff --git a/test/components/views/settings/devices/__snapshots__/DeviceTypeIcon-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/DeviceTypeIcon-test.tsx.snap
index 3c5879f564a..74e398d0b92 100644
--- a/test/components/views/settings/devices/__snapshots__/DeviceTypeIcon-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/DeviceTypeIcon-test.tsx.snap
@@ -6,10 +6,14 @@ exports[`<DeviceTypeIcon /> renders a verified device 1`] = `
     class="mx_DeviceTypeIcon"
   >
     <div
-      aria-label="Unknown device type"
-      class="mx_DeviceTypeIcon_deviceIcon"
-      role="img"
-    />
+      class="mx_DeviceTypeIcon_deviceIconWrapper"
+    >
+      <div
+        aria-label="Unknown session type"
+        class="mx_DeviceTypeIcon_deviceIcon"
+        role="img"
+      />
+    </div>
     <div
       aria-label="Verified"
       class="mx_DeviceTypeIcon_verificationIcon verified"
@@ -25,10 +29,14 @@ exports[`<DeviceTypeIcon /> renders an unverified device 1`] = `
     class="mx_DeviceTypeIcon"
   >
     <div
-      aria-label="Unknown device type"
-      class="mx_DeviceTypeIcon_deviceIcon"
-      role="img"
-    />
+      class="mx_DeviceTypeIcon_deviceIconWrapper"
+    >
+      <div
+        aria-label="Unknown session type"
+        class="mx_DeviceTypeIcon_deviceIcon"
+        role="img"
+      />
+    </div>
     <div
       aria-label="Unverified"
       class="mx_DeviceTypeIcon_verificationIcon unverified"
@@ -44,10 +52,14 @@ exports[`<DeviceTypeIcon /> renders correctly when selected 1`] = `
     class="mx_DeviceTypeIcon mx_DeviceTypeIcon_selected"
   >
     <div
-      aria-label="Unknown device type"
-      class="mx_DeviceTypeIcon_deviceIcon"
-      role="img"
-    />
+      class="mx_DeviceTypeIcon_deviceIconWrapper"
+    >
+      <div
+        aria-label="Unknown session type"
+        class="mx_DeviceTypeIcon_deviceIcon"
+        role="img"
+      />
+    </div>
     <div
       aria-label="Unverified"
       class="mx_DeviceTypeIcon_verificationIcon unverified"

From 1e00fda88342b36e693b7de4c64208d7eaf8ef10 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 5 Oct 2022 15:43:31 +0200
Subject: [PATCH 25/27] update snapshots for device type icon changes

---
 .../__snapshots__/DevicesPanel-test.tsx.snap  | 36 +++++++++-----
 .../CurrentDeviceSection-test.tsx.snap        | 24 ++++++----
 .../__snapshots__/DeviceTile-test.tsx.snap    | 48 ++++++++++++-------
 .../SelectableDeviceTile-test.tsx.snap        | 12 +++--
 .../SessionManagerTab-test.tsx.snap           | 36 +++++++++-----
 5 files changed, 104 insertions(+), 52 deletions(-)

diff --git a/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap b/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap
index 05c0ca8c98d..96ec4a13bd1 100644
--- a/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap
+++ b/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap
@@ -115,10 +115,14 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
           class="mx_DeviceTypeIcon"
         >
           <div
-            aria-label="Unknown device type"
-            class="mx_DeviceTypeIcon_deviceIcon"
-            role="img"
-          />
+            class="mx_DeviceTypeIcon_deviceIconWrapper"
+          >
+            <div
+              aria-label="Unknown session type"
+              class="mx_DeviceTypeIcon_deviceIcon"
+              role="img"
+            />
+          </div>
           <div
             aria-label="Unverified"
             class="mx_DeviceTypeIcon_verificationIcon unverified"
@@ -238,10 +242,14 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
             class="mx_DeviceTypeIcon"
           >
             <div
-              aria-label="Unknown device type"
-              class="mx_DeviceTypeIcon_deviceIcon"
-              role="img"
-            />
+              class="mx_DeviceTypeIcon_deviceIconWrapper"
+            >
+              <div
+                aria-label="Unknown session type"
+                class="mx_DeviceTypeIcon_deviceIcon"
+                role="img"
+              />
+            </div>
             <div
               aria-label="Unverified"
               class="mx_DeviceTypeIcon_verificationIcon unverified"
@@ -320,10 +328,14 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
             class="mx_DeviceTypeIcon"
           >
             <div
-              aria-label="Unknown device type"
-              class="mx_DeviceTypeIcon_deviceIcon"
-              role="img"
-            />
+              class="mx_DeviceTypeIcon_deviceIconWrapper"
+            >
+              <div
+                aria-label="Unknown session type"
+                class="mx_DeviceTypeIcon_deviceIcon"
+                role="img"
+              />
+            </div>
             <div
               aria-label="Unverified"
               class="mx_DeviceTypeIcon_verificationIcon unverified"
diff --git a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
index a35b6bcbc2d..73d7a10130e 100644
--- a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
@@ -154,10 +154,14 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
           class="mx_DeviceTypeIcon"
         >
           <div
-            aria-label="Unknown device type"
-            class="mx_DeviceTypeIcon_deviceIcon"
-            role="img"
-          />
+            class="mx_DeviceTypeIcon_deviceIconWrapper"
+          >
+            <div
+              aria-label="Unknown session type"
+              class="mx_DeviceTypeIcon_deviceIcon"
+              role="img"
+            />
+          </div>
           <div
             aria-label="Unverified"
             class="mx_DeviceTypeIcon_verificationIcon unverified"
@@ -270,10 +274,14 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
           class="mx_DeviceTypeIcon"
         >
           <div
-            aria-label="Unknown device type"
-            class="mx_DeviceTypeIcon_deviceIcon"
-            role="img"
-          />
+            class="mx_DeviceTypeIcon_deviceIconWrapper"
+          >
+            <div
+              aria-label="Unknown session type"
+              class="mx_DeviceTypeIcon_deviceIcon"
+              role="img"
+            />
+          </div>
           <div
             aria-label="Unverified"
             class="mx_DeviceTypeIcon_verificationIcon unverified"
diff --git a/test/components/views/settings/devices/__snapshots__/DeviceTile-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/DeviceTile-test.tsx.snap
index 6bb86d3aa51..2d0d4a8d405 100644
--- a/test/components/views/settings/devices/__snapshots__/DeviceTile-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/DeviceTile-test.tsx.snap
@@ -10,10 +10,14 @@ exports[`<DeviceTile /> renders a device with no metadata 1`] = `
       class="mx_DeviceTypeIcon"
     >
       <div
-        aria-label="Unknown device type"
-        class="mx_DeviceTypeIcon_deviceIcon"
-        role="img"
-      />
+        class="mx_DeviceTypeIcon_deviceIconWrapper"
+      >
+        <div
+          aria-label="Unknown session type"
+          class="mx_DeviceTypeIcon_deviceIcon"
+          role="img"
+        />
+      </div>
       <div
         aria-label="Unverified"
         class="mx_DeviceTypeIcon_verificationIcon unverified"
@@ -61,10 +65,14 @@ exports[`<DeviceTile /> renders a verified device with no metadata 1`] = `
       class="mx_DeviceTypeIcon"
     >
       <div
-        aria-label="Unknown device type"
-        class="mx_DeviceTypeIcon_deviceIcon"
-        role="img"
-      />
+        class="mx_DeviceTypeIcon_deviceIconWrapper"
+      >
+        <div
+          aria-label="Unknown session type"
+          class="mx_DeviceTypeIcon_deviceIcon"
+          role="img"
+        />
+      </div>
       <div
         aria-label="Unverified"
         class="mx_DeviceTypeIcon_verificationIcon unverified"
@@ -112,10 +120,14 @@ exports[`<DeviceTile /> renders display name with a tooltip 1`] = `
       class="mx_DeviceTypeIcon"
     >
       <div
-        aria-label="Unknown device type"
-        class="mx_DeviceTypeIcon_deviceIcon"
-        role="img"
-      />
+        class="mx_DeviceTypeIcon_deviceIconWrapper"
+      >
+        <div
+          aria-label="Unknown session type"
+          class="mx_DeviceTypeIcon_deviceIcon"
+          role="img"
+        />
+      </div>
       <div
         aria-label="Unverified"
         class="mx_DeviceTypeIcon_verificationIcon unverified"
@@ -163,10 +175,14 @@ exports[`<DeviceTile /> separates metadata with a dot 1`] = `
       class="mx_DeviceTypeIcon"
     >
       <div
-        aria-label="Unknown device type"
-        class="mx_DeviceTypeIcon_deviceIcon"
-        role="img"
-      />
+        class="mx_DeviceTypeIcon_deviceIconWrapper"
+      >
+        <div
+          aria-label="Unknown session type"
+          class="mx_DeviceTypeIcon_deviceIcon"
+          role="img"
+        />
+      </div>
       <div
         aria-label="Unverified"
         class="mx_DeviceTypeIcon_verificationIcon unverified"
diff --git a/test/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
index a853bf5d946..41c3c7f8bf0 100644
--- a/test/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
@@ -42,10 +42,14 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 1
         class="mx_DeviceTypeIcon"
       >
         <div
-          aria-label="Unknown device type"
-          class="mx_DeviceTypeIcon_deviceIcon"
-          role="img"
-        />
+          class="mx_DeviceTypeIcon_deviceIconWrapper"
+        >
+          <div
+            aria-label="Unknown session type"
+            class="mx_DeviceTypeIcon_deviceIcon"
+            role="img"
+          />
+        </div>
         <div
           aria-label="Unverified"
           class="mx_DeviceTypeIcon_verificationIcon unverified"
diff --git a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
index 65163209516..3cee723f288 100644
--- a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
@@ -97,10 +97,14 @@ exports[`<SessionManagerTab /> renders current session section with a verified s
         class="mx_DeviceTypeIcon"
       >
         <div
-          aria-label="Unknown device type"
-          class="mx_DeviceTypeIcon_deviceIcon"
-          role="img"
-        />
+          class="mx_DeviceTypeIcon_deviceIconWrapper"
+        >
+          <div
+            aria-label="Unknown session type"
+            class="mx_DeviceTypeIcon_deviceIcon"
+            role="img"
+          />
+        </div>
         <div
           aria-label="Verified"
           class="mx_DeviceTypeIcon_verificationIcon verified"
@@ -199,10 +203,14 @@ exports[`<SessionManagerTab /> renders current session section with an unverifie
         class="mx_DeviceTypeIcon"
       >
         <div
-          aria-label="Unknown device type"
-          class="mx_DeviceTypeIcon_deviceIcon"
-          role="img"
-        />
+          class="mx_DeviceTypeIcon_deviceIconWrapper"
+        >
+          <div
+            aria-label="Unknown session type"
+            class="mx_DeviceTypeIcon_deviceIcon"
+            role="img"
+          />
+        </div>
         <div
           aria-label="Unverified"
           class="mx_DeviceTypeIcon_verificationIcon unverified"
@@ -301,10 +309,14 @@ exports[`<SessionManagerTab /> sets device verification status correctly 1`] = `
     class="mx_DeviceTypeIcon"
   >
     <div
-      aria-label="Unknown device type"
-      class="mx_DeviceTypeIcon_deviceIcon"
-      role="img"
-    />
+      class="mx_DeviceTypeIcon_deviceIconWrapper"
+    >
+      <div
+        aria-label="Unknown session type"
+        class="mx_DeviceTypeIcon_deviceIcon"
+        role="img"
+      />
+    </div>
     <div
       aria-label="Verified"
       class="mx_DeviceTypeIcon_verificationIcon verified"

From f979e6c1185a77261dd26da24d2b10ce4f1e7cce Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 5 Oct 2022 15:47:12 +0200
Subject: [PATCH 26/27] desktop icon viewbox

---
 res/img/element-icons/settings/desktop.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/img/element-icons/settings/desktop.svg b/res/img/element-icons/settings/desktop.svg
index e1e5d38118c..7d6ca100792 100644
--- a/res/img/element-icons/settings/desktop.svg
+++ b/res/img/element-icons/settings/desktop.svg
@@ -1,3 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="22" height="19" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M3 15.5C2.45 15.5 1.97933 15.3043 1.588 14.913C1.196 14.521 1 14.05 1 13.5V2.5C1 1.95 1.196 1.479 1.588 1.087C1.97933 0.695667 2.45 0.5 3 0.5H19C19.55 0.5 20.021 0.695667 20.413 1.087C20.8043 1.479 21 1.95 21 2.5V13.5C21 14.05 20.8043 14.521 20.413 14.913C20.021 15.3043 19.55 15.5 19 15.5H3ZM3 13.5H19V2.5H3V13.5ZM1 18.5C0.716667 18.5 0.479333 18.404 0.288 18.212C0.096 18.0207 0 17.7833 0 17.5C0 17.2167 0.096 16.9793 0.288 16.788C0.479333 16.596 0.716667 16.5 1 16.5H21C21.2833 16.5 21.5207 16.596 21.712 16.788C21.904 16.9793 22 17.2167 22 17.5C22 17.7833 21.904 18.0207 21.712 18.212C21.5207 18.404 21.2833 18.5 21 18.5H1ZM3 13.5V2.5V13.5Z" fill="currentColor"/>
 </svg>

From 904dddef0c44d9f95d31209d4eeacd4e40718c39 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 5 Oct 2022 16:13:50 +0200
Subject: [PATCH 27/27] i18n

---
 src/i18n/strings/en_EN.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 03d5517c84e..32a5d8b1e23 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1731,7 +1731,10 @@
     "Inactive for %(inactiveAgeDays)s+ days": "Inactive for %(inactiveAgeDays)s+ days",
     "Verified": "Verified",
     "Unverified": "Unverified",
-    "Unknown device type": "Unknown device type",
+    "Desktop session": "Desktop session",
+    "Mobile session": "Mobile session",
+    "Web session": "Web session",
+    "Unknown session type": "Unknown session type",
     "Verified session": "Verified session",
     "This session is ready for secure messaging.": "This session is ready for secure messaging.",
     "Unverified session": "Unverified session",