Convert group project form to vue

What does this MR do and why?

Right now a lot of the javascript functionality on the ee/app/views/registrations/groups_projects/new.html.haml path is in vanilla javascript. This makes it hard to share/reuse and maintain in our current Vue component ecosystem. Convert specific javascript concepts in that form to use Vue components instead. This does not mean converting the whole form to Vue. We should be selective here, if possible, and convert the needed parts only.

Screenshots or screen recordings

before after
Screenshot_2023-04-12_at_10.38.21 Screenshot_2023-04-12_at_10.41.45
Screenshot_2023-04-12_at_10.38.30 Screenshot_2023-04-12_at_10.41.57

How to set up and validate locally

  • Export this environment variable to simulate a SaaS instance
  • Sign in as root. Disable user confirmation during sign up.
  • Sign out. Go to /users/sign_up and fill up the form, continue.
  • On the next page choose Just me, Create a new project.
  • Fill the rest of the form and continue.
  • On create group/project page make sure form works as expected.
  • Submit and finish onboarding.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #372453 (closed)

Edited by Serhii Yarynovskyi

Merge request reports

Loading