Support editing of deployment executor rules in project-level protected environment settings UI

Problem

We have had API-basis support for multiple approval rules implemented in #345678 (closed), but similar to #362236 and #355708 (closed), we still need to extend that feature to the frontend part, so that users can interact more easily with multiple approval rules in project-level protected environment settings UI.

Currently, the settings UI for Protected Environments only displays unified approval settings for a specific environment as shown 👇🏼

It does not display the correct amount of required approvals (if only multiple approvals rules are used, the amount will be zero despite each rule having a required approvals count). Additionally, there's no listing of approval rules and their associated access level, group, or project.

Proposal

Update the frontend part to support editing deployment executor rules in the project-level protected environments settings UI.

Such that each executor rule will be displayed, along with its associated:

• Access Level
• Group
• Project
• Required Approvals

Proposed Flow

Designs:

Flow for protecting an environment:

Flow with Banner:

For one milestone after this launches, we provide users with a banner letting them know where unified approval rules went and more information about multiple approval rules. After this milestone passes, we remove the banner and move the information to the approval rules help text.

Banner

• API: https://docs.gitlab.com/ee/ci/environments/deployment_approvals.html#unified-approval-setting
• Multiple Approval Rules: https://docs.gitlab.com/ee/ci/environments/deployment_approvals.html#multiple-approval-rules

Flow after banner (+1 milestone in the future):

• Full UX Flow with details can be found here.
• Provide users with help text on how to use unified approval rules.
• Note: If a user is selected for an approval rule, we lock the amount of approvals to 1.

Settings Page	Environment Selected	Approvers/Executors Selected

Figma File

Protected environment UI:

• Full UX Flow with details can be found here.

Collapsed	Expanded	Modals

Technical Proposal

1. Update main edit component to handle deployment executor rules
2. Use components shared between this issue and #378445 to implement new form, ideally completely reusable with only inputs for rule type to change behaviour
3. Interact with the protected environment public API to handle updating and deleting of rules
   • will likely need to update api.js to handle basic interaction
4. fetch group and user information via api.js. The required functions should already be in place.

All should be behind a feature flag, protected_environments_multiple_rules_setting_ui. If this flag hasn't been created yet, please do and attach the flag rollout to &9042

This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.