Device manager - hide unverified security recommendation when only current session is unverified (PSG-639)

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

@@ -29,19 +29,26 @@ import {
 
 interface Props {
     devices: DevicesDictionary;
+    currentDeviceId: DeviceWithVerification['device_id'];
     goToFilteredList: (filter: DeviceSecurityVariation) => void;
 }
 
 const SecurityRecommendations: React.FC<Props> = ({
     devices,
+    currentDeviceId,
     goToFilteredList,
 }) => {
     const devicesArray = Object.values<DeviceWithVerification>(devices);
 
     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],

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

@@ -62,7 +62,11 @@ const SessionManagerTab: React.FC = () => {
     }, [scrollIntoViewTimeoutRef]);
 
     return <SettingsTab heading={_t('Sessions')}>
-        <SecurityRecommendations devices={devices} goToFilteredList={onGoToFilteredList} />
+        <SecurityRecommendations
+            devices={devices}
+            goToFilteredList={onGoToFilteredList}
+            currentDeviceId={currentDeviceId}
+        />
         <CurrentDeviceSection
             device={currentDevice}
             isLoading={isLoading}

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

@@ -34,6 +34,7 @@ describe('<SecurityRecommendations />', () => {
     const defaultProps = {
         devices: {},
         goToFilteredList: jest.fn(),
+        currentDeviceId: 'abc123',
     };
     const getComponent = (props = {}) =>
         (<SecurityRecommendations {...defaultProps} {...props} />);
@@ -53,6 +54,16 @@ describe('<SecurityRecommendations />', () => {
         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,