Link the artifact name to its version list

Zack Cuddyrequested to merge
zcuddy-s14-step14-artifact-link into master

What does this MR do and why?

Note

Targets !249847 (merged), which adds the version list route this links to. That one in turn targets !249896 (merged). Both merge first.

This change is behind the feature flag :artifact_registry_ui

The repository detail table lists a repository's artifacts, but the version list added in the prior step is reachable only by typing a URL. The artifact name in that table becomes a link onto it, the same way the repositories list already links a repository name onto its detail page.

Artifact Registry addresses an artifact by an opaque UUID, unlike a repository, which it addresses by name. The link therefore carries a UUID in the route params, while the breadcrumb, document title, page header, and announcement region on the destination all show the artifact's display name.

Changes

  • The name cell becomes a link. artifacts_table.vue renders #cell(name) as a router-link to ARTIFACT_VERSIONS_ROUTE_NAME, built from a new name prop and the artifact's id.
  • The repository name arrives as a prop, not from the route. vue-router returns early for named targets in normalizeLocation, so a named-route to does not inherit the current route's params and id has to be supplied. artifacts_section.vue already holds the repository name for the empty state, so it passes it down and the table stays free of route reads. repositories_table.vue builds its detail route the same way.
  • The link is an ordinary link, not the prototype's treatment. The design proposal renders the artifact name as gray-900 semibold text that only turns blue and underlined on hover. The merged repositories list renders the repository name against that same prototype treatment as a plain link, so this follows the merged table: the two registry tables stay consistent and the affordance stays discoverable.
  • Jest asserts every row of all four formats links to the versions route with the right params, and that the section hands the table its name.

Nothing changed on the GraphQL side: id is already selected by get_repository_packages.query.graphql and get_repository_images.query.graphql.

Screenshots or screen recordings

Before After
before after

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 each of the four seeded repositories: payment-core (Maven), ui-components (npm), payment-service (Docker), oci-artifacts (OCI).
  4. Click an artifact name and confirm it opens the version list, that the URL carries the artifact's UUID, and that the breadcrumb, document title, and page header all show the display name.
  5. Confirm the browser Back button returns to the detail table.

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.

Merge request reports