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. :artifactId joins the repository node as a third child, declared after the literal edit so that segment stays with the edit form. The crumb and the document title read the artifact id through the meta.idParam seam added in !249715 (merged).
  • Data layer. A new get_artifact.query.graphql reads the repository plus package(id:) or image(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 ArtifactId as a UUID and states that artifact URLs address by ID, unlike repositories, which address by name; the Maven element's artifact_id is 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_registry and harbor_registry both build a shared observable in their mount script, thread it into createRouter, expose it through meta.nameGenerator, and provide it so the page that resolves the name can inject and update it. routeName gains that branch here, so the header, breadcrumb, document title, and page announcement all show com.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.params set, which vue-router 4 rejects for a shorter ancestor route, so each crumb now gets only the params its own path declares. And routeName falls 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 of artifacts_table.vue into utils.js as artifactDisplayName, 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-storybook axe run.

Screenshots or screen recordings

Maven npm (scoped)
maven npm

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

  1. Enable the flag: Feature.enable(:artifact_registry_ui).
  2. Visit /o/<organization>/-/artifact_registry/acme/repositories.
  3. 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)
  4. Confirm the header renders the format logo and display name, and the breadcrumb trail ends with the artifact.
  5. Confirm an unknown artifact id renders the not-found state, and that /payment-core/edit still 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.

Edited by Zack Cuddy

Merge request reports

Loading
Loading