imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Device manager - design tweaks (#9768)

Browse source 
* hover style on dropdown

* hover states

* device details spacing

* device details h3 -> h4

* missing fullstops

* update snapshots for new copy

* device details expand icon bigger

* hide current session security card when details expanded

* filter dropdown padding and hover state

* update cypress selector for device detail heading
This commit is contained in:
Kerry 2022-12-20 14:17:05 +13:00 • committed by GitHub
parent 2152f2ab8b
commit 0485b74acb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 76 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -13,11 +13,11 @@ HTMLCollection [
class="mx_DeviceDetailHeading"
data-testid="device-detail-heading"
>
<h3
class="mx_Heading_h3"
<h4
class="mx_Heading_h4"
>
alices_device
</h3>
</h4>
<div
class="mx_AccessibleButton mx_DeviceDetailHeading_renameCta mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
data-testid="device-heading-rename-cta"

6
test/components/views/settings/devices/__snapshots__/DeviceDetailHeading-test.tsx.snap
View file

@ -78,11 +78,11 @@ exports[`<DeviceDetailHeading /> renders device name 1`] = `
class="mx_DeviceDetailHeading"
data-testid="device-detail-heading"
>
<h3
class="mx_Heading_h3"
<h4
class="mx_Heading_h4"
>
My device
</h3>
</h4>
<div
class="mx_AccessibleButton mx_DeviceDetailHeading_renameCta mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
data-testid="device-heading-rename-cta"

18
test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
View file

@ -13,11 +13,11 @@ exports[`<DeviceDetails /> renders a verified device 1`] = `
class="mx_DeviceDetailHeading"
data-testid="device-detail-heading"
>
<h3
class="mx_Heading_h3"
<h4
class="mx_Heading_h4"
>
my-device
</h3>
</h4>
<div
class="mx_AccessibleButton mx_DeviceDetailHeading_renameCta mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
data-testid="device-heading-rename-cta"
@ -122,11 +122,11 @@ exports[`<DeviceDetails /> renders device with metadata 1`] = `
class="mx_DeviceDetailHeading"
data-testid="device-detail-heading"
>
<h3
class="mx_Heading_h3"
<h4
class="mx_Heading_h4"
>
My Device
</h3>
</h4>
<div
class="mx_AccessibleButton mx_DeviceDetailHeading_renameCta mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
data-testid="device-heading-rename-cta"
@ -331,11 +331,11 @@ exports[`<DeviceDetails /> renders device without metadata 1`] = `
class="mx_DeviceDetailHeading"
data-testid="device-detail-heading"
>
<h3
class="mx_Heading_h3"
<h4
class="mx_Heading_h4"
>
my-device
</h3>
</h4>
<div
class="mx_AccessibleButton mx_DeviceDetailHeading_renameCta mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
data-testid="device-heading-rename-cta"

12
test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap
View file

@ -18,7 +18,7 @@ exports[`<SecurityRecommendations /> renders both cards when user has both unver
<div
class="mx_SettingsSubsection_description"
>
Improve your account security by following these recommendations
Improve your account security by following these recommendations.
</div>
<div
class="mx_SettingsSubsection_content"
@ -93,7 +93,7 @@ exports[`<SecurityRecommendations /> renders both cards when user has both unver
<p
class="mx_DeviceSecurityCard_description"
>
Consider signing out from old sessions (90 days or older) you don't use anymore
Consider signing out from old sessions (90 days or older) you don't use anymore.
<div
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
@ -139,7 +139,7 @@ exports[`<SecurityRecommendations /> renders inactive devices section when user
<div
class="mx_SettingsSubsection_description"
>
Improve your account security by following these recommendations
Improve your account security by following these recommendations.
</div>
<div
class="mx_SettingsSubsection_content"
@ -214,7 +214,7 @@ exports[`<SecurityRecommendations /> renders inactive devices section when user
<p
class="mx_DeviceSecurityCard_description"
>
Consider signing out from old sessions (90 days or older) you don't use anymore
Consider signing out from old sessions (90 days or older) you don't use anymore.
<div
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
@ -260,7 +260,7 @@ exports[`<SecurityRecommendations /> renders unverified devices section when use
<div
class="mx_SettingsSubsection_description"
>
Improve your account security by following these recommendations
Improve your account security by following these recommendations.
</div>
<div
class="mx_SettingsSubsection_content"
@ -335,7 +335,7 @@ exports[`<SecurityRecommendations /> renders unverified devices section when use
<p
class="mx_DeviceSecurityCard_description"
>
Consider signing out from old sessions (90 days or older) you don't use anymore
Consider signing out from old sessions (90 days or older) you don't use anymore.
<div
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"

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

@ -420,6 +420,21 @@ describe("<SessionManagerTab />", () => {
expect(getByTestId("current-session-section")).toMatchSnapshot();
});
it("expands current session details", async () => {
mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] });
const { getByTestId } = render(getComponent());
await act(async () => {
await flushPromises();
});
fireEvent.click(getByTestId("current-session-toggle-details"));
expect(getByTestId(`device-detail-${alicesDevice.device_id}`)).toBeTruthy();
// only one security card rendered
expect(getByTestId("current-session-section").querySelectorAll(".mx_DeviceSecurityCard").length).toEqual(1);
});
});
describe("device detail expansion", () => {