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 of project_general_settings.vue.
  • ee/groups_projects/components/repository_size_limit_field.vue: moved from ee/projects/settings/components/, now takes a fieldNamePrefix (project or group).
  • ~/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 a disabled-reason slot to customize it. Needed because group levels can be disabled individually (admin restriction, parent group, organization, less restrictive child), which minVisibilityLevel can't express.
    • name: lets a native form submit the selected level.
  • AvatarUploadDropzone is 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
before after

The "After" screenshot predates moving visibility into the Vue form.

Before marking ready

  • Fill in rollout_issue_url in config/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-button no longer exists. The whole section saves with save-group-general-settings-button. QA page objects need updating before rollout.

How to set up and validate locally

  1. Feature.enable(:group_general_settings_vue)
  2. Visit a group's Settings > General page (e.g. https://gdk.test:3000/groups/flightjs/-/edit#js-general-settings)
  3. Change name, description, avatar (upload and remove), visibility, and, as an admin with a license, the repository size limit, then save.
  4. 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.
Edited by Sascha Eggenberger

Merge request reports

Loading
Loading