Device manager - add tooltip to device details toggle (#9594)

* add hide/show tooltip to dm details toggle

* use named export, update tests

Author: Kerry

cypress/e2e/settings/device-management.spec.ts

@@ -87,7 +87,7 @@ describe("Device manager", () => {
         const sessionName = `Alice's device`;
         // open the first session
         cy.get('.mx_FilteredDeviceList_list .mx_FilteredDeviceList_listItem').first().within(() => {
-            cy.get('[aria-label="Toggle device details"]').click();
+            cy.get('[aria-label="Show details"]').click();
 
             cy.contains('Session details').should('exist');
 

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

@@ -22,7 +22,7 @@ import Spinner from '../../elements/Spinner';
 import SettingsSubsection from '../shared/SettingsSubsection';
 import { SettingsSubsectionHeading } from '../shared/SettingsSubsectionHeading';
 import DeviceDetails from './DeviceDetails';
-import DeviceExpandDetailsButton from './DeviceExpandDetailsButton';
+import { DeviceExpandDetailsButton } from './DeviceExpandDetailsButton';
 import DeviceTile from './DeviceTile';
 import { DeviceVerificationStatusCard } from './DeviceVerificationStatusCard';
 import { ExtendedDevice } from './types';

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

@@ -19,25 +19,25 @@ import React from 'react';
 
 import { Icon as CaretIcon } from '../../../../../res/img/feather-customised/dropdown-arrow.svg';
 import { _t } from '../../../../languageHandler';
-import AccessibleButton from '../../elements/AccessibleButton';
+import AccessibleTooltipButton from '../../elements/AccessibleTooltipButton';
 
-interface Props {
+interface Props extends React.ComponentProps<typeof AccessibleTooltipButton> {
     isExpanded: boolean;
     onClick: () => void;
 }
 
-const DeviceExpandDetailsButton: React.FC<Props> = ({ isExpanded, onClick, ...rest }) => {
-    return <AccessibleButton
+export const DeviceExpandDetailsButton: React.FC<Props> = ({ isExpanded, onClick, ...rest }) => {
+    const label = isExpanded ? _t('Hide details') : _t('Show details');
+    return <AccessibleTooltipButton
         {...rest}
-        aria-label={_t('Toggle device details')}
+        aria-label={label}
+        title={label}
         kind='icon'
         className={classNames('mx_DeviceExpandDetailsButton', {
             mx_DeviceExpandDetailsButton_expanded: isExpanded,
         })}
         onClick={onClick}
     >
         <CaretIcon className='mx_DeviceExpandDetailsButton_icon' />
-    </AccessibleButton>;
+    </AccessibleTooltipButton>;
 };
-
-export default DeviceExpandDetailsButton;

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

@@ -23,7 +23,7 @@ import { _t } from '../../../../languageHandler';
 import AccessibleButton from '../../elements/AccessibleButton';
 import { FilterDropdown, FilterDropdownOption } from '../../elements/FilterDropdown';
 import DeviceDetails from './DeviceDetails';
-import DeviceExpandDetailsButton from './DeviceExpandDetailsButton';
+import { DeviceExpandDetailsButton } from './DeviceExpandDetailsButton';
 import DeviceSecurityCard from './DeviceSecurityCard';
 import {
     filterDevicesBySecurityRecommendation,

src/i18n/strings/en_EN.json

@@ -1778,7 +1778,8 @@
     "Push notifications": "Push notifications",
     "Receive push notifications on this session.": "Receive push notifications on this session.",
     "Sign out of this session": "Sign out of this session",
-    "Toggle device details": "Toggle device details",
+    "Hide details": "Hide details",
+    "Show details": "Show details",
     "Verified sessions": "Verified sessions",
     "Verified sessions are anywhere you are using this account after entering your passphrase or confirming your identity with another verified session.": "Verified sessions are anywhere you are using this account after entering your passphrase or confirming your identity with another verified session.",
     "This means that you have all the keys needed to unlock your encrypted messages and confirm to other users that you trust this session.": "This means that you have all the keys needed to unlock your encrypted messages and confirm to other users that you trust this session.",

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

@@ -17,7 +17,9 @@ limitations under the License.
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
-import DeviceExpandDetailsButton from '../../../../../src/components/views/settings/devices/DeviceExpandDetailsButton';
+import {
+    DeviceExpandDetailsButton,
+} from '../../../../../src/components/views/settings/devices/DeviceExpandDetailsButton';
 
 describe('<DeviceExpandDetailsButton />', () => {
     const defaultProps = {

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

@@ -221,7 +221,7 @@ describe('<FilteredDeviceList />', () => {
 
             act(() => {
                 const tile = getByTestId(`device-tile-${hundredDaysOld.device_id}`);
-                const toggle = tile.querySelector('[aria-label="Toggle device details"]');
+                const toggle = tile.querySelector('[aria-label="Show details"]');
                 fireEvent.click(toggle as Element);
             });
 

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

@@ -237,7 +237,7 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
           class="mx_DeviceTile_actions"
         >
           <div
-            aria-label="Toggle device details"
+            aria-label="Show details"
             class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
             data-testid="current-session-toggle-details"
             role="button"
@@ -380,7 +380,7 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
           class="mx_DeviceTile_actions"
         >
           <div
-            aria-label="Toggle device details"
+            aria-label="Show details"
             class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
             data-testid="current-session-toggle-details"
             role="button"

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

@@ -4,7 +4,7 @@ exports[`<DeviceExpandDetailsButton /> renders when expanded 1`] = `
 {
   "container": <div>
     <div
-      aria-label="Toggle device details"
+      aria-label="Hide details"
       class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_DeviceExpandDetailsButton_expanded mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
       role="button"
       tabindex="0"
@@ -21,7 +21,7 @@ exports[`<DeviceExpandDetailsButton /> renders when not expanded 1`] = `
 {
   "container": <div>
     <div
-      aria-label="Toggle device details"
+      aria-label="Show details"
       class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
       role="button"
       tabindex="0"

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

@@ -108,10 +108,12 @@ describe('<SessionManagerTab />', () => {
     const toggleDeviceDetails = (
         getByTestId: ReturnType<typeof render>['getByTestId'],
         deviceId: ExtendedDevice['device_id'],
+        isOpen?: boolean,
     ): void => {
         // open device detail
         const tile = getByTestId(`device-tile-${deviceId}`);
-        const toggle = tile.querySelector('[aria-label="Toggle device details"]') as Element;
+        const label = isOpen ? 'Hide details' : 'Show details';
+        const toggle = tile.querySelector(`[aria-label="${label}"]`) as Element;
         fireEvent.click(toggle);
     };
 
@@ -449,7 +451,8 @@ describe('<SessionManagerTab />', () => {
             expect(getByTestId(`device-detail-${alicesOlderMobileDevice.device_id}`)).toBeTruthy();
             expect(getByTestId(`device-detail-${alicesMobileDevice.device_id}`)).toBeTruthy();
 
-            toggleDeviceDetails(getByTestId, alicesMobileDevice.device_id);
+            // toggle closed
+            toggleDeviceDetails(getByTestId, alicesMobileDevice.device_id, true);
 
             // alicesMobileDevice was toggled off
             expect(queryByTestId(`device-detail-${alicesMobileDevice.device_id}`)).toBeFalsy();

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

@@ -94,7 +94,7 @@ exports[`<SessionManagerTab /> current session section renders current session s
         class="mx_DeviceTile_actions"
       >
         <div
-          aria-label="Toggle device details"
+          aria-label="Show details"
           class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
           data-testid="current-session-toggle-details"
           role="button"
@@ -223,7 +223,7 @@ exports[`<SessionManagerTab /> current session section renders current session s
         class="mx_DeviceTile_actions"
       >
         <div
-          aria-label="Toggle device details"
+          aria-label="Show details"
           class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
           data-testid="current-session-toggle-details"
           role="button"
@@ -397,7 +397,7 @@ exports[`<SessionManagerTab /> sets device verification status correctly 1`] = `
     class="mx_DeviceTile_actions"
   >
     <div
-      aria-label="Toggle device details"
+      aria-label="Show details"
       class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
       data-testid="current-session-toggle-details"
       role="button"