Update mr_widget_header to not show branch names in 'commits behind' text

Also:
- Increased presence of 'commits behind' text
- Added link to target branch in 'commits behind' text

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue

@@ -1,5 +1,6 @@
 <script>
-import { n__ } from '~/locale';
+import _ from 'underscore';
+import { n__, s__, sprintf } from '~/locale';
 import { mergeUrlParams, webIDEUrl } from '~/lib/utils/url_utility';
 import Icon from '~/vue_shared/components/icon.vue';
 import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -22,8 +23,12 @@ export default {
     shouldShowCommitsBehindText() {
       return this.mr.divergedCommitsCount > 0;
     },
-    commitsText() {
-      return n__('%d commit behind', '%d commits behind', this.mr.divergedCommitsCount);
+    commitsBehindText() {
+      return sprintf(s__('mrWidget|The source branch is %{commitsBehindLinkStart}%{commitsBehind}%{commitsBehindLinkEnd} the target branch'), {
+        commitsBehindLinkStart: `<a href="${_.escape(this.mr.targetBranchPath)}">`,
+        commitsBehind: n__('%d commit behind', '%d commits behind', this.mr.divergedCommitsCount),
+        commitsBehindLinkEnd: '</a>',
+      }, false);
     },
     branchNameClipboardData() {
       // This supports code in app/assets/javascripts/copy_to_clipboard.js that
@@ -79,10 +84,8 @@ export default {
         <div
           v-if="shouldShowCommitsBehindText"
           class="diverged-commits-count"
+          v-html="commitsBehindText"
         >
-          <span class="monospace">{{ mr.sourceBranch }}</span>
-          is {{ commitsText }}
-          <span class="monospace">{{ mr.targetBranch }}</span>
         </div>
       </div>
 

app/assets/stylesheets/pages/merge_requests.scss

@@ -603,7 +603,6 @@
 
   .diverged-commits-count {
     color: $gl-text-color-secondary;
-    font-size: 12px;
   }
 }
 

spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js

@@ -45,7 +45,7 @@ describe('MRWidgetHeader', () => {
       });
     });
 
-    describe('commitsText', () => {
+    describe('commitsBehindText', () => {
       it('returns singular when there is one commit', () => {
         vm = mountComponent(Component, {
           mr: {
@@ -53,11 +53,12 @@ describe('MRWidgetHeader', () => {
             sourceBranch: 'mr-widget-refactor',
             sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
             targetBranch: 'master',
+            targetBranchPath: '/foo/bar/master',
             statusPath: 'abc',
           },
         });
 
-        expect(vm.commitsText).toEqual('1 commit behind');
+        expect(vm.commitsBehindText).toEqual('The source branch is <a href="/foo/bar/master">1 commit behind</a> the target branch');
       });
 
       it('returns plural when there is more than one commit', () => {
@@ -67,11 +68,12 @@ describe('MRWidgetHeader', () => {
             sourceBranch: 'mr-widget-refactor',
             sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
             targetBranch: 'master',
+            targetBranchPath: '/foo/bar/master',
             statusPath: 'abc',
           },
         });
 
-        expect(vm.commitsText).toEqual('2 commits behind');
+        expect(vm.commitsBehindText).toEqual('The source branch is <a href="/foo/bar/master">2 commits behind</a> the target branch');
       });
     });
   });
@@ -280,9 +282,9 @@ describe('MRWidgetHeader', () => {
       });
 
       it('renders diverged commits info', () => {
-        expect(vm.$el.querySelector('.diverged-commits-count').textContent).toMatch(
-          /(mr-widget-refactor[\s\S]+?is 12 commits behind[\s\S]+?master)/,
-        );
+        expect(vm.$el.querySelector('.diverged-commits-count').textContent).toEqual('The source branch is 12 commits behind the target branch');
+        expect(vm.$el.querySelector('.diverged-commits-count a').textContent).toEqual('12 commits behind');
+        expect(vm.$el.querySelector('.diverged-commits-count a')).toHaveAttr('href', vm.mr.targetBranchPath);
       });
     });
   });