Add the ability for a user to test their API-based approval rules

Problem to solve

As part of #219567 (closed) we'll allow the user to add API-based approval rules in the form of a URL.

The issue is that feedback for adding a URL is delayed, only once a merge request needs approval will the URL be requested. This could be a potential development blocker in the MR approval process.

Proposal

Add a Test Link button to the approval modal that checks if the URL is valid / works and provides some feedback to the user.

Empty state With data Testing Failed Success
Approval_gate Approval_gate__with_data_ Approval_gate__trying_ Approval_gate__failure_ Approval_gate__successful_check_

Links / References

📺 API Approval Rule setup walkthrough

✏️ Figma

Similar issues

In #233478 (closed) we'll be adding the ability to retry API based approval rules, the implementations for both are likely to share some logic.

Implementation approach

frontend

  1. Add button to form (ee/app/assets/javascripts/status_checks/components/form.vue)
  2. Add reactive text to button pressed state
    1. If api url path is valid => Validation passed (in green)
    2. If api url path is invalid => Validation failed (in red)

documentation

  1. Update docs (doc/user/project/merge_requests/status_checks.md)

Quality

  1. Add spec coverage
Edited by Jay Montal