Convert group path and name fields from HAML to Vue
What does this MR do and why?
Related to #361816 (closed)
Currently the Group name
and Group URL
fields shown when creating/editing a group are rendered with HAML. They use jQuery to call an API that checks if the path is available. In fact there are two seperate jQuery files that have similar functionality but don't work together super well. This MR refactors these fields to Vue so we can simplify the API call and remove some legacy HAML and jQuery (in follow-up MR).
Future MRs
- Add alert and
Group ID
field that is shown when editing a group. app/views/shared/_group_form.html.haml#L42 - Update functionality so
Group URL
is not updated when typing in theGroup name
field if editing a group - Implement for
Import group
in app/views/groups/_import_group_from_file_panel.html.haml#L25 - Implement for ee/app/views/registrations/groups/new.html.haml#L23
- Remove legacy jQuery and HAML
Screenshots or screen recordings
Create group
Feature flag disabled | Feature flag enabled |
---|---|
Screen_Recording_2022-05-26_at_2.31.37_PM | Screen_Recording_2022-05-26_at_2.21.02_PM |
Create group in admin area
Feature flag disabled | Feature flag enabled |
---|---|
Screen_Recording_2022-05-26_at_2.34.19_PM | Screen_Recording_2022-05-26_at_2.22.42_PM |
Edit group in admin area
Feature flag disabled | Feature flag enabled |
---|---|
Screen_Recording_2022-05-26_at_2.35.12_PM | Untitled__11_ |
How to set up and validate locally
- Enable the
group_name_path_vue
feature flagbin/rails console
Feature.enable(:group_name_path_vue)
- Navigate to
/groups/new#create-group-pane
,/admin/groups/new
or/admin/groups/gitlab-org/edit
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.
Edited by Peter Hegman