Merge branch '241921-Replace-v-html' into 'master'

Replace v-html with v-safe-html in delete_user_modal.vue

See merge request gitlab-org/gitlab!41328

app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue

 <script>
-/* eslint-disable vue/no-v-html */
-import { escape } from 'lodash';
-import { GlModal, GlButton, GlFormInput } from '@gitlab/ui';
+import { GlModal, GlButton, GlFormInput, GlSprintf } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 
 export default {
@@ -9,6 +7,7 @@ export default {
     GlModal,
     GlButton,
     GlFormInput,
+    GlSprintf,
   },
   props: {
     title: {
@@ -53,27 +52,6 @@ export default {
     modalTitle() {
       return sprintf(this.title, { username: this.username });
     },
-    text() {
-      return sprintf(
-        this.content,
-        {
-          username: `<strong>${escape(this.username)}</strong>`,
-          strong_start: '<strong>',
-          strong_end: '</strong>',
-        },
-        false,
-      );
-    },
-    confirmationTextLabel() {
-      return sprintf(
-        s__('AdminUsers|To confirm, type %{username}'),
-        {
-          username: `<code>${escape(this.username)}</code>`,
-        },
-        false,
-      );
-    },
-
     secondaryButtonLabel() {
       return s__('AdminUsers|Block user');
     },
@@ -108,8 +86,25 @@ export default {
 <template>
   <gl-modal ref="modal" modal-id="delete-user-modal" :title="modalTitle" kind="danger">
     <template>
-      <p v-html="text"></p>
-      <p v-html="confirmationTextLabel"></p>
+      <p>
+        <gl-sprintf :message="content">
+          <template #username>
+            <strong>{{ username }}</strong>
+          </template>
+          <template #strong="props">
+            <strong>{{ props.content }}</strong>
+          </template>
+        </gl-sprintf>
+      </p>
+
+      <p>
+        <gl-sprintf :message="s__('AdminUsers|To confirm, type %{username}')">
+          <template #username>
+            <code>{{ username }}</code>
+          </template>
+        </gl-sprintf>
+      </p>
+
       <form ref="form" :action="deleteUserUrl" method="post" @submit.prevent>
         <input ref="method" type="hidden" name="_method" value="delete" />
         <input :value="csrfToken" type="hidden" name="authenticity_token" />

app/views/admin/users/_modals.html.haml

@@ -16,7 +16,7 @@
     'secondary-action': s_('AdminUsers|Block user') } }
     = s_('AdminUsers|You are about to permanently delete the user %{username}. Issues, merge requests,
       and groups linked to them will be transferred to a system-wide "Ghost-user". To avoid data loss,
-      consider using the %{strong_start}block user%{strong_end} feature instead. Once you %{strong_start}Delete user%{strong_end},
+      consider using the %{strongStart}block user%{strongEnd} feature instead. Once you %{strongStart}Delete user%{strongEnd},
       it cannot be undone or recovered.')
 
   %div{ data: { modal: "delete-with-contributions",

changelogs/unreleased/241921-Replace-v-html.yml

+---
+title: Replace v-html with v-safe-html in delete_user_modal.vue
+merge_request: 41328
+author: Kev @KevSlashNull
+type: other

changelogs/unreleased/241953-Replace-v-html.yml

+---
+title: Replace v-html with v-safe-html in description.vue
+merge_request: 41336
+author: Kev @KevSlashNull
+type: other

locale/gitlab.pot

@@ -2073,7 +2073,7 @@ msgstr ""
 msgid "AdminUsers|Without projects"
 msgstr ""
 
-msgid "AdminUsers|You are about to permanently delete the user %{username}. Issues, merge requests, and groups linked to them will be transferred to a system-wide \"Ghost-user\". To avoid data loss, consider using the %{strong_start}block user%{strong_end} feature instead. Once you %{strong_start}Delete user%{strong_end}, it cannot be undone or recovered."
+msgid "AdminUsers|You are about to permanently delete the user %{username}. Issues, merge requests, and groups linked to them will be transferred to a system-wide \"Ghost-user\". To avoid data loss, consider using the %{strongStart}block user%{strongEnd} feature instead. Once you %{strongStart}Delete user%{strongEnd}, it cannot be undone or recovered."
 msgstr ""
 
 msgid "AdminUsers|You are about to permanently delete the user %{username}. This will delete all of the issues, merge requests, and groups linked to them. To avoid data loss, consider using the %{strong_start}block user%{strong_end} feature instead. Once you %{strong_start}Delete user%{strong_end}, it cannot be undone or recovered."

spec/frontend/pages/admin/users/components/__snapshots__/delete_user_modal_spec.js.snap

@@ -3,14 +3,15 @@
 exports[`User Operation confirmation modal renders modal with form included 1`] = `
 <div>
   <p>
-    content
+    <gl-sprintf-stub
+      message="content"
+    />
   </p>
    
   <p>
-    To confirm, type 
-    <code>
-      username
-    </code>
+    <gl-sprintf-stub
+      message="To confirm, type %{username}"
+    />
   </p>
    
   <form