Project badges
Description
Many projects use badges, such as shields.io to reflect status of build, code quality, community and other such items. These are usually added as part of a README.
It should be possible to make badges a first-class citizen of a project and display them prominently in the project's description.
Proposal
- In project settings, include an area where owners and admins can set badges.
- It should be possible to add badges, by providing a badge image URL and hyperlink
- It should be possible to edit badges
- It should be possible to remove badges
- Display badges in the project description
- Badges should support variable substitution in both the URL and image
- %{project_path}
- %{project_id}
- %{default_branch}
- %{commit_sha}
- Badges should support positioning so the order of the position can be set. The UI for this will be completed in another issue, but the backend should support it initially to make future work easier.
- When adding a new badge, set the position value to the next highest value
- Order return and display of badges by position
Conceptual screenshot of project page
Designs
- If the badge is created at the group level, it has the
Group badgelabel. - If the badge is created at the project level, it has the
Project badgelabel. - Group badges are not editable on project badges page.
- The help text under the input field: "The variables GitLab supports: ..."
- "variables" links to the document of the variables GitLab supports.
- The document doesn't exist yet.
- The badge image preview shows up after a user stop typing in the input fields for
1.5 secs.
| 01 - Default | 02 - Loading the badge image to preview |
|---|---|
 |
 |
Editing
- After clicking
Editbutton on the badges list, you are brought to the "Edit" page. - On "Edit" page, you can change the
LinkandBadge image link. - If there is no link in the "Badge image link" field, it will show "No image to show" in the "Badge image preview".
- The "Save changes" button is disabled until you changed the existing setting.
| 03 - Finished the badge image load | 04 - Edit an existing badge |
|---|---|
 |
 |
Delete badges
- Clicking "Delete" button, and then it will have a modal to confirm with users.
- Providing the badge image in the modal to help users know which badge they are about to remove.
- Copy:
- Header:
Delete badge? - Body:
You are going to delete this badge. Deleted badges cannot be restored.
Labels for differentiating project badges and group badges
We will allow users to create the badges on the group level(https://gitlab.com/gitlab-org/gitlab-ce/issues/41176), so we need to provide a way to help users differentiate the badges.
Errors
There are three types of error:
Adding the badge failed, please check the Badge link and Badge image link and try again.Saving the badge failed, please check the Badge link and Badge image link and try again.Deleting the badge failed, please try it again.
