Skip to content

Add "Load more" pagination support for related vulnerabilities container

In Add related vulnerabilities container to issue ... (#519695 - closed), initially only maximally 25 related vulnerabilities are loaded. If there are more related vulnerabilities we only want to show/load them by clicking a "Load more" button:

Screenshot_2025-04-09_at_15.02.53

See #519695 (comment 2445968118) for more UI guidance

Implementation details

  1. Add "Load more" button if there is a next page. Use app/assets/javascripts/work_items/components/shared/work_item_children_load_more.vue or for inspiration.
  2. While initially loading 25 results, clicking "Load more" fetches 50 results each time
  3. If we have a next page, add > before the counter in the badge, to indicate there are more than x related vulnerabilities

Verification steps

  1. Go to https://gitlab.com/gitlab-org/govern/threat-insights-demos/verification-projects/verify-related-vulnerabilities-work-item-widget/-/issues/5, this issues has 200 attached vulnerabilities
  2. Verify it only shows 25 vulnerabilities at first, and shows a "Load more" button at the bottom of the container
  3. Click the button and verify it shows a loading icon while fetching
  4. Verify it loads 50 more related vulnerabilities and updates the counter
  5. Set network to offline, click "Load more" and verify it shows an alert "Something went wrong while fetching more related vulnerabilities."
  6. Turn network online, and click "Load more" a couple more times until 200 vulnerabilities are loaded, verify it does not show the button anymore.
Edited by Lorenz van Herwaarden