Remove v-html from notes warning message

This refactors warning message to use GlSprintf
over dangerous v-html

app/assets/javascripts/vue_shared/components/notes/noteable_warning.vue

 <script>
-import { GlLink, GlIcon } from '@gitlab/ui';
-import { escape } from 'lodash';
+import { GlLink, GlIcon, GlSprintf } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 
-function buildDocsLinkStart(path) {
-  return `<a href="${escape(path)}" target="_blank" rel="noopener noreferrer">`;
-}
-
 const NoteableTypeText = {
   Issue: __('issue'),
   Epic: __('epic'),
@@ -17,6 +12,7 @@ export default {
   components: {
     GlIcon,
     GlLink,
+    GlSprintf,
   },
   props: {
     isLocked: {
@@ -59,20 +55,6 @@ export default {
     noteableTypeText() {
       return NoteableTypeText[this.noteableType];
     },
-    confidentialAndLockedDiscussionText() {
-      return sprintf(
-        __(
-          'This %{noteableTypeText} is %{confidentialLinkStart}confidential%{linkEnd} and %{lockedLinkStart}locked%{linkEnd}.',
-        ),
-        {
-          noteableTypeText: this.noteableTypeText,
-          confidentialLinkStart: buildDocsLinkStart(this.confidentialNoteableDocsPath),
-          lockedLinkStart: buildDocsLinkStart(this.lockedNoteableDocsPath),
-          linkEnd: '</a>',
-        },
-        false,
-      );
-    },
     confidentialContextText() {
       return sprintf(__('This is a confidential %{noteableTypeText}.'), {
         noteableTypeText: this.noteableTypeText,
@@ -91,9 +73,23 @@ export default {
     <gl-icon v-if="!isLockedAndConfidential" :name="warningIcon" :size="16" class="icon inline" />
 
     <span v-if="isLockedAndConfidential" ref="lockedAndConfidential">
-      <span
-        v-html="confidentialAndLockedDiscussionText /* eslint-disable-line vue/no-v-html */"
-      ></span>
+      <span>
+        <gl-sprintf
+          :message="
+            __(
+              'This %{noteableTypeText} is %{confidentialLinkStart}confidential%{confidentialLinkEnd} and %{lockedLinkStart}locked%{lockedLinkEnd}.',
+            )
+          "
+        >
+          <template #noteableTypeText>{{ noteableTypeText }}</template>
+          <template #confidentialLink="{ content }">
+            <gl-link :href="confidentialNoteableDocsPath" target="_blank">{{ content }}</gl-link>
+          </template>
+          <template #lockedLink="{ content }">
+            <gl-link :href="lockedNoteableDocsPath" target="_blank">{{ content }}</gl-link>
+          </template>
+        </gl-sprintf>
+      </span>
       {{
         __("People without permission will never get a notification and won't be able to comment.")
       }}

locale/gitlab.pot

@@ -37308,7 +37308,7 @@ msgstr ""
 msgid "This %{issuable} is locked. Only %{strong_open}project members%{strong_close} can comment."
 msgstr ""
 
-msgid "This %{noteableTypeText} is %{confidentialLinkStart}confidential%{linkEnd} and %{lockedLinkStart}locked%{linkEnd}."
+msgid "This %{noteableTypeText} is %{confidentialLinkStart}confidential%{confidentialLinkEnd} and %{lockedLinkStart}locked%{lockedLinkEnd}."
 msgstr ""
 
 msgid "This %{noteableTypeText} is locked."

spec/frontend/vue_shared/components/notes/__snapshots__/noteable_warning_spec.js.snap

@@ -34,21 +34,19 @@ exports[`Issue Warning Component when noteable is locked and confidential render
 <span>
   <span>
     This issue is 
-    <a
+    <gl-link-stub
       href=""
-      rel="noopener noreferrer"
       target="_blank"
     >
       confidential
-    </a>
+    </gl-link-stub>
      and 
-    <a
+    <gl-link-stub
       href=""
-      rel="noopener noreferrer"
       target="_blank"
     >
       locked
-    </a>
+    </gl-link-stub>
     .
   </span>
   

spec/frontend/vue_shared/components/notes/noteable_warning_spec.js

-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import NoteableWarning from '~/vue_shared/components/notes/noteable_warning.vue';
@@ -16,6 +16,9 @@ describe('Issue Warning Component', () => {
       propsData: {
         ...props,
       },
+      stubs: {
+        GlSprintf,
+      },
     });
 
   afterEach(() => {