UserInfo step 2: DeviceItem

Author: richvdh

src/components/views/right_panel/UserInfo.tsx

@@ -162,14 +162,20 @@ function useHasCrossSigningKeys(
 export function DeviceItem({ userId, device }: { userId: string; device: IDevice }): JSX.Element {
     const cli = useContext(MatrixClientContext);
     const isMe = userId === cli.getUserId();
-    const deviceTrust = cli.checkDeviceTrust(userId, device.deviceId);
     const userTrust = cli.checkUserTrust(userId);
-    // For your own devices, we use the stricter check of cross-signing
-    // verification to encourage everyone to trust their own devices via
-    // cross-signing so that other users can then safely trust you.
-    // For other people's devices, the more general verified check that
-    // includes locally verified devices can be used.
-    const isVerified = isMe ? deviceTrust.isCrossSigningVerified() : deviceTrust.isVerified();
+
+    /** is the device verified? */
+    const isVerified = useAsyncMemo(async () => {
+        const deviceTrust = await cli.getCrypto()?.getDeviceVerificationStatus(userId, device.deviceId);
+        if (!deviceTrust) return false;
+
+        // For your own devices, we use the stricter check of cross-signing
+        // verification to encourage everyone to trust their own devices via
+        // cross-signing so that other users can then safely trust you.
+        // For other people's devices, the more general verified check that
+        // includes locally verified devices can be used.
+        return isMe ? deviceTrust.crossSigningVerified : deviceTrust.isVerified();
+    }, [cli, userId, device]);
 
     const classes = classNames("mx_UserInfo_device", {
         mx_UserInfo_device_verified: isVerified,
@@ -200,7 +206,10 @@ export function DeviceItem({ userId, device }: { userId: string; device: IDevice
     let trustedLabel: string | undefined;
     if (userTrust.isVerified()) trustedLabel = isVerified ? _t("Trusted") : _t("Not trusted");
 
-    if (isVerified) {
+    if (isVerified === undefined) {
+        // we're still deciding if the device is verified
+        return <div className={classes} title={device.deviceId} />;
+    } else if (isVerified) {
         return (
             <div className={classes} title={device.deviceId}>
                 <div className={iconClasses} />

test/components/views/right_panel/UserInfo-test.tsx

@@ -18,7 +18,16 @@ import React from "react";
 import { fireEvent, render, screen, waitFor, cleanup, act, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { Mocked, mocked } from "jest-mock";
-import { Room, User, MatrixClient, RoomMember, MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
+import {
+    Room,
+    User,
+    MatrixClient,
+    RoomMember,
+    MatrixEvent,
+    EventType,
+    CryptoApi,
+    DeviceVerificationStatus,
+} from "matrix-js-sdk/src/matrix";
 import { Phase, VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import { DeviceTrustLevel, UserTrustLevel } from "matrix-js-sdk/src/crypto/CrossSigning";
 import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
@@ -79,6 +88,7 @@ const defaultUser = new User(defaultUserId);
 let mockRoom: Mocked<Room>;
 let mockSpace: Mocked<Room>;
 let mockClient: Mocked<MatrixClient>;
+let mockCrypto: Mocked<CryptoApi>;
 
 beforeEach(() => {
     mockRoom = mocked({
@@ -115,6 +125,10 @@ beforeEach(() => {
         getEventReadUpTo: jest.fn(),
     } as unknown as Room);
 
+    mockCrypto = mocked({
+        getDeviceVerificationStatus: jest.fn(),
+    } as unknown as CryptoApi);
+
     mockClient = mocked({
         getUser: jest.fn(),
         isGuest: jest.fn().mockReturnValue(false),
@@ -141,6 +155,7 @@ beforeEach(() => {
         setPowerLevel: jest.fn(),
         downloadKeys: jest.fn(),
         getStoredDevicesForUser: jest.fn(),
+        getCrypto: jest.fn().mockReturnValue(mockCrypto),
     } as unknown as MatrixClient);
 
     jest.spyOn(MatrixClientPeg, "get").mockReturnValue(mockClient);
@@ -370,10 +385,10 @@ describe("<DeviceItem />", () => {
         mockClient.checkUserTrust.mockReturnValue({ isVerified: () => isVerified } as UserTrustLevel);
     };
     const setMockDeviceTrust = (isVerified = false, isCrossSigningVerified = false) => {
-        mockClient.checkDeviceTrust.mockReturnValue({
+        mockCrypto.getDeviceVerificationStatus.mockResolvedValue({
             isVerified: () => isVerified,
-            isCrossSigningVerified: () => isCrossSigningVerified,
-        } as DeviceTrustLevel);
+            crossSigningVerified: isCrossSigningVerified,
+        } as DeviceVerificationStatus);
     };
 
     const mockVerifyDevice = jest.spyOn(mockVerification, "verifyDevice");
@@ -384,7 +399,7 @@ describe("<DeviceItem />", () => {
     });
 
     afterEach(() => {
-        mockClient.checkDeviceTrust.mockReset();
+        mockCrypto.getDeviceVerificationStatus.mockReset();
         mockClient.checkUserTrust.mockReset();
         mockVerifyDevice.mockClear();
     });
@@ -393,32 +408,36 @@ describe("<DeviceItem />", () => {
         mockVerifyDevice.mockRestore();
     });
 
-    it("with unverified user and device, displays button without a label", () => {
+    it("with unverified user and device, displays button without a label", async () => {
         renderComponent();
+        await act(flushPromises);
 
         expect(screen.getByRole("button", { name: device.getDisplayName()! })).toBeInTheDocument;
         expect(screen.queryByText(/trusted/i)).not.toBeInTheDocument();
     });
 
-    it("with verified user only, displays button with a 'Not trusted' label", () => {
+    it("with verified user only, displays button with a 'Not trusted' label", async () => {
         setMockUserTrust(true);
         renderComponent();
+        await act(flushPromises);
 
         expect(screen.getByRole("button", { name: `${device.getDisplayName()} Not trusted` })).toBeInTheDocument;
     });
 
-    it("with verified device only, displays no button without a label", () => {
+    it("with verified device only, displays no button without a label", async () => {
         setMockDeviceTrust(true);
         renderComponent();
+        await act(flushPromises);
 
         expect(screen.getByText(device.getDisplayName()!)).toBeInTheDocument();
         expect(screen.queryByText(/trusted/)).not.toBeInTheDocument();
     });
 
-    it("when userId is the same as userId from client, uses isCrossSigningVerified to determine if button is shown", () => {
+    it("when userId is the same as userId from client, uses isCrossSigningVerified to determine if button is shown", async () => {
         mockClient.getSafeUserId.mockReturnValueOnce(defaultUserId);
         mockClient.getUserId.mockReturnValueOnce(defaultUserId);
         renderComponent();
+        await act(flushPromises);
 
         // set trust to be false for isVerified, true for isCrossSigningVerified
         setMockDeviceTrust(false, true);
@@ -428,10 +447,11 @@ describe("<DeviceItem />", () => {
         expect(screen.getByText(device.getDisplayName()!)).toBeInTheDocument();
     });
 
-    it("with verified user and device, displays no button and a 'Trusted' label", () => {
+    it("with verified user and device, displays no button and a 'Trusted' label", async () => {
         setMockUserTrust(true);
         setMockDeviceTrust(true);
         renderComponent();
+        await act(flushPromises);
 
         expect(screen.queryByRole("button")).not.toBeInTheDocument;
         expect(screen.getByText(device.getDisplayName()!)).toBeInTheDocument();
@@ -441,6 +461,7 @@ describe("<DeviceItem />", () => {
     it("does not call verifyDevice if client.getUser returns null", async () => {
         mockClient.getUser.mockReturnValueOnce(null);
         renderComponent();
+        await act(flushPromises);
 
         const button = screen.getByRole("button", { name: device.getDisplayName()! });
         expect(button).toBeInTheDocument;
@@ -455,6 +476,7 @@ describe("<DeviceItem />", () => {
         // even more mocking
         mockClient.isGuest.mockReturnValueOnce(true);
         renderComponent();
+        await act(flushPromises);
 
         const button = screen.getByRole("button", { name: device.getDisplayName()! });
         expect(button).toBeInTheDocument;