PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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

Browse source 
* add hide/show tooltip to dm details toggle

* use named export, update tests
This commit is contained in:
Kerry 2022-11-21 08:24:56 +13:00 committed by GitHub
parent acdcda78f0
commit caac059479
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 29 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
cypress/e2e/settings/device-management.spec.ts
View file

@ -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');

2
src/components/views/settings/devices/CurrentDeviceSection.tsx
View file

@ -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';

16
src/components/views/settings/devices/DeviceExpandDetailsButton.tsx
View file

@ -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<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,
@ -37,7 +39,5 @@ const DeviceExpandDetailsButton: React.FC<Props> = ({ isExpanded, onClick, ...re
onClick={onClick}
>
<CaretIcon className='mx_DeviceExpandDetailsButton_icon' />
</AccessibleButton>;
</AccessibleTooltipButton>;
};
export default DeviceExpandDetailsButton;

2
src/components/views/settings/devices/FilteredDeviceList.tsx
View file

@ -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,

3
src/i18n/strings/en_EN.json
View file

@ -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.",

4
test/components/views/settings/devices/DeviceExpandDetailsButton-test.tsx
View file

@ -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 = {

2
test/components/views/settings/devices/FilteredDeviceList-test.tsx
View file

@ -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);
});

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

@ -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"

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

@ -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"

7
test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
View file

@ -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();

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

@ -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"