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
2022-08-10 18:14:59 +02:00 · 2022-08-10 18:14:59 +02:00 · b7872f2ff7
parent 4e30d3c0fc
commit b7872f2ff7
12 changed files with 434 additions and 13 deletions
--- a/src/components/views/settings/DevicesPanelEntry.tsx
+++ b/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>
--- a/src/components/views/settings/devices/DeviceTile.tsx
+++ b/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">
--- a/src/components/views/settings/devices/useOwnDevices.ts
+++ b/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,
+    };
+};
--- a/src/components/views/settings/shared/SettingsSubsection.tsx
+++ b/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 }) => (
-    <div className="mx_SettingsSubsection">
+const SettingsSubsection: React.FC<SettingsSubsectionProps> = ({ heading, description, children, ...rest }) => (
+    <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">
--- a/src/components/views/settings/tabs/user/SessionManagerTab.tsx
+++ b/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
-            // in next PR
-        />
+            data-testid='current-session-section'
+        >
+            { isLoading && <Spinner /> }
+            { !!currentDevice && <DeviceTile
+                device={currentDevice}
+            /> }
+        </SettingsSubsection>
    </SettingsTab>;
 };

--- a/src/i18n/strings/en_EN.json
+++ b/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",
--- a/test/components/views/settings/devices/DeviceTile-test.tsx
+++ b/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',
--- a/test/components/views/settings/devices/SelectableDeviceTile-test.tsx
+++ b/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(),
--- a/test/components/views/settings/devices/snapshots/DeviceTile-test.tsx.snap
+++ b/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"
        >
--- a/test/components/views/settings/devices/snapshots/SelectableDeviceTile-test.tsx.snap
+++ b/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"
--- a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
+++ b/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();
+    });
+});
--- a/test/components/views/settings/tabs/user/snapshots/SessionManagerTab-test.tsx.snap
+++ b/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>
+`;