From f4760233fed28c47d3e895a421140157254cd4ea 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 da4d12e35d9..ba88db48612 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 af6a9501431..0b06de46778 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 a0293fec64f..e79f80bf049 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 53f77c0d33b..824ec8d1ca4 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 62be5c8f788..15a2aff2fd9 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 3d790e43c2d..310397469b6 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 6f188cea236..e2f9c1bd5fd 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 6651a91b696..accfd108065 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 b875caf0d2d..a92f68c756f 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" >