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 |
---|---|
How to set up and validate locally
- Navigate to a project's
Security & Compliance > Vulnerability Report
page. - At the bottom of the page, select any value other than
20
in the page size dropdown. - At the top of the page, activate the
Operational vulnerabilities
tab. - In the
Network
development tab, inspect the latestgraphql
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.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #366951 (closed)