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

src/components/views/elements/AccessibleButton.tsx

@@ -29,6 +29,7 @@ type AccessibleButtonKind = | 'primary'
     | 'danger'
     | 'danger_outline'
     | 'danger_sm'
+    | 'danger_inline'
     | 'link'
     | 'link_inline'
     | 'link_sm'

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

@@ -29,10 +29,14 @@ interface Props {
     device?: DeviceWithVerification;
     isLoading: boolean;
     onVerifyCurrentDevice: () => void;
+    onSignOutCurrentDevice: () => void;
 }
 
 const CurrentDeviceSection: React.FC<Props> = ({
-    device, isLoading, onVerifyCurrentDevice,
+    device,
+    isLoading,
+    onVerifyCurrentDevice,
+    onSignOutCurrentDevice,
 }) => {
     const [isExpanded, setIsExpanded] = useState(false);
 
@@ -51,7 +55,12 @@ const CurrentDeviceSection: React.FC<Props> = ({
                     onClick={() => setIsExpanded(!isExpanded)}
                 />
             </DeviceTile>
-            { isExpanded && <DeviceDetails device={device} /> }
+            { isExpanded &&
+                <DeviceDetails
+                    device={device}
+                    onSignOutDevice={onSignOutCurrentDevice}
+                />
+            }
             <br />
             <DeviceVerificationStatusCard device={device} onVerifyDevice={onVerifyCurrentDevice} />
         </>

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

@@ -18,6 +18,7 @@ import React from 'react';
 
 import { formatDate } from '../../../../DateUtils';
 import { _t } from '../../../../languageHandler';
+import AccessibleButton from '../../elements/AccessibleButton';
 import Heading from '../../typography/Heading';
 import { DeviceVerificationStatusCard } from './DeviceVerificationStatusCard';
 import { DeviceWithVerification } from './types';
@@ -25,6 +26,9 @@ import { DeviceWithVerification } from './types';
 interface Props {
     device: DeviceWithVerification;
     onVerifyDevice?: () => void;
+    // @TODO(kerry) optional while signout only implemented
+    // for current device (PSG-744)
+    onSignOutDevice?: () => void;
 }
 
 interface MetadataTable {
@@ -35,6 +39,7 @@ interface MetadataTable {
 const DeviceDetails: React.FC<Props> = ({
     device,
     onVerifyDevice,
+    onSignOutDevice,
 }) => {
     const metadata: MetadataTable[] = [
         {
@@ -64,7 +69,7 @@ const DeviceDetails: React.FC<Props> = ({
         <section className='mx_DeviceDetails_section'>
             <p className='mx_DeviceDetails_sectionHeading'>{ _t('Session details') }</p>
             { metadata.map(({ heading, values }, index) => <table
-                className='mxDeviceDetails_metadataTable'
+                className='mx_DeviceDetails_metadataTable'
                 key={index}
             >
                 { heading &&
@@ -82,6 +87,15 @@ const DeviceDetails: React.FC<Props> = ({
             </table>,
             ) }
         </section>
+        { !!onSignOutDevice && <section className='mx_DeviceDetails_section'>
+            <AccessibleButton
+                onClick={onSignOutDevice}
+                kind='danger_inline'
+                data-testid='device-detail-sign-out-cta'
+            >
+                { _t('Sign out of this session') }
+            </AccessibleButton>
+        </section> }
     </div>;
 };
 

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

@@ -19,7 +19,7 @@ import { IMyDevice, MatrixClient } from "matrix-js-sdk/src/matrix";
 import { CrossSigningInfo } from "matrix-js-sdk/src/crypto/CrossSigning";
 import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import { User } from "matrix-js-sdk/src/models/user";
-import { MatrixError } from "matrix-js-sdk/src/matrix";
+import { MatrixError } from "matrix-js-sdk/src/http-api";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import MatrixClientContext from "../../../../contexts/MatrixClientContext";

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

@@ -27,6 +27,7 @@ import SettingsTab from '../SettingsTab';
 import Modal from '../../../../../Modal';
 import SetupEncryptionDialog from '../../../dialogs/security/SetupEncryptionDialog';
 import VerificationRequestDialog from '../../../dialogs/VerificationRequestDialog';
+import LogoutDialog from '../../../dialogs/LogoutDialog';
 
 const SessionManagerTab: React.FC = () => {
     const {
@@ -90,6 +91,15 @@ const SessionManagerTab: React.FC = () => {
         });
     }, [requestDeviceVerification, refreshDevices, currentUserMember]);
 
+    const onSignOutCurrentDevice = () => {
+        if (!currentDevice) {
+            return;
+        }
+        Modal.createDialog(LogoutDialog,
+            /* props= */{}, /* className= */undefined,
+            /* isPriority= */false, /* isStatic= */true);
+    };
+
     useEffect(() => () => {
         clearTimeout(scrollIntoViewTimeoutRef.current);
     }, [scrollIntoViewTimeoutRef]);
@@ -104,6 +114,7 @@ const SessionManagerTab: React.FC = () => {
             device={currentDevice}
             isLoading={isLoading}
             onVerifyCurrentDevice={onVerifyCurrentDevice}
+            onSignOutCurrentDevice={onSignOutCurrentDevice}
         />
         {
             shouldShowOtherSessions &&

src/i18n/strings/en_EN.json

@@ -1712,6 +1712,7 @@
     "Device": "Device",
     "IP address": "IP address",
     "Session details": "Session details",
+    "Sign out of this session": "Sign out of this session",
     "Toggle device details": "Toggle device details",
     "Inactive for %(inactiveAgeDays)s+ days": "Inactive for %(inactiveAgeDays)s+ days",
     "Verified": "Verified",