From caac0594792b9aec63e22d5ee8309e34cb483a01 Mon Sep 17 00:00:00 2001 From: Kerry Date: Mon, 21 Nov 2022 08:24:56 +1300 Subject: [PATCH] Device manager - add tooltip to device details toggle (#9594) * add hide/show tooltip to dm details toggle * use named export, update tests --- cypress/e2e/settings/device-management.spec.ts | 2 +- .../settings/devices/CurrentDeviceSection.tsx | 2 +- .../devices/DeviceExpandDetailsButton.tsx | 16 ++++++++-------- .../settings/devices/FilteredDeviceList.tsx | 2 +- src/i18n/strings/en_EN.json | 3 ++- .../devices/DeviceExpandDetailsButton-test.tsx | 4 +++- .../settings/devices/FilteredDeviceList-test.tsx | 2 +- .../CurrentDeviceSection-test.tsx.snap | 4 ++-- .../DeviceExpandDetailsButton-test.tsx.snap | 4 ++-- .../tabs/user/SessionManagerTab-test.tsx | 7 +++++-- .../SessionManagerTab-test.tsx.snap | 6 +++--- 11 files changed, 29 insertions(+), 23 deletions(-) diff --git a/cypress/e2e/settings/device-management.spec.ts b/cypress/e2e/settings/device-management.spec.ts index da4d12e35d..ba88db4861 100644 --- a/cypress/e2e/settings/device-management.spec.ts +++ b/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'); diff --git a/src/components/views/settings/devices/CurrentDeviceSection.tsx b/src/components/views/settings/devices/CurrentDeviceSection.tsx index af6a950143..0b06de4677 100644 --- a/src/components/views/settings/devices/CurrentDeviceSection.tsx +++ b/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'; diff --git a/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx b/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx index a0293fec64..e79f80bf04 100644 --- a/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx +++ b/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx @@ -19,17 +19,19 @@ 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 { isExpanded: boolean; onClick: () => void; } -const DeviceExpandDetailsButton: React.FC = ({ isExpanded, onClick, ...rest }) => { - return = ({ isExpanded, onClick, ...rest }) => { + const label = isExpanded ? _t('Hide details') : _t('Show details'); + return = ({ isExpanded, onClick, ...re onClick={onClick} > - ; + ; }; - -export default DeviceExpandDetailsButton; diff --git a/src/components/views/settings/devices/FilteredDeviceList.tsx b/src/components/views/settings/devices/FilteredDeviceList.tsx index 53f77c0d33..824ec8d1ca 100644 --- a/src/components/views/settings/devices/FilteredDeviceList.tsx +++ b/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, diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 62be5c8f78..15a2aff2fd 100644 --- a/src/i18n/strings/en_EN.json +++ b/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.", diff --git a/test/components/views/settings/devices/DeviceExpandDetailsButton-test.tsx b/test/components/views/settings/devices/DeviceExpandDetailsButton-test.tsx index 3d790e43c2..310397469b 100644 --- a/test/components/views/settings/devices/DeviceExpandDetailsButton-test.tsx +++ b/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('', () => { const defaultProps = { diff --git a/test/components/views/settings/devices/FilteredDeviceList-test.tsx b/test/components/views/settings/devices/FilteredDeviceList-test.tsx index 6f188cea23..e2f9c1bd5f 100644 --- a/test/components/views/settings/devices/FilteredDeviceList-test.tsx +++ b/test/components/views/settings/devices/FilteredDeviceList-test.tsx @@ -221,7 +221,7 @@ describe('', () => { 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); }); diff --git a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap index 6651a91b69..accfd10806 100644 --- a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap +++ b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap @@ -237,7 +237,7 @@ exports[` renders device and correct security card when class="mx_DeviceTile_actions" >
renders device and correct security card when class="mx_DeviceTile_actions" >
renders when expanded 1`] = ` { "container":
renders when not expanded 1`] = ` { "container":
', () => { const toggleDeviceDetails = ( getByTestId: ReturnType['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('', () => { 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(); diff --git a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap index b875caf0d2..a92f68c756 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap @@ -94,7 +94,7 @@ exports[` current session section renders current session s class="mx_DeviceTile_actions" >
current session section renders current session s class="mx_DeviceTile_actions" >
sets device verification status correctly 1`] = ` class="mx_DeviceTile_actions" >