Skip to content

Defer loading of other versions on package details page

Rahul Chanila requested to merge 365231-package-details-page-add-loader-for-other-versions-tab into master

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 from details.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

  1. 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

    1. rails c - Open the rails console

    2. p = Project.find(1) - Find one of your GDK projects. Project id can be found on the project home page

    3. FactoryBot.create_list(:npm_package, 25, project: p, name: p.name) - Creates 25 npm packages

    4. Add this line if above fails during the creation of files

       def fixture_file_upload(*args, **kwargs)
   Rack::Test::UploadedFile.new(*args, **kwargs)
 end
  2. Visit package registry detail page via groups & projects package list page.
  3. Click the Other versions tab.
  4. 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.

Closes #365231 (closed)

Fixes #381416 (closed)

Edited by Rahul Chanila

Merge request reports