Merge branch 'djadmin-v-html-2' into 'master'

Remove v-html from dependency list alert

See merge request gitlab-org/gitlab!70238

ee/app/assets/javascripts/dependencies/components/dependency_list_job_failed_alert.vue

 <script>
-import { GlAlert } from '@gitlab/ui';
-import { __, sprintf, s__ } from '~/locale';
+import { GlAlert, GlSprintf } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
 
 export default {
   name: 'DependencyListJobFailedAlert',
   components: {
     GlAlert,
+    GlSprintf,
   },
   props: {
     jobPath: {
@@ -23,14 +24,15 @@ export default {
           }
         : {};
     },
+    message() {
+      return {
+        text: s__(
+          'Dependencies|The %{codeStartTag}dependency_scanning%{codeEndTag} job has failed and cannot generate the list. Please ensure the job is running properly and run the pipeline again.',
+        ),
+        placeholder: { code: ['codeStartTag', 'codeEndTag'] },
+      };
+    },
   },
-  message: sprintf(
-    s__(
-      'Dependencies|The %{codeStartTag}dependency_scanning%{codeEndTag} job has failed and cannot generate the list. Please ensure the job is running properly and run the pipeline again.',
-    ),
-    { codeStartTag: '<code>', codeEndTag: '</code>' },
-    false,
-  ),
 };
 </script>
 
@@ -42,6 +44,12 @@ export default {
     @dismiss="$emit('close')"
     v-on="$listeners"
   >
-    <span v-html="$options.message /* eslint-disable-line vue/no-v-html */"></span>
+    <span>
+      <gl-sprintf :message="message.text" :placeholders="message.placeholder">
+        <template #code="{ content }">
+          <code>{{ content }}</code>
+        </template>
+      </gl-sprintf>
+    </span>
   </gl-alert>
 </template>

ee/spec/frontend/dependencies/components/dependency_list_job_failed_alert_spec.js

-import { GlAlert } from '@gitlab/ui';
+import { GlAlert, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import DependencyListJobFailedAlert from 'ee/dependencies/components/dependency_list_job_failed_alert.vue';
 
@@ -21,7 +21,7 @@ describe('DependencyListJobFailedAlert component', () => {
   });
 
   it('matches the snapshot', () => {
-    factory({ propsData: { jobPath: '/jobs/foo/3210' } });
+    factory({ propsData: { jobPath: '/jobs/foo/3210' }, stubs: { GlSprintf } });
     expect(wrapper.element).toMatchSnapshot();
   });