Device manager - logout of other session (PSG-744) (#9280)

* add sign out of current device section in device details

* lint

* add sign out cta for other sessions

* test other device sign out

* add pending sign out loader

* tidy

* fix strict error

* use gap instead of nbsp

* use more specific assertions in tests, tweak formatting

* tweak test

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

@@ -19,16 +19,16 @@ import React from 'react';
 import { formatDate } from '../../../../DateUtils';
 import { _t } from '../../../../languageHandler';
 import AccessibleButton from '../../elements/AccessibleButton';
+import Spinner from '../../elements/Spinner';
 import Heading from '../../typography/Heading';
 import { DeviceVerificationStatusCard } from './DeviceVerificationStatusCard';
 import { DeviceWithVerification } from './types';
 
 interface Props {
     device: DeviceWithVerification;
+    isSigningOut: boolean;
     onVerifyDevice?: () => void;
-    // @TODO(kerry) optional while signout only implemented
-    // for current device (PSG-744)
-    onSignOutDevice?: () => void;
+    onSignOutDevice: () => void;
 }
 
 interface MetadataTable {
@@ -38,6 +38,7 @@ interface MetadataTable {
 
 const DeviceDetails: React.FC<Props> = ({
     device,
+    isSigningOut,
     onVerifyDevice,
     onSignOutDevice,
 }) => {
@@ -87,15 +88,19 @@ const DeviceDetails: React.FC<Props> = ({
             </table>,
             ) }
         </section>
-        { !!onSignOutDevice && <section className='mx_DeviceDetails_section'>
+        <section className='mx_DeviceDetails_section'>
             <AccessibleButton
                 onClick={onSignOutDevice}
                 kind='danger_inline'
+                disabled={isSigningOut}
                 data-testid='device-detail-sign-out-cta'
             >
-                { _t('Sign out of this session') }
+                <span className='mx_DeviceDetails_signOutButtonContent'>
+                    { _t('Sign out of this session') }
+                    { isSigningOut && <Spinner w={16} h={16} /> }
+                </span>
             </AccessibleButton>
-        </section> }
+        </section>
     </div>;
 };