Add the artifact registry repository header
What does this MR do and why?
Renders the header region of the hosted repository detail page: the format logo, the repository name, the visibility control, the Hosted kind badge, and the description, which is left out rather than reserved for when a repository has none.
The detail query document gains the four scalars the region renders (format, kind, visibility, description), so a field arrives with the code and the assertion that need it. The page still reads through the artifact registry tree's local GraphQL layer, so it renders in a browser before the backend schema exists.
The kebab menu and the Copy repository URL action are not here. They carry their own plumbing (the client base URL in the mount data, its provide, and the URL builder) and share no selection with this region, so they land as their own change.
Loading and accessibility
The loading state shows the header's skeleton in place of the page-level spinner. Each region owns one loading affordance as the table and sidebar land, so the page reads as the shape it is about to be rather than as a single spinner, and no later change is left having to remove the spinner.
Two icons carry their own accessible names, because no text in the header states what they mean:
- The format logo takes the format as its
alttext rather than hiding from assistive technology. The repositories list can setaria-hiddenthere because the format renders as adjacent text; the header has none. - The visibility lock sits in a tertiary button with a tooltip and an accessible name, the treatment the repositories list already gives it, so keyboard and touch users reach the label instead of only pointer users on hover.
What needed no change
The typedefs, the mock resolvers, and constants.js are untouched: the repositories list already declares all four scalars on ArtifactRegistryRepository, returns them from the in-memory store, and holds every label and icon map the header renders. No string is new, so locale/gitlab.pot is unchanged.
Feature flag
Behind artifact_registry_ui, which stays disabled. The changelog entry rides the change that defaults it on, so this MR carries none.
Screenshots or screen recordings
| header | header |
|---|---|
| !248296 (merged) | ![]() |
How to set up and validate locally
- Enable the flag:
Feature.enable(:artifact_registry_ui)inrails console. - Visit the artifact registry repositories list for an organization and click a repository name.
- The header renders the format logo, the name, a lock, and the Hosted badge, with the description beneath.
- Tab to the lock. It takes focus and shows its Private tooltip, rather than only responding to hover.
- Open a repository created without a description. The header renders without an empty gap where it would sit.
- Reload the page. The header skeleton renders while the read is in flight, with no separate spinner.
Run the frontend specs under both Vue versions:
yarn jest ee/spec/frontend/packages_and_registries/artifact_registry
VUE_VERSION=3 yarn jest ee/spec/frontend/packages_and_registries/artifact_registryMR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Related to #602639
