Merge branch 'sf/feature/toggle-new-adherencereportv2-515164' into 'master'

Toggle between Old and New Standards Report

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/183694



Merged-by: Evan Read <eread@gitlab.com>
Approved-by: Nate Rosandich <nrosandich@gitlab.com>
Approved-by: Illya Klymov <iklymov@gitlab.com>
Approved-by: Evan Read <eread@gitlab.com>
Reviewed-by: Evan Read <eread@gitlab.com>
Co-authored-by: Sam Figueroa <sfigueroa@gitlab.com>

ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/report.vue

 <script>
-import { GlSprintf, GlAlert, GlLink } from '@gitlab/ui';
+import { GlSprintf, GlAlert, GlLink, GlToggle } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import {
   FEEDBACK_ISSUE_URL,
@@ -7,11 +7,14 @@ import {
 } from 'ee/compliance_dashboard/constants';
 import { s__ } from '~/locale';
 import ComplianceStandardsAdherenceTable from './standards_adherence_table.vue';
+import ComplianceStandardsAdherenceTableV2 from './standards_adherence_table_v2.vue';
 
 export default {
   name: 'ComplianceStandardsAdherenceReport',
   components: {
     ComplianceStandardsAdherenceTable,
+    ComplianceStandardsAdherenceTableV2,
+    GlToggle,
     GlAlert,
     GlLink,
     GlSprintf,
@@ -33,6 +36,7 @@ export default {
   data() {
     return {
       showBanner: this.adherenceV2Enabled,
+      showNewReport: this.adherenceV2Enabled,
     };
   },
   mounted() {
@@ -40,9 +44,18 @@ export default {
       property: this.activeComplianceFrameworks ? 'with_active_compliance_frameworks' : '',
     });
   },
+  methods: {
+    updateReportVersion(value) {
+      this.track('toggle_standards_adherence_report_version');
+      this.$emit('changed', 'report_version', {
+        showNewReport: value,
+      });
+      this.showNewReport = !this.showNewReport;
+    },
+  },
   i18n: {
     feedbackTitle: s__(
-      "AdherenceReport|We've updated the Adherence Report with new features to enhance your compliance workflow.",
+      "AdherenceReport|We've updated the adherence report with new features to enhance your compliance workflow.",
     ),
     learnMoreDocsText: s__(
       'AdherenceReport|Learn more about the changes in our %{linkStart}documentation%{linkEnd}.',
@@ -50,6 +63,7 @@ export default {
     feedbackText: s__(
       'AdherenceReport|Have questions or thoughts on the new improvements we made? %{linkStart}Please provide feedback on your experience%{linkEnd}.',
     ),
+    toggleLabel: s__('AdherenceReport|Show old report'),
   },
   FEEDBACK_ISSUE_URL,
   STANDARDS_ADHERENCE_DOCS_URL,
@@ -74,7 +88,25 @@ export default {
           </template>
         </gl-sprintf>
       </div>
+      <div class="gl-mt-4 gl-flex gl-items-center">
+        <span class="gl-mr-3">{{ $options.i18n.toggleText }}</span>
+        <gl-toggle
+          :value="!showNewReport"
+          :label="$options.i18n.toggleLabel"
+          label-position="left"
+          @change="updateReportVersion"
+        />
+      </div>
     </gl-alert>
-    <compliance-standards-adherence-table :group-path="groupPath" :project-path="projectPath" />
+    <compliance-standards-adherence-table-v2
+      v-if="showNewReport"
+      :group-path="groupPath"
+      :project-path="projectPath"
+    />
+    <compliance-standards-adherence-table
+      v-else
+      :group-path="groupPath"
+      :project-path="projectPath"
+    />
   </div>
 </template>

ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/standards_adherence_table_v2.vue

+<script>
+import { s__ } from '~/locale';
+import AdherencesBaseTable from './base_table.vue';
+
+export default {
+  name: 'ComplianceStandardsAdherenceTableV2',
+  components: {
+    AdherencesBaseTable,
+  },
+  props: {
+    groupPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      filters: {},
+    };
+  },
+  computed: {},
+  methods: {},
+  i18n: {
+    newReport: s__('ComplianceStandardsAdherenceV2|New Report Placeholder'),
+  },
+};
+</script>
+
+<template>
+  <section>
+    <div class="gl-mt-3 gl-bg-alpha-dark-6 gl-p-4">
+      <h2>{{ $options.i18n.newReport }}</h2>
+    </div>
+    <adherences-base-table :group-path="groupPath" :filters="filters" :project-path="projectPath" />
+  </section>
+</template>
+
+<style></style>

ee/config/events/toggle_standards_adherence_report_version.yml

+---
+description: Tracks when a user toggles between Standards Adhernece Report versions
+internal_events: true
+action: toggle_standards_adherence_report_version
+identifiers:
+- namespace
+- user
+product_group: compliance
+product_categories:
+- compliance_management
+milestone: '17.10'
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/183694
+tiers:
+- ultimate

ee/spec/frontend/compliance_dashboard/components/standards_adherence_report/report_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlAlert } from '@gitlab/ui';
+import { GlAlert, GlToggle } from '@gitlab/ui';
 import ComplianceStandardsAdherenceReport from 'ee/compliance_dashboard/components/standards_adherence_report/report.vue';
 import ComplianceStandardsAdherenceTable from 'ee/compliance_dashboard/components/standards_adherence_report/standards_adherence_table.vue';
+import ComplianceStandardsAdherenceTableV2 from 'ee/compliance_dashboard/components/standards_adherence_report/standards_adherence_table_v2.vue';
 import { mockTracking } from 'helpers/tracking_helper';
 
 describe('ComplianceStandardsAdherenceReport component', () => {
@@ -12,7 +13,9 @@ describe('ComplianceStandardsAdherenceReport component', () => {
   const projectPath = 'example-project';
 
   const findAlert = () => wrapper.findComponent(GlAlert);
+  const findToggle = () => wrapper.findComponent(GlToggle);
   const findAdherencesTable = () => wrapper.findComponent(ComplianceStandardsAdherenceTable);
+  const findNewAdherencesTable = () => wrapper.findComponent(ComplianceStandardsAdherenceTableV2);
 
   const createComponent = (customProvide = {}) => {
     wrapper = shallowMount(ComplianceStandardsAdherenceReport, {
@@ -73,11 +76,34 @@ describe('ComplianceStandardsAdherenceReport component', () => {
   });
   describe('with v2 Report active', () => {
     beforeEach(() => {
+      trackingSpy = mockTracking(undefined, undefined, jest.spyOn);
       createComponent({ adherenceV2Enabled: true });
     });
 
     it('shows alert banner', () => {
       expect(findAlert().exists()).toBe(true);
     });
+
+    it('shows the new report', () => {
+      expect(findAdherencesTable().exists()).toBe(false);
+      expect(findNewAdherencesTable().exists()).toBe(true);
+    });
+
+    it('toggles report to the old table, with tracking', async () => {
+      const toggle = findToggle();
+
+      await toggle.vm.$emit('change', false);
+      await toggle.trigger('click');
+
+      expect(trackingSpy).toHaveBeenCalledTimes(2);
+      expect(trackingSpy).toHaveBeenCalledWith(
+        undefined,
+        'toggle_standards_adherence_report_version',
+        {},
+      );
+
+      expect(findAdherencesTable().exists()).toBe(true);
+      expect(findNewAdherencesTable().exists()).toBe(false);
+    });
   });
 });

locale/gitlab.pot

@@ -3796,7 +3796,10 @@ msgstr ""
 msgid "AdherenceReport|Learn more about the changes in our %{linkStart}documentation%{linkEnd}."
 msgstr ""
-msgid "AdherenceReport|We've updated the Adherence Report with new features to enhance your compliance workflow."
+msgid "AdherenceReport|Show old report"
+msgstr ""
+
+msgid "AdherenceReport|We've updated the adherence report with new features to enhance your compliance workflow."
 msgstr ""
 msgid "Adjust how frequently the GitLab UI polls for updates."
@@ -15300,6 +15303,9 @@ msgstr ""
 msgid "ComplianceReport|and %{count} more"
 msgstr ""
+msgid "ComplianceStandardsAdherenceV2|New Report Placeholder"
+msgstr ""
+
 msgid "ComplianceStandardsAdherence| Standards adherence export"
 msgstr ""