Skip to content

Change container registry signed badge to muted and add tooltip

Daniel Tian requested to merge 462667-change-container-registry-signed-badge into master

What does this MR do and why?

On the Deploy -> Container Registry page, a list of image tags are shown:
ksnip_20240520-160800

Tags can be signed with a signature. When they are, a Signed badge shows to the right of the image name. This MR changes the badge from the success variant to muted, and also adds a tooltip on hover:

Before After
ksnip_20240520-160911 ksnip_20240520-160555

How to set up and validate locally

It's extremely involved to set up a local environment to create the signatures and return it in the GraphQL data., so locally, we will mock the GraphQL response rather than go through the lengthy setup process.

Enable the container registry and generate tags

  1. On your local machine, you must set up Docker and a local GitLab runner using the docker executor.
  2. Stop your local GDK.
  3. Edit your config/gitlab.yml file. Find the top-level registry: key and change enabled: false to enabled: true:
registry:
  enabled: true
  1. Start your local GDK. Verify that the last line of output says A container registry is available at 127.0.0.1:5000.
  2. Clone this project locally: https://gitlab.com/dftian/container-signing
  3. Check if the Settings -> Deploy -> Container Registry nav item is shown. If not, try restarting your GDK. This happens because the image is still starting up and is not ready by the time GDK has started. The registry stays running between GDK restarts.
  4. Run a pipeline against the master branch.
  5. Go to Settings -> Deploy -> Container Registry. There should be one registry shown. Click on it. There should be 3 tags shown.

Set up mock response

Please watch this video walkthrough (with audio commentary) on how to mock the responses using the Tweak browser extension:

2024-05-08_16-51-49

Referrers data to paste:

[
  { "artifactType": "application/vnd.dev.cosign.artifact.sig.v1+json", "digest": "sha256sum:1b81b789e3ed3adda80cd471bc1a0b6552c1f84c5321f61a5982f2994d53e521" },
  { "artifactType": "application/vnd.dev.cosign.artifact.sig.v1+json", "digest": "sha256sum:003a048c50d901e4060012598baa45eaf2d6ec8cd791df16c7b46a0a136cc120" }
]

Things to verify

  1. Verify that the Signed badge is shown with a gray background.
  2. Verify that hovering over the badge will immediately show the tooltip.

Related to #462667 (closed)

Merge request reports