upcoming: [M3-7460] - Child View: Users & Grants page #10076

mjac0bs · 2024-01-18T15:20:22Z

Description 📝

This PR implements the child user view of the Users & Grants page with a new table to separate out Business Partners (the proxy users by which Parent users log into their child accounts) from other users on the child account. Proxy users do not have viewable profiles or last logins, nor can they be deleted. Child users also cannot delete their own accounts.

Adjustments to the Users & Grants page, User Permissions page, and Settings page have been made to account for this.

Changes 🔄

Create a "Business Partner Settings" table with three columns: Username, E-mail address, and Account access.
Implement a "Manage Access" CTA button within the table.
Ensure the inability to delete the proxy account.
Ensure the absence of a "Profile" tab for the proxy user.
Restrict both Proxy and Child accounts from deleting the Child Account.
Updates unit test coverage for UserRow and CloseAccountSettings.
Adds some of the integration test coverage outlined in M3-7500.

Additionally:

Updates the notice above the Close Account button for accounts with children to a tooltip
Fixes a misleadingly passing test in Button.test.tsx.

Preview 📷

Description	Image
User & Grants as viewed by a child user OR unrestricted proxy user
Proxy user permissions pages don't have tabs because they don't have a User Profile page
Child users cannot close their own accounts
Parent users cannot close their account with existing child accounts, Proxy users should also see this message since they're the "business partners"

How to test 🧪

Prerequisites

(How to setup test environment)

Check out this PR and yarn dev.
Make sure the Parent/Child feature flag and mocks are enabled.

Verification steps

(How to verify changes)

Go to http://localhost:3000/account/users and verify the proxy user (starting with ParentCompany) displays in a table of proxy users (known to the user as "business partners") above the table of other users on the child account.
Verify only the Username, Email, and Account Access fields display for a proxy user and there are no User Profile or Delete buttons.
Verify the different tables are labeled.
Verify clicking the Manage Access button for a proxy user navigates to the user's User Permissions page.
Go to http://localhost:3000/account/settings and verify the Close Account button is disabled with a tooltip explanation.
Go to serverHandlers.ts and change the active profile user_type to 'proxy'. Verify the Close Account button is disabled with a different tooltip explanation - same tooltip as is visible for parent accounts.
Confirm no regressions to the Users & Grants page and User Permissions pages, like no changes are visible when the feature flag is toggled off.
Confirm tests pass:

yarn test CloseAccountSetting UserRow Button

yarn cy:run -s "cypress/e2e/core/account/user-permissions.spec.ts"

As an Author I have considered 🤔

Check all that apply

…view

packages/manager/src/mocks/serverHandlers.ts

mjac0bs · 2024-01-18T22:46:03Z

packages/manager/src/features/Users/UsersLanding.tsx

+      <Box>
+        {showProxyUserTable && (
+          <Typography
+            sx={(theme) => ({
+              marginTop: theme.spacing(3),
+              [theme.breakpoints.down('md')]: {
+                marginLeft: theme.spacing(1),
+              },
+            })}
+            variant="h3"
+          >
+            User settings
+          </Typography>
+        )}
+        <Box display="flex" justifyContent="flex-end" sx={{ marginBottom: 1 }}>
+          <AddNewLink
+            disabledReason={
+              isRestrictedUser
+                ? 'You cannot create other users as a restricted user.'
+                : undefined
+            }
+            disabled={isRestrictedUser}
+            label="Add a User"
+            onClick={() => setIsCreateDrawerOpen(true)}
+          />
+        </Box>


When viewing the Users & Grants page as a child user, table headers will label each table and the Add User button will be moved from the top of the page to above the User settings table to avoid implying that child users can create new proxy users. (Child users can create regular users.)

packages/manager/src/features/Users/UsersLanding.tsx

packages/manager/src/features/Users/UserDetail.tsx

mjac0bs · 2024-01-19T18:34:53Z

packages/manager/src/components/Button/Button.test.tsx

+      expect(screen.getByRole('tooltip')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('Test tooltip')).toBeVisible();


We needed to wait for the tooltip to display after mousing over the button. This test was misleadingly passing because the button's name is 'Test', not because the tooltip was being displayed.

jaalah-akamai

✅ Verified you cannot close accounts and tooltip text changes accordingly
✅ Verified profile does not display for proxy user
✅ Verified Account Access column for child users

jaalah-akamai · 2024-01-19T21:06:04Z

