Encrypt and mask sensitive data in webhook URLs
<!---
Please read this!
Before opening a new issue, make sure to search for keywords in the issues
filtered by the "regression" or "bug" label:
- https://gitlab.com/gitlab-org/gitlab/issues?label_name%5B%5D=regression
- https://gitlab.com/gitlab-org/gitlab/issues?label_name%5B%5D=bug
and verify the issue you're about to submit isn't a duplicate.
--->
(Note this Epic was created by promoting this issue https://gitlab.com/gitlab-org/gitlab/-/issues/218389 to an Epic).
### Summary
While configuring a Webhook, at times it might be necessary to add authentication token in the Webhook URL. Unfortunately, this token is not encrypted and is visible to all the maintainers of a project. This presents a security issue as anyone may copy the token and impersonate the user.
### Release Notes
As you create webhooks to integrate with external services and receive GitLab event data for event-driven workflows, you may be required to supply callback URLs that include sensitive data. This feature will allow you to encrypt and mask personal tokens, passwords, usernames, domains, and any other sensitive data that may be required in your webhook URL during the process of configuring a webhook.
<img src="/uploads/e1e72deda0da147399c648c3b8a40f5c/webhook-A-1.png" height="400">
### Steps to reproduce
While configuring [bi-directional mirroring](https://docs.gitlab.com/ee/user/project/repository/repository_mirroring.html#bidirectional-mirroring-starter) one of the suggested ways of preventing a race conditions is by configuring [Push Event Web Hook](https://docs.gitlab.com/ee/user/project/integrations/webhooks.html#push-events) to trigger an immediate pull using the [pull mirror API](https://docs.gitlab.com/ee/api/projects.html#start-the-pull-mirroring-process-for-a-project-starter). This would require one to also add the [Personal/project access tokens](https://docs.gitlab.com/ee/api/README.html#personalproject-access-tokens) to authenticate the request while configuring the [Webhook](https://docs.gitlab.com/ee/user/project/integrations/webhooks.html#overview):
* Navigate to **Settings ➔ Webhooks**
* Add the Webhook URL
```
https://gitlab.example.com/api/v4/projects/:id/mirror/pull?private_token=<your_access_token>
```
* Ensure that the Push Events checkbox is selected
<img src="/uploads/dee9a976f51c4be1c3590c1631a7ed22/image.png" height="500">
* Click on **Add Webhook** to save the web hook.
### What is the current *bug* behavior?
After saving the new Webhook is saved and shown below. As can be seen, the private token is also shown and is not encrypted.

### What is the expected *correct* behavior?
The Web token should be encrypted and not easily visible from the Web UI.

### Proposed Solution
Allow users to mask URLs as they create a webhook, by choosing portions of the URL and assigning a key/variable to the value.
### Required Issues
- https://gitlab.com/gitlab-org/gitlab/-/issues/361123+
- https://gitlab.com/gitlab-org/gitlab/-/issues/361124+
- https://gitlab.com/gitlab-org/gitlab/-/issues/361125+
### Potential Future Iterations
- https://gitlab.com/gitlab-org/gitlab/-/issues/359985+
- https://gitlab.com/gitlab-org/gitlab/-/issues/359989+
- https://gitlab.com/gitlab-org/gitlab/-/issues/371189+
- https://gitlab.com/gitlab-org/gitlab/-/issues/368017+
epic