Group-level Protected Environments Editable List

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 Editable List View.
• Documentation for the feature.

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.
• This change is behind group_level_protected_environment feature flag, which is disabled by default.
• You can see the walk-through video for the full details.

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

- project: app/views/groups  /protected_environments/_environments_list.html.haml
  group:   app/views/projects/protected_environments/_environments_list.html.haml
- project: app/views/groups  /protected_environments/_protected_environment.html.haml
  group:   app/views/projects/protected_environments/_protected_environment.html.haml
- project: app/views/groups  /protected_environments/_update_deploy_access_level_dropdown.html.haml
  group:   app/views/projects/protected_environments/_update_deploy_access_level_dropdown.html.haml
- project: ee/app/assets/javascripts/group_protected_environments/protected_environment_edit.vue
  group:   ee/app/assets/javascripts/      protected_environments/protected_environment_edit.vue
- project: ee/app/assets/javascripts/group_protected_environments/protected_environment_edit_list.js
  group:   ee/app/assets/javascripts/      protected_environments/protected_environment_edit_list.js
- project: ee/app/assets/javascripts/pages/groups  /settings/ci_cd/show/index.js
  group:   ee/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
- project: ee/app/controllers/ee/groups  /settings/ci_cd_controller.rb
  group:   ee/app/controllers/ee/projects/settings/ci_cd_controller.rb
- project: ee/app/views/groups  /settings/ci_cd/_protected_environments.html.haml
  group:   ee/app/views/projects/settings/ci_cd/_protected_environments.html.haml

Screenshots or screen recordings

Peek_2022-06-09_15-32

How to set up and validate locally

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

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.