Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: [M3-8915] - Improve UI for billing contact info when sensitive data is masked #11276

Merged

Conversation

mjac0bs
Copy link
Contributor

@mjac0bs mjac0bs commented Nov 18, 2024

Description 📝

Recently, we added a Mask Sensitive Data enhancement that allows the user to obscure data, including contact information.

This is functioning as expected on the Account > Billing page, where Billing Contact Info fields are masked when the feature is enabled, but the UI presentation of this can be further improved.

Note

UX has approved these changes.

Changes 🔄

  • Replaced individually masked fields with explanatory copy when Mask Sensitive Data is enabled
  • Added the ability to toggle the contact info visibility in the panel when Mask Sensitive Data is enabled
  • Replaced the MUI visibility icons with CDS 2.0 visibility icons in this panel and throughout the feature
  • Minor cleanup in ContactInformation: moved styled components to ContactInformation.styles.ts and removed the default export

Target release date 🗓️

12/10

Preview 📷

Before After
Screenshot 2024-11-20 at 8 47 57 AM Screenshot 2024-11-20 at 8 30 03 AMScreenshot 2024-11-20 at 8 57 15 AM

How to test 🧪

Prerequisites

(How to setup test environment)

Reproduction steps

(How to reproduce the issue, if applicable)

Verification steps

(How to verify changes)

  • Go to http://localhost:3000/account/billing and note the copy change and the ability to toggle between showing and hiding the data.
  • Follow the link to profile settings, disable the Mask Sensitive Data setting, and return to the Billing page.
  • Confirm that with the setting disabled, the billing contact info displays as usual.

As an Author, I have considered 🤔

  • 👀 Doing a self review
  • ❔ Our contribution guidelines
  • 🤏 Splitting feature into small PRs
  • ➕ Adding a changeset
  • 🧪 Providing/improving test coverage
  • 🔐 Removing all sensitive information from the code and PR description
  • 🚩 Using a feature flag to protect the release
  • 👣 Providing comprehensive reproduction steps
  • 📑 Providing or updating our documentation
  • 🕛 Scheduling a pair reviewing session
  • 📱 Providing mobile support
  • ♿ Providing accessibility support

  • I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

  • All unit tests are passing
  • TypeScript compilation succeeded without errors
  • Code passes all linting rules

@mjac0bs mjac0bs added Work in Progress UX/UI Changes for UI/UX to review labels Nov 18, 2024
@mjac0bs mjac0bs self-assigned this Nov 18, 2024
@mjac0bs mjac0bs force-pushed the M3-8915-improve-masked-billing-contact-info-ui branch from 380720e to 55d86aa Compare November 19, 2024 23:12
@mjac0bs mjac0bs force-pushed the M3-8915-improve-masked-billing-contact-info-ui branch from 796bd32 to ceaad55 Compare November 20, 2024 15:29
@mjac0bs mjac0bs removed Work in Progress UX/UI Changes for UI/UX to review labels Nov 20, 2024
@mjac0bs mjac0bs marked this pull request as ready for review November 20, 2024 17:14
@mjac0bs mjac0bs requested review from a team as code owners November 20, 2024 17:14
@mjac0bs mjac0bs requested review from AzureLatte, dwiley-akamai and hkhalil-akamai and removed request for a team November 20, 2024 17:14
@@ -38,20 +44,7 @@ interface Props {
zip: string;
}

const StyledTypography = styled(Typography)(({ theme }) => ({
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes here were just to:

  • move this styling to a separate .styles file
  • use a named, rather than default, export

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes in this file were to support the use of the CDS 2.0 visibility icon in this tooltip, rather than MUI's.

})
);

// eslint-disable-next-line sonarjs/no-identical-functions
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These are two different icons that need the same styling.

Copy link

github-actions bot commented Nov 20, 2024

Coverage Report:
Base Coverage: 86.9%
Current Coverage: 86.9%

Copy link
Contributor

@dwiley-akamai dwiley-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All checks pass ✅
Show/Hide functionality & masking functionality ✅
Billing Contact info displayed when masking is disabled ✅

Copy link
Contributor

@hkhalil-akamai hkhalil-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

Minor nit: can we swap the order of the "Hide" and "Edit" buttons so the visibility can be toggled without moving the mouse?

Screen.Recording.2024-11-20.at.3.11.30.PM.mov

@hkhalil-akamai hkhalil-akamai added Approved Multiple approvals and ready to merge! and removed Ready for Review labels Nov 20, 2024
@mjac0bs
Copy link
Contributor Author

mjac0bs commented Nov 20, 2024

@hkhalil-akamai Good idea for user efficiency. Done in c8b2735.

Screen.Recording.2024-11-20.at.12.46.34.PM.mov

@linode-gh-bot
Copy link
Collaborator

Cloud Manager UI test results

🎉 454 passing tests on test run #7 ↗︎

❌ Failing✅ Passing↪️ Skipped🕐 Duration
0 Failing454 Passing2 Skipped94m 5s

@mjac0bs mjac0bs merged commit 260c0b3 into linode:develop Nov 20, 2024
23 checks passed
Copy link

cypress bot commented Nov 20, 2024

Cloud Manager E2E    Run #6856

Run Properties:  status check passed Passed #6856  •  git commit 260c0b3643: feat: [M3-8915] - Improve UI for billing contact info when sensitive data is mas...
Project Cloud Manager E2E
Branch Review develop
Run status status check passed Passed #6856
Run duration 25m 43s
Commit git commit 260c0b3643: feat: [M3-8915] - Improve UI for billing contact info when sensitive data is mas...
Committer Mariah Jacobs
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 0
Tests that did not run due to a developer annotating a test with .skip  Pending 2
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 454
View all changes introduced in this branch ↗︎

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Approved Multiple approvals and ready to merge!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants