upcoming: [M3-7459] - Disable Contact / Billing Info for Restricted Users #10036

jaalah-akamai · 2024-01-05T20:18:49Z

Description 📝

Users with read-only access, should not have the ability to edit billing contacts or add payment methods. Currently, the "Edit" billing contact and "Add payment method" buttons are active for these types of users. While users receive denials via the API when trying to submit changes, this may creates confusion and frustration. To improve the user experience and align with intended permissions, it's necessary to disable these buttons.

Changes 🔄

Edit and Add Payment Method will be disabled for "Indirect Customers" and those with read_only account access.
A tooltip will appear saying To edit this section, please contact your {administrator || business partner}.
Fixed bug with disabled buttons not allowing us to tab out of them.

Preview 📷

Before	After
prod-contact-info.mp4
Didn't want to update screenshot, but it's been updated to say `business partner`.

How to test 🧪

Prerequisites

One account with full access
One account with restricted access

Reproduction steps

Go to http://localhost:3000/account/billing

Verification steps

Log into any restricted account with parent/child feature flag disabled, observe the Edit and Add Payment Method buttons are disabled.
Turn parent/child feature flag on with Mock Service Workers
- Observe the Edit and Add Payment Method buttons are enabled (by default we're in a parent state)
- Then change parent to child on this line: https://github.com/linode/manager/blob/develop/packages/manager/src/mocks/serverHandlers.ts#L1236
- Observe the Edit and Add Payment Method buttons are disabled.
- Now change MSW from child to proxy and observe the Edit and Add Payment Method buttons are enabled.

As an Author I have considered 🤔

Check all that apply

…sers

jaalah-akamai · 2024-01-08T20:53:35Z

...ages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/ContactInformation.test.tsx

+});
+
+// TODO: When we figure out issue with Vitest circular dependencies
+// vi.mock('src/queries/profile', async () => {


@jdamore-linode This is what we talked about earlier. This is not a critical test, so we'll revisit at Cafe. 👍

jaalah-akamai · 2024-01-08T20:54:22Z

...ages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/PaymentInformation.test.tsx

