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 [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 (closed)
Screenshots or screen recordings
Before | After |
---|---|
PackageOld-walkthrough | Package-vue-router-walkthrough |
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
- Enable the package registry
- Load some packages: https://gitlab.com/gitlab-org/ci-cd/package-stage/package/-/wikis/Packages-Tips-&-Tricks
- 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.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #347409 (closed)