feat: [M3-8719] - Add a 'Mask Sensitive Data' setting to Cloud Manager

[mjac0bs]

Description 📝

There are several places in the Cloud Manager UI where sensitive data is displayed, and we currently lack a way to obscure this data in situations where users may want it to be present, but not visible in the UI.

We would like to offer a solution to this by adding a profile setting to mask sensitive data app-wide using the commonly used pattern of dots (such as in a password field) and a visibility (eye) icon to toggle visibility of masked fields individually. Sensitive data includes: IP addresses, contact/billing information (including usernames and email addresses), and security questions.

This toggle-able setting will be available to users via the Profile > Settings page.

Changes 🔄

• A user can toggle on/off masking sensitive data via their profile settings.
• When the Mask Sensitive Data setting is ON, sensitive data throughout the app is masked with placeholder text.
  • The data can still be copied when it is masked, if the original field is copyable (e.g. IP Address).
  • The visibility of individual fields can be toggled on/off with an icon next to the field.
  • The length of the masked placeholder text is has a default length or can be customized via prop.
• When the Mask Sensitive Data setting is OFF, the UI displays as prod does today - all sensitive data is visible.
• Updated the IPAddress and CopyTooltip components to be able to mask IP addresses and copy the unmasked IP address while displaying masked text.
• Created a two new components (with accompanying tests): MaskableText and VisibilityTooltip (and a story)
• Created a new util: createMaskedText to convert a string to masked placeholder text (the dots).

Target release date 🗓️

11/12/24

Preview 📷

Screenshots

Page	Screenshot
Profile Settings
Linode Landing
Linode Details
NodeBalancer Landing
NodeBalancer Details
Account - Billing
Account - Users
Account - Login History
Profile - Login & Auth
IPAddress with showAll
IPAddress with showMore	)

How to test 🧪

Prerequisites

(How to setup test environment)

• Check out this PR and yarn dev, then go to http://localhost:3000/profile/settings
• Run Storybook locally: yarn storybook

Verification steps

(How to verify changes)

• Toggle the Mask Sensitive Data preference on
• Some places to check:
  • Linode landing page: http://localhost:3000/linodes
  • Linode details page
  • NodeBalancer landing page: http://localhost:3000/nodebalancers
  • NodeBalancer details page
  • Account landing page - Billing tab: http://localhost:3000/account/billing
  • Users landing page: http://localhost:3000/account/users
  • User details page
  • Login history page: http://localhost:3000/account/login-history
  • Profile Login & Auth page: http://localhost:3000/profile/auth
• Toggle the Mask Sensitive Data preference off and confirm that the previously masked places are displaying unmasked data
• Go to Storybook for VisibilityTooltip.
• Confirm tests pass:

yarn test MaskableText VisibilityTooltip createMaskedText IPAddress CopyTooltip

• Let me know if there's anywhere I missed that you think should be masked!

As an Author I have considered 🤔

Check all that apply

• 👀 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

[mjac0bs]

I'm sorry to be leaving my review so late but I had a couple notes as well as a number of places where we may want to consider deploying this tooltip.

@hkhalil-akamai Super helpful thoughts - thank you for the review! I'm looking into masking those places (except with VPC private IP, I think you're correct) now. As long as they play nicely with MaskableText, I think those are reasonable additions to make to this PR even though it will grow in size. If there are spots that become more complicated, I might punt them to a 'part 2' PR and get it into the same release.

One possible consideration is that the length of important data can be sensitive and should be obscured too. For example, it may be possible to determine which username is being hidden if the attacker posses a list of possible usernames and their lengths. We could instead default to a set length when the text is hidden, or even allow this fixed length to be customized via a prop.

I have conflicting thoughts here. I understand the scenario you present, it's valid. Defaulting to a set length also results in more abrupt changes in the UI when a user goes to toggle the visibility of the data, which was some feedback the team had when viewing the POC. And if we were to offer a default length, what length would be best - something about the length of an IP?

[mjac0bs]

Removed this, because without doing so, the masked text visibility toggle icon wasn't visible. And it didn't seem to actually have a purpose.

[hkhalil-akamai]

I have conflicting thoughts here. I understand the scenario you present, it's valid. Defaulting to a set length also results in more abrupt changes in the UI when a user goes to toggle the visibility of the data, which was some feedback the team had when viewing the POC. And if we were to offer a default length, what length would be best - something about the length of an IP?

I don't mind going in either direction, but I would like to hear the thoughts of other members. The length of an IP is a reasonable default, but we should make it configurable via a prop so it can be adjusted based on what kind of information it's masking.

[mjac0bs]

Things that have changed recently:

• Removed the MaskableText story from this PR - was having issues with msw mocking of an endpoint and want to troubleshoot in a follow up (M3-8819).
• Added more masking in the places Hussain pointed out above. Expand the Screenshots accordion at the bottom of this comment for pictures.
• Created an optional length prop on MaskableText and revised createMaskedText.
  • We can use a few defaults for the lengths of maskable text fields (allows us to limit some of the jumpiness in the UI) and we also avoid revealing the length of the plaintext in most places.
    • Exceptions:
      • Kube API Endpoints (too jumpy otherwise)
      • Billing Contact Info (it looked very weird to have uniform rows of data... open to feedback here; in my opinion, we should improve the display of info here overall (with labels) in another ticket and revisit masking then).
• Added a maskedTextLength prop to CopyTooltip - it was necessary for the length issue above.
• Updated unit tests accordingly, especially createMaskedText.test.tsx.

Screenshots

NOTE: IP addresses are not toggleable here because of the nature of the drag-and-droppable rows. If we unmask the IPs for one rule, but then move the rule around, the unmasking remains a property of the index of the original row instead of the moved row. (e.g. Unmasked row 2, move it to position 3 in list, row 2 has another rule that is now unmasked.)

Note: CI test failure is unrelated (database-resize) and fixed in develop.

[hkhalil-akamai]

Thanks for considering feedback! Verified all sensitive areas have been covered. The maskedTextLength is a sensible and elegant approach to handling the length and gives excellent flexibility to developers.

One thought that didn't occur to me before -- should we update our documentation to mention using MaskableText when appropriate? It may be forgotten by developers, especially if they haven't turned on the feature for themselves. This mention could possibly go under "Component Library" or "Accessibility".

Overall, excellent work on this feature and I'm sure this many users will find this addition extremely useful! 🎉

[hana-akamai]

Nice work! Looking forward to easier screenshots and videos 🚀

[mjac0bs]

Thanks for the reviews - I'm going to merge this once CI finishes. 🎉

@hkhalil-akamai Great callout.

I mentioned this feature in a few places that seemed appropriate:

1. Contribution guidelines under submitting a PR request (number 7) - we point new contributors here often
   

2. Actual PR template under the screenshots section - we all see this every day
   

3. Component Structure page of the developer docs - to help remind devs that this feature exists when they're developing new components
   

I don't think this is overkill, since we want to actually make use of it!

[cypress]

Cloud Manager E2E    Run #6772

Run Properties:   Passed #6772  •  42f6cc20cd: feat: [M3-8719] - Add a 'Mask Sensitive Data' setting to Cloud Manager (#11143)

Project	Cloud Manager E2E
Branch Review	develop
Run status	Passed #6772
Run duration	27m 17s
Commit	42f6cc20cd: feat: [M3-8719] - Add a 'Mask Sensitive Data' setting to Cloud Manager (#11143)
Committer	Mariah Jacobs
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	3
Pending	2
Skipped	0
Passing	445
View all changes introduced in this branch ↗︎