Deployment Approval Rules in Group-level protected environments setting UI
What does this MR do and why?
This MR updates the protected environments settings Vue app to serve on both project and group levels. Note: the actual switch for the new Vue app on the group level happens in a separate MR: !158052 (merged).
Within this MR, we update the Vue app to handle entity_type and entity_id props, we create some conditional logic for these cases and update the actions to call the correct endpoints.
We update the group access_dropdown to handle not only the sub-groups but also the roles and members of the group.
This Vue app is already used for the project-level settings, which should not change.
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Screenshots are required for UI changes, and strongly recommended for all other merge requests.
| Before | After |
|---|---|
 |
 |
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
- Note: this is an EE feature, you'll need a license to verify it locally
- Validate the project-level view works as expected:
- Visit Project -> Settings -> CI/CD
- Select Protected environments section
- Verify the settings: you should be able to select an environment, the list of deployers and approvers (could be roles, related groups, or users), save / edit / unprotect an environment.
- Validate the group-level view works as expected:
- Visit Group -> Settings -> CI/CD
- Select Protected environments section
- Verify the settings: you should be able to select an environment tier, the list of deployer groups, and save / edit / unprotect an environment.
Related to #362236 (closed)