Refactor apollo loadingKey option to computed property
What does this MR do and why?
This MR replaces occurrences of apollo's loadingKey in vulnerability/security components by adding a computed property which returns the apollo query's loading property. The discussion behind refactoring this can be found in the issue #385842 (closed), but boils down to the use of loadingKey being confusing and $apollo.queries.queryName.loading being used everywhere.
Screenshots or screen recordings
| location | screenshot |
|---|---|
vulnerability_finding_modal.vue1
|
|
tool_filter.vue2
|
|
cluster_filter.vue, cluster_filter_deprecated.vue3, image_filter.vue, image_filter_deprecated.vue3
|
|
1to view vulnerability_finding_modal.vue, pipelineSecurityDashboardGraphql feature flag must be true.
2to view tool_filter.vue, refactorVulnerabilityFilters feature flag must be false and you must view the vulnerability report on a group level.
3to view image_filter_deprecated.vue and cluster_filter_deprecated.vue, refactorVulnerabilityFilters feature flag must be false.
How to set up and validate locally
- You need an EE license
- You need runners enabled
- import security reports
vulnerability_finding_modal.vue
- enable pipeline_security_dashboard_graphql feature flag
echo "Feature.enable(:pipeline_security_dashboard_graphql)" | rails c - create an MR by making a small change in security-reports
- check the pipeline and go to the security tab
- set network throttling to fast 3G
- click on any vulnerability
- verify that loading state can be seen
cluster_filter.vue & image_filter.vue
- go to the vulnerability report page of security-reports
- set network throttling to fast 3G
- click the operational vulnerabilities tab
- verify that both cluster and image filter show loading state for a while
cluster_filter_deprecated.vue & image_filter_deprecated.vue
- disable refactor_vulnerability_filters feature flag
echo "Feature.disable(:refactor_vulnerability_filters)" | rails c - go to the vulnerability report page of security-reports
- set network throttling to fast 3G
- click the operational vulnerabilities tab
- verify that both cluster and image filter show loading state for a while
tool_filter.vue
- enable refactor_vulnerability_tool_filter feature flag
echo "Feature.enable(:refactor_vulnerability_tool_filter)" | rails c - set network throttling to fast 3G
- go to the vulnerability report page of flightjs group
/groups/flightjs/-/security/vulnerabilities(or other group with vulnerability report) - verify that the tool filter shows loading state for a while
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.
Closes #385842 (closed)


