Merge branch 'djadmin-v-html-merge-dialog' into 'master'

Swaps out v-html with GlSprintf in MR widget

See merge request gitlab-org/gitlab!69845

ee/app/assets/javascripts/vue_merge_request_widget/components/merge_immediately_confirmation_dialog.vue

 <script>
-import { GlModal, GlButton } from '@gitlab/ui';
-import { escape } from 'lodash';
-import { __, sprintf } from '~/locale';
+import { GlModal, GlButton, GlSprintf, GlLink } from '@gitlab/ui';
+import { __ } from '~/locale';
 
 export default {
   name: 'MergeImmediatelyConfirmationDialog',
   components: {
     GlModal,
     GlButton,
+    GlSprintf,
+    GlLink,
   },
   props: {
     docsUrl: {
@@ -17,17 +18,8 @@ export default {
   },
   computed: {
     bodyText() {
-      return sprintf(
-        __(
+      return __(
         "Merging immediately isn't recommended as it may negatively impact the existing merge train. Read the %{docsLinkStart}documentation%{docsLinkEnd} for more information.",
-        ),
-        {
-          docsLinkStart: `<a href="${escape(
-            this.docsUrl,
-          )}" target="_blank" rel="noopener noreferrer">`,
-          docsLinkEnd: '</a>',
-        },
-        false,
       );
     },
   },
@@ -58,7 +50,13 @@ export default {
     :title="__('Merge immediately')"
     @shown="focusCancelButton"
   >
-    <p v-html="bodyText /* eslint-disable-line vue/no-v-html */"></p>
+    <p>
+      <gl-sprintf :message="bodyText">
+        <template #docsLink="{ content }">
+          <gl-link :href="docsUrl" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </p>
     <p>{{ __('Are you sure you want to merge immediately?') }}</p>
     <template #modal-footer>
       <gl-button ref="cancelButton" @click="cancel">{{ __('Cancel') }}</gl-button>

ee/spec/frontend/vue_mr_widget/components/merge_immediately_confirmation_dialog_spec.js

+import { GlSprintf, GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MergeImmediatelyConfirmationDialog from 'ee/vue_merge_request_widget/components/merge_immediately_confirmation_dialog.vue';
 import { trimText } from 'helpers/text_helper';
@@ -9,6 +10,9 @@ describe('MergeImmediatelyConfirmationDialog', () => {
   beforeEach(() => {
     wrapper = shallowMount(MergeImmediatelyConfirmationDialog, {
       propsData: { docsUrl },
+      stubs: {
+        GlSprintf,
+      },
     });
 
     return wrapper.vm.$nextTick();
@@ -21,10 +25,10 @@ describe('MergeImmediatelyConfirmationDialog', () => {
   });
 
   it('should render a link to the documentation', () => {
-    const docsLink = wrapper.find(`a[href="${docsUrl}"]`);
+    const docsLink = wrapper.findComponent(GlLink);
 
     expect(docsLink.exists()).toBe(true);
-    expect(docsLink.attributes().rel).toBe('noopener noreferrer');
+    expect(docsLink.attributes('href')).toBe(docsUrl);
     expect(trimText(docsLink.text())).toBe('documentation');
   });