Add editing of masked items for webhook URL

Justin Ho Tuan Duongrequested to merge
361125-webhook-encrypted-tokens-frontend-support-edit into master

What does this MR do and why?

This feature is behind the feature flag webhook_form_mask_url. This MR adds the ability to edit and save an existing webhook's URL mask items.

  • Pass the keys of url_variables (values are not passed as they are hidden) to the frontend.
  • Add them as initial mask items for the webhook URL. Make them disabled to avoid any changes to the key (including deleting) and show the value as ************ (12 stars).
  • Make sure the backend saves everything properly (tested manually).

This is the list of MRs around this feature:

MR Status
Add basic UI for UI masking of webhook URL (!99995 - merged) ✅ Merged
Add frontend for working with URL variables (!100817 - merged) ✅ Merged
Add editing of masked items for webhook URL (!102150 - merged) 👈 You are here
Add frontend validations of masked items 🚧 Coming soon

Screenshots or screen recordings

Webhook_mask_URL_-_edit

How to set up and validate locally

  1. Enable the feature flag.
  2. Go to Project > Settings > Webhooks. For example, http://127.0.0.1:3000/gitlab-org/gitlab-shell/-/hooks.
  3. Use any URL as the webhook URL. For example, https://gitlab.com/dashboard/todos.
  4. Select Mask portions of the URL and add values. For example, gitlab.com -> domain, dashboard/todos -> path.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #361125 (closed)

Edited by Justin Ho Tuan Duong

Merge request reports