upcoming: [M3-7429] - Add Parent/Proxy 'Switch Account' button and drawer to user profile dropdown menu #10031

mjac0bs · 2024-01-03T23:40:08Z

Description 📝

This PR introduces a more intuitive design for the profile dropdown menu and implements a new drawer specifically for listing child accounts. The profile dropdown menu should now visually distinguish between parent and proxy account types, providing a clearer representation of the user's account hierarchy.

Note

This story focuses solely on enhancing the user interface and does not involve token issuance or the actual switching to the proxy account, which will be handled separately (in M3-7430).

Changes 🔄

Subtle differences between the two drawers are bolded.

Parent View:

We should see which account the parent user is logged into (parent company).
"Switch Account" button should be visible.
"Switch Account" button should open "Switch Account" drawer with list of child accounts.
The child accounts should be scrollable if the list is too long.
- For the purposes of this PR, we just expect the drawer to scroll; a follow up PR will look into a virtualized list.
Upon closing drawer, profile dropdown menu should remain open.

Proxy View:

We should see which company the parent user is logged into (child company).
"Switch Account" button should be visible.
"Switch Account" button should open "Switch Account" drawer with list of child accounts.
There should be a link to switch back to parent account.
Upon closing drawer, profile dropdown menu should remain open.

Child View:

No change, same as typical user without a parent/child relationship

Preview 📷

Screenshots

Before	After
User Menu Popover
Switch Account Drawer - Parent View
Switch Account Drawer - Proxy View
Switch Account Drawer - Error Views

How to test 🧪

Prerequisites

(How to setup test environment)

Check out this PR and yarn dev.
Make sure the Parent Child Account Access feature flag is on and mocks are on.

Verification steps

(How to verify changes)

Click on the Profile & Account button in the top menu to open the user menu popover.
Observe that the Mock Company name is displayed and a Switch Account button is visible.
Confirm the changes described above in "Parent View". If you want to test a long list of child accounts, uncomment the return statement on L1180 of the mocks.
Go to serverHandlers.ts and edit the account/users/:user request to the following in order to mock a proxy user:

  rest.get('*/account/users/:user', (req, res, ctx) => {
  // Parent/Child: switch the `user_type` depending on what account view you need to mock.
  return res(ctx.json(accountUserFactory.build({ user_type: 'proxy' })));
  }),

Repeat steps 1-3 above for proxy view.
Repeat step 4 for a Child user and confirm parity with prod.
Toggle off feature flag and confirm parity with prod.
Verify unit tests pass:

yarn test UserMenu SwitchAccountDrawer

As an Author I have considered 🤔

Check all that apply

…to user profile dropdown menu

mjac0bs · 2024-01-05T22:28:36Z

packages/manager/src/features/TopMenu/UserMenu/UserMenu.test.tsx

Sorry for the diff in this file. I added a describe; most of the tests were already existing. See the comments below for the test added in this PR.

mjac0bs · 2024-01-05T22:29:05Z

packages/manager/src/features/TopMenu/UserMenu/UserMenu.test.tsx

