Add the artifact registry version list route
What does this MR do and why?
Note
Targets !249896 (merged), which moves document-title ownership from the router hook to the app shell. That MR is behaviour-preserving and reviewable on its own; this one builds the version list on top of it. Merge that first.
This change is behind the feature flag :artifact_registry_ui
The repository detail table lists a repository's artifacts, but nothing opens one. This registers the page an artifact opens onto — the artifact version list — with its header, its data layer, and its loading, not-found, and error states. The versions and manifests tables come in later steps; this is the route and the shell they render into.
Changes
- Route.
:artifactIdjoins the repository node as a third child, declared after the literaleditso that segment stays with the edit form. The crumb and the document title read the artifact id through themeta.idParamseam added in !249715 (merged). - Data layer. A new
get_artifact.query.graphqlreads the repository pluspackage(id:)orimage(id:), whichever the format carries, with local typedefs and resolvers behind it. Both fields are selected together because the format is not known until the repository resolves. - Seeded artifact ids are the opaque UUIDs the contract carries. Artifact Registry
types
ArtifactIdas a UUID and states that artifact URLs address by ID, unlike repositories, which address by name; the Maven element'sartifact_idis documented as a coordinate and not an identifier. The route therefore carries a UUID. - The name behind that id reaches the trail and the title the way it does in the sibling
registry SPAs.
google_artifact_registryandharbor_registryboth build a shared observable in their mount script, thread it intocreateRouter, expose it throughmeta.nameGenerator, and provide it so the page that resolves the name can inject and update it.routeNamegains that branch here, so the header, breadcrumb, document title, and page announcement all showcom.company.payment:core; only the URL shows the id. - Two fixes fall out of the second dynamic segment. Every crumb was handed the whole
$route.paramsset, which vue-router 4 rejects for a shorter ancestor route, so each crumb now gets only the params its own path declares. AndrouteNamefalls back with||rather than??, matching the shared registry breadcrumb — an unresolved name is the empty string a pending read produces, which??would accept and leave the page nameless. artifactName()moves out ofartifacts_table.vueintoutils.jsasartifactDisplayName, since the header and the table have to agree on it.- Jest coverage for the four states across all four formats, the route, the resolvers, and
the helper, plus a Storybook story per state for the
test-storybookaxe run.
Screenshots or screen recordings
| Maven | npm (scoped) |
|---|---|
![]() |
![]() |
The header matches the design proposal's version list: format logo, the artifact's display name, and a trail of Repositories / repository / artifact.
How to set up and validate locally
- Enable the flag:
Feature.enable(:artifact_registry_ui). - Visit
/o/<organization>/-/artifact_registry/acme/repositories. - Open a repository, then append the artifact id to the URL — the detail table does not
link to it yet, which is the next step:
The seeded ids are sequential UUIDs, assigned in seed order:
/payment-core/01937b2e-0000-7000-8000-000000000001(Maven)/payment-service/01937b2e-0000-7000-8000-000000000026(Docker)/ui-components/01937b2e-0000-7000-8000-000000000050(npm, scoped)/oci-artifacts/01937b2e-0000-7000-8000-000000000053(OCI)
- Confirm the header renders the format logo and display name, and the breadcrumb trail ends with the artifact.
- Confirm an unknown artifact id renders the not-found state, and that
/payment-core/editstill opens the edit form.
MR 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.

