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 c56562bc8dcbb623043ac43c738415314c837082..c25d68d58c53f37676c2878bd33e21d8a29fd8be 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,14 +1,23 @@ <script> +import { GlSprintf, GlAlert, GlLink } from '@gitlab/ui'; import Tracking from '~/tracking'; +import { + FEEDBACK_ISSUE_URL, + STANDARDS_ADHERENCE_DOCS_URL, +} from 'ee/compliance_dashboard/constants'; +import { s__ } from '~/locale'; import ComplianceStandardsAdherenceTable from './standards_adherence_table.vue'; export default { name: 'ComplianceStandardsAdherenceReport', components: { ComplianceStandardsAdherenceTable, + GlAlert, + GlLink, + GlSprintf, }, mixins: [Tracking.mixin()], - inject: ['activeComplianceFrameworks'], + inject: ['activeComplianceFrameworks', 'adherenceV2Enabled'], props: { groupPath: { type: String, @@ -21,14 +30,51 @@ export default { default: null, }, }, + data() { + return { + showBanner: this.adherenceV2Enabled, + }; + }, mounted() { this.track('visit_standards_adherence', { property: this.activeComplianceFrameworks ? 'with_active_compliance_frameworks' : '', }); }, + i18n: { + feedbackTitle: s__( + "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}.', + ), + feedbackText: s__( + 'AdherenceReport|Have questions or thoughts on the new improvements we made? %{linkStart}Please provide feedback on your experience%{linkEnd}.', + ), + }, + FEEDBACK_ISSUE_URL, + STANDARDS_ADHERENCE_DOCS_URL, }; </script> <template> - <compliance-standards-adherence-table :group-path="groupPath" :project-path="projectPath" /> + <div> + <gl-alert v-if="showBanner" variant="info" dismissible @dismiss="showBanner = false"> + <div> + {{ $options.i18n.feedbackTitle }} + <gl-sprintf :message="$options.i18n.learnMoreDocsText"> + <template #link="{ content }"> + <gl-link :href="$options.STANDARDS_ADHERENCE_DOCS_URL" target="_blank">{{ + content + }}</gl-link> + </template> + </gl-sprintf> + <gl-sprintf :message="$options.i18n.feedbackText"> + <template #link="{ content }"> + <gl-link :href="$options.FEEDBACK_ISSUE_URL" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + </div> + </gl-alert> + <compliance-standards-adherence-table :group-path="groupPath" :project-path="projectPath" /> + </div> </template> diff --git a/ee/app/assets/javascripts/compliance_dashboard/constants.js b/ee/app/assets/javascripts/compliance_dashboard/constants.js index 9790792734fbdba35d011bbb494dd0b9a1e98f22..4a976c17bb56c7075e49673e15194bc1a6a910fe 100644 --- a/ee/app/assets/javascripts/compliance_dashboard/constants.js +++ b/ee/app/assets/javascripts/compliance_dashboard/constants.js @@ -82,6 +82,8 @@ export const POLICY_SCOPES_DOCS_URL = `${DOCS_URL_IN_EE_DIR}/user/application_se export const CREATE_FRAMEWORKS_DOCS_URL = `${DOCS_URL_IN_EE_DIR}/user/group/compliance_frameworks.html#prerequisites`; +export const STANDARDS_ADHERENCE_DOCS_URL = `${DOCS_URL_IN_EE_DIR}/user/compliance/compliance_center/compliance_standards_adherence_dashboard/`; + export const FEEDBACK_ISSUE_URL = 'https://gitlab.com/gitlab-org/gitlab/-/issues/481586'; export const GRAPHQL_FIELD_MISSING_ERROR_MESSAGE = __( 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 e5412f43851c36b224316b312862c848c0f5d19f..ac8c8f5d489ea94ba4af0432b5bf1e7777f2a52f 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 @@ -11,7 +11,7 @@ describe('ComplianceStandardsAdherenceReport component', () => { const groupPath = 'example-group'; const projectPath = 'example-project'; - const findErrorMessage = () => wrapper.findComponent(GlAlert); + const findAlert = () => wrapper.findComponent(GlAlert); const findAdherencesTable = () => wrapper.findComponent(ComplianceStandardsAdherenceTable); const createComponent = (customProvide = {}) => { @@ -20,7 +20,7 @@ describe('ComplianceStandardsAdherenceReport component', () => { groupPath, projectPath, }, - provide: { activeComplianceFrameworks: false, ...customProvide }, + provide: { adherenceV2Enabled: false, activeComplianceFrameworks: false, ...customProvide }, }); }; @@ -29,8 +29,8 @@ describe('ComplianceStandardsAdherenceReport component', () => { createComponent(); }); - it('does not render an error message', () => { - expect(findErrorMessage().exists()).toBe(false); + it('does not render the alert message', () => { + expect(findAlert().exists()).toBe(false); }); it('renders the standards adherence table component', () => { @@ -71,4 +71,13 @@ describe('ComplianceStandardsAdherenceReport component', () => { }); }); }); + describe('with v2 Report active', () => { + beforeEach(() => { + createComponent({ adherenceV2Enabled: true }); + }); + + it('shows alert banner', () => { + expect(findAlert().exists()).toBe(true); + }); + }); }); diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 44f0b0f4581ea454dd422311a487073a40906c95..efbd81b3c00feb462558f650508be3d1de0f813d 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -3767,6 +3767,15 @@ msgstr "" msgid "Adds this %{issuable_type} as related to the %{issuable_type} it was created from" msgstr "" +msgid "AdherenceReport|Have questions or thoughts on the new improvements we made? %{linkStart}Please provide feedback on your experience%{linkEnd}." +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." +msgstr "" + msgid "Adjust how frequently the GitLab UI polls for updates." msgstr ""