Add Vue group general settings form behind feature flag
What does this MR do and why?
Adds a Vue version of the group Settings > General > Naming, description, visibility form, behind the new group_general_settings_vue derisk flag (off by default). The HAML form stays as the fallback. This mirrors the project form (see !261803 (merged), which removes the project flag).
Rollout issue: #634474
Shared components (used by both the project and group forms):
~/groups_projects/components/repository_size_limit_registration_cta.vue(new, CE): the registration features CTA, pulled out ofproject_general_settings.vue.ee/groups_projects/components/repository_size_limit_field.vue: moved fromee/projects/settings/components/, now takes afieldNamePrefix(projectorgroup).~/visibility_level/components/visibility_level_radio_buttons.vue(already used by organizations and new group): gains two optional props:disabledVisibilityLevels: disables individual levels and shows the reason, with adisabled-reasonslot to customize it. Needed because group levels can be disabled individually (admin restriction, parent group, organization, less restrictive child), whichminVisibilityLevelcan't express.name: lets a native form submit the selected level.
AvatarUploadDropzoneis reused as is.
Group form (~/groups/settings/components/group_general_settings.vue): name (with checkGroupNameRules), read-only ID, avatar, description (500 character counter), repository size limit field or CTA, GroupSettingsReadme, and visibility level. One Save button saves everything. Users who can't change the visibility level see it read-only, as in HAML. Data comes from the group_general_settings_data helper (CE plus EE override). The visibility descriptions come from the server, because EE changes the public description on GitLab.com, and the disabled reasons mirror shared/_visibility_radios.html.haml. No new translatable strings.
Backend: Groups::UpdateService now maps an empty or nil avatar param to remove_avatar, matching Projects::UpdateService, so the Vue form can remove the avatar on save. The HAML form never sends an empty avatar, so its behavior doesn't change.
QA: QA::Page::Group::Settings::General now declares the Vue form's group-name-field and save-group-general-settings-button, and click_save_name_visibility_settings_button clicks whichever save button is rendered, so E2E tests pass with the flag on or off. The EE page object also declares the Vue repository-size-limit-field.
| Before | After |
|---|---|
![]() |
![]() |
The "After" screenshot predates moving visibility into the Vue form.
Before marking ready
- Fill in
rollout_issue_urlinconfig/feature_flags/gitlab_com_derisk/group_general_settings_vue.yml(create the rollout issue). - Update the "After" screenshot now that visibility is part of the Vue form.
- Green pipeline.
- Possible conflict with !261803 (merged) in
project_general_settings_spec.js; rebase after whichever merges first. - QA: with the flag on,
save-name-visibility-settings-buttonno longer exists. The whole section saves withsave-group-general-settings-button. QA page objects need updating before rollout.
How to set up and validate locally
Feature.enable(:group_general_settings_vue)- Visit a group's Settings > General page (e.g. https://gdk.test:3000/groups/flightjs/-/edit#js-general-settings)
- Change name, description, avatar (upload and remove), visibility, and, as an admin with a license, the repository size limit, then save.
- Check disabled visibility levels and their reasons: restrict a level in Admin > Settings > General > Visibility and access controls, use a subgroup of a private group, and make a group private while it has a public project.

