From 3e11fad2bd336d36cc6237623cee7789f3e599f7 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 30 Aug 2022 18:55:23 +0200 Subject: [PATCH 1/6] scroll to filtered list from security recommendations --- .../settings/devices/FilteredDeviceList.tsx | 14 ++++---- .../devices/SecurityRecommendations.tsx | 15 ++++---- .../settings/tabs/user/SessionManagerTab.tsx | 26 ++++++++++++-- .../devices/FilteredDeviceList-test.tsx | 2 +- .../devices/SecurityRecommendations-test.tsx | 36 ++++++++++++++++++- .../SecurityRecommendations-test.tsx.snap | 6 ++++ 6 files changed, 80 insertions(+), 19 deletions(-) diff --git a/src/components/views/settings/devices/FilteredDeviceList.tsx b/src/components/views/settings/devices/FilteredDeviceList.tsx index 5687cdf0af1..16001e6f6dc 100644 --- a/src/components/views/settings/devices/FilteredDeviceList.tsx +++ b/src/components/views/settings/devices/FilteredDeviceList.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from 'react'; +import React, { forwardRef } from 'react'; import { _t } from '../../../../languageHandler'; import AccessibleButton from '../../elements/AccessibleButton'; @@ -150,13 +150,13 @@ const DeviceListItem: React.FC<{ * Filtered list of devices * Sorted by latest activity descending */ -const FilteredDeviceList: React.FC = ({ +export const FilteredDeviceList: React.FC = forwardRef(({ devices, filter, expandedDeviceIds, onFilterChange, onDeviceExpandToggle, -}) => { +}, ref: React.RefObject) => { const sortedDevices = getFilteredSortedDevices(devices, filter); const options: FilterDropdownOption[] = [ @@ -185,7 +185,7 @@ const FilteredDeviceList: React.FC = ({ onFilterChange(filterId === ALL_FILTER_ID ? undefined : filterId as DeviceSecurityVariation); }; - return
+ return
{ _t('Sessions') } @@ -212,8 +212,6 @@ const FilteredDeviceList: React.FC = ({ />, ) } -
- ; -}; +
; +}); -export default FilteredDeviceList; diff --git a/src/components/views/settings/devices/SecurityRecommendations.tsx b/src/components/views/settings/devices/SecurityRecommendations.tsx index 00181f5674a..82eb49fd474 100644 --- a/src/components/views/settings/devices/SecurityRecommendations.tsx +++ b/src/components/views/settings/devices/SecurityRecommendations.tsx @@ -29,9 +29,13 @@ import { interface Props { devices: DevicesDictionary; + goToFilteredList: (filter: DeviceSecurityVariation) => void; } -const SecurityRecommendations: React.FC = ({ devices }) => { +const SecurityRecommendations: React.FC = ({ + devices, + goToFilteredList, +}) => { const devicesArray = Object.values(devices); const unverifiedDevicesCount = filterDevicesBySecurityRecommendation( @@ -49,9 +53,6 @@ const SecurityRecommendations: React.FC = ({ devices }) => { const inactiveAgeDays = INACTIVE_DEVICE_AGE_DAYS; - // TODO(kerrya) stubbed until PSG-640/652 - const noop = () => {}; - return = ({ devices }) => { > goToFilteredList(DeviceSecurityVariation.Unverified)} + data-testid='unverified-devices-cta' > { _t('View all') + ` (${unverifiedDevicesCount})` } @@ -90,7 +92,8 @@ const SecurityRecommendations: React.FC = ({ devices }) => { > goToFilteredList(DeviceSecurityVariation.Inactive)} + data-testid='inactive-devices-cta' > { _t('View all') + ` (${inactiveDevicesCount})` } diff --git a/src/components/views/settings/tabs/user/SessionManagerTab.tsx b/src/components/views/settings/tabs/user/SessionManagerTab.tsx index c4878dbb372..c5445a82a63 100644 --- a/src/components/views/settings/tabs/user/SessionManagerTab.tsx +++ b/src/components/views/settings/tabs/user/SessionManagerTab.tsx @@ -14,12 +14,12 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { _t } from "../../../../../languageHandler"; import { useOwnDevices } from '../../devices/useOwnDevices'; import SettingsSubsection from '../../shared/SettingsSubsection'; -import FilteredDeviceList from '../../devices/FilteredDeviceList'; +import { FilteredDeviceList } from '../../devices/FilteredDeviceList'; import CurrentDeviceSection from '../../devices/CurrentDeviceSection'; import SecurityRecommendations from '../../devices/SecurityRecommendations'; import { DeviceSecurityVariation, DeviceWithVerification } from '../../devices/types'; @@ -29,6 +29,8 @@ const SessionManagerTab: React.FC = () => { const { devices, currentDeviceId, isLoading } = useOwnDevices(); const [filter, setFilter] = useState(); const [expandedDeviceIds, setExpandedDeviceIds] = useState([]); + const filteredDeviceListRef = useRef(); + const scrollIntoViewTimeoutRef = useRef>(); const onDeviceExpandToggle = (deviceId: DeviceWithVerification['device_id']): void => { if (expandedDeviceIds.includes(deviceId)) { @@ -38,11 +40,28 @@ const SessionManagerTab: React.FC = () => { } }; + console.log('hhh', { filteredDeviceListRef }); + + const onGoToFilteredList = (filter: DeviceSecurityVariation) => { + setFilter(filter); + // @TODO(kerrya) clear selection when added in PSG-659 + if (filteredDeviceListRef.current) { + clearTimeout(scrollIntoViewTimeoutRef.current); + // wait a tick for the filtered section to rerender with different height + scrollIntoViewTimeoutRef.current = + window.setTimeout(() => filteredDeviceListRef.current.scrollIntoView(true)); + } + }; + const { [currentDeviceId]: currentDevice, ...otherDevices } = devices; const shouldShowOtherSessions = Object.keys(otherDevices).length > 0; + useEffect(() => () => { + clearTimeout(scrollIntoViewTimeoutRef.current); + }, [scrollIntoViewTimeoutRef]); + return - + { expandedDeviceIds={expandedDeviceIds} onFilterChange={setFilter} onDeviceExpandToggle={onDeviceExpandToggle} + ref={filteredDeviceListRef} /> } diff --git a/test/components/views/settings/devices/FilteredDeviceList-test.tsx b/test/components/views/settings/devices/FilteredDeviceList-test.tsx index 68ef60e76b5..ef5ae5b18b4 100644 --- a/test/components/views/settings/devices/FilteredDeviceList-test.tsx +++ b/test/components/views/settings/devices/FilteredDeviceList-test.tsx @@ -17,7 +17,7 @@ limitations under the License. import React from 'react'; import { act, fireEvent, render } from '@testing-library/react'; -import FilteredDeviceList from '../../../../../src/components/views/settings/devices/FilteredDeviceList'; +import { FilteredDeviceList } from '../../../../../src/components/views/settings/devices/FilteredDeviceList'; import { DeviceSecurityVariation } from '../../../../../src/components/views/settings/devices/types'; import { flushPromises, mockPlatformPeg } from '../../../../test-utils'; diff --git a/test/components/views/settings/devices/SecurityRecommendations-test.tsx b/test/components/views/settings/devices/SecurityRecommendations-test.tsx index b54745545b7..e589a995c59 100644 --- a/test/components/views/settings/devices/SecurityRecommendations-test.tsx +++ b/test/components/views/settings/devices/SecurityRecommendations-test.tsx @@ -15,9 +15,10 @@ limitations under the License. */ import React from 'react'; -import { render } from '@testing-library/react'; +import { act, fireEvent, render } from '@testing-library/react'; import SecurityRecommendations from '../../../../../src/components/views/settings/devices/SecurityRecommendations'; +import { DeviceSecurityVariation } from '../../../../../src/components/views/settings/devices/types'; const MS_DAY = 24 * 60 * 60 * 1000; describe('', () => { @@ -32,6 +33,7 @@ describe('', () => { const defaultProps = { devices: {}, + goToFilteredList: jest.fn(), }; const getComponent = (props = {}) => (); @@ -69,4 +71,36 @@ describe('', () => { const { container } = render(getComponent({ devices })); expect(container).toMatchSnapshot(); }); + + it('clicking view all unverified devices button works', () => { + const goToFilteredList = jest.fn(); + const devices = { + [verifiedNoMetadata.device_id]: verifiedNoMetadata, + [hundredDaysOld.device_id]: hundredDaysOld, + [unverifiedNoMetadata.device_id]: unverifiedNoMetadata, + }; + const { getByTestId } = render(getComponent({ devices, goToFilteredList })); + + act(() => { + fireEvent.click(getByTestId('unverified-devices-cta')); + }); + + expect(goToFilteredList).toHaveBeenCalledWith(DeviceSecurityVariation.Unverified); + }); + + it('clicking view all inactive devices button works', () => { + const goToFilteredList = jest.fn(); + const devices = { + [verifiedNoMetadata.device_id]: verifiedNoMetadata, + [hundredDaysOld.device_id]: hundredDaysOld, + [unverifiedNoMetadata.device_id]: unverifiedNoMetadata, + }; + const { getByTestId } = render(getComponent({ devices, goToFilteredList })); + + act(() => { + fireEvent.click(getByTestId('inactive-devices-cta')); + }); + + expect(goToFilteredList).toHaveBeenCalledWith(DeviceSecurityVariation.Inactive); + }); }); diff --git a/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap index 0ee9870b780..b122d918262 100644 --- a/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap +++ b/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap @@ -48,6 +48,7 @@ exports[` renders both cards when user has both unver >
@@ -88,6 +89,7 @@ exports[` renders both cards when user has both unver >
@@ -149,6 +151,7 @@ exports[` renders inactive devices section when user >
@@ -189,6 +192,7 @@ exports[` renders inactive devices section when user >
@@ -250,6 +254,7 @@ exports[` renders unverified devices section when use >
@@ -290,6 +295,7 @@ exports[` renders unverified devices section when use >
From 476e1dc9cbc6381f3eef7e641be21d9a85a453a4 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 30 Aug 2022 19:06:23 +0200 Subject: [PATCH 2/6] test sessionmanager scroll to --- .../settings/devices/FilteredDeviceList.tsx | 130 +++++++-------- .../settings/tabs/user/SessionManagerTab.tsx | 2 - .../tabs/user/SessionManagerTab-test.tsx | 18 ++ .../SessionManagerTab-test.tsx.snap | 155 ++++++++++++++++++ 4 files changed, 239 insertions(+), 66 deletions(-) diff --git a/src/components/views/settings/devices/FilteredDeviceList.tsx b/src/components/views/settings/devices/FilteredDeviceList.tsx index 16001e6f6dc..8cb663a10db 100644 --- a/src/components/views/settings/devices/FilteredDeviceList.tsx +++ b/src/components/views/settings/devices/FilteredDeviceList.tsx @@ -150,68 +150,70 @@ const DeviceListItem: React.FC<{ * Filtered list of devices * Sorted by latest activity descending */ -export const FilteredDeviceList: React.FC = forwardRef(({ - devices, - filter, - expandedDeviceIds, - onFilterChange, - onDeviceExpandToggle, -}, ref: React.RefObject) => { - const sortedDevices = getFilteredSortedDevices(devices, filter); - - const options: FilterDropdownOption[] = [ - { id: ALL_FILTER_ID, label: _t('All') }, - { - id: DeviceSecurityVariation.Verified, - label: _t('Verified'), - description: _t('Ready for secure messaging'), - }, - { - id: DeviceSecurityVariation.Unverified, - label: _t('Unverified'), - description: _t('Not ready for secure messaging'), - }, - { - id: DeviceSecurityVariation.Inactive, - label: _t('Inactive'), - description: _t( - 'Inactive for %(inactiveAgeDays)s days or longer', - { inactiveAgeDays: INACTIVE_DEVICE_AGE_DAYS }, - ), - }, - ]; - - const onFilterOptionChange = (filterId: DeviceFilterKey) => { - onFilterChange(filterId === ALL_FILTER_ID ? undefined : filterId as DeviceSecurityVariation); - }; - - return
-
- - { _t('Sessions') } - - - id='device-list-filter' - label={_t('Filter devices')} - value={filter || ALL_FILTER_ID} - onOptionChange={onFilterOptionChange} - options={options} - selectedLabel={_t('Show')} - /> -
- { !!sortedDevices.length - ? - : onFilterChange(undefined)} /> - } -
    - { sortedDevices.map((device) => onDeviceExpandToggle(device.device_id)} - />, - ) } -
-
; -}); +export const FilteredDeviceList: + React.ForwardRefExoticComponent> = + forwardRef(({ + devices, + filter, + expandedDeviceIds, + onFilterChange, + onDeviceExpandToggle, + }, ref: React.RefObject) => { + const sortedDevices = getFilteredSortedDevices(devices, filter); + + const options: FilterDropdownOption[] = [ + { id: ALL_FILTER_ID, label: _t('All') }, + { + id: DeviceSecurityVariation.Verified, + label: _t('Verified'), + description: _t('Ready for secure messaging'), + }, + { + id: DeviceSecurityVariation.Unverified, + label: _t('Unverified'), + description: _t('Not ready for secure messaging'), + }, + { + id: DeviceSecurityVariation.Inactive, + label: _t('Inactive'), + description: _t( + 'Inactive for %(inactiveAgeDays)s days or longer', + { inactiveAgeDays: INACTIVE_DEVICE_AGE_DAYS }, + ), + }, + ]; + + const onFilterOptionChange = (filterId: DeviceFilterKey) => { + onFilterChange(filterId === ALL_FILTER_ID ? undefined : filterId as DeviceSecurityVariation); + }; + + return
+
+ + { _t('Sessions') } + + + id='device-list-filter' + label={_t('Filter devices')} + value={filter || ALL_FILTER_ID} + onOptionChange={onFilterOptionChange} + options={options} + selectedLabel={_t('Show')} + /> +
+ { !!sortedDevices.length + ? + : onFilterChange(undefined)} /> + } +
    + { sortedDevices.map((device) => onDeviceExpandToggle(device.device_id)} + />, + ) } +
+
; + }); diff --git a/src/components/views/settings/tabs/user/SessionManagerTab.tsx b/src/components/views/settings/tabs/user/SessionManagerTab.tsx index c5445a82a63..9e922887c01 100644 --- a/src/components/views/settings/tabs/user/SessionManagerTab.tsx +++ b/src/components/views/settings/tabs/user/SessionManagerTab.tsx @@ -40,8 +40,6 @@ const SessionManagerTab: React.FC = () => { } }; - console.log('hhh', { filteredDeviceListRef }); - const onGoToFilteredList = (filter: DeviceSecurityVariation) => { setFilter(filter); // @TODO(kerrya) clear selection when added in PSG-659 diff --git a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx index 53e4d408a96..48fc6651fb7 100644 --- a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx +++ b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx @@ -193,6 +193,24 @@ describe('', () => { expect(getByTestId('other-sessions-section')).toBeTruthy(); }); + it('goes to filtered list from security recommendations', async () => { + mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] }); + const { getByTestId } = render(getComponent()); + + await act(async () => { + await flushPromisesWithFakeTimers(); + }); + + act(() => { + fireEvent.click(getByTestId('unverified-devices-cta')); + }); + + // our session manager waits a tick for rerender + await flushPromisesWithFakeTimers(); + + expect(getByTestId('other-sessions-section')).toMatchSnapshot(); + }); + describe('device detail expansion', () => { it('renders no devices expanded by default', async () => { mockClient.getDevices.mockResolvedValue({ diff --git a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap index fd719cf1976..a638e915728 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap @@ -1,5 +1,160 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[` goes to filtered list from security recommendations 1`] = ` +
+

+ Other sessions +

+
+ For best security, verify your sessions and sign out from any session that you don't recognize or use anymore. +
+
+
+
+ + Sessions + +
+ +
+
+
+
+
+
+
+
+

+ Unverified sessions +

+

+ Verify your sessions for enhanced secure messaging or sign out from those you don't recognize or use anymore. +

+
+
+
+
    +
  1. +
    +
    +
    2. +
+
+
+
+`; + exports[` renders current session section with a verified session 1`] = `
Date: Tue, 30 Aug 2022 19:08:36 +0200 Subject: [PATCH 3/6] stable snapshot --- .../tabs/user/SessionManagerTab-test.tsx | 5 +- .../SessionManagerTab-test.tsx.snap | 159 +++--------------- 2 files changed, 23 insertions(+), 141 deletions(-) diff --git a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx index 48fc6651fb7..713429558d8 100644 --- a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx +++ b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx @@ -195,7 +195,7 @@ describe('', () => { it('goes to filtered list from security recommendations', async () => { mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] }); - const { getByTestId } = render(getComponent()); + const { getByTestId, container } = render(getComponent()); await act(async () => { await flushPromisesWithFakeTimers(); @@ -208,7 +208,8 @@ describe('', () => { // our session manager waits a tick for rerender await flushPromisesWithFakeTimers(); - expect(getByTestId('other-sessions-section')).toMatchSnapshot(); + // unverified filter is set + expect(container.querySelector('.mx_FilteredDeviceList_header')).toMatchSnapshot(); }); describe('device detail expansion', () => { diff --git a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap index a638e915728..468556195fc 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap @@ -2,154 +2,35 @@ exports[` goes to filtered list from security recommendations 1`] = `
-

- Other sessions -

-
- For best security, verify your sessions and sign out from any session that you don't recognize or use anymore. -
+ Sessions +
From eb4c4de21e9fdffb45bdcc8a0bc094125550fab4 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 30 Aug 2022 19:32:51 +0200 Subject: [PATCH 4/6] fix strict errors --- .../views/settings/devices/FilteredDeviceList.tsx | 4 ++-- .../views/settings/tabs/user/SessionManagerTab.tsx | 14 ++++++-------- .../settings/tabs/user/SessionManagerTab-test.tsx | 6 +++--- 3 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/components/views/settings/devices/FilteredDeviceList.tsx b/src/components/views/settings/devices/FilteredDeviceList.tsx index 8cb663a10db..9d504233352 100644 --- a/src/components/views/settings/devices/FilteredDeviceList.tsx +++ b/src/components/views/settings/devices/FilteredDeviceList.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { forwardRef } from 'react'; +import React, { ForwardedRef, forwardRef } from 'react'; import { _t } from '../../../../languageHandler'; import AccessibleButton from '../../elements/AccessibleButton'; @@ -158,7 +158,7 @@ export const FilteredDeviceList: expandedDeviceIds, onFilterChange, onDeviceExpandToggle, - }, ref: React.RefObject) => { + }, ref: ForwardedRef) => { const sortedDevices = getFilteredSortedDevices(devices, filter); const options: FilterDropdownOption[] = [ diff --git a/src/components/views/settings/tabs/user/SessionManagerTab.tsx b/src/components/views/settings/tabs/user/SessionManagerTab.tsx index 9e922887c01..900d18674b5 100644 --- a/src/components/views/settings/tabs/user/SessionManagerTab.tsx +++ b/src/components/views/settings/tabs/user/SessionManagerTab.tsx @@ -28,8 +28,8 @@ import SettingsTab from '../SettingsTab'; const SessionManagerTab: React.FC = () => { const { devices, currentDeviceId, isLoading } = useOwnDevices(); const [filter, setFilter] = useState(); - const [expandedDeviceIds, setExpandedDeviceIds] = useState([]); - const filteredDeviceListRef = useRef(); + const [expandedDeviceIds, setExpandedDeviceIds] = useState([]); + const filteredDeviceListRef = useRef(null); const scrollIntoViewTimeoutRef = useRef>(); const onDeviceExpandToggle = (deviceId: DeviceWithVerification['device_id']): void => { @@ -43,12 +43,10 @@ const SessionManagerTab: React.FC = () => { const onGoToFilteredList = (filter: DeviceSecurityVariation) => { setFilter(filter); // @TODO(kerrya) clear selection when added in PSG-659 - if (filteredDeviceListRef.current) { - clearTimeout(scrollIntoViewTimeoutRef.current); - // wait a tick for the filtered section to rerender with different height - scrollIntoViewTimeoutRef.current = - window.setTimeout(() => filteredDeviceListRef.current.scrollIntoView(true)); - } + clearTimeout(scrollIntoViewTimeoutRef.current); + // wait a tick for the filtered section to rerender with different height + scrollIntoViewTimeoutRef.current = + window.setTimeout(() => filteredDeviceListRef.current?.scrollIntoView(true)); }; const { [currentDeviceId]: currentDevice, ...otherDevices } = devices; diff --git a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx index 713429558d8..68528e5b57c 100644 --- a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx +++ b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx @@ -241,7 +241,7 @@ describe('', () => { act(() => { const tile = getByTestId(`device-tile-${alicesOlderMobileDevice.device_id}`); - const toggle = tile.querySelector('[aria-label="Toggle device details"]'); + const toggle = tile.querySelector('[aria-label="Toggle device details"]') as Element; fireEvent.click(toggle); }); @@ -250,7 +250,7 @@ describe('', () => { act(() => { const tile = getByTestId(`device-tile-${alicesMobileDevice.device_id}`); - const toggle = tile.querySelector('[aria-label="Toggle device details"]'); + const toggle = tile.querySelector('[aria-label="Toggle device details"]') as Element; fireEvent.click(toggle); }); @@ -260,7 +260,7 @@ describe('', () => { act(() => { const tile = getByTestId(`device-tile-${alicesMobileDevice.device_id}`); - const toggle = tile.querySelector('[aria-label="Toggle device details"]'); + const toggle = tile.querySelector('[aria-label="Toggle device details"]') as Element; fireEvent.click(toggle); }); From 2f1129b36f4516f568d09c5ee051a0165b5a6dcd Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 31 Aug 2022 09:29:58 +0200 Subject: [PATCH 5/6] prtidy --- .../settings/devices/FilteredDeviceList.tsx | 5 ++-- .../tabs/user/SessionManagerTab-test.tsx | 28 +++++++------------ 2 files changed, 12 insertions(+), 21 deletions(-) diff --git a/src/components/views/settings/devices/FilteredDeviceList.tsx b/src/components/views/settings/devices/FilteredDeviceList.tsx index 9d504233352..0c88a507c6d 100644 --- a/src/components/views/settings/devices/FilteredDeviceList.tsx +++ b/src/components/views/settings/devices/FilteredDeviceList.tsx @@ -150,15 +150,14 @@ const DeviceListItem: React.FC<{ * Filtered list of devices * Sorted by latest activity descending */ -export const FilteredDeviceList: - React.ForwardRefExoticComponent> = +export const FilteredDeviceList = forwardRef(({ devices, filter, expandedDeviceIds, onFilterChange, onDeviceExpandToggle, - }, ref: ForwardedRef) => { + }: Props, ref: ForwardedRef) => { const sortedDevices = getFilteredSortedDevices(devices, filter); const options: FilterDropdownOption[] = [ diff --git a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx index 68528e5b57c..aad6fbcd380 100644 --- a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx +++ b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx @@ -201,9 +201,7 @@ describe('', () => { await flushPromisesWithFakeTimers(); }); - act(() => { - fireEvent.click(getByTestId('unverified-devices-cta')); - }); + fireEvent.click(getByTestId('unverified-devices-cta')); // our session manager waits a tick for rerender await flushPromisesWithFakeTimers(); @@ -239,30 +237,24 @@ describe('', () => { await flushPromisesWithFakeTimers(); }); - act(() => { - const tile = getByTestId(`device-tile-${alicesOlderMobileDevice.device_id}`); - const toggle = tile.querySelector('[aria-label="Toggle device details"]') as Element; - fireEvent.click(toggle); - }); + const tile1 = getByTestId(`device-tile-${alicesOlderMobileDevice.device_id}`); + const toggle1 = tile1.querySelector('[aria-label="Toggle device details"]') as Element; + fireEvent.click(toggle1); // device details are expanded expect(getByTestId(`device-detail-${alicesOlderMobileDevice.device_id}`)).toBeTruthy(); - act(() => { - const tile = getByTestId(`device-tile-${alicesMobileDevice.device_id}`); - const toggle = tile.querySelector('[aria-label="Toggle device details"]') as Element; - fireEvent.click(toggle); - }); + const tile2 = getByTestId(`device-tile-${alicesMobileDevice.device_id}`); + const toggle2 = tile2.querySelector('[aria-label="Toggle device details"]') as Element; + fireEvent.click(toggle2); // both device details are expanded expect(getByTestId(`device-detail-${alicesOlderMobileDevice.device_id}`)).toBeTruthy(); expect(getByTestId(`device-detail-${alicesMobileDevice.device_id}`)).toBeTruthy(); - act(() => { - const tile = getByTestId(`device-tile-${alicesMobileDevice.device_id}`); - const toggle = tile.querySelector('[aria-label="Toggle device details"]') as Element; - fireEvent.click(toggle); - }); + const tile3 = getByTestId(`device-tile-${alicesMobileDevice.device_id}`); + const toggle3 = tile3.querySelector('[aria-label="Toggle device details"]') as Element; + fireEvent.click(toggle3); // alicesMobileDevice was toggled off expect(queryByTestId(`device-detail-${alicesMobileDevice.device_id}`)).toBeFalsy(); From 35df7bf926b3b5f71e9c976d497e401832283e3c Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 31 Aug 2022 09:50:50 +0200 Subject: [PATCH 6/6] dont show security rec section when only curent session is unverified --- .../settings/devices/SecurityRecommendations.tsx | 9 ++++++++- .../views/settings/tabs/user/SessionManagerTab.tsx | 6 +++++- .../settings/devices/SecurityRecommendations-test.tsx | 11 +++++++++++ 3 files changed, 24 insertions(+), 2 deletions(-) diff --git a/src/components/views/settings/devices/SecurityRecommendations.tsx b/src/components/views/settings/devices/SecurityRecommendations.tsx index 82eb49fd474..3132eba38a3 100644 --- a/src/components/views/settings/devices/SecurityRecommendations.tsx +++ b/src/components/views/settings/devices/SecurityRecommendations.tsx @@ -29,11 +29,13 @@ import { interface Props { devices: DevicesDictionary; + currentDeviceId: DeviceWithVerification['device_id']; goToFilteredList: (filter: DeviceSecurityVariation) => void; } const SecurityRecommendations: React.FC = ({ devices, + currentDeviceId, goToFilteredList, }) => { const devicesArray = Object.values(devices); @@ -41,7 +43,12 @@ const SecurityRecommendations: React.FC = ({ const unverifiedDevicesCount = filterDevicesBySecurityRecommendation( devicesArray, [DeviceSecurityVariation.Unverified], - ).length; + ) + // filter out the current device + // as unverfied warning and actions + // will be shown in current session section + .filter((device) => device.device_id !== currentDeviceId) + .length; const inactiveDevicesCount = filterDevicesBySecurityRecommendation( devicesArray, [DeviceSecurityVariation.Inactive], diff --git a/src/components/views/settings/tabs/user/SessionManagerTab.tsx b/src/components/views/settings/tabs/user/SessionManagerTab.tsx index 900d18674b5..99b63fa3514 100644 --- a/src/components/views/settings/tabs/user/SessionManagerTab.tsx +++ b/src/components/views/settings/tabs/user/SessionManagerTab.tsx @@ -57,7 +57,11 @@ const SessionManagerTab: React.FC = () => { }, [scrollIntoViewTimeoutRef]); return - + ', () => { const defaultProps = { devices: {}, goToFilteredList: jest.fn(), + currentDeviceId: 'abc123', }; const getComponent = (props = {}) => (); @@ -53,6 +54,16 @@ describe('', () => { expect(container).toMatchSnapshot(); }); + it('does not render unverified devices section when only the current device is unverified', () => { + const devices = { + [unverifiedNoMetadata.device_id]: unverifiedNoMetadata, + [verifiedNoMetadata.device_id]: verifiedNoMetadata, + }; + const { container } = render(getComponent({ devices, currentDeviceId: unverifiedNoMetadata.device_id })); + // nothing to render + expect(container.firstChild).toBeFalsy(); + }); + it('renders inactive devices section when user has inactive devices', () => { const devices = { [verifiedNoMetadata.device_id]: verifiedNoMetadata,