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):

1. Add filter bar !77012 (merged)
2. Update compliance report and violations filter. This MR. 👈
3. 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) {

empty.patch

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() {

loading.patch

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: {},

error.patch

How to set up and validate locally

1. You need a GitLab Ultimate license.
2. Enable the new feature flag in your terminal: echo "Feature.enable(:compliance_violations_report)" | rails c
3. 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)