Defer loading of other versions on package details page
What does this MR do and why?
- Defer loading the version details from backend until user clicks on the other versions tab.
- Move versions GraphQL query from package details query to its own separate query.
- Add apollo options to
package_versions_list.vue
and move pagination methods fromdetails.vue
. - Define apollo merge policy so that cache can be updated.
- Update tests
Why
when the user visits package details page, for other versions
tab, we just need the count. We could thus delay loading the version details when the user clicks on other versions
. This way, if other versions
are not accessed, the versions details are not loaded.
How to set up and validate locally
- Publish more than 20 packages with same name & different versions, as mentioned in https://gitlab.com/gitlab-org/ci-cd/package-stage/package/-/wikis/Packages-Tips-&-Tricks#how-to-create-a-list-of-packages-artificially
-
rails c
- Open the rails console -
p = Project.find(1)
- Find one of your GDK projects. Project id can be found on the project home page -
FactoryBot.create_list(:npm_package, 25, project: p, name: p.name)
- Creates 25 npm packages -
Add this line if above fails during the creation of files
def fixture_file_upload(*args, **kwargs) Rack::Test::UploadedFile.new(*args, **kwargs) end
-
- Visit package registry detail page via groups & projects package list page.
- Click the
Other versions
tab. - Confirm features delete package, bulk deletion, pagination & links work as expected
Screenshots or screen recordings
No change in UI. Uses existing loader to render the loading screen when fetching other versions.
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.
Closes #365231 (closed)
Fixes #381416 (closed)