Revise empty MR state text for tone

Revise the test displayed on an empty merge request to focus on the
user experience (the merge request is empty, now what?) instead of
the previous text.

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>
-          {{
+          <gl-sprintf
+            :message="
               s__(
-              'mrWidgetNothingToMerge|Interested parties can even contribute by pushing commits if they want to.',
+                '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.',
               )
-          }}
-        </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.",
-            )
-          }}
+            "
+          >
+            <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

@@ -35641,13 +35641,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);
       });
     });
   });