Merge branch 'fix/241960-remove-v-html-from-mr-widget-header' into 'master'

Fix 241960, replace v-html with v-safe-html from mr-widget_header.vue

See merge request gitlab-org/gitlab!64837

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

 <script>
-/* eslint-disable vue/no-v-html */
 import {
   GlButton,
   GlDropdown,
   GlDropdownSectionHeader,
   GlDropdownItem,
+  GlLink,
   GlTooltipDirective,
   GlModalDirective,
+  GlSafeHtmlDirective as SafeHtml,
+  GlSprintf,
 } from '@gitlab/ui';
-import { escape } from 'lodash';
 import { mergeUrlParams, webIDEUrl } from '~/lib/utils/url_utility';
-import { n__, s__, sprintf } from '~/locale';
+import { s__ } from '~/locale';
 import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import MrWidgetHowToMergeModal from './mr_widget_how_to_merge_modal.vue';
@@ -27,10 +28,13 @@ export default {
     GlDropdown,
     GlDropdownSectionHeader,
     GlDropdownItem,
+    GlLink,
+    GlSprintf,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
     GlModalDirective,
+    SafeHtml,
   },
   props: {
     mr: {
@@ -42,19 +46,6 @@ export default {
     shouldShowCommitsBehindText() {
       return this.mr.divergedCommitsCount > 0;
     },
-    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
       // works around ClipboardJS limitations to allow the context-specific
@@ -100,10 +91,10 @@ export default {
         <strong>
           {{ s__('mrWidget|Request to merge') }}
           <tooltip-on-truncate
+            v-safe-html="mr.sourceBranchLink"
             :title="mr.sourceBranch"
             truncate-target="child"
             class="label-branch label-truncate js-source-branch"
-            v-html="mr.sourceBranchLink"
           /><clipboard-button
             data-testid="mr-widget-copy-clipboard"
             :text="branchNameClipboardData"
@@ -119,11 +110,15 @@ export default {
             <a :href="mr.targetBranchTreePath" class="js-target-branch"> {{ mr.targetBranch }} </a>
           </tooltip-on-truncate>
         </strong>
-        <div
-          v-if="shouldShowCommitsBehindText"
-          class="diverged-commits-count"
-          v-html="commitsBehindText"
-        ></div>
+        <div v-if="shouldShowCommitsBehindText" class="diverged-commits-count">
+          <gl-sprintf :message="s__('mrWidget|The source branch is %{link} the target branch')">
+            <template #link>
+              <gl-link :href="mr.targetBranchPath">{{
+                n__('%d commit behind', '%d commits behind', mr.divergedCommitsCount)
+              }}</gl-link>
+            </template>
+          </gl-sprintf>
+        </div>
       </div>
 
       <div class="branch-actions d-flex">

locale/gitlab.pot

@@ -38970,7 +38970,7 @@ msgstr ""
 msgid "mrWidget|The source branch has been deleted"
 msgstr ""
 
-msgid "mrWidget|The source branch is %{commitsBehindLinkStart}%{commitsBehind}%{commitsBehindLinkEnd} the target branch"
+msgid "mrWidget|The source branch is %{link} the target branch"
 msgstr ""
 
 msgid "mrWidget|The source branch is being deleted"

spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import Header from '~/vue_merge_request_widget/components/mr_widget_header.vue';
 
@@ -26,6 +26,15 @@ describe('MRWidgetHeader', () => {
     expect(downloadPlainDiffEl.attributes('href')).toBe('/mr/plainDiffPath');
   };
 
+  const commonMrProps = {
+    divergedCommitsCount: 1,
+    sourceBranch: 'mr-widget-refactor',
+    sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
+    targetBranch: 'main',
+    targetBranchPath: '/foo/bar/main',
+    statusPath: 'abc',
+  };
+
   describe('computed', () => {
     describe('shouldShowCommitsBehindText', () => {
       it('return true when there are divergedCommitsCount', () => {
@@ -59,36 +68,28 @@ describe('MRWidgetHeader', () => {
 
     describe('commitsBehindText', () => {
       it('returns singular when there is one commit', () => {
-        createComponent({
-          mr: {
-            divergedCommitsCount: 1,
-            sourceBranch: 'mr-widget-refactor',
-            sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
-            targetBranch: 'main',
-            targetBranchPath: '/foo/bar/main',
-            statusPath: 'abc',
+        wrapper = mount(Header, {
+          propsData: {
+            mr: commonMrProps,
           },
         });
 
-        expect(wrapper.vm.commitsBehindText).toBe(
-          'The source branch is <a href="/foo/bar/main">1 commit behind</a> the target branch',
+        expect(wrapper.find('.diverged-commits-count').element.innerHTML).toBe(
+          'The source branch is <a href="/foo/bar/main" class="gl-link">1 commit behind</a> the target branch',
         );
       });
 
       it('returns plural when there is more than one commit', () => {
-        createComponent({
+        wrapper = mount(Header, {
+          propsData: {
             mr: {
+              ...commonMrProps,
               divergedCommitsCount: 2,
-            sourceBranch: 'mr-widget-refactor',
-            sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
-            targetBranch: 'main',
-            targetBranchPath: '/foo/bar/main',
-            statusPath: 'abc',
+            },
           },
         });
-
-        expect(wrapper.vm.commitsBehindText).toBe(
-          'The source branch is <a href="/foo/bar/main">2 commits behind</a> the target branch',
+        expect(wrapper.find('.diverged-commits-count').element.innerHTML).toBe(
+          'The source branch is <a href="/foo/bar/main" class="gl-link">2 commits behind</a> the target branch',
         );
       });
     });
@@ -273,19 +274,18 @@ describe('MRWidgetHeader', () => {
 
     describe('with diverged commits', () => {
       beforeEach(() => {
-        createComponent({
+        wrapper = mount(Header, {
+          propsData: {
             mr: {
+              ...commonMrProps,
               divergedCommitsCount: 12,
-            sourceBranch: 'mr-widget-refactor',
-            sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>',
               sourceBranchRemoved: false,
               targetBranchPath: 'foo/bar/commits-path',
               targetBranchTreePath: 'foo/bar/tree/path',
-            targetBranch: 'main',
               isOpen: true,
               emailPatchesPath: '/mr/email-patches',
               plainDiffPath: '/mr/plainDiffPath',
-            statusPath: 'abc',
+            },
           },
         });
       });