Improve graphql full code quality report UX
What does this MR do and why?
We want to transition the full code quality report feature to GraphQL to allow it to pull data from multiple code quality reports.
This MR makes the GraphQL version of the full code quality report use a smart query within the component (instead of loading GraphQL data into the store via an action).
This MR also uses infinite scrolling for this view because our UX guidance recommends it for long lists without sorting/filtering functionality, and because it lessens the impact of the slower page loads we're seeing with GraphQL compared to the old download-the-artifact approach.
Things to fix:
-
this approach loads the data significantly slower than the old method, especially when navigating between pages of issues, partially due to lack of caching -
the vue app doesn't get initialized when navigating to the Code Quality tab after loading the pipeline page on a different tab (Jobs, Tests, etc.)
Screenshots or screen recordings
| before (artifact based, feature flag off) | after (graphql based, feature flag on) |
|---|---|
| Screen_Recording_2021-10-20_at_09.47.31 | Screen_Recording_2021-10-20_at_11.25.30 |
How to set up and validate locally
git checkout 328257-try-to-improve-loading-and-caching- clone this test project
- run a pipeline that generates a code quality artifact
- navigate to that pipeline's Code Quality tab and scroll/click through pages of issues (artifact based, feature flag off)
echo "Feature.enable(:graphql_code_quality_full_report)" | rails c- refresh the page and scroll/click through pages of issues (graphql based, feature flag on)
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 #328257 (closed)