-
Notifications
You must be signed in to change notification settings - Fork 364
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
feat: [M3-8915] - Improve UI for billing contact info when sensitive data is masked #11276
Conversation
380720e
to
55d86aa
Compare
796bd32
to
ceaad55
Compare
…tive Data setting is enabled
@@ -38,20 +44,7 @@ interface Props { | |||
zip: string; | |||
} | |||
|
|||
const StyledTypography = styled(Typography)(({ theme }) => ({ |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
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.
Coverage Report: ✅ |
There was a problem hiding this 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 ✅
There was a problem hiding this 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 Good idea for user efficiency. Done in c8b2735. Screen.Recording.2024-11-20.at.12.46.34.PM.mov |
Cloud Manager UI test results🎉 454 passing tests on test run #7 ↗︎
|
Cloud Manager E2E Run #6856
Run Properties:
|
Project |
Cloud Manager E2E
|
Branch Review |
develop
|
Run status |
Passed #6856
|
Run duration | 25m 43s |
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 | |
---|---|
Failures |
0
|
Flaky |
0
|
Pending |
2
|
Skipped |
0
|
Passing |
454
|
View all changes introduced in this branch ↗︎ |
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 🔄
ContactInformation
: moved styled components toContactInformation.styles.ts
and removed the default exportTarget release date 🗓️
12/10
Preview 📷
How to test 🧪
Prerequisites
(How to setup test environment)
Reproduction steps
(How to reproduce the issue, if applicable)
Verification steps
(How to verify changes)
As an Author, I have considered 🤔
As an Author, before moving this PR from Draft to Open, I confirmed ✅