Should we align the "User Settings" title with the "Add A User" button on the "Users & Grants" page?

mjac0bs · 2024-01-19T21:08:34Z

Should we align the "User Settings" title with the "Add A User" button on the "Users & Grants" page?

@jaalah-akamai Yeah, that's a good thought. I was following the mocks, which have it below, but I bet it'd look better aligned. 👀

jaalah-akamai · 2024-01-19T21:12:11Z

This PR looks good, I'll approve once you make the /profile updates now that #10080 is merged 🚀 🎉

github-actions · 2024-01-20T00:15:25Z

Coverage Report: ✅
Base Coverage: 81.18%
Current Coverage: 81.18%

mjac0bs · 2024-01-20T00:18:35Z

Should we align the "User Settings" title with the "Add A User" button on the "Users & Grants" page?

@jaalah-akamai Yeah, that's a good thought. I was following the mocks, which have it below, but I bet it'd look better aligned. 👀

@jaalah-akamai Done in 82c7284.

Switched over to /profile for getting the user_type and updated unit tests accordingly.

I also ended up rewriting some of an e2e test for coverage of this stuff while I was there anyway to fix a failure caused by the addition of the "Manage Access" button in this PR.

jaalah-akamai

✅

abailly-akamai

UI looks great and implementation matches the description!

I left some questions/comments for code improvement

packages/manager/cypress/e2e/core/account/user-permissions.spec.ts

packages/manager/src/features/Account/CloseAccountSetting.test.tsx

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

packages/manager/src/features/Users/UserDetail.tsx

packages/manager/src/features/Users/UsersLanding.tsx

dwiley-akamai

Proxy user displays in a table of proxy users (known to the user as "business partners") above the table of other users on the child account ✅
Only the Username, Email, and Account Access fields display for a proxy user and there are no User Profile or Delete buttons ✅
The different tables are labeled ✅
Clicking the Manage Access button for a proxy ✅
The Close Account button is disabled with a tooltip explanation ✅
Active profile user_type set to 'proxy' --> the Close Account button is disabled with the same tooltip explanation ✅
No regressions to the Users & Grants page and User Permissions pages, like no changes are visible when the feature flag is toggled off ✅
Tests pass ✅

This goes beyond this PR, but the account hierarchy feels a bit confusing sometimes. For example, a proxy user can't see themselves displayed on the Users & Grants page, but the child account can

packages/manager/src/mocks/serverHandlers.ts

packages/manager/src/features/Users/UsersLanding.tsx

packages/manager/cypress/e2e/core/account/user-permissions.spec.ts

packages/manager/src/mocks/serverHandlers.ts

packages/manager/src/features/Users/UsersLanding.tsx

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

packages/manager/src/features/Account/CloseAccountSetting.test.tsx

packages/manager/src/features/Users/UsersLanding.tsx

abailly-akamai

Nice work and thanks for addressing all the changes!

Feature looks great and confirming steps outlined in the description ✅

Approving pending the outstanding question with the paginated table

packages/manager/src/features/Users/UsersLanding.tsx

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

mjac0bs self-assigned this Jan 18, 2024

mjac0bs added 5 commits January 18, 2024 09:31

Add table and separate out partner users from all users

a73b5c9

Display Manage Access button for proxy users; label tables

0f8de8a

Rename variable and clean up

c441cf6

Added changeset: Users & Grants: add business partner table to child …

d55b45c

…view

Display correct table cols; update variable names

95c468a

mjac0bs force-pushed the M3-7460-child-view-users-and-grants branch from 1cfe954 to 95c468a Compare January 18, 2024 18:17

mjac0bs added 7 commits January 18, 2024 12:00

Adjust styling; properly feature flag table headings

f916487

Disable Close Account button for child users

31a09df

Disable Close Account button for proxy users; add tests

006cd26

Add unit test for proxy user UserRow

cc042a0

Switch notice to button tooltip

aaf0948

Fix misleadingly passing Button.test.tsx

0796cfc

Update test coverage for Close Account button tooltip

b4c4fb7

mjac0bs added Ready for Review and removed Work in Progress labels Jan 19, 2024

mjac0bs commented Jan 19, 2024

View reviewed changes

mjac0bs marked this pull request as ready for review January 19, 2024 18:36

mjac0bs requested a review from a team as a code owner January 19, 2024 18:36

mjac0bs requested review from dwiley-akamai, abailly-akamai and jaalah-akamai and removed request for a team January 19, 2024 18:36

