Merge branch '291998-aqualls-revise-empty-stage' into 'master'

Revise empty MR state text for tone

See merge request gitlab-org/gitlab!53917

app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue

 <script>
 /* eslint-disable vue/no-v-html */
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlSprintf, GlLink } from '@gitlab/ui';
 import emptyStateSVG from 'icons/_mr_widget_empty_state.svg';
+import { helpPagePath } from '~/helpers/help_page_helper';
 
 export default {
   name: 'MRWidgetNothingToMerge',
   components: {
     GlButton,
+    GlSprintf,
+    GlLink,
   },
   props: {
     mr: {
@@ -17,6 +20,7 @@ export default {
   data() {
     return { emptyStateSVG };
   },
+  ciHelpPage: helpPagePath('/ci/quick_start/index.html'),
 };
 </script>
 
@@ -30,25 +34,20 @@ export default {
       </div>
       <div class="text col-md-7 order-md-first col-12">
         <p class="highlight">
-          {{
-            s__(
-              'mrWidgetNothingToMerge|Merge requests are a place to propose changes you have made to a project and discuss those changes with others.',
-            )
-          }}
+          {{ s__('mrWidgetNothingToMerge|This merge request contains no changes.') }}
         </p>
         <p>
-          {{
-            s__(
-              'mrWidgetNothingToMerge|Interested parties can even contribute by pushing commits if they want to.',
-            )
-          }}
-        </p>
-        <p>
-          {{
-            s__(
-              "mrWidgetNothingToMerge|Currently there are no changes in this merge request's source branch. Please push new commits or use a different branch.",
-            )
-          }}
+          <gl-sprintf
+            :message="
+              s__(
+                'mrWidgetNothingToMerge|Use merge requests to propose changes to your project and discuss them with your team. To make changes, push a commit or edit this merge request to use a different branch. With %{linkStart}CI/CD%{linkEnd}, automatically test your changes before merging.',
+              )
+            "
+          >
+            <template #link="{ content }">
+              <gl-link :href="$options.ciHelpPage" target="_blank">{{ content }}</gl-link>
+            </template>
+          </gl-sprintf>
         </p>
         <div>
           <gl-button
@@ -56,6 +55,7 @@ export default {
             :href="mr.newBlobPath"
             category="secondary"
             variant="success"
+            data-testid="createFileButton"
           >
             {{ __('Create file') }}
           </gl-button>

locale/gitlab.pot

@@ -35736,13 +35736,10 @@ msgstr ""
 msgid "mrWidgetCommitsAdded|1 merge commit"
 msgstr ""
 
-msgid "mrWidgetNothingToMerge|Currently there are no changes in this merge request's source branch. Please push new commits or use a different branch."
+msgid "mrWidgetNothingToMerge|This merge request contains no changes."
 msgstr ""
 
-msgid "mrWidgetNothingToMerge|Interested parties can even contribute by pushing commits if they want to."
-msgstr ""
-
-msgid "mrWidgetNothingToMerge|Merge requests are a place to propose changes you have made to a project and discuss those changes with others."
+msgid "mrWidgetNothingToMerge|Use merge requests to propose changes to your project and discuss them with your team. To make changes, push a commit or edit this merge request to use a different branch. With %{linkStart}CI/CD%{linkEnd}, automatically test your changes before merging."
 msgstr ""
 
 msgid "mrWidget| Please restore it or use a different %{missingBranchName} branch"

spec/frontend/vue_mr_widget/components/states/mr_widget_nothing_to_merge_spec.js

@@ -14,20 +14,14 @@ describe('NothingToMerge', () => {
 
     it('should have correct elements', () => {
       expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
-      expect(vm.$el.querySelector('a').href).toContain(newBlobPath);
-      expect(vm.$el.innerText).toContain(
-        "Currently there are no changes in this merge request's source branch",
-      );
-
-      expect(vm.$el.innerText.replace(/\s\s+/g, ' ')).toContain(
-        'Please push new commits or use a different branch.',
-      );
+      expect(vm.$el.querySelector('[data-testid="createFileButton"]').href).toContain(newBlobPath);
+      expect(vm.$el.innerText).toContain('Use merge requests to propose changes to your project');
     });
 
     it('should not show new blob link if there is no link available', () => {
       vm.mr.newBlobPath = null;
       Vue.nextTick(() => {
-        expect(vm.$el.querySelector('a')).toEqual(null);
+        expect(vm.$el.querySelector('[data-testid="createFileButton"]')).toEqual(null);
       });
     });
   });