upcoming: [M3-7527] - Improve Login History restricted and child user experience #10125

mjac0bs · 2024-01-30T17:42:54Z

Description 📝

Currently, all restricted users receive an unauthorized message (see Before screenshot) after the table data fails to populate when they access the Login History tab. In the case of a child user (user_type: child), who is unrestricted by the API (account_access: read_write), but should be restricted in the UI, we must manually restrict the child user from viewing this page.

This PR updates the child view to not show login history information and display a warning notice to convey unauthorized access. For consistency, we will also make these changes for restricted users.

Note

The API has recently changed from user_type: null to user_type: "default". This is not reflected in this PR at this time because I didn't want to duplicate the work we'll need to make these changes on the front end, which will be done in another ticket.

Changes 🔄

Provides an informational warning notice to the child user and users with restricted account_access and does not display the login history table.
Adds an AccountLogin factory and account/logins endpoint to the MSW so we can now mock that page.
Adds integration test spec for the Login History page (account/account-login-history.spec.ts).
A couple of aria-label accessibility improvements (account logins table, status icon)

Preview 📷

Before	After

Child view
Regular restricted user view
Added mocks

How to test 🧪

Prerequisites

(How to setup test environment)

Turn on the Parent/Child feature flag and turn on the mock data.

Reproduction steps

(How to reproduce the issue, if applicable)

Have a restricted user that has billing access (the account_access grant) set to either Read-Only or None.
Go to http://localhost:3000/account/login-history and observe the table loading and then eventually displaying an "Unauthorized" error.

Verification steps

(How to verify changes)

Confirm that child "restricted" users see the warning notice pictured above:
- Change the MSW user_type to "child" and make sure restricted isfalse in */profile.
- Go to http://localhost:3000/account/login-history and observe the notice.
- Confirm that notice for the child user is feature flagged by toggling it off.
Confirm that regular restricted users see the warning notice pictured above:
- Change the MSW user_type to null and restricted to true in */profile.
- Go to http://localhost:3000/account/login-history and observe the notice.
Confirm no regressions to the login history page for a non-restricted user.
Confirm integration test passes:

yarn cy:run -s "cypress/e2e/core/account/account-login-history.spec.ts"

As an Author I have considered 🤔

Check all that apply

mjac0bs · 2024-02-06T16:06:11Z

packages/manager/cypress/e2e/core/account/account-login-history.spec.ts

We didn't have any test coverage for the Login History page, so I added this spec and included some test cases for the changes in this PR.

mjac0bs · 2024-02-06T16:07:49Z

packages/manager/src/features/Account/AccountLoginsTableRow.tsx

@@ -41,7 +41,11 @@ const AccountLoginsTableRow = (props: AccountLogin) => {
        </TableCell>
      </Hidden>
      <TableCell statusCell>
-        <StatusIcon pulse={false} status={accessIconMap[status] ?? 'other'} />
+        <StatusIcon
+          ariaLabel={`Status is ${status}`}


Added an ariaLabel here to make this more accessible and to verify the icon is present in the integration test.

mjac0bs · 2024-02-06T16:11:01Z

packages/manager/src/features/Account/AccountLogins.tsx

+  const isAccountAccessRestricted =
+    isRestrictedChildUser ||
+    (profile?.restricted && grants?.global.account_access !== 'read_write');


We'll display the warning notice for child users and restricted users without account_access.

I'm also getting the unauthorized message for a restricted user with read/write permissions. I'm not sure if it's something particular about my account.

Thanks @hkhalil-akamai - good catch. After looking into this, I realized that in production, the API will return a 403 Unauthorized for GET account/logins* for any restricted user that tries to access Login History - not just those with restricted account_access. I made an update in f2984f0 to account for that. cc @jaalah-akamai

Before / Prod After

github-actions · 2024-02-06T20:34:22Z

Coverage Report: ✅
Base Coverage: 81.09%
Current Coverage: 81.11%

hkhalil-akamai · 2024-02-07T21:22:15Z

packages/manager/cypress/e2e/core/account/account-login-history.spec.ts

Thanks for adding this test!

hkhalil-akamai · 2024-02-07T21:30:27Z

packages/manager/src/features/Account/AccountLogins.tsx

+  const isAccountAccessRestricted =
+    isRestrictedChildUser ||
+    (profile?.restricted && grants?.global.account_access !== 'read_write');


I'm also getting the unauthorized message for a restricted user with read/write permissions. I'm not sure if it's something particular about my account.

hkhalil-akamai · 2024-02-07T21:36:20Z

packages/manager/src/mocks/serverHandlers.ts

Thanks for adding mocks!

jaalah-akamai

Apart from Hussain's comment, everything else is working as intended.

… user)

