Device manager - logout current session (PSG-743) (#9275)

* trigger verification of other devices

* add sign out of current device section in device details

* fix classname

* lint

* strict type fix

* fix test

* improve mocked VerifReq

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

@@ -35,6 +35,7 @@ describe('<CurrentDeviceSection />', () => {
     const defaultProps = {
         device: alicesVerifiedDevice,
         onVerifyCurrentDevice: jest.fn(),
+        onSignOutCurrentDevice: jest.fn(),
         isLoading: false,
     };
     const getComponent = (props = {}): React.ReactElement =>

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

@@ -50,7 +50,7 @@ HTMLCollection [
         Session details
       </p>
       <table
-        class="mxDeviceDetails_metadataTable"
+        class="mx_DeviceDetails_metadataTable"
       >
         <tbody>
           <tr>
@@ -78,7 +78,7 @@ HTMLCollection [
         </tbody>
       </table>
       <table
-        class="mxDeviceDetails_metadataTable"
+        class="mx_DeviceDetails_metadataTable"
       >
         <thead>
           <tr>
@@ -101,6 +101,18 @@ HTMLCollection [
         </tbody>
       </table>
     </section>
+    <section
+      class="mx_DeviceDetails_section"
+    >
+      <div
+        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_inline"
+        data-testid="device-detail-sign-out-cta"
+        role="button"
+        tabindex="0"
+      >
+        Sign out of this session
+      </div>
+    </section>
   </div>,
 ]
 `;

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

@@ -50,7 +50,7 @@ exports[`<DeviceDetails /> renders a verified device 1`] = `
         Session details
       </p>
       <table
-        class="mxDeviceDetails_metadataTable"
+        class="mx_DeviceDetails_metadataTable"
       >
         <tbody>
           <tr>
@@ -78,7 +78,7 @@ exports[`<DeviceDetails /> renders a verified device 1`] = `
         </tbody>
       </table>
       <table
-        class="mxDeviceDetails_metadataTable"
+        class="mx_DeviceDetails_metadataTable"
       >
         <thead>
           <tr>
@@ -155,7 +155,7 @@ exports[`<DeviceDetails /> renders device with metadata 1`] = `
         Session details
       </p>
       <table
-        class="mxDeviceDetails_metadataTable"
+        class="mx_DeviceDetails_metadataTable"
       >
         <tbody>
           <tr>
@@ -185,7 +185,7 @@ exports[`<DeviceDetails /> renders device with metadata 1`] = `
         </tbody>
       </table>
       <table
-        class="mxDeviceDetails_metadataTable"
+        class="mx_DeviceDetails_metadataTable"
       >
         <thead>
           <tr>
@@ -264,7 +264,7 @@ exports[`<DeviceDetails /> renders device without metadata 1`] = `
         Session details
       </p>
       <table
-        class="mxDeviceDetails_metadataTable"
+        class="mx_DeviceDetails_metadataTable"
       >
         <tbody>
           <tr>
@@ -292,7 +292,7 @@ exports[`<DeviceDetails /> renders device without metadata 1`] = `
         </tbody>
       </table>
       <table
-        class="mxDeviceDetails_metadataTable"
+        class="mx_DeviceDetails_metadataTable"
       >
         <thead>
           <tr>

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

@@ -30,6 +30,7 @@ import {
     mockClientMethodsUser,
 } from '../../../../../test-utils';
 import Modal from '../../../../../../src/Modal';
+import LogoutDialog from '../../../../../../src/components/views/dialogs/LogoutDialog';
 
 jest.useFakeTimers();
 
@@ -53,7 +54,7 @@ describe('<SessionManagerTab />', () => {
     const mockCrossSigningInfo = {
         checkDeviceTrust: jest.fn(),
     };
-    const mockVerificationRequest = { cancel: jest.fn() } as unknown as VerificationRequest;
+    const mockVerificationRequest = { cancel: jest.fn(), on: jest.fn() } as unknown as VerificationRequest;
     const mockClient = getMockClientWithEventEmitter({
         ...mockClientMethodsUser(aliceId),
         getStoredCrossSigningForUser: jest.fn().mockReturnValue(mockCrossSigningInfo),
@@ -374,4 +375,29 @@ describe('<SessionManagerTab />', () => {
             expect(mockClient.getDevices).toHaveBeenCalled();
         });
     });
+
+    describe('Sign out', () => {
+        it('Signs out of current device', async () => {
+            const modalSpy = jest.spyOn(Modal, 'createDialog');
+
+            mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice] });
+            const { getByTestId } = render(getComponent());
+
+            await act(async () => {
+                await flushPromisesWithFakeTimers();
+            });
+
+            // open device detail
+            const tile1 = getByTestId(`device-tile-${alicesDevice.device_id}`);
+            const toggle1 = tile1.querySelector('[aria-label="Toggle device details"]') as Element;
+            fireEvent.click(toggle1);
+
+            const signOutButton = getByTestId('device-detail-sign-out-cta');
+            expect(signOutButton).toMatchSnapshot();
+            fireEvent.click(signOutButton);
+
+            // logout dialog opened
+            expect(modalSpy).toHaveBeenCalledWith(LogoutDialog, {}, undefined, false, true);
+        });
+    });
 });

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

@@ -1,5 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<SessionManagerTab /> Sign out Signs out of current device 1`] = `
+<div
+  class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_inline"
+  data-testid="device-detail-sign-out-cta"
+  role="button"
+  tabindex="0"
+>
+  Sign out of this session
+</div>
+`;
+
 exports[`<SessionManagerTab /> goes to filtered list from security recommendations 1`] = `
 <div
   class="mx_FilteredDeviceList_header"