Migrate project general settings to Vue
What does this MR do and why?
Migrate project general settings to Vue:
- Adds
Project::MAX_DESCRIPTION_LENGTHconstant (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/webptoAvatarUploader::MIME_ALLOWLISTso webp avatars are accepted server-side - Updates
Projects::UpdateServiceto handle avatar removal via CarrierWave'sremove_avatarvirtual attribute (removal happens after validations pass) - Extracts view data into
project_general_settings_datahelper with an EE override for license-gated keys - Adds comprehensive test coverage
Behavior change: Service Ping settings link visibility
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 |
|---|---|
![]() |
![]() |
![]() |
![]() |
How to set up and validate locally
- Enable the feature flag:
Feature.enable(:project_general_settings_vue) - Go to project settings, e.g. https://gdk.test:3000/gitlab-duo/test/edit
- 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.



