Skip to content

Enable frontend routing for package details

What does this MR do and why?

This MR fully enables vue-router in the package details page (and the list) in particular:

  • We are using registry breadcrumb to enable frontend navigation in the breadcrumb
  • We are telling rails to always load the code from the index route
  • We use router-link to navigate

We are also removing most of the old code and updating QA and feature specs

Impact

The impact in the UI is mostly on performance: we can now cache the data loaded between list/detail page navigation and we do not need to issue another call when navigating around

The other change is how the breadcrumb is generated, previously we would have [name] > [version] as two separated links where the version would point to the actual package and name to the list page (of all the packages 😕) while now we have [name] v [version] as a single link that points to the actual page.

Important note

Deleting a package from the details page still triggers a full page navigation, this will be addressed in a separate issue: #349904

Screenshots or screen recordings

Before After
PackageOld-walkthrough Package-vue-router-walkthrough
Screenshot_2022-01-10_at_17.28.52 Screenshot_2022-01-10_at_17.15.55

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Enable the package registry
  2. Load some packages: https://gitlab.com/gitlab-org/ci-cd/package-stage/package/-/wikis/Packages-Tips-&-Tricks
  3. Go to the package registry and navigate around

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #347409 (closed)

Edited by Nicolò Maria Mezzopera

Merge request reports