Merge branch '232989-update-compliance-dashboard-empty-copy' into 'master'

Improve compliance dashboard empty state copy

See merge request gitlab-org/gitlab!45273

ee/app/assets/javascripts/compliance_dashboard/components/empty_state.vue

 <script>
+import { GlLink, GlEmptyState } from '@gitlab/ui';
 import { __ } from '~/locale';
 
 export default {
+  components: {
+    GlLink,
+    GlEmptyState,
+  },
   props: {
     imagePath: {
       type: String,
@@ -9,27 +14,24 @@ export default {
     },
   },
   strings: {
-    heading: __(
-      "Merge requests are a place to propose changes you've made to a project and discuss those changes with others",
+    heading: __("A merge request hasn't yet been merged"),
+    subheading: __(
+      "The Compliance Dashboard gives you the ability to see a group's merge request activity by providing a high-level view for all projects in the group.",
     ),
-    subheading: __('Interested parties can even contribute by pushing commits if they want to.'),
-    alt: __('Merge Requests'),
+    documentation: __('View documentation'),
   },
+  documentationPath: 'https://docs.gitlab.com/ee/user/compliance/compliance_dashboard/index.html',
 };
 </script>
 
 <template>
-  <div class="row empty-state merge-requests">
-    <div class="col-12">
-      <div class="svg-content">
-        <img :src="imagePath" :alt="$options.strings.alt" />
-      </div>
-    </div>
-    <div class="col-12">
-      <div class="text-content">
-        <h4>{{ $options.strings.heading }}</h4>
-        <p>{{ $options.strings.subheading }}</p>
-      </div>
-    </div>
-  </div>
+  <gl-empty-state
+    :title="$options.strings.heading"
+    :description="$options.strings.subheading"
+    :svg-path="imagePath"
+  >
+    <template #actions>
+      <gl-link :href="$options.documentationPath">{{ $options.strings.documentation }}</gl-link>
+    </template>
+  </gl-empty-state>
 </template>

ee/changelogs/unreleased/232989-update-compliance-dashboard-empty-copy.yml

+---
+title: Improve compliance dashboard empty state message
+merge_request: 45273
+author:
+type: changed

ee/spec/frontend/compliance_dashboard/components/empty_state_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlEmptyState } from '@gitlab/ui';
 
 import EmptyState from 'ee/compliance_dashboard/components/empty_state.vue';
 
@@ -7,8 +8,7 @@ const IMAGE_PATH = 'empty.svg';
 describe('EmptyState component', () => {
   let wrapper;
 
-  const findImage = () => wrapper.find('img');
-  const findText = () => wrapper.find('.text-content');
+  const emptyStateProp = prop => wrapper.find(GlEmptyState).props(prop);
 
   const createComponent = (props = {}) => {
     return shallowMount(EmptyState, {
@@ -29,12 +29,12 @@ describe('EmptyState component', () => {
 
   describe('behaviour', () => {
     it('sets the empty SVG path', () => {
-      expect(findImage().element.getAttribute('src')).toEqual(IMAGE_PATH);
+      expect(emptyStateProp('svgPath')).toBe(IMAGE_PATH);
     });
 
-    it('renders a message', () => {
-      expect(findText().text()).toEqual(
-        "Merge requests are a place to propose changes you've made to a project and discuss those changes with others Interested parties can even contribute by pushing commits if they want to.",
+    it('sets the description', () => {
+      expect(emptyStateProp('description')).toBe(
+        "The Compliance Dashboard gives you the ability to see a group's merge request activity by providing a high-level view for all projects in the group.",
       );
     });
   });

locale/gitlab.pot

@@ -1253,6 +1253,9 @@ msgstr ""
 msgid "A merge request approval is required when the license compliance report contains a denied license."
 msgstr ""
 
+msgid "A merge request hasn't yet been merged"
+msgstr ""
+
 msgid "A new Auto DevOps pipeline has been created, go to %{pipelines_link_start}Pipelines page%{pipelines_link_end} for details"
 msgstr ""
 
@@ -27121,6 +27124,9 @@ msgstr ""
 msgid "The CSV export will be created in the background. Once finished, it will be sent to %{strong_open}%{email}%{strong_close} in an attachment."
 msgstr ""
 
+msgid "The Compliance Dashboard gives you the ability to see a group's merge request activity by providing a high-level view for all projects in the group."
+msgstr ""
+
 msgid "The GitLab user to which the Jira user %{jiraDisplayName} will be mapped"
 msgstr ""