hkhalil-akamai

Thanks for addressing feedback!

mjac0bs added Work in Progress Parent / Child Account labels Jan 30, 2024

mjac0bs self-assigned this Jan 30, 2024

mjac0bs changed the title ~~upcoming: [M3 7527] - Child view: Login History~~ upcoming: [M3 7527] - Improve Login History restricted and child user experience Jan 30, 2024

mjac0bs changed the title ~~upcoming: [M3 7527] - Improve Login History restricted and child user experience~~ upcoming: [M3-7527] - Improve Login History restricted and child user experience Jan 30, 2024

mjac0bs added 4 commits February 5, 2024 20:52

Show warning and hide table for restricted users

a5807e1

Factory, mock endpoint, and WIP integration test for Login History

7780673

Finish tests; add aria labels to table and status icon

a66b7c9

Add changesets

c62cb00

mjac0bs force-pushed the M3-7527-child-view-account-login-history branch from 4b03619 to c62cb00 Compare February 6, 2024 15:19

Fix typo in factory

081a839

mjac0bs removed the Work in Progress label Feb 6, 2024

mjac0bs marked this pull request as ready for review February 6, 2024 15:48

mjac0bs requested review from a team as code owners February 6, 2024 15:48

mjac0bs requested review from cliu-akamai, cpathipa, hkhalil-akamai and jaalah-akamai and removed request for a team February 6, 2024 15:48

mjac0bs commented Feb 6, 2024

View reviewed changes

mjac0bs added the Ready for Review label Feb 6, 2024

Merge branch 'develop' into M3-7527-child-view-account-login-history

f594e3b

hkhalil-akamai reviewed Feb 7, 2024

View reviewed changes

jaalah-akamai approved these changes Feb 8, 2024

View reviewed changes

Address feedback: fix restricted access to match prod (any restricted…

f2984f0

… user)

mjac0bs added the Add'tl Approval Needed Waiting on another approval! label Feb 8, 2024

hkhalil-akamai approved these changes Feb 8, 2024

View reviewed changes

cpathipa approved these changes Feb 9, 2024

View reviewed changes

cpathipa added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Feb 9, 2024

mjac0bs removed the Ready for Review label Feb 9, 2024

mjac0bs merged commit a53f63b into linode:develop Feb 9, 2024
18 checks passed

cpathipa mentioned this pull request Feb 12, 2024

Release v1.112.0 - release → staging #10174

Closed

This was referenced Feb 20, 2024

Release v1.113.0 - release → staging #10206

Merged

Release v1.113.0 – staging → master #10209

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

upcoming: [M3-7527] - Improve Login History restricted and child user experience #10125

upcoming: [M3-7527] - Improve Login History restricted and child user experience #10125

mjac0bs commented Jan 30, 2024 •

edited

mjac0bs Feb 6, 2024

mjac0bs Feb 6, 2024

mjac0bs Feb 6, 2024

hkhalil-akamai Feb 7, 2024

mjac0bs Feb 8, 2024

github-actions bot commented Feb 6, 2024 •

edited

hkhalil-akamai Feb 7, 2024

hkhalil-akamai Feb 7, 2024

hkhalil-akamai Feb 7, 2024

jaalah-akamai left a comment

hkhalil-akamai left a comment

upcoming: [M3-7527] - Improve Login History restricted and child user experience #10125

upcoming: [M3-7527] - Improve Login History restricted and child user experience #10125

Conversation

mjac0bs commented Jan 30, 2024 • edited

Description 📝

Changes 🔄

Preview 📷

How to test 🧪

Prerequisites

Reproduction steps

Verification steps

As an Author I have considered 🤔

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Feb 6, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jaalah-akamai left a comment

Choose a reason for hiding this comment

hkhalil-akamai left a comment

Choose a reason for hiding this comment

mjac0bs commented Jan 30, 2024 •

edited

github-actions bot commented Feb 6, 2024 •

edited