Skip to content

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

  1. In project settings, include an area where owners and admins can set badges.
  2. It should be possible to add badges, by providing a badge image URL and hyperlink
  3. It should be possible to edit badges
  4. It should be possible to remove badges
  5. Display badges in the project description
  6. Badges should support variable substitution in both the URL and image
  • %{project_path}
  • %{project_id}
  • %{default_branch}
  • %{commit_sha}
  1. 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

Screen_Shot_2017-12-15_at_18.23.16

Designs

  • If the badge is created at the group level, it has the Group badge label.
  • If the badge is created at the project level, it has the Project badge label.
  • 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
project-badges project-badges--spinner
Editing
  • After clicking Edit button on the badges list, you are brought to the "Edit" page.
  • On "Edit" page, you can change the Link and Badge 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
project-badges--preview project-badges--edit
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.

project-badges--modal

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.

image

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.

project-badges--errors

Links / references

This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.

Edited by 🤖 GitLab Bot 🤖