Device manager - other sessions list (PSG-637) (#9155)

* add session manager tab to user settings

* fussy import ordering

* i18n

* basic sorted list outline

* rename to filtered device list

* exclude current device session from other sessions list

* test other sessions section

res/css/_components.pcss

@@ -29,6 +29,7 @@
 @import "./components/views/messages/shared/_MediaProcessingError.pcss";
 @import "./components/views/settings/devices/_DeviceDetails.pcss";
 @import "./components/views/settings/devices/_DeviceTile.pcss";
+@import "./components/views/settings/devices/_FilteredDeviceList.pcss";
 @import "./components/views/settings/devices/_SelectableDeviceTile.pcss";
 @import "./components/views/settings/shared/_SettingsSubsection.pcss";
 @import "./components/views/spaces/_QuickThemeSwitcher.pcss";

res/css/components/views/settings/devices/_FilteredDeviceList.pcss

@@ -0,0 +1,23 @@
+/*
+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.
+*/
+
+.mx_FilteredDeviceList {
+    list-style-type: none;
+    display: grid;
+    grid-gap: $spacing-16;
+    margin: 0;
+    padding: 0 $spacing-8;
+}

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

@@ -0,0 +1,53 @@
+/*
+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 DeviceTile from './DeviceTile';
+import { DevicesDictionary, DeviceWithVerification } from './useOwnDevices';
+
+interface Props {
+    devices: DevicesDictionary;
+}
+
+// devices without timestamp metadata should be sorted last
+const sortDevicesByLatestActivity = (left: DeviceWithVerification, right: DeviceWithVerification) =>
+    (right.last_seen_ts || 0) - (left.last_seen_ts || 0);
+
+const getSortedDevices = (devices: DevicesDictionary) =>
+    Object.values(devices).sort(sortDevicesByLatestActivity);
+
+/**
+ * Filtered list of devices
+ * Sorted by latest activity descending
+ * TODO(kerrya) Filtering to added as part of PSG-648
+ */
+const FilteredDeviceList: React.FC<Props> = ({ devices }) => {
+    const sortedDevices = getSortedDevices(devices);
+
+    return <ol className='mx_FilteredDeviceList'>
+        { sortedDevices.map((device) =>
+            <li key={device.device_id}>
+                <DeviceTile
+                    device={device}
+                />
+            </li>,
+
+        ) }
+    </ol>;
+};
+
+export default FilteredDeviceList;

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

@@ -60,8 +60,9 @@ export enum OwnDevicesError {
     Unsupported = 'Unsupported',
     Default = 'Default',
 }
+export type DevicesDictionary = Record<DeviceWithVerification['device_id'], DeviceWithVerification>;
 type DevicesState = {
-    devices: Record<DeviceWithVerification['device_id'], DeviceWithVerification>;
+    devices: DevicesDictionary;
     currentDeviceId: string;
     isLoading: boolean;
     error?: OwnDevicesError;

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

@@ -22,11 +22,14 @@ import { useOwnDevices } from '../../devices/useOwnDevices';
 import DeviceTile from '../../devices/DeviceTile';
 import SettingsSubsection from '../../shared/SettingsSubsection';
 import SettingsTab from '../SettingsTab';
+import FilteredDeviceList from '../../devices/FilteredDeviceList';
 
 const SessionManagerTab: React.FC = () => {
     const { devices, currentDeviceId, isLoading } = useOwnDevices();
 
-    const currentDevice = devices[currentDeviceId];
+    const { [currentDeviceId]: currentDevice, ...otherDevices } = devices;
+    const shouldShowOtherSessions = Object.keys(otherDevices).length > 0;
+
     return <SettingsTab heading={_t('Sessions')}>
         <SettingsSubsection
             heading={_t('Current session')}
@@ -37,6 +40,19 @@ const SessionManagerTab: React.FC = () => {
                 device={currentDevice}
             /> }
         </SettingsSubsection>
+        {
+            shouldShowOtherSessions &&
+            <SettingsSubsection
+                heading={_t('Other sessions')}
+                description={_t(
+                    `For best security, verify your sessions and sign out ` +
+                    `from any session that you don't recognize or use anymore.`,
+                )}
+                data-testid='other-sessions-section'
+            >
+                <FilteredDeviceList devices={otherDevices} />
+            </SettingsSubsection>
+        }
     </SettingsTab>;
 };
 

src/i18n/strings/en_EN.json

@@ -1555,6 +1555,8 @@
     "Manage your signed-in devices below. A device's name is visible to people you communicate with.": "Manage your signed-in devices below. A device's name is visible to people you communicate with.",
     "Sessions": "Sessions",
     "Current session": "Current session",
+    "Other sessions": "Other sessions",
+    "For best security, verify your sessions and sign out from any session that you don't recognize or use anymore.": "For best security, verify your sessions and sign out from any session that you don't recognize or use anymore.",
     "Sidebar": "Sidebar",
     "Spaces to show": "Spaces to show",
     "Spaces are ways to group rooms and people. Alongside the spaces you're in, you can use some pre-built ones too.": "Spaces are ways to group rooms and people. Alongside the spaces you're in, you can use some pre-built ones too.",

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

@@ -0,0 +1,65 @@
+/*
+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 FilteredDeviceList from '../../../../../src/components/views/settings/devices/FilteredDeviceList';
+
+describe('<FilteredDeviceList />', () => {
+    const noMetaDevice = { device_id: 'no-meta-device', isVerified: true };
+    const oldDevice = { device_id: 'old', last_seen_ts: new Date(1993, 7, 3, 4).getTime(), isVerified: true };
+    const newDevice = {
+        device_id: 'new',
+        last_seen_ts: new Date().getTime() - 500,
+        last_seen_ip: '123.456.789',
+        display_name: 'My Device',
+        isVerified: true,
+    };
+    const defaultProps = {
+        devices: {
+            [noMetaDevice.device_id]: noMetaDevice,
+            [oldDevice.device_id]: oldDevice,
+            [newDevice.device_id]: newDevice,
+        },
+    };
+    const getComponent = (props = {}) =>
+        (<FilteredDeviceList {...defaultProps} {...props} />);
+
+    it('renders devices in correct order', () => {
+        const { container } = render(getComponent());
+        const tiles = container.querySelectorAll('.mx_DeviceTile');
+        expect(tiles[0].getAttribute('data-testid')).toEqual(`device-tile-${newDevice.device_id}`);
+        expect(tiles[1].getAttribute('data-testid')).toEqual(`device-tile-${oldDevice.device_id}`);
+        expect(tiles[2].getAttribute('data-testid')).toEqual(`device-tile-${noMetaDevice.device_id}`);
+    });
+
+    it('updates list order when devices change', () => {
+        const updatedOldDevice = { ...oldDevice, last_seen_ts: new Date().getTime() };
+        const updatedDevices = {
+            [oldDevice.device_id]: updatedOldDevice,
+            [newDevice.device_id]: newDevice,
+        };
+        const { container, rerender } = render(getComponent());
+
+        rerender(getComponent({ devices: updatedDevices }));
+
+        const tiles = container.querySelectorAll('.mx_DeviceTile');
+        expect(tiles.length).toBe(2);
+        expect(tiles[0].getAttribute('data-testid')).toEqual(`device-tile-${oldDevice.device_id}`);
+        expect(tiles[1].getAttribute('data-testid')).toEqual(`device-tile-${newDevice.device_id}`);
+    });
+});

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

@@ -40,6 +40,12 @@ describe('<SessionManagerTab />', () => {
     };
     const alicesMobileDevice = {
         device_id: 'alices_mobile_device',
+        last_seen_ts: Date.now(),
+    };
+
+    const alicesOlderMobileDevice = {
+        device_id: 'alices_older_mobile_device',
+        last_seen_ts: Date.now() - 600000,
     };
 
     const mockCrossSigningInfo = {
@@ -139,8 +145,6 @@ describe('<SessionManagerTab />', () => {
 
     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 () => {
@@ -149,4 +153,28 @@ describe('<SessionManagerTab />', () => {
 
         expect(getByTestId('current-session-section')).toMatchSnapshot();
     });
+
+    it('does not render other sessions section when user has only one device', async () => {
+        mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice] });
+        const { queryByTestId } = render(getComponent());
+
+        await act(async () => {
+            await flushPromisesWithFakeTimers();
+        });
+
+        expect(queryByTestId('other-sessions-section')).toBeFalsy();
+    });
+
+    it('renders other sessions section', async () => {
+        mockClient.getDevices.mockResolvedValue({
+            devices: [alicesDevice, alicesOlderMobileDevice, alicesMobileDevice],
+        });
+        const { getByTestId } = render(getComponent());
+
+        await act(async () => {
+            await flushPromisesWithFakeTimers();
+        });
+
+        expect(getByTestId('other-sessions-section')).toBeTruthy();
+    });
 });