+  };
+});
+
+vi.mock('src/queries/profile', async () => {


@jdamore-linode To add to our investigation, oddly this causes no issues.

Thanks again @jaalah-akamai! Still no explanation for why it doesn't hang here, but did confirm by upgrading Vitest that this Vitest PR fixed the issue.

Once this is merged I'll plan to open a PR that upgrades Vitest and re-enables the commented out test 👍

I see the benefit of this approach to avoid dealing with loading states, but I don't think it's better than the MSW approach. Would like to discuss in cafe!

mjac0bs

I think your test steps have a typo in Observe the Edit and Add Payment Method buttons are disabled (by default we're in a parent state), which should be enabled.

I was able to confirm the following:

Scenario	Picture
✅ Restricted regular user with `read_only` account access, flag is off, mocks are off
✅ Restricted `child` user (with `read_write` account access), flag is on, mocks are on
✅ `parent` user or restricted `proxy` user (with `read_write` account access), flag is on, mocks are on

The disabled tooltips are read out via VO. See also the message I sent offline, but I may have not had the right key combination to be able to keyboard navigate away from the disabled Edit button - I can esc out of the open tooltip, but trying to Tab or Shift + Tab keeps me on that button.

Pending that the above is not an issue to resolve, approving with a couple of small things to address. In addition to my comments, this PR will need a changeset.

packages/manager/src/features/Billing/constants.ts

packages/manager/src/features/Billing/billingUtils.ts

Co-authored-by: Mariah Jacobs <[email protected]>

jaalah-akamai · 2024-01-11T01:16:56Z

I think your test steps have a typo in Observe the Edit and Add Payment Method buttons are disabled (by default we're in a parent state), which should be enabled.

Ahh yes, it's a typo! 🔍

…-7459-v2

jaalah-akamai · 2024-01-11T01:25:34Z

I can esc out of the open tooltip, but trying to Tab or Shift + Tab keeps me on that button.

@mjac0bs This should be fixed now while still preventing disabled buttons from submitting forms as outlined here: #10028 (review)

packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/ContactInformation.tsx

bnussman-akamai · 2024-01-11T18:17:54Z

packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/ContactInformation.tsx

+  const { data: user } = useAccountUser(profile?.username ?? '');
+  const isChildUser =
+    flags.parentChildAccountAccess && user?.user_type === 'child';


Do we have to use useAccountUser? Is there no better way to get user_type?

@bnussman-akamai I don't think so, user_type is a new field that's only returned from /account/users or /account/users/:user

I'll see if API could also return that field as part of /account data.

bnussman-akamai · 2024-01-11T18:19:04Z

...ages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/PaymentInformation.test.tsx

+  };
+});
+
+vi.mock('src/queries/profile', async () => {


I see the benefit of this approach to avoid dealing with loading states, but I don't think it's better than the MSW approach. Would like to discuss in cafe!

github-actions · 2024-01-11T19:19:51Z

Coverage Report: ❌
Base Coverage: 79.87%
Current Coverage: 79.85%

bnussman-akamai

Disabled states look and new logic look good!

upcoming: [M3-7459] - Disable Contact / Billing Info for Restricted U…

6313a56

…sers

jaalah-akamai added Work in Progress Parent / Child Account labels Jan 5, 2024

jaalah-akamai self-assigned this Jan 5, 2024

jaalah added 3 commits January 8, 2024 11:58

Add unit tests

81e6242

Add contact info test

fc36456

Contact information test

c325282

jaalah-akamai marked this pull request as ready for review January 8, 2024 20:52

jaalah-akamai requested a review from a team as a code owner January 8, 2024 20:52

jaalah-akamai requested review from jdamore-linode, bnussman-akamai and mjac0bs and removed request for a team January 8, 2024 20:52

jaalah-akamai commented Jan 8, 2024

View reviewed changes

Move shared code to utils

f3d6f71

jaalah-akamai added Ready for Review and removed Work in Progress labels Jan 8, 2024

mjac0bs approved these changes Jan 10, 2024

View reviewed changes

packages/manager/src/features/Billing/constants.ts Show resolved Hide resolved

packages/manager/src/features/Billing/billingUtils.ts Outdated Show resolved Hide resolved

mjac0bs added the Missing Changeset label Jan 10, 2024

Update packages/manager/src/features/Billing/billingUtils.ts

f3b012a

Co-authored-by: Mariah Jacobs <[email protected]>

jaalah added 3 commits January 10, 2024 20:23

Review updates for disabled button

7a1f6b3

Merge branch 'develop' of github.com:linode/manager into M3-7459-v2

5f70774

Merge branch 'M3-7459-v2' of github.com:jaalah-akamai/manager into M3…

19a5f7b

…-7459-v2

Added changeset: Disable Contact / Billing Info for Restricted Users

235c133

jaalah-akamai added Add'tl Approval Needed Waiting on another approval! and removed Missing Changeset labels Jan 11, 2024

mjac0bs reviewed Jan 11, 2024

View reviewed changes

packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/ContactInformation.tsx Show resolved Hide resolved

bnussman-akamai reviewed Jan 11, 2024

View reviewed changes

fix test

a30ab41

bnussman-akamai approved these changes Jan 11, 2024

View reviewed changes

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

jaalah-akamai merged commit f3c43a6 into linode:develop Jan 16, 2024
16 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-7459] - Disable Contact / Billing Info for Restricted Users #10036

upcoming: [M3-7459] - Disable Contact / Billing Info for Restricted Users #10036

jaalah-akamai commented Jan 5, 2024 •

edited

Loading

jaalah-akamai Jan 8, 2024

jaalah-akamai Jan 8, 2024

jdamore-linode Jan 9, 2024

bnussman-akamai Jan 11, 2024

mjac0bs left a comment

jaalah-akamai commented Jan 11, 2024 •

edited

Loading

jaalah-akamai commented Jan 11, 2024 •

edited

Loading

bnussman-akamai Jan 11, 2024

jaalah-akamai Jan 11, 2024

jaalah-akamai Jan 11, 2024

bnussman-akamai Jan 11, 2024

github-actions bot commented Jan 11, 2024

bnussman-akamai left a comment

upcoming: [M3-7459] - Disable Contact / Billing Info for Restricted Users #10036

upcoming: [M3-7459] - Disable Contact / Billing Info for Restricted Users #10036

Conversation

jaalah-akamai commented Jan 5, 2024 • edited Loading

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

mjac0bs left a comment

Choose a reason for hiding this comment

jaalah-akamai commented Jan 11, 2024 • edited Loading

jaalah-akamai commented Jan 11, 2024 • edited Loading

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 Jan 11, 2024

bnussman-akamai left a comment

Choose a reason for hiding this comment

jaalah-akamai commented Jan 5, 2024 •

edited

Loading

jaalah-akamai commented Jan 11, 2024 •

edited

Loading

jaalah-akamai commented Jan 11, 2024 •

edited

Loading