jaalah-akamai reviewed Jan 19, 2024

View reviewed changes

Merge branch 'develop' into M3-7460-child-view-users-and-grants

4a6cf4f

mjac0bs requested review from jdamore-linode and removed request for a team January 19, 2024 23:55

Address feedback: center button with header; update mocks

82c7284

jaalah approved these changes Jan 22, 2024

View reviewed changes

jaalah-akamai added the Add'tl Approval Needed Waiting on another approval! label Jan 22, 2024

jaalah-akamai approved these changes Jan 22, 2024

View reviewed changes

abailly-akamai reviewed Jan 22, 2024

View reviewed changes

dwiley-akamai reviewed Jan 22, 2024

View reviewed changes

packages/manager/src/mocks/serverHandlers.ts Outdated Show resolved Hide resolved

packages/manager/src/features/Users/UsersLanding.tsx Outdated Show resolved Hide resolved

packages/manager/src/features/Users/UsersLanding.tsx Outdated Show resolved Hide resolved

mjac0bs added 8 commits January 23, 2024 08:17

Address feedback: make table components

61bd083

Remove bad any type

6aa773a

Address feedback: Add error, loading states to Close Account button

39a9ef4

Merge branch 'develop' into M3-7460-child-view-users-and-grants

01b42a8

Rely on parent user type, no need for childAccounts

5f706d2

Address feedback: allow unrestricted proxy user to see themselves

277d7f9

Fix typo

08cdb20

Address feedback: filter users more efficiently with array reduce

d11fcb4

mjac0bs commented Jan 23, 2024

View reviewed changes

mjac0bs requested review from dwiley-akamai and abailly-akamai January 23, 2024 20:23

bnussman-akamai reviewed Jan 24, 2024

View reviewed changes

packages/manager/src/features/Users/UsersLanding.tsx Show resolved Hide resolved

abailly-akamai approved these changes Jan 24, 2024

View reviewed changes

packages/manager/src/features/Users/UsersLanding.tsx Show resolved Hide resolved

mjac0bs added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! Ready for Review labels Jan 25, 2024

mjac0bs added 2 commits January 25, 2024 13:23

Make linter happy with sort imports

4bb9c79

Revert change to MSW for testing user_type

c6b8a84

mjac0bs merged commit d11cc59 into linode:develop Jan 29, 2024
17 of 18 checks passed

cpathipa mentioned this pull request Feb 1, 2024

Release v1.111.0 - release → staging #10136

Merged

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

upcoming: [M3-7460] - Child View: Users & Grants page #10076

upcoming: [M3-7460] - Child View: Users & Grants page #10076

mjac0bs commented Jan 18, 2024 •

edited

mjac0bs Jan 18, 2024

mjac0bs Jan 19, 2024

jaalah-akamai left a comment

jaalah-akamai commented Jan 19, 2024

mjac0bs commented Jan 19, 2024 •

edited

jaalah-akamai commented Jan 19, 2024

github-actions bot commented Jan 20, 2024 •

edited

mjac0bs commented Jan 20, 2024

jaalah-akamai left a comment

abailly-akamai left a comment

dwiley-akamai left a comment

abailly-akamai left a comment

upcoming: [M3-7460] - Child View: Users & Grants page #10076

upcoming: [M3-7460] - Child View: Users & Grants page #10076

Conversation

mjac0bs commented Jan 18, 2024 • edited

Description 📝

Changes 🔄

Preview 📷

How to test 🧪

Prerequisites

Verification steps

As an Author I have considered 🤔

mjac0bs Jan 18, 2024

Choose a reason for hiding this comment

mjac0bs Jan 19, 2024

Choose a reason for hiding this comment

jaalah-akamai left a comment

Choose a reason for hiding this comment

jaalah-akamai commented Jan 19, 2024

mjac0bs commented Jan 19, 2024 • edited

jaalah-akamai commented Jan 19, 2024

github-actions bot commented Jan 20, 2024 • edited

mjac0bs commented Jan 20, 2024

jaalah-akamai left a comment

Choose a reason for hiding this comment

abailly-akamai left a comment

Choose a reason for hiding this comment

dwiley-akamai left a comment

Choose a reason for hiding this comment

abailly-akamai left a comment

Choose a reason for hiding this comment

mjac0bs commented Jan 18, 2024 •

edited

mjac0bs commented Jan 19, 2024 •

edited

github-actions bot commented Jan 20, 2024 •

edited