Device manager - data fetching (PSG-637) (#9151)

* add session manager tab to user settings

* fussy import ordering

* i18n

* extract device fetching logic into hook

* use new extended device type in device tile, add verified metadata

* add current session section, test

* tidy

* update types for DeviceWithVerification

src/components/views/settings/devices/DeviceTile.tsx

@@ -15,21 +15,21 @@ limitations under the License.
 */
 
 import React, { Fragment } from "react";
-import { IMyDevice } from "matrix-js-sdk/src/matrix";
 
 import { _t } from "../../../../languageHandler";
 import { formatDate, formatRelativeTime } from "../../../../DateUtils";
 import TooltipTarget from "../../elements/TooltipTarget";
 import { Alignment } from "../../elements/Tooltip";
 import Heading from "../../typography/Heading";
+import { DeviceWithVerification } from "./useOwnDevices";
 
 export interface DeviceTileProps {
-    device: IMyDevice;
+    device: DeviceWithVerification;
     children?: React.ReactNode;
     onClick?: () => void;
 }
 
-const DeviceTileName: React.FC<{ device: IMyDevice }> = ({ device }) => {
+const DeviceTileName: React.FC<{ device: DeviceWithVerification }> = ({ device }) => {
     if (device.display_name) {
         return <TooltipTarget
             alignment={Alignment.Top}
@@ -62,12 +62,14 @@ const DeviceMetadata: React.FC<{ value: string, id: string }> = ({ value, id })
 
 const DeviceTile: React.FC<DeviceTileProps> = ({ device, children, onClick }) => {
     const lastActivity = device.last_seen_ts && `${_t('Last activity')} ${formatLastActivity(device.last_seen_ts)}`;
+    const verificationStatus = device.isVerified ? _t('Verified') : _t('Unverified');
     const metadata = [
+        { id: 'isVerified', value: verificationStatus },
         { id: 'lastActivity', value: lastActivity },
         { id: 'lastSeenIp', value: device.last_seen_ip },
     ];
 
-    return <div className="mx_DeviceTile">
+    return <div className="mx_DeviceTile" data-testid={`device-tile-${device.device_id}`}>
         <div className="mx_DeviceTile_info" onClick={onClick}>
             <DeviceTileName device={device} />
             <div className="mx_DeviceTile_metadata">

src/components/views/settings/devices/useOwnDevices.ts

@@ -0,0 +1,105 @@
+/*
+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 { useContext, useEffect, useState } from "react";
+import { IMyDevice, MatrixClient } from "matrix-js-sdk/src/matrix";
+import { CrossSigningInfo } from "matrix-js-sdk/src/crypto/CrossSigning";
+import { logger } from "matrix-js-sdk/src/logger";
+
+import MatrixClientContext from "../../../../contexts/MatrixClientContext";
+
+export type DeviceWithVerification = IMyDevice & { isVerified: boolean | null };
+
+const isDeviceVerified = (
+    matrixClient: MatrixClient,
+    crossSigningInfo: CrossSigningInfo,
+    device: IMyDevice,
+): boolean | null => {
+    try {
+        const deviceInfo = matrixClient.getStoredDevice(matrixClient.getUserId(), device.device_id);
+        return crossSigningInfo.checkDeviceTrust(
+            crossSigningInfo,
+            deviceInfo,
+            false,
+            true,
+        ).isCrossSigningVerified();
+    } catch (error) {
+        logger.error("Error getting device cross-signing info", error);
+        return null;
+    }
+};
+
+const fetchDevicesWithVerification = async (matrixClient: MatrixClient): Promise<DevicesState['devices']> => {
+    const { devices } = await matrixClient.getDevices();
+    const crossSigningInfo = matrixClient.getStoredCrossSigningForUser(matrixClient.getUserId());
+
+    const devicesDict = devices.reduce((acc, device: IMyDevice) => ({
+        ...acc,
+        [device.device_id]: {
+            ...device,
+            isVerified: isDeviceVerified(matrixClient, crossSigningInfo, device),
+        },
+    }), {});
+
+    return devicesDict;
+};
+export enum OwnDevicesError {
+    Unsupported = 'Unsupported',
+    Default = 'Default',
+}
+type DevicesState = {
+    devices: Record<DeviceWithVerification['device_id'], DeviceWithVerification>;
+    currentDeviceId: string;
+    isLoading: boolean;
+    error?: OwnDevicesError;
+};
+export const useOwnDevices = (): DevicesState => {
+    const matrixClient = useContext(MatrixClientContext);
+
+    const currentDeviceId = matrixClient.getDeviceId();
+
+    const [devices, setDevices] = useState<DevicesState['devices']>({});
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<OwnDevicesError>();
+
+    useEffect(() => {
+        const getDevicesAsync = async () => {
+            setIsLoading(true);
+            try {
+                const devices = await fetchDevicesWithVerification(matrixClient);
+                setDevices(devices);
+                setIsLoading(false);
+            } catch (error) {
+                if (error.httpStatus == 404) {
+                    // 404 probably means the HS doesn't yet support the API.
+                    setError(OwnDevicesError.Unsupported);
+                } else {
+                    logger.error("Error loading sessions:", error);
+                    setError(OwnDevicesError.Default);
+                }
+                setIsLoading(false);
+            }
+        };
+        getDevicesAsync();
+    }, [matrixClient]);
+
+    return {
+        devices,
+        currentDeviceId,
+        isLoading,
+        error,
+    };
+};