Render markup in on-demand scans errors

In some cases the API returns errors containing links when running a
DAST on-demand scan fails. The errors are currently rendered as plain
text, making the link non-clickable. This ensures that the errors'
markup is properly rendered with v-safe-html.

ee/app/assets/javascripts/on_demand_scans/components/on_demand_scans_form.vue

@@ -10,6 +10,7 @@ import {
   GlLink,
   GlSkeletonLoader,
   GlSprintf,
+  GlSafeHtmlDirective,
   GlTooltipDirective,
 } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
@@ -90,6 +91,7 @@ export default {
     LocalStorageSync,
   },
   directives: {
+    SafeHtml: GlSafeHtmlDirective,
     GlTooltip: GlTooltipDirective,
     validation: validation(),
   },
@@ -375,7 +377,7 @@ export default {
     >
       {{ errorMessage }}
       <ul v-if="errors.length" class="gl-mt-3 gl-mb-0">
-        <li v-for="error in errors" :key="error">{{ error }}</li>
+        <li v-for="error in errors" :key="error" v-safe-html="error"></li>
       </ul>
     </gl-alert>
 

ee/spec/frontend/on_demand_scans/components/on_demand_scans_form_spec.js

@@ -431,22 +431,27 @@ describe('OnDemandScansForm', () => {
     });
 
     describe('on errors as data', () => {
-      const errors = ['error#1', 'error#2', 'error#3'];
-
-      beforeEach(async () => {
-        createShallowComponent();
+      const submitWithError = async (errors) => {
         wrapper.vm.$apollo.mutate.mockResolvedValue({
           data: { dastProfileCreate: { pipelineUrl: null, errors } },
         });
         await setValidFormData();
-        submitForm();
+        await submitForm();
+      };
+
+      beforeEach(async () => {
+        createShallowComponent();
       });
 
-      it('resets loading state', () => {
+      it('resets loading state', async () => {
+        await submitWithError(['error']);
+
         expect(wrapper.vm.loading).toBe(false);
       });
 
-      it('shows an alert with the returned errors', () => {
+      it('shows an alert with the returned errors', async () => {
+        const errors = ['error#1', 'error#2', 'error#3'];
+        await submitWithError(errors);
         const alert = findAlert();
 
         expect(alert.exists()).toBe(true);
@@ -454,6 +459,14 @@ describe('OnDemandScansForm', () => {
           expect(alert.text()).toContain(error);
         });
       });
+
+      it('properly renders errors containing markup', async () => {
+        await submitWithError(['an error <a href="#" data-testid="error-link">with a link</a>']);
+        const alert = findAlert();
+
+        expect(alert.text()).toContain('an error with a link');
+        expect(alert.find('[data-testid="error-link"]').exists()).toBe(true);
+      });
     });
   });