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:
See #519695 (comment 2445968118) for more UI guidance
Implementation details
- Add "Load more" button if there is a next page. Use
app/assets/javascripts/work_items/components/shared/work_item_children_load_more.vueor for inspiration. - While initially loading 25 results, clicking "Load more" fetches 50 results each time
- If we have a next page, add
>before the counter in the badge, to indicate there are more than x related vulnerabilities
Verification steps
- 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
- Verify it only shows 25 vulnerabilities at first, and shows a "Load more" button at the bottom of the container
- Click the button and verify it shows a loading icon while fetching
- Verify it loads 50 more related vulnerabilities and updates the counter
- Set network to offline, click "Load more" and verify it shows an alert "Something went wrong while fetching more related vulnerabilities."
- 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
