Migrate project general settings to Vue

What does this MR do and why?

Migrate project general settings to Vue:

  • Adds Project::MAX_DESCRIPTION_LENGTH constant (for description chars limit)
  • Updates project description validation to use constant
  • Creates Vue component for project general settings with:
    • Project name, description, and topics fields
    • Client-side project name validation (required, start character, allowed characters)
    • Avatar upload with file validation (use shared component)
    • Description field with counter with inline validation (including over-limit state for legacy descriptions)
    • Repository size limit field (EE feature, loaded via ee_component)
  • Adds inline avatar validation in AvatarUploadDropzone.vue:
    • File size limit (200 KiB)
    • File type validation (png, jpg, jpeg, gif, bmp, tiff, ico, webp)
    • Immediate error feedback to users
  • Adds image/webp to AvatarUploader::MIME_ALLOWLIST so webp avatars are accepted server-side
  • Updates Projects::UpdateService to handle avatar removal via CarrierWave's remove_avatar virtual attribute (removal happens after validations pass)
  • Extracts view data into project_general_settings_data helper with an EE override for license-gated keys
  • Adds comprehensive test coverage

The registration features "Enable Service Ping and register for this feature." link is now gated on can_admin_all_resources? (admin-mode aware) instead of plain current_user.admin?, in both the new helper and the legacy partial. On instances with admin mode enabled, admins must be in admin mode to see the link (which points at admin-area settings that require admin mode anyway).

Feature flag

The Vue form is behind the project_general_settings_vue feature flag (gitlab_com_derisk, disabled by default). With the flag disabled the previous server-rendered HAML form is used, so the swap can be rolled back operationally without a revert.

Rollout issue: #608582

The legacy form, initTopicsTokenSelector/initProjectNameValidation wiring, the classification policy partial, and the Projects::AvatarsController#destroy UI path will be removed together with the flag.

Screenshots or screen recordings

Before After
before after
before_avatar after_avatar
before_desc after_desc

How to set up and validate locally

  1. Enable the feature flag: Feature.enable(:project_general_settings_vue)
  2. Go to project settings, e.g. https://gdk.test:3000/gitlab-duo/test/edit
  3. Disable the flag to verify the legacy form still works: Feature.disable(:project_general_settings_vue)

Considerations (Out of scope for this MR)

Migration of group settings page. This will be a follow-up MR to migrate and align both settings pages accordingly.

Edited by Sascha Eggenberger

Merge request reports

Loading
Loading