Mask webhook URLs in UI: pre-fill values (MVC follow-up)

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

Context

See parent epic: &7970 (closed) When adding a webhook URL, the URL can contain pieces of information that are sensitive and should be encrypted and masked for security reasons. The user should be able to select those sensitive portions of a URL and mark them to be masked in the UI.

This issue as a UX improvement, following on from #361582 (closed)

In #361582 (closed), the user was able to select parts of a webhook URL that should be masked in the UI. In order to indicate which parts of the URL should be masked, the user needed to copy and paste pieces of the URL.

In this issue, the form is pre-filled on the user's behalf.

Design proposal

• 📹 17 second video of prototype
• 🎨 Figma prototype
• 🖌️ Figma file

Logic

• The URL is split into fields by values in-between special characters. Must have special characters on both sides. That would omit things like https://
• The split URL is displayed by a number of form fields underneath the URL
• Leaving the right side of the form field blank indicates that the value does not need to be masked
• User can add additional free text pieces of the URL should that should be masked
• When the user enters something in the right column of the form, and then the input loses focus, the read-only preview of the URL updates

Logic: when user has already masked parts of the URL

When the user has already masked parts of a URL (from MVC issue #361582 (closed)) we display what they have masked.

Example url http://exampleuser:2302020223.example.com

What user input in MVC	What the UI displays with this update	Comment
		Any item that is between special character that already has a key is carried over. Any item that is between special characters but does not currently have a value is added to the form (in this case: example)

Example url http://exampleuser:2302020223.example.com

What user input in MVC	What the UI displays with this update	Comment
		If the values between special characters are already masked by the user, do not pre-fill those values. In this example, exampleuser and 2302020223 are not added as 2 additional rows, as they are already masked.