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/DevicesPanelEntry.tsx

@@ -154,12 +154,17 @@ export default class DevicesPanelEntry extends React.Component<IProps, IState> {
                 </AccessibleButton>
             </React.Fragment>;
 
+        const deviceWithVerification = {
+            ...this.props.device,
+            isVerified: this.props.verified,
+        };
+
         if (this.props.isOwnDevice) {
             return <div className={"mx_DevicesPanel_device" + myDeviceClass}>
                 <div className="mx_DevicesPanel_deviceTrust">
                     <span className={"mx_DevicesPanel_icon mx_E2EIcon " + iconClass} />
                 </div>
-                <DeviceTile device={this.props.device}>
+                <DeviceTile device={deviceWithVerification}>
                     { buttons }
                 </DeviceTile>
             </div>;
@@ -167,7 +172,7 @@ export default class DevicesPanelEntry extends React.Component<IProps, IState> {
 
         return (
             <div className={"mx_DevicesPanel_device" + myDeviceClass}>
-                <SelectableDeviceTile device={this.props.device} onClick={this.onDeviceToggled} isSelected={this.props.selected}>
+                <SelectableDeviceTile device={deviceWithVerification} onClick={this.onDeviceToggled} isSelected={this.props.selected}>
                     { buttons }
                 </SelectableDeviceTile>
             </div>

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,
+    };
+};

src/components/views/settings/shared/SettingsSubsection.tsx

@@ -14,18 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { HTMLAttributes } from "react";
 
 import Heading from "../../typography/Heading";
 
-export interface SettingsSubsectionProps {
+export interface SettingsSubsectionProps extends HTMLAttributes<HTMLDivElement> {
     heading: string;
     description?: string | React.ReactNode;
     children?: React.ReactNode;
 }
 
-const SettingsSubsection: React.FC<SettingsSubsectionProps> = ({ heading, description, children }) => (
+const SettingsSubsection: React.FC<SettingsSubsectionProps> = ({ heading, description, children, ...rest }) => (
-    <div className="mx_SettingsSubsection">
+    <div {...rest} className="mx_SettingsSubsection">
         <Heading className="mx_SettingsSubsection_heading" size='h3'>{ heading }</Heading>
         { !!description && <div className="mx_SettingsSubsection_description">{ description }</div> }
         <div className="mx_SettingsSubsection_content">

src/components/views/settings/tabs/user/SessionManagerTab.tsx

@@ -17,16 +17,26 @@ limitations under the License.
 import React from 'react';
 
 import { _t } from "../../../../../languageHandler";
+import Spinner from '../../../elements/Spinner';
+import { useOwnDevices } from '../../devices/useOwnDevices';
+import DeviceTile from '../../devices/DeviceTile';
 import SettingsSubsection from '../../shared/SettingsSubsection';
 import SettingsTab from '../SettingsTab';
 
 const SessionManagerTab: React.FC = () => {
+    const { devices, currentDeviceId, isLoading } = useOwnDevices();
+
+    const currentDevice = devices[currentDeviceId];
     return <SettingsTab heading={_t('Sessions')}>
         <SettingsSubsection
             heading={_t('Current session')}
-            // TODO session content coming here
+            data-testid='current-session-section'
-            // in next PR
+        >
-        />
+            { isLoading && <Spinner /> }
+            { !!currentDevice && <DeviceTile
+                device={currentDevice}
+            /> }
+        </SettingsSubsection>
     </SettingsTab>;
 };
 

src/i18n/strings/en_EN.json

@@ -1693,6 +1693,8 @@
     "Verification code": "Verification code",
     "Discovery options will appear once you have added a phone number above.": "Discovery options will appear once you have added a phone number above.",
     "Last activity": "Last activity",
+    "Verified": "Verified",
+    "Unverified": "Unverified",
     "Unable to remove contact information": "Unable to remove contact information",
     "Remove %(email)s?": "Remove %(email)s?",
     "Invalid Email Address": "Invalid Email Address",

test/components/views/settings/devices/DeviceTile-test.tsx

@@ -24,6 +24,7 @@ describe('<DeviceTile />', () => {
     const defaultProps = {
         device: {
             device_id: '123',
+            isVerified: false,
         },
     };
     const getComponent = (props = {}) => (
@@ -43,6 +44,11 @@ describe('<DeviceTile />', () => {
         expect(container).toMatchSnapshot();
     });
 
+    it('renders a verified device with no metadata', () => {
+        const { container } = render(getComponent());
+        expect(container).toMatchSnapshot();
+    });
+
     it('renders display name with a tooltip', () => {
         const device: IMyDevice = {
             device_id: '123',

test/components/views/settings/devices/SelectableDeviceTile-test.tsx

@@ -25,6 +25,7 @@ describe('<SelectableDeviceTile />', () => {
         display_name: 'My Device',
         device_id: 'my-device',
         last_seen_ip: '123.456.789',
+        isVerified: false,
     };
     const defaultProps = {
         onClick: jest.fn(),

test/components/views/settings/devices/__snapshots__/DeviceTile-test.tsx.snap

@@ -4,6 +4,7 @@ exports[`<DeviceTile /> renders a device with no metadata 1`] = `
 <div>
   <div
     class="mx_DeviceTile"
+    data-testid="device-tile-123"
   >
     <div
       class="mx_DeviceTile_info"
@@ -16,6 +17,45 @@ exports[`<DeviceTile /> renders a device with no metadata 1`] = `
       <div
         class="mx_DeviceTile_metadata"
       >
+        <span
+          data-testid="device-metadata-isVerified"
+        >
+          Unverified
+        </span>
+         · 
+         · 
+      </div>
+    </div>
+    <div
+      class="mx_DeviceTile_actions"
+    />
+  </div>
+</div>
+`;
+
+exports[`<DeviceTile /> renders a verified device with no metadata 1`] = `
+<div>
+  <div
+    class="mx_DeviceTile"
+    data-testid="device-tile-123"
+  >
+    <div
+      class="mx_DeviceTile_info"
+    >
+      <h4
+        class="mx_Heading_h4"
+      >
+        123
+      </h4>
+      <div
+        class="mx_DeviceTile_metadata"
+      >
+        <span
+          data-testid="device-metadata-isVerified"
+        >
+          Unverified
+        </span>
+         · 
          · 
       </div>
     </div>
@@ -30,6 +70,7 @@ exports[`<DeviceTile /> renders display name with a tooltip 1`] = `
 <div>
   <div
     class="mx_DeviceTile"
+    data-testid="device-tile-123"
   >
     <div
       class="mx_DeviceTile_info"
@@ -46,6 +87,12 @@ exports[`<DeviceTile /> renders display name with a tooltip 1`] = `
       <div
         class="mx_DeviceTile_metadata"
       >
+        <span
+          data-testid="device-metadata-isVerified"
+        >
+          Unverified
+        </span>
+         · 
          · 
       </div>
     </div>
@@ -60,6 +107,7 @@ exports[`<DeviceTile /> separates metadata with a dot 1`] = `
 <div>
   <div
     class="mx_DeviceTile"
+    data-testid="device-tile-123"
   >
     <div
       class="mx_DeviceTile_info"
@@ -72,6 +120,12 @@ exports[`<DeviceTile /> separates metadata with a dot 1`] = `
       <div
         class="mx_DeviceTile_metadata"
       >
+        <span
+          data-testid="device-metadata-isVerified"
+        >
+          Unverified
+        </span>
+         · 
         <span
           data-testid="device-metadata-lastActivity"
         >

test/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap

@@ -34,6 +34,7 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 1
     </span>
     <div
       class="mx_DeviceTile"
+      data-testid="device-tile-my-device"
     >
       <div
         class="mx_DeviceTile_info"
@@ -50,6 +51,12 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 1
         <div
           class="mx_DeviceTile_metadata"
         >
+          <span
+            data-testid="device-metadata-isVerified"
+          >
+            Unverified
+          </span>
+           · 
            · 
           <span
             data-testid="device-metadata-lastSeenIp"

test/components/views/settings/tabs/user/SessionManagerTab-test.tsx

@@ -0,0 +1,152 @@
+/*
+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 React from 'react';
+import { render } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { DeviceInfo } from 'matrix-js-sdk/src/crypto/deviceinfo';
+import { logger } from 'matrix-js-sdk/src/logger';
+import { DeviceTrustLevel } from 'matrix-js-sdk/src/crypto/CrossSigning';
+
+import SessionManagerTab from '../../../../../../src/components/views/settings/tabs/user/SessionManagerTab';
+import MatrixClientContext from '../../../../../../src/contexts/MatrixClientContext';
+import {
+    flushPromisesWithFakeTimers,
+    getMockClientWithEventEmitter,
+    mockClientMethodsUser,
+} from '../../../../../test-utils';
+
+jest.useFakeTimers();
+
+describe('<SessionManagerTab />', () => {
+    const aliceId = '@alice:server.org';
+    const deviceId = 'alices_device';
+
+    const alicesDevice = {
+        device_id: deviceId,
+    };
+    const alicesMobileDevice = {
+        device_id: 'alices_mobile_device',
+    };
+
+    const mockCrossSigningInfo = {
+        checkDeviceTrust: jest.fn(),
+    };
+    const mockClient = getMockClientWithEventEmitter({
+        ...mockClientMethodsUser(aliceId),
+        getStoredCrossSigningForUser: jest.fn().mockReturnValue(mockCrossSigningInfo),
+        getDevices: jest.fn(),
+        getStoredDevice: jest.fn(),
+        getDeviceId: jest.fn().mockReturnValue(deviceId),
+    });
+
+    const defaultProps = {};
+    const getComponent = (props = {}): React.ReactElement =>
+        (
+            <MatrixClientContext.Provider value={mockClient}>
+                <SessionManagerTab {...defaultProps} {...props} />
+            </MatrixClientContext.Provider>
+        );
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        jest.spyOn(logger, 'error').mockRestore();
+        mockClient.getDevices.mockResolvedValue({ devices: [] });
+        mockClient.getStoredDevice.mockImplementation((_userId, id) => {
+            const device = [alicesDevice, alicesMobileDevice].find(device => device.device_id === id);
+            return device ? new DeviceInfo(device.device_id) : null;
+        });
+        mockCrossSigningInfo.checkDeviceTrust
+            .mockReset()
+            .mockReturnValue(new DeviceTrustLevel(false, false, false, false));
+    });
+
+    it('renders spinner while devices load', () => {
+        const { container } = render(getComponent());
+        expect(container.getElementsByClassName('mx_Spinner').length).toBeTruthy();
+    });
+
+    it('removes spinner when device fetch fails', async () => {
+        mockClient.getDevices.mockRejectedValue({ httpStatus: 404 });
+        const { container } = render(getComponent());
+        expect(mockClient.getDevices).toHaveBeenCalled();
+
+        await act(async () => {
+            await flushPromisesWithFakeTimers();
+        });
+        expect(container.getElementsByClassName('mx_Spinner').length).toBeFalsy();
+    });
+
+    it('removes spinner when device fetch fails', async () => {
+        // eat the expected error log
+        jest.spyOn(logger, 'error').mockImplementation(() => {});
+        mockClient.getDevices.mockRejectedValue({ httpStatus: 404 });
+        const { container } = render(getComponent());
+
+        await act(async () => {
+            await flushPromisesWithFakeTimers();
+        });
+        expect(container.getElementsByClassName('mx_Spinner').length).toBeFalsy();
+    });
+
+    it('does not fail when checking device verification fails', async () => {
+        const logSpy = jest.spyOn(logger, 'error').mockImplementation(() => {});
+        mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] });
+        const noCryptoError = new Error("End-to-end encryption disabled");
+        mockClient.getStoredDevice.mockImplementation(() => { throw noCryptoError; });
+        render(getComponent());
+
+        await act(async () => {
+            await flushPromisesWithFakeTimers();
+        });
+
+        // called for each device despite error
+        expect(mockClient.getStoredDevice).toHaveBeenCalledWith(aliceId, alicesDevice.device_id);
+        expect(mockClient.getStoredDevice).toHaveBeenCalledWith(aliceId, alicesMobileDevice.device_id);
+        expect(logSpy).toHaveBeenCalledWith('Error getting device cross-signing info', noCryptoError);
+    });
+
+    it('sets device verification status correctly', async () => {
+        mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] });
+        mockCrossSigningInfo.checkDeviceTrust
+            // alices device is trusted
+            .mockReturnValueOnce(new DeviceTrustLevel(true, true, false, false))
+            // alices mobile device is not
+            .mockReturnValueOnce(new DeviceTrustLevel(false, false, false, false));
+
+        const { getByTestId } = render(getComponent());
+
+        await act(async () => {
+            await flushPromisesWithFakeTimers();
+        });
+
+        expect(mockCrossSigningInfo.checkDeviceTrust).toHaveBeenCalledTimes(2);
+        expect(getByTestId(`device-tile-${alicesDevice.device_id}`)).toMatchSnapshot();
+    });
+
+    it('renders current session section', async () => {
+        mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] });
+        const noCryptoError = new Error("End-to-end encryption disabled");
+        mockClient.getStoredDevice.mockImplementation(() => { throw noCryptoError; });
+        const { getByTestId } = render(getComponent());
+
+        await act(async () => {
+            await flushPromisesWithFakeTimers();
+        });
+
+        expect(getByTestId('current-session-section')).toMatchSnapshot();
+    });
+});

test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap

@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SessionManagerTab /> renders current session section 1`] = `
+<div
+  class="mx_SettingsSubsection"
+  data-testid="current-session-section"
+>
+  <h3
+    class="mx_Heading_h3 mx_SettingsSubsection_heading"
+  >
+    Current session
+  </h3>
+  <div
+    class="mx_SettingsSubsection_content"
+  >
+    <div
+      class="mx_DeviceTile"
+      data-testid="device-tile-alices_device"
+    >
+      <div
+        class="mx_DeviceTile_info"
+      >
+        <h4
+          class="mx_Heading_h4"
+        >
+          alices_device
+        </h4>
+        <div
+          class="mx_DeviceTile_metadata"
+        >
+          <span
+            data-testid="device-metadata-isVerified"
+          >
+            Unverified
+          </span>
+           · 
+           · 
+        </div>
+      </div>
+      <div
+        class="mx_DeviceTile_actions"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<SessionManagerTab /> sets device verification status correctly 1`] = `
+<div
+  class="mx_DeviceTile"
+  data-testid="device-tile-alices_device"
+>
+  <div
+    class="mx_DeviceTile_info"
+  >
+    <h4
+      class="mx_Heading_h4"
+    >
+      alices_device
+    </h4>
+    <div
+      class="mx_DeviceTile_metadata"
+    >
+      <span
+        data-testid="device-metadata-isVerified"
+      >
+        Verified
+      </span>
+       · 
+       · 
+    </div>
+  </div>
+  <div
+    class="mx_DeviceTile_actions"
+  />
+</div>
+`;