Group-level Protected Environments Creation form

What does this MR do and why?

This MR is a vertical slice for Group-level UI for Protected Environment settings feature. It adds the following changes:

• Group-level Protected Environments Creation form.
• Access Dropdown for the subgroup selection.

A few notes for reviewers:

• These frontend change is basically a clone of Project-level Protected Environment setting UI. In this iteration, we'll clone the existing UI/UX as-is in the spirit of iteration. Any significant UI/UX change proposal would likely be pushed to a follow-up issue to be scheduled in the next milestone.
• The created entries will be visible and editable in the UI in the next MR i.e. this MR covers creation only. You can see the walk-through video for the full details.
• This change is behind group_level_protected_environment feature flag, which is disabled by default.

Clone mapping (for reviewing the diff of project-level VS group-level components)

- project: ee/app/controllers/ee/projects/settings/ci_cd_controller.rb
  group:   ee/app/controllers/ee/  groups/settings/ci_cd_controller.rb
- project: ee/app/views/projects/settings/ci_cd/_protected_environments.html.haml
  group:   ee/app/views/  groups/settings/ci_cd/_protected_environments.html.haml
- project: app/views/projects/settings/ci_cd/show.html.haml
  group:   app/views/  groups/settings/ci_cd/show.html.haml
- project: ee/app/assets/javascripts/      protected_environments/protected_environment_create.js
  group:   ee/app/assets/javascripts/group_protected_environments/protected_environment_create.js
- project: ee/app/assets/javascripts/      protected_environments/constants.js
  group:   ee/app/assets/javascripts/group_protected_environments/constants.js
- project: ee/app/views/projects/protected_environments/_form.html.haml
  group:   ee/app/views/  groups/protected_environments/_form.html.haml
- project: ee/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
  group:   ee/app/assets/javascripts/pages/  groups/settings/ci_cd/show/index.js
- project: app/assets/javascripts/projects/settings/init_access_dropdown.js
  group:   app/assets/javascripts/  groups/settings/init_access_dropdown.js
- project: app/assets/javascripts/projects/settings/constants.js
  group:   app/assets/javascripts/  groups/settings/constants.js
- project: app/assets/javascripts/projects/settings/components/access_dropdown.vue
  group:   app/assets/javascripts/  groups/settings/components/access_dropdown.vue
- project: app/assets/javascripts/projects/settings/api/access_dropdown_api.js
  group:   app/assets/javascripts/  groups/settings/api/access_dropdown_api.js

Screenshots or screen recordings

You can see the walk-through video for the full details, or the PoC MR about the prospect code changes to complete the feature.

Manual QA on this specific MR

Peek_2022-06-03_16-07

How to set up and validate locally

You can see the walk-through video for the full details, or the PoC MR about the prospect code changes to complete the feature.

How to setup in this specific MR

1. Enable group_level_protected_environment feature flag
2. Enable Premium license
3. Create top-level group XYZ-org
4. Create subgroup XYZ-org/operator-group
5. Create subgroup XYZ-org/qa-group
6. Visit XYZ-org > Settings > CI/CD > Protected environments
7. Select Environment
8. Select XYZ-org/operator-group in Allowed to deploy dropdown
9. Click Protect button

How to see the created entry in this specific MR

bundle exec rails console

ProtectedEnvironment.last
ProtectedEnvironment.last.group
ProtectedEnvironment.last.deploy_access_levels
ProtectedEnvironment.last.deploy_access_levels.map(&:group)

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.