Element-R: Populate device list for right-panel (#10671)

* Use `getUserDeviceInfo` instead of `downloadKeys` and `getStoredDevicesForUser`

* Use new `getUserDeviceInfo` api in `UserInfo.tsx` and `UserInfo-test.tsx`

* Fix missing fields

* Use `getUserDeviceInfo` instead of `downloadKeys`

* Move `ManualDeviceKeyVerificationDialog.tsx` from class to functional component and add tests

* Fix strict errors

* Update snapshot

* Add snapshot test to `UserInfo-test.tsx`

* Add test for <BasicUserInfo />

* Remove useless TODO comment

* Add test for ambiguous device

* Rework `<BasicUserInfo />` test

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

@@ -30,7 +30,7 @@ import {
 } from "matrix-js-sdk/src/matrix";
 import { Phase, VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import { UserTrustLevel } from "matrix-js-sdk/src/crypto/CrossSigning";
-import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
+import { Device } from "matrix-js-sdk/src/models/device";
 import { defer } from "matrix-js-sdk/src/utils";
 
 import UserInfo, {
@@ -127,6 +127,7 @@ beforeEach(() => {
 
     mockCrypto = mocked({
         getDeviceVerificationStatus: jest.fn(),
+        getUserDeviceInfo: jest.fn(),
     } as unknown as CryptoApi);
 
     mockClient = mocked({
@@ -155,6 +156,7 @@ beforeEach(() => {
         downloadKeys: jest.fn(),
         getStoredDevicesForUser: jest.fn(),
         getCrypto: jest.fn().mockReturnValue(mockCrypto),
+        getStoredCrossSigningForUser: jest.fn(),
     } as unknown as MatrixClient);
 
     jest.spyOn(MatrixClientPeg, "get").mockReturnValue(mockClient);
@@ -265,14 +267,18 @@ describe("<UserInfo />", () => {
         beforeEach(() => {
             mockClient.isCryptoEnabled.mockReturnValue(true);
             mockClient.checkUserTrust.mockReturnValue(new UserTrustLevel(false, false, false));
+            mockClient.doesServerSupportUnstableFeature.mockResolvedValue(true);
 
-            const device1 = DeviceInfo.fromStorage(
-                {
-                    unsigned: { device_display_name: "my device" },
-                },
-                "d1",
-            );
-            mockClient.getStoredDevicesForUser.mockReturnValue([device1]);
+            const device = new Device({
+                deviceId: "d1",
+                userId: defaultUserId,
+                displayName: "my device",
+                algorithms: [],
+                keys: new Map(),
+            });
+            const devicesMap = new Map<string, Device>([[device.deviceId, device]]);
+            const userDeviceMap = new Map<string, Map<string, Device>>([[defaultUserId, devicesMap]]);
+            mockCrypto.getUserDeviceInfo.mockResolvedValue(userDeviceMap);
         });
 
         it("renders a device list which can be expanded", async () => {
@@ -291,6 +297,18 @@ describe("<UserInfo />", () => {
             // ... which should contain the device name
             expect(within(deviceButton).getByText("my device")).toBeInTheDocument();
         });
+
+        it("renders <BasicUserInfo />", async () => {
+            const { container } = renderComponent({
+                phase: RightPanelPhases.SpaceMemberInfo,
+                verificationRequest,
+                room: mockRoom,
+            });
+            await act(flushPromises);
+
+            await waitFor(() => expect(screen.getByRole("button", { name: "Verify" })).toBeInTheDocument());
+            expect(container).toMatchSnapshot();
+        });
     });
 
     describe("with an encrypted room", () => {
@@ -363,7 +381,7 @@ describe("<UserInfoHeader />", () => {
 });
 
 describe("<DeviceItem />", () => {
-    const device = { deviceId: "deviceId", getDisplayName: () => "deviceName" } as DeviceInfo;
+    const device = { deviceId: "deviceId", displayName: "deviceName" } as Device;
     const defaultProps = {
         userId: defaultUserId,
         device,
@@ -410,7 +428,7 @@ describe("<DeviceItem />", () => {
         renderComponent();
         await act(flushPromises);
 
-        expect(screen.getByRole("button", { name: device.getDisplayName()! })).toBeInTheDocument;
+        expect(screen.getByRole("button", { name: device.displayName! })).toBeInTheDocument();
         expect(screen.queryByText(/trusted/i)).not.toBeInTheDocument();
     });
 
@@ -419,7 +437,7 @@ describe("<DeviceItem />", () => {
         renderComponent();
         await act(flushPromises);
 
-        expect(screen.getByRole("button", { name: `${device.getDisplayName()} Not trusted` })).toBeInTheDocument;
+        expect(screen.getByRole("button", { name: `${device.displayName} Not trusted` })).toBeInTheDocument();
     });
 
     it("with verified device only, displays no button without a label", async () => {
@@ -427,7 +445,7 @@ describe("<DeviceItem />", () => {
         renderComponent();
         await act(flushPromises);
 
-        expect(screen.getByText(device.getDisplayName()!)).toBeInTheDocument();
+        expect(screen.getByText(device.displayName!)).toBeInTheDocument();
         expect(screen.queryByText(/trusted/)).not.toBeInTheDocument();
     });
 
@@ -441,8 +459,9 @@ describe("<DeviceItem />", () => {
         setMockDeviceTrust(false, true);
 
         // expect to see no button in this case
+        // TODO `toBeInTheDocument` is not called, if called the test is failing
         expect(screen.queryByRole("button")).not.toBeInTheDocument;
-        expect(screen.getByText(device.getDisplayName()!)).toBeInTheDocument();
+        expect(screen.getByText(device.displayName!)).toBeInTheDocument();
     });
 
     it("with verified user and device, displays no button and a 'Trusted' label", async () => {
@@ -451,8 +470,8 @@ describe("<DeviceItem />", () => {
         renderComponent();
         await act(flushPromises);
 
-        expect(screen.queryByRole("button")).not.toBeInTheDocument;
-        expect(screen.getByText(device.getDisplayName()!)).toBeInTheDocument();
+        expect(screen.queryByRole("button")).not.toBeInTheDocument();
+        expect(screen.getByText(device.displayName!)).toBeInTheDocument();
         expect(screen.getByText("Trusted")).toBeInTheDocument();
     });
 
@@ -461,8 +480,8 @@ describe("<DeviceItem />", () => {
         renderComponent();
         await act(flushPromises);
 
-        const button = screen.getByRole("button", { name: device.getDisplayName()! });
-        expect(button).toBeInTheDocument;
+        const button = screen.getByRole("button", { name: device.displayName! });
+        expect(button).toBeInTheDocument();
         await userEvent.click(button);
 
         expect(mockVerifyDevice).not.toHaveBeenCalled();
@@ -476,13 +495,36 @@ describe("<DeviceItem />", () => {
         renderComponent();
         await act(flushPromises);
 
-        const button = screen.getByRole("button", { name: device.getDisplayName()! });
-        expect(button).toBeInTheDocument;
+        const button = screen.getByRole("button", { name: device.displayName! });
+        expect(button).toBeInTheDocument();
         await userEvent.click(button);
 
         expect(mockVerifyDevice).toHaveBeenCalledTimes(1);
         expect(mockVerifyDevice).toHaveBeenCalledWith(defaultUser, device);
     });
+
+    it("with display name", async () => {
+        const { container } = renderComponent();
+        await act(flushPromises);
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it("without display name", async () => {
+        const device = { deviceId: "deviceId" } as Device;
+        const { container } = renderComponent({ device, userId: defaultUserId });
+        await act(flushPromises);
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it("ambiguous display name", async () => {
+        const device = { deviceId: "deviceId", ambiguous: true, displayName: "my display name" };
+        const { container } = renderComponent({ device, userId: defaultUserId });
+        await act(flushPromises);
+
+        expect(container).toMatchSnapshot();
+    });
 });
 
 describe("<UserOptionsSection />", () => {
@@ -1099,9 +1141,9 @@ describe("<RoomAdminToolsContainer />", () => {
 describe("disambiguateDevices", () => {
     it("does not add ambiguous key to unique names", () => {
         const initialDevices = [
-            { deviceId: "id1", getDisplayName: () => "name1" } as DeviceInfo,
-            { deviceId: "id2", getDisplayName: () => "name2" } as DeviceInfo,
-            { deviceId: "id3", getDisplayName: () => "name3" } as DeviceInfo,
+            { deviceId: "id1", displayName: "name1" } as Device,
+            { deviceId: "id2", displayName: "name2" } as Device,
+            { deviceId: "id3", displayName: "name3" } as Device,
         ];
         disambiguateDevices(initialDevices);
 
@@ -1113,14 +1155,14 @@ describe("disambiguateDevices", () => {
 
     it("adds ambiguous key to all ids with non-unique names", () => {
         const uniqueNameDevices = [
-            { deviceId: "id3", getDisplayName: () => "name3" } as DeviceInfo,
-            { deviceId: "id4", getDisplayName: () => "name4" } as DeviceInfo,
-            { deviceId: "id6", getDisplayName: () => "name6" } as DeviceInfo,
+            { deviceId: "id3", displayName: "name3" } as Device,
+            { deviceId: "id4", displayName: "name4" } as Device,
+            { deviceId: "id6", displayName: "name6" } as Device,
         ];
         const nonUniqueNameDevices = [
-            { deviceId: "id1", getDisplayName: () => "nonUnique" } as DeviceInfo,
-            { deviceId: "id2", getDisplayName: () => "nonUnique" } as DeviceInfo,
-            { deviceId: "id5", getDisplayName: () => "nonUnique" } as DeviceInfo,
+            { deviceId: "id1", displayName: "nonUnique" } as Device,
+            { deviceId: "id2", displayName: "nonUnique" } as Device,
+            { deviceId: "id5", displayName: "nonUnique" } as Device,
         ];
         const initialDevices = [...uniqueNameDevices, ...nonUniqueNameDevices];
         disambiguateDevices(initialDevices);

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

@@ -0,0 +1,233 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DeviceItem /> ambiguous display name 1`] = `
+<div>
+  <div
+    class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
+    role="button"
+    tabindex="0"
+    title="deviceId"
+  >
+    <div
+      class="mx_E2EIcon mx_E2EIcon_normal"
+    />
+    <div
+      class="mx_UserInfo_device_name"
+    >
+      my display name (deviceId)
+    </div>
+    <div
+      class="mx_UserInfo_device_trusted"
+    />
+  </div>
+</div>
+`;
+
+exports[`<DeviceItem /> with display name 1`] = `
+<div>
+  <div
+    class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
+    role="button"
+    tabindex="0"
+    title="deviceId"
+  >
+    <div
+      class="mx_E2EIcon mx_E2EIcon_normal"
+    />
+    <div
+      class="mx_UserInfo_device_name"
+    >
+      deviceName
+    </div>
+    <div
+      class="mx_UserInfo_device_trusted"
+    />
+  </div>
+</div>
+`;
+
+exports[`<DeviceItem /> without display name 1`] = `
+<div>
+  <div
+    class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
+    role="button"
+    tabindex="0"
+    title="deviceId"
+  >
+    <div
+      class="mx_E2EIcon mx_E2EIcon_normal"
+    />
+    <div
+      class="mx_UserInfo_device_name"
+    >
+      deviceId
+    </div>
+    <div
+      class="mx_UserInfo_device_trusted"
+    />
+  </div>
+</div>
+`;
+
+exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
+<div>
+  <div
+    class="mx_BaseCard mx_UserInfo"
+  >
+    <div
+      class="mx_BaseCard_header"
+    >
+      <div
+        class="mx_AccessibleButton mx_BaseCard_close"
+        data-testid="base-card-close-button"
+        role="button"
+        tabindex="0"
+        title="Close"
+      />
+      <div
+        class="mx_UserInfo_avatar"
+      >
+        <div
+          class="mx_UserInfo_avatar_transition"
+        >
+          <div
+            class="mx_UserInfo_avatar_transition_child"
+          >
+            <span
+              aria-label="Avatar"
+              aria-live="off"
+              class="mx_AccessibleButton mx_BaseAvatar"
+              role="button"
+              tabindex="0"
+            >
+              <span
+                aria-hidden="true"
+                class="mx_BaseAvatar_initial"
+                style="font-size: 299.52px; width: 460.79999999999995px; line-height: 460.79999999999995px;"
+              >
+                U
+              </span>
+              <img
+                alt=""
+                aria-hidden="true"
+                class="mx_BaseAvatar_image"
+                data-testid="avatar-img"
+                src="data:image/png;base64,00"
+                style="width: 460.79999999999995px; height: 460.79999999999995px;"
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="mx_UserInfo_container mx_UserInfo_separator"
+      >
+        <div
+          class="mx_UserInfo_profile"
+        >
+          <div>
+            <h2>
+              <span
+                aria-label="@user:example.com"
+                dir="auto"
+                title="@user:example.com"
+              >
+                @user:example.com
+              </span>
+            </h2>
+          </div>
+          <div
+            class="mx_UserInfo_profile_mxid"
+          >
+            customUserIdentifier
+          </div>
+          <div
+            class="mx_UserInfo_profileStatus"
+          >
+            <div
+              class="mx_PresenceLabel"
+            >
+              Unknown
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="mx_AutoHideScrollbar"
+      tabindex="-1"
+    >
+      <div
+        class="mx_UserInfo_container"
+      >
+        <h3>
+          Security
+        </h3>
+        <p>
+          Messages in this room are not end-to-end encrypted.
+        </p>
+        <div
+          class="mx_UserInfo_container_verifyButton"
+        >
+          <div
+            class="mx_AccessibleButton mx_UserInfo_field mx_UserInfo_verifyButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
+            role="button"
+            tabindex="0"
+          >
+            Verify
+          </div>
+        </div>
+        <div
+          class="mx_UserInfo_devices"
+        >
+          <div />
+          <div>
+            <div
+              class="mx_AccessibleButton mx_UserInfo_expand mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="mx_E2EIcon mx_E2EIcon_normal"
+              />
+              <div>
+                1 session
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="mx_UserInfo_container"
+      >
+        <h3>
+          Options
+        </h3>
+        <div>
+          <div
+            class="mx_AccessibleButton mx_UserInfo_field mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
+            role="button"
+            tabindex="0"
+          >
+            Message
+          </div>
+          <div
+            class="mx_AccessibleButton mx_UserInfo_field mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
+            role="button"
+            tabindex="0"
+          >
+            Share Link to User
+          </div>
+          <div
+            class="mx_AccessibleButton mx_UserInfo_field mx_UserInfo_destructive mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
+            role="button"
+            tabindex="0"
+          >
+            Ignore
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;