Address the repositories list design review

What does this MR do and why?

Three changes the design review on the merge request that added the repositories table asked for, plus one consistency fix that fell out of them.

  1. OCI stops borrowing the Docker logo. They are separate formats in the list, and the logo is the only thing telling them apart at a glance, so standing OCI in on the Docker asset named the wrong thing. An OCI logo is waiting on Linux Foundation trademark approval, so until that lands OCI falls back to the letter avatar a group or project without one uses, per the designer's suggestion in the thread.
  2. The list reads the logo at 32px rather than 16px. Most of the assets are wordmarks that fit the width of their box rather than its height, so at 16px they rendered a few pixels tall and were illegible.
  3. The visibility icon leaves the list. The closed beta supports private only, so the icon repeated one value down the whole list and told a reader nothing that distinguished one row from another. The detail page still states it, where the value belongs to the one repository on screen.
  4. Both page headings render the logo at one size (48px). The detail heading already did; the edit heading rendered it at 32x22 inside a bordered 40px tile, to hold a wordmark wider than it is tall.

A format renders its logo in four places, so the fallback lives in a new shared FormatLogo component rather than a branch at each of them. That component gives every logo a square box it fits at its own aspect ratio, which is what the edit heading's tile was there to do, so the tile goes.

On the "extra padding" in the proposal

The proposal expected the 32px logo to need extra cell padding for the rows to line up. Measured in the browser, it does not: every td already carries 16px of vertical padding and vertical-align: middle from the existing cell class, so the taller logo lands in a 65px row with its content centred and nothing misaligned. Adding padding would only make the rows taller, so CELL_CLASS is unchanged.

Accessibility

The logo is decorative in every caller, because the fallback avatar renders itself aria-hidden and takes no alternative text of its own: a logo that named its format would announce it for Docker, Maven, and npm and drop it silently for OCI. The detail heading is the only place where no text states the format, so it supplies that name in a gl-sr-only span instead.

Screenshots or screen recordings

Before After
Repositories list Screenshot_2026-08-04_at_11.09.55_pm
Repository detail (OCI) Screenshot_2026-08-04_at_11.10.22_pm
Edit repository (OCI) Screenshot_2026-08-04_at_11.10.02_pm

How to set up and validate locally

The feature is behind the default-off artifact_registry_ui flag and the repositories are backed by runtime Apollo mock resolvers, so no Artifact Registry service is needed.

  1. echo "Feature.enable(:artifact_registry_ui)" | bundle exec rails console
  2. Visit /o/<organization>/-/artifact_registry/acme/repositories.
  3. Create one hosted repository per format. Create them without reloading the page in between: the mock resolvers hold the list in module state, so a full reload empties it.
  4. Check the list, then each repository's detail and edit pages. OCI renders the letter avatar; the other three render their logos.

MR acceptance checklist

  • Tests: ee/spec/frontend/packages_and_registries/artifact_registry passes under both Vue 2 and VUE_VERSION=3 (284 tests). The new component has its own spec; the four specs that asserted logo src now assert the props they pass to it.
  • Changelog: none. The feature sits behind a default-off feature flag.
  • Documentation: none. The feature is not documented yet.
  • Database, migrations, security-sensitive paths: not touched. Frontend only.

References

Edited by Rahul Chanila

Merge request reports

Loading
Loading