Add ability to CRUD an "Approval Gate" approval rule on a Project (FE)

Problem to solve

This is the frontend implementation issue for the feature described by #267511 (closed).

Proposal

Add the ability to choose an "Approval Gate" as a type of project approval rule.

Design

Current UX	🆕 Users or Groups - Default option with 1 approver	🆕 Approval gate with link (no validation)	🆕 Rule inline with popover

Feature flag

This will use the same feature flag as #267511 (closed), which is currently :compliance_approval_gates

Implementation plan

frontend - 3️⃣

Create & Update

Only if the name doesn't match one of the READONLY_NAMES values. We don't want this appearing on the licence compliance or Vulnerability check add approval rules forms!

1. Pass the :compliance_approval_gates feature flag to the frontend
2. Add new Approver type dropdown to ee/app/assets/javascripts/approvals/components/rule_form.vue
   • Options: Users or groups and Approval service API
3. On Users or groups
   • Hide input Add approval gate
4. On Approval service API
   • Make sure the store uses the new approval gate rule type on store mutations/actions
   • Hide inputs Number of approvals required and Add approvers
   • Show input Add approval gate
   • Validate Add approval gate is a valid URL (maybe <input type="url" /> is easiest)
5. Add approvalGate to store and make sure it is submitted in the right places
6. Add unit tests to ee/spec/frontend/approvals/components/rule_form_spec.js
7. Update QA test qa/qa/ee/page/merge_request/new.rb

Read

1. Add a new approval gate approval cell to project_rules.vue
2. Hide the approvals required cell when a row item is an Approval service API
3. Add unit tests & QA tests

Destroy

1. The modal_rule_remove.vue should call the correct delete action depending on the rule type
2. Add unit tests & QA tests