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

2 files changed, 9 insertions, 7 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
index 1124cceeaa1..72bd28ae03f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
+++ b/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>
 
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index bf0928385d7..8c2cfb9aefc 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -603,7 +603,6 @@
 
   .diverged-commits-count {
     color: $gl-text-color-secondary;
-    font-size: 12px;
   }
 }