Migrate "New group" form to Vue
Background
Currently the "New group" form (https://gitlab.com/groups/new#create-group-pane) is a mixture of Vue/HAML/jQuery. We are in the process of building the form out in Vue for Organizations in #410804 (closed). Once that is complete we should use that Vue form for the main "New group" form to reduce technical debt and have a consistent UX experience across all of GitLab.
Proposal
Use the Vue from build in #410804 (closed) to migrate the from on https://gitlab.com/groups/new#create-group-pane
Implementation guide
- Create a
new_group_app.vue
file inapp/assets/javascripts/groups/components
- Render
app/assets/javascripts/groups/components/new_edit_group_form.vue
- Move the
newSubgroup
logic in app/assets/javascripts/groups/components/group_name_and_path.vue#L314 intoapp/assets/javascripts/groups/components/new_group_form.vue
- Add hidden inputs in
new_group_app.vue
that update with the values fromapp/assets/javascripts/groups/components/new_group_form.vue
. - Mount form in
app/views/groups/_new_group_fields.html.haml
- Update feature specs and QA E2E tests
Edited by Peter Hegman