diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/report.vue b/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/report.vue
index c25d68d58c53f37676c2878bd33e21d8a29fd8be..9cddb47628a50438f9de9101d11afc4fa04bb715 100644
--- a/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/report.vue
+++ b/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/report.vue
@@ -1,5 +1,5 @@
<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>
diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/standards_adherence_table_v2.vue b/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/standards_adherence_table_v2.vue
new file mode 100644
index 0000000000000000000000000000000000000000..edc981908965832d11dcce9415fba0ca8b4ace66
--- /dev/null
+++ b/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/standards_adherence_table_v2.vue
@@ -0,0 +1,44 @@
+<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>
diff --git a/ee/config/events/toggle_standards_adherence_report_version.yml b/ee/config/events/toggle_standards_adherence_report_version.yml
new file mode 100644
index 0000000000000000000000000000000000000000..862bb81172de907ed434df09451fe6e465949fc5
--- /dev/null
+++ b/ee/config/events/toggle_standards_adherence_report_version.yml
@@ -0,0 +1,14 @@
+---
+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
diff --git a/ee/spec/frontend/compliance_dashboard/components/standards_adherence_report/report_spec.js b/ee/spec/frontend/compliance_dashboard/components/standards_adherence_report/report_spec.js
index ac8c8f5d489ea94ba4af0432b5bf1e7777f2a52f..76b1ff546a0fa6fc4a028600f902983fd1c55487 100644
--- a/ee/spec/frontend/compliance_dashboard/components/standards_adherence_report/report_spec.js
+++ b/ee/spec/frontend/compliance_dashboard/components/standards_adherence_report/report_spec.js
@@ -1,7 +1,8 @@
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);
+ });
});
});
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index ba17b2c4a3423a114237783469c02f9637b703fd..7c57fea51dddaeae080cd54696bbe7a276524244 100644
--- a/locale/gitlab.pot
+++ b/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 ""