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

src/components/views/dialogs/ManualDeviceKeyVerificationDialog.tsx

@@ -18,72 +18,80 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
-import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
+import React, { useCallback } from "react";
+import { Device } from "matrix-js-sdk/src/models/device";
 
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import * as FormattingUtils from "../../../utils/FormattingUtils";
 import { _t } from "../../../languageHandler";
 import QuestionDialog from "./QuestionDialog";
+import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
 
-interface IProps {
+interface IManualDeviceKeyVerificationDialogProps {
     userId: string;
-    device: DeviceInfo;
-    onFinished(confirm?: boolean): void;
+    device: Device;
+    onFinished?(confirm?: boolean): void;
 }
 
-export default class ManualDeviceKeyVerificationDialog extends React.Component<IProps> {
-    private onLegacyFinished = (confirm: boolean): void => {
-        if (confirm) {
-            MatrixClientPeg.get().setDeviceVerified(this.props.userId, this.props.device.deviceId, true);
-        }
-        this.props.onFinished(confirm);
-    };
+export function ManualDeviceKeyVerificationDialog({
+    userId,
+    device,
+    onFinished,
+}: IManualDeviceKeyVerificationDialogProps): JSX.Element {
+    const mxClient = useMatrixClientContext();
 
-    public render(): React.ReactNode {
-        let text;
-        if (MatrixClientPeg.get().getUserId() === this.props.userId) {
-            text = _t("Confirm by comparing the following with the User Settings in your other session:");
-        } else {
-            text = _t("Confirm this user's session by comparing the following with their User Settings:");
-        }
+    const onLegacyFinished = useCallback(
+        (confirm: boolean) => {
+            if (confirm && mxClient) {
+                mxClient.setDeviceVerified(userId, device.deviceId, true);
+            }
+            onFinished?.(confirm);
+        },
+        [mxClient, userId, device, onFinished],
+    );
 
-        const key = FormattingUtils.formatCryptoKey(this.props.device.getFingerprint());
-        const body = (
-            <div>
-                <p>{text}</p>
-                <div className="mx_DeviceVerifyDialog_cryptoSection">
-                    <ul>
-                        <li>
-                            <label>{_t("Session name")}:</label> <span>{this.props.device.getDisplayName()}</span>
-                        </li>
-                        <li>
-                            <label>{_t("Session ID")}:</label>{" "}
-                            <span>
-                                <code>{this.props.device.deviceId}</code>
-                            </span>
-                        </li>
-                        <li>
-                            <label>{_t("Session key")}:</label>{" "}
-                            <span>
-                                <code>
-                                    <b>{key}</b>
-                                </code>
-                            </span>
-                        </li>
-                    </ul>
-                </div>
-                <p>{_t("If they don't match, the security of your communication may be compromised.")}</p>
-            </div>
-        );
-
-        return (
-            <QuestionDialog
-                title={_t("Verify session")}
-                description={body}
-                button={_t("Verify session")}
-                onFinished={this.onLegacyFinished}
-            />
-        );
+    let text;
+    if (mxClient?.getUserId() === userId) {
+        text = _t("Confirm by comparing the following with the User Settings in your other session:");
+    } else {
+        text = _t("Confirm this user's session by comparing the following with their User Settings:");
     }
+
+    const fingerprint = device.getFingerprint();
+    const key = fingerprint && FormattingUtils.formatCryptoKey(fingerprint);
+    const body = (
+        <div>
+            <p>{text}</p>
+            <div className="mx_DeviceVerifyDialog_cryptoSection">
+                <ul>
+                    <li>
+                        <label>{_t("Session name")}:</label> <span>{device.displayName}</span>
+                    </li>
+                    <li>
+                        <label>{_t("Session ID")}:</label>{" "}
+                        <span>
+                            <code>{device.deviceId}</code>
+                        </span>
+                    </li>
+                    <li>
+                        <label>{_t("Session key")}:</label>{" "}
+                        <span>
+                            <code>
+                                <b>{key}</b>
+                            </code>
+                        </span>
+                    </li>
+                </ul>
+            </div>
+            <p>{_t("If they don't match, the security of your communication may be compromised.")}</p>
+        </div>
+    );
+
+    return (
+        <QuestionDialog
+            title={_t("Verify session")}
+            description={body}
+            button={_t("Verify session")}
+            onFinished={onLegacyFinished}
+        />
+    );
 }

src/components/views/dialogs/UntrustedDeviceDialog.tsx

@@ -59,7 +59,7 @@ const UntrustedDeviceDialog: React.FC<IProps> = ({ device, user, onFinished }) =
             <div className="mx_Dialog_content" id="mx_Dialog_content">
                 <p>{newSessionText}</p>
                 <p>
-                    {device.getDisplayName()} ({device.deviceId})
+                    {device.displayName} ({device.deviceId})
                 </p>
                 <p>{askToVerifyText}</p>
             </div>

src/components/views/right_panel/UserInfo.tsx

@@ -30,7 +30,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { CryptoEvent } from "matrix-js-sdk/src/crypto";
 import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
 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 dis from "../../../dispatcher/dispatcher";
 import Modal from "../../../Modal";
@@ -81,14 +81,14 @@ import { DirectoryMember, startDmOnFirstMessage } from "../../../utils/direct-me
 import { SdkContextClass } from "../../../contexts/SDKContext";
 import { asyncSome } from "../../../utils/arrays";
 
-export interface IDevice extends DeviceInfo {
+export interface IDevice extends Device {
     ambiguous?: boolean;
 }
 
 export const disambiguateDevices = (devices: IDevice[]): void => {
     const names = Object.create(null);
     for (let i = 0; i < devices.length; i++) {
-        const name = devices[i].getDisplayName() ?? "";
+        const name = devices[i].displayName ?? "";
         const indexList = names[name] || [];
         indexList.push(i);
         names[name] = indexList;
@@ -149,7 +149,8 @@ function useHasCrossSigningKeys(
         }
         setUpdating(true);
         try {
-            await cli.downloadKeys([member.userId]);
+            // We call it to populate the user keys and devices
+            await cli.getCrypto()?.getUserDeviceInfo([member.userId], true);
             const xsi = cli.getStoredCrossSigningForUser(member.userId);
             const key = xsi && xsi.getId();
             return !!key;
@@ -195,12 +196,10 @@ export function DeviceItem({ userId, device }: { userId: string; device: IDevice
     };
 
     let deviceName;
-    if (!device.getDisplayName()?.trim()) {
+    if (!device.displayName?.trim()) {
         deviceName = device.deviceId;
     } else {
-        deviceName = device.ambiguous
-            ? device.getDisplayName() + " (" + device.deviceId + ")"
-            : device.getDisplayName();
+        deviceName = device.ambiguous ? device.displayName + " (" + device.deviceId + ")" : device.displayName;
     }
 
     let trustedLabel: string | undefined;
@@ -1190,6 +1189,19 @@ export const PowerLevelEditor: React.FC<{
     );
 };
 
+async function getUserDeviceInfo(
+    userId: string,
+    cli: MatrixClient,
+    downloadUncached = false,
+): Promise<Device[] | undefined> {
+    const userDeviceMap = await cli.getCrypto()?.getUserDeviceInfo([userId], downloadUncached);
+    const devicesMap = userDeviceMap?.get(userId);
+
+    if (!devicesMap) return;
+
+    return Array.from(devicesMap.values());
+}
+
 export const useDevices = (userId: string): IDevice[] | undefined | null => {
     const cli = useContext(MatrixClientContext);
 
@@ -1203,10 +1215,9 @@ export const useDevices = (userId: string): IDevice[] | undefined | null => {
 
         async function downloadDeviceList(): Promise<void> {
             try {
-                await cli.downloadKeys([userId], true);
-                const devices = cli.getStoredDevicesForUser(userId);
+                const devices = await getUserDeviceInfo(userId, cli, true);
 
-                if (cancelled) {
+                if (cancelled || !devices) {
                     // we got cancelled - presumably a different user now
                     return;
                 }
@@ -1229,8 +1240,8 @@ export const useDevices = (userId: string): IDevice[] | undefined | null => {
     useEffect(() => {
         let cancel = false;
         const updateDevices = async (): Promise<void> => {
-            const newDevices = cli.getStoredDevicesForUser(userId);
-            if (cancel) return;
+            const newDevices = await getUserDeviceInfo(userId, cli);
+            if (cancel || !newDevices) return;
             setDevices(newDevices);
         };
         const onDevicesUpdated = (users: string[]): void => {