Skip to content

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

  1. Add alert and Group ID field that is shown when editing a group. app/views/shared/_group_form.html.haml#L42
  2. Update functionality so Group URL is not updated when typing in the Group name field if editing a group
  3. Implement for Import group in app/views/groups/_import_group_from_file_panel.html.haml#L25
  4. Implement for ee/app/views/registrations/groups/new.html.haml#L23
  5. 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

  1. Enable the group_name_path_vue feature flag
    • bin/rails console
    • Feature.enable(:group_name_path_vue)
  2. 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.

Edited by Peter Hegman

Merge request reports