Skip to content

Switch vulnerability report from infinite scrolling to pagination

Currently on the vulnerability report, if the user navigates away from the page and clicks the back button to go back to it, the vulnerability list will always start at the top. This means that the user loses their place in the list if they loaded additional pages and was in the middle of it.

We want to switch the vulnerability from infinite scrolling to pagination so that we can bring the user back to the same place they were when they navigated away from it. The pagination should only have the Prev and Next buttons centered on the page, similar to how it's shown for the Issues page:
ksnip_20220114-031957

Implementation Plan

  • Create a user-level feature flag for the pagination. We still have a bunch of unanswered questions regarding how bulk select would work with pagination, so we want to put it behind a feature flag and enable it for a few users so that we can examine how it works on production.
  • Add the Prev and Next buttons. Wire them up to the before and after GraphQL properties in pageInfo. If before and after are undefined, then the respective button should be disabled.
  • Save/restore the page and sort on the URL. When the user clicks Next, &after=cursor should be saved, and when they click Prev, &before=cursor should be saved.

How to verify

  1. Go to any vulnerability report. Verify that it infinitely scrolls, loading additional vulnerabilities when you reach the bottom of the page.

  2. Enable the :vulnerability_report_pagination feature flag. Refresh the vulnerability report. Verify that the Back/Forward buttons are shown at the bottom of the vulnerability list.

  3. Verify that clicking on the back/forward buttons will load the previous/next page of vulnerabilities with no gaps (e.g. page 1 is items 1 to 20, page 2 is items 21 to 40, etc).

  4. Verify that the back/forward buttons are disabled when the vulnerabilities are loading, and can't be clicked on.

  5. Verify that the first page of results will disable the back button, and the last page of results will disable the next button.

  6. Verify that refreshing the page or copying the URL into a new tab will remember which page you were last on.

Edited by Daniel Tian