+  it('shows the parent company name and Switch Account button in the dropdown menu for a parent user', async () => {
+    server.use(
+      rest.get('*/account', (req, res, ctx) => {
+        return res(
+          ctx.json(accountFactory.build({ company: 'Parent Company' }))
+        );
+      }),
+      rest.get('*/account/users/*', (req, res, ctx) => {
+        return res(ctx.json(accountUserFactory.build({ user_type: 'parent' })));
+      })
+    );
+
+    const { findByLabelText, findByTestId } = renderWithTheme(<UserMenu />, {
+      flags: { parentChildAccountAccess: true },
+    });
+
+    const userMenuButton = await findByLabelText('Profile & Account');
+    fireEvent.click(userMenuButton);
+
+    const userMenuPopover = await findByTestId('user-menu-popover');
+
+    expect(within(userMenuPopover).getByText('Parent Company')).toBeVisible();
+    expect(within(userMenuPopover).getByText('Switch Account')).toBeVisible();


This is a new test.

mjac0bs · 2024-01-05T22:29:21Z

packages/manager/src/features/TopMenu/UserMenu/UserMenu.test.tsx

+  it('shows the child company name and Switch Account button in the dropdown menu for a proxy user', async () => {
+    server.use(
+      rest.get('*/account', (req, res, ctx) => {
+        return res(
+          ctx.json(accountFactory.build({ company: 'Child Company' }))
+        );
+      }),
+      rest.get('*/account/users/*', (req, res, ctx) => {
+        return res(ctx.json(accountUserFactory.build({ user_type: 'proxy' })));
+      })
+    );
+
+    const { findByLabelText, findByTestId } = renderWithTheme(<UserMenu />, {
+      flags: { parentChildAccountAccess: true },
+    });
+
+    const userMenuButton = await findByLabelText('Profile & Account');
+    fireEvent.click(userMenuButton);
+
+    const userMenuPopover = await findByTestId('user-menu-popover');
+
+    expect(within(userMenuPopover).getByText('Child Company')).toBeVisible();
+    expect(within(userMenuPopover).getByText('Switch Account')).toBeVisible();
+  });


This is a new test.

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

mjac0bs · 2024-01-05T22:33:03Z

packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx

      >
        <Stack data-qa-user-menu minWidth={250} spacing={2}>
+          {isAccountSwitchable && (
+            <Typography>You are currently logged in as:</Typography>


I diverged from the mocks with this copy because I think it sounds nicer than 'Current account:', but open to feedback if reviewers disagree.

mjac0bs · 2024-01-05T22:38:33Z

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

The SwitchAccountButton will be reused on the Account landing page for parent/proxy users. (M3-7475)

mjac0bs · 2024-01-05T22:46:02Z

packages/manager/src/mocks/serverHandlers.ts

@@ -1177,6 +1177,7 @@ export const handlers = [
      }),
    ];
    return res(ctx.json(makeResourcePage(childAccounts)));
+    // return res(ctx.json(makeResourcePage(accountFactory.buildList(101))));


Added for ease of testing a long list of child accounts; will clean up later in the project after a follow-up ticket on scrolling is done.

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

packages/manager/src/assets/icons/swapSmall.svg

github-actions · 2024-01-08T15:37:00Z

Coverage Report: ✅
Base Coverage: 79.86%
Current Coverage: 79.86%

jaalah-akamai

Confirmed button appears for both types of users and clicking it opens the drawer and user menu remains open
Confirmed link appears on proxy account to go back to parent account
Confirmed these are feature flagged

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

mjac0bs self-assigned this Jan 3, 2024

mjac0bs added 6 commits January 4, 2024 15:05

Add switch account button and basic drawer

8d029c8

List child accounts in drawer

d31b711

Use render function

09248ec

Correct comments so as not to confuse myself

204e92b

Correct the button text

0431acf

Clean up and make styling more closely match mocks

c520b4b

mjac0bs force-pushed the M3-7429-user-profile-dropdown-menu branch from 5dcd208 to c520b4b Compare January 4, 2024 23:35

mjac0bs added 6 commits January 4, 2024 16:42

Make a component out of Switch Account button; add icon

a730ba5

More styling and clean up

172e9de

Added changeset: Add parent/proxy 'Switch Account' button and drawer …

c3c76ae

…to user profile dropdown menu

Clean up and add WIP unit tests

d8676d5

Clean up and fix z-index so user menu is focused on drawer close

8dcd1c6

Add tests for SwitchAccountDrawer

ac786bf

mjac0bs commented Jan 6, 2024

View reviewed changes

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

mjac0bs marked this pull request as ready for review January 6, 2024 00:33

mjac0bs requested a review from a team as a code owner January 6, 2024 00:33

mjac0bs requested review from bnussman-akamai and jaalah-akamai and removed request for a team January 6, 2024 00:33

bnussman-akamai requested changes Jan 8, 2024

View reviewed changes

packages/manager/src/features/Account/SwitchAccountButton.tsx Outdated Show resolved Hide resolved

packages/manager/src/assets/icons/swapSmall.svg Outdated Show resolved Hide resolved

Address feedback: use startIcon

0c983a8

bnussman-akamai approved these changes Jan 8, 2024

View reviewed changes

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

jaalah-akamai approved these changes Jan 8, 2024

View reviewed changes

jaalah-akamai added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Jan 8, 2024

mjac0bs removed the Ready for Review label Jan 8, 2024

mjac0bs merged commit 23ca92f into linode:develop Jan 8, 2024
18 checks passed

This was referenced Jan 18, 2024

Release v1.110.0 - release → staging #10081

Closed

Release v1.110.0 - release → staging #10082

Merged

Release v1.110.0 - staging → master #10092

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

upcoming: [M3-7429] - Add Parent/Proxy 'Switch Account' button and drawer to user profile dropdown menu #10031

upcoming: [M3-7429] - Add Parent/Proxy 'Switch Account' button and drawer to user profile dropdown menu #10031

mjac0bs commented Jan 3, 2024 •

edited

Loading

mjac0bs Jan 5, 2024

mjac0bs Jan 5, 2024

mjac0bs Jan 5, 2024

mjac0bs Jan 5, 2024

mjac0bs Jan 5, 2024

mjac0bs Jan 5, 2024

github-actions bot commented Jan 8, 2024

jaalah-akamai left a comment

upcoming: [M3-7429] - Add Parent/Proxy 'Switch Account' button and drawer to user profile dropdown menu #10031

upcoming: [M3-7429] - Add Parent/Proxy 'Switch Account' button and drawer to user profile dropdown menu #10031

Conversation

mjac0bs commented Jan 3, 2024 • edited Loading

Description 📝

Changes 🔄

Preview 📷

How to test 🧪

Prerequisites

Verification steps

As an Author I have considered 🤔

mjac0bs Jan 5, 2024

Choose a reason for hiding this comment

mjac0bs Jan 5, 2024

Choose a reason for hiding this comment

mjac0bs Jan 5, 2024

Choose a reason for hiding this comment

mjac0bs Jan 5, 2024

Choose a reason for hiding this comment

mjac0bs Jan 5, 2024

Choose a reason for hiding this comment

mjac0bs Jan 5, 2024

Choose a reason for hiding this comment

github-actions bot commented Jan 8, 2024

jaalah-akamai left a comment

Choose a reason for hiding this comment

mjac0bs commented Jan 3, 2024 •

edited

Loading