Merge branch 'lashmanov/241930-replace-v-html-with-gl-sprintf' into 'master'

Replace v-html with gl-sprintf in commits_header.vue

See merge request gitlab-org/gitlab!71048

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

 <script>
 /* eslint-disable @gitlab/require-string-literal-i18n-helpers */
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlSprintf } from '@gitlab/ui';
 import { escape } from 'lodash';
-import { __, n__, sprintf, s__ } from '~/locale';
+import { __, n__, s__ } from '~/locale';
+
+const mergeCommitCount = s__('mrWidgetCommitsAdded|1 merge commit');
 
 export default {
+  mergeCommitCount,
   components: {
     GlButton,
+    GlSprintf,
   },
   props: {
     isSquashEnabled: {
@@ -47,22 +51,15 @@ export default {
     ariaLabel() {
       return this.expanded ? __('Collapse') : __('Expand');
     },
+    targetBranchEscaped() {
+      return escape(this.targetBranch);
+    },
     message() {
-      const message = this.isFastForwardEnabled
+      return this.isFastForwardEnabled
         ? s__('mrWidgetCommitsAdded|%{commitCount} will be added to %{targetBranch}.')
         : s__(
             'mrWidgetCommitsAdded|%{commitCount} and %{mergeCommitCount} will be added to %{targetBranch}.',
           );
-
-      return sprintf(
-        message,
-        {
-          commitCount: `<strong class="commits-count-message">${this.commitsCountMessage}</strong>`,
-          mergeCommitCount: `<strong>${s__('mrWidgetCommitsAdded|1 merge commit')}</strong>`,
-          targetBranch: `<span class="label-branch">${escape(this.targetBranch)}</span>`,
-        },
-        false,
-      );
     },
   },
   methods: {
@@ -89,10 +86,19 @@ export default {
       />
       <span v-if="expanded">{{ __('Collapse') }}</span>
       <span v-else>
-        <span
-          class="vertical-align-middle"
-          v-html="message /* eslint-disable-line vue/no-v-html */"
-        ></span>
+        <span class="vertical-align-middle">
+          <gl-sprintf :message="message">
+            <template #commitCount>
+              <strong class="commits-count-message">{{ commitsCountMessage }}</strong>
+            </template>
+            <template #mergeCommitCount>
+              <strong>{{ $options.mergeCommitCount }}</strong>
+            </template>
+            <template #targetBranch>
+              <span class="label-branch">{{ targetBranchEscaped }}</span>
+            </template>
+          </gl-sprintf>
+        </span>
         <gl-button variant="link" class="modify-message-button">
           {{ modifyLinkMessage }}
         </gl-button>

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

 import { shallowMount } from '@vue/test-utils';
+import { GlSprintf } from '@gitlab/ui';
 import CommitsHeader from '~/vue_merge_request_widget/components/states/commits_header.vue';
 
 describe('Commits header component', () => {
@@ -6,6 +7,9 @@ describe('Commits header component', () => {
 
   const createComponent = (props) => {
     wrapper = shallowMount(CommitsHeader, {
+      stubs: {
+        GlSprintf,
+      },
       propsData: {
         isSquashEnabled: false,
         targetBranch: 'main',