Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Device manager - add tooltip to device details toggle (#9594)
Browse files Browse the repository at this point in the history
* add hide/show tooltip to dm details toggle

* use named export, update tests
  • Loading branch information
Kerry authored Nov 20, 2022
1 parent acdcda7 commit caac059
Show file tree
Hide file tree
Showing 11 changed files with 29 additions and 23 deletions.
2 changes: 1 addition & 1 deletion cypress/e2e/settings/device-management.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
3 changes: 2 additions & 1 deletion src/i18n/strings/en_EN.json
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};

Expand Down Expand Up @@ -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();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit caac059

Please sign in to comment.