Skip to content

Fix "Vulnerability report errors out when users select `Show 100 items` and switch tabs"

What does this MR do and why?

This fixes a bug where the VulnerabilityList component would trigger an unnecessary GraphQL query when the user had selected a custom page size. In addition to hitting the API unnecessarily, the addition query could sometimes cause the backend to throw an error about the maximum query complexity being exceeded. That's likely because both queries were bundled in a single transaction thanks to VueApollo's magic.

The root cause of this is that the VulnerabilityList defines its own default page size (DEFAULT_PAGE_SIZE = 20) when it mounts, but then relies on the LocalStorageSync triggering an event to restore the user-selected size from the local storage. This MR fixes this by ensuring the local storage value is retrieved before VulnerabilityList even renders anything so that we don't have to wait on LocalStorageSync's event.

Screenshots or screen recordings

Before After
Screen_Shot_2022-07-07_at_2.17.47_PM Screen_Shot_2022-07-07_at_2.20.38_PM

How to set up and validate locally

  1. Navigate to a project's Security & Compliance > Vulnerability Report page.
  2. At the bottom of the page, select any value other than 20 in the page size dropdown.
  3. At the top of the page, activate the Operational vulnerabilities tab.
  4. In the Network development tab, inspect the latest graphql transaction.
    • Before those changes, you should see two queries in the same transaction.
    • After those changes, there should be only one query, with the first parameter corresponding to the page size you previously selected.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #366951 (closed)

Edited by Paul Gascou-Vaillancourt

Merge request reports

Loading