Support creating of deployment approval rules in project-level protected environments settings UI

Problem

We have had API-basis support for multiple approval rules implemented in #345678 (closed), but similar to #362236 (closed) 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 creation of approval rules in the project-level protected environments settings UI.

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

• Use the access_dropdown for level selection.
• use gitlab ui form components for inputs, buttons
• remove the input that maps to requiredApprovalCount, moving it to the per-rule section as per design
• vueify card. behaviour is currently described in protected_environment_create.js, but will be much easier to recreate and maintain in vue, as we can take advantage of the access_dropdown.vue as well as the various environment dropdowns (environments_dropdown.vue, ci_environments_dropdown.vue) (long-term consider making a reusable one to replace all three with), would also solve #375781 (closed)
  • this means creating an entry point in ee/app/views/projects/protected_environments/_form.html.haml, moving the card body to vue.
  • also means using axios to post creation and definining protected environment endpoints in ee/app/assets/javascripts/api.js, see api docs for approval rule creation format

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.