Migrate badge form to `GlFormFields`
What does this MR do and why?
Related to #435579 (closed)
Taking over a Community contribution that was not able to be finished - !139997 (closed)
I went down a few rabbit holes on this one and after going back and forth between implementations multiple times this is what I settled on. The previous version of validation didn't play very nicely with GlFormGroup which is why I ended up switching to GlFormFields for frontend validation. There were also a couple other bugs and technical debit that this MR fixes:
- When editing a badge the modal would close even if there were validation errors
- There was
inModalprop that was not needed because we haveisEditingprop. This form is only used in a modal when editing so we know it is in a modal when in edit mode. Guessing at one point it was used other places but that is not the case anymore.
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Group new badge
| Before | After |
|---|---|
![]() |
![]() |
Required fields
| Before | After |
|---|---|
![]() |
![]() |
Invalid fields
| Before | After |
|---|---|
![]() |
![]() |
Group edit badge
| Before | After |
|---|---|
| Screen_Recording_2024-08-09_at_2.15.18_PM | Screen_Recording_2024-08-09_at_2.10.17_PM |
Project new badge
| Before | After |
|---|---|
![]() |
![]() |
Required fields
| Before | After |
|---|---|
![]() |
![]() |
Invalid fields
| Before | After |
|---|---|
![]() |
![]() |
Project edit badge
| Before | After |
|---|---|
| Screen_Recording_2024-08-09_at_2.21.13_PM | Screen_Recording_2024-08-09_at_2.12.29_PM |
How to set up and validate locally
- Go to a group or project ->
Settings->General->Badges - Click
Add new badge - You can use something like
http://gdk.test:3000/jashkenas/Underscore/badges/%{default_branch}/pipeline.svgfor theBadge image URLfield.Linkcan be a URL to anywhere (doesn't really matter for testing) andNamecan be anything.
Edited by Peter Hegman









