Add the artifact registry repository detail route
What does this MR do and why?
Makes the hosted repository detail page reachable. It registers the detail route under the artifact registry SPA base, keyed on the repository name, renders the page's loading, not-found, and service-unavailable states, titles the document after the repository, and turns the repository name in the repositories list into a link to it.
The header, artifact table, and sidebar are not here. This change lays out the two regions they fill, so the page is navigable and reviewable before they land.
The page reads through the artifact registry tree's local GraphQL layer, so it renders in a browser before the backend schema exists. The query document selects name alone, which graphql/cache_config.js keys ArtifactRegistryRepository on. This change renders no repository field, so it selects nothing further; each later change appends the selections it renders.
The breadcrumb trail
The trail renders through an artifact-registry-owned component rather than the shared SpaBreadcrumbs, because that component cannot resolve a dynamic crumb under Vue 3 at all. It targets a crumb as:
const to = route.parent ? { name } : { path: route.path };normalizeRouteRecord in @gitlab/vue-router-vue3 builds records with no parent property, so every matched record takes the path branch and a dynamic crumb links to its own uninterpolated pattern (/:id). The routes also nest here, because the trail comes from $route.matched, which holds ancestors only, and the Repositories crumb has to reach the detail page.
spec/frontend/vue_shared/spa/components/spa_breadcrumbs_spec.js cannot catch this: it mocks $route.matched with plain objects carrying a literal parent: true, a vue-router 3 shape that no longer exists, and asserts the to descriptor rather than a resolved href. The container virtual registries breadcrumbs are affected the same way today. Repairing spa_breadcrumbs.vue and its spec belongs upstream of this change and would let both this component and the AI catalog's equivalent go away. The specs added here assert resolved hrefs against a real router, precisely so the shared component's blind spot is not inherited.
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 |
|---|---|
| When repo is not found | ![]() |
| When repo is found | ![]() |
| Link from repo list page | ![]() |
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.
- Click a repository name. The detail route opens, the breadcrumb trail reads organization / Repositories / repository name, and the document title is the repository name.
- Click the Repositories crumb; it navigates client-side back to the list.
- Visit a repository name that does not exist. The page renders the not-found state, the same one a forbidden repository produces.
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


