Badges settings: Move to General and improve onboarding information
Description
Available options on the Settings page of our project/group badges, introduced with GitLab 10.7, are not very obvious from within the settings content.
Unlike other Settings pages, there is no introductory text at all that briefly explains what Badges are and link to documentation (only accessible via placeholders). Screenshot of current page attached.
This was initially brought up by @tauriedavis.
Proposal
@akaemmerle here's where I am so far. One question left unanswered:
- we can move the project badge settings to the general settings because those are in expendable sections. But the general settings on group are not, so it may look strange if we move the badge settings there. Do we still want to do it?
Proposed changes
Both badge settings pages
- input labels should be bold
- the instructions (The variables GitLab supports...) should be a paragraph between the label and the input field
- move the placeholder test (URL examples) outside of input fields
- set
max-width
of the URL input fields to640px
or40rem
(not a width from out range of predefined widths but that's ok) - the 'Add badge' button should be enabled by default, we can remove the grey background behind it, it doesn't seem to serve a purpose
- move the badges (project level) settings to General project settings as an expandable section (between Service Desk and Export project)
- move the badges (group level) settings to General group settings as an expandable section
- Group level only: rename to 'Badges' in the side menu (not 'Project badges'). The thinking behind is that it's the same thing (just on a different level: group instead of project) so it should be called the same.
- the title of the expandable sections should be 'Badges', the description 'Customize your project ('group' for group level) badges. Learn more about badges.' The 'Learn more' link links to Badges docs
- if the user tries submitting the form without filling in the URLs we need to show the following errors bellow the corresponding input fields:
Please fill in the URL to your project path
Please fill in the URL to the badge image
Edited by Matej Latin