Update compliance report and violations filter
What does this MR do and why?
This MR is one of the changes needed to add a filter bar to the new compliance report #299358 (closed):
- Add filter bar !77012 (merged)
- Update compliance report and violations filter. This MR.
👈 - Sync filter with apollo query !78451 (merged)
It makes the following changes:
- Update report empty state to use
GlTable
's empty text. #299358 (comment 807428630) - Update report to only show loading when initializing.
- Update report table to show busy when fetching.
- Update report subheading to include help link. #299358 (comment 810929692)
- Resolve a filter bug where the first change would reset the URL query params.
Note that the report is using a local mock resolver, so apollo will always fetch the same two rows.
Screenshots or screen recordings
Default
Before | After |
---|---|
No results
Before | After |
---|---|
You'll need to apply this patch to fake an empty result because we're using a local resolver.
Patch
diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/report.vue b/ee/app/assets/javascripts/compliance_dashboard/components/report.vue
index 1d1a98f28c1..aa51bcd0e47 100644
--- a/ee/app/assets/javascripts/compliance_dashboard/components/report.vue
+++ b/ee/app/assets/javascripts/compliance_dashboard/components/report.vue
@@ -62,6 +62,7 @@ export default {
};
},
update(data) {
+ return [];
return mapViolations(data?.group?.mergeRequestViolations?.nodes);
},
error(e) {
Loading
Before | After |
---|---|
You'll need to apply this patch to fake the loading state because we're using a local resolver.
Patch
diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/report.vue b/ee/app/assets/javascripts/compliance_dashboard/components/report.vue
index 1d1a98f28c1..8b2957293d8 100644
--- a/ee/app/assets/javascripts/compliance_dashboard/components/report.vue
+++ b/ee/app/assets/javascripts/compliance_dashboard/components/report.vue
@@ -72,6 +72,7 @@ export default {
},
computed: {
isLoading() {
+ return true;
return this.$apollo.queries.violations.loading;
},
hasMergeCommitsCsvExportPath() {
Error
Before | After |
---|---|
You'll need to apply this patch to fake the error state because we're using a local resolver. The screenshot also has the empty state patch applied to better represent a real world error.
Patch
diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/report.vue b/ee/app/assets/javascripts/compliance_dashboard/components/report.vue
index 1d1a98f28c1..449bb0b5c78 100644
--- a/ee/app/assets/javascripts/compliance_dashboard/components/report.vue
+++ b/ee/app/assets/javascripts/compliance_dashboard/components/report.vue
@@ -46,7 +46,7 @@ export default {
data() {
return {
urlQuery: {},
- queryError: false,
+ queryError: true,
violations: [],
showDrawer: false,
drawerMergeRequest: {},
How to set up and validate locally
- You need a GitLab Ultimate license.
- Enable the new feature flag in your terminal:
echo "Feature.enable(:compliance_violations_report)" | rails c
- View the compliance report and verify that the filter syncs with the URL query:
[GDK_HOST]/groups/gitlab-org/-/security/compliance_dashboard
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 #299358 (closed)