Merge branch '326356-on-demand-scans-alert-render-markup' into 'master'

Render markup in on-demand scans errors

See merge request gitlab-org/gitlab!58815

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/app/assets/javascripts/security_configuration/dast_profiles/components/dast_profiles_list.vue

@@ -5,6 +5,7 @@ import {
   GlModal,
   GlSkeletonLoader,
   GlTable,
+  GlSafeHtmlDirective,
   GlTooltipDirective,
   GlDropdown,
   GlDropdownItem,
@@ -26,6 +27,7 @@ export default {
     GlIcon,
   },
   directives: {
+    SafeHtml: GlSafeHtmlDirective,
     GlTooltip: GlTooltipDirective,
   },
   props: {
@@ -164,7 +166,11 @@ export default {
                 :aria-label="__('DastProfiles|Error Details')"
                 class="gl-p-0 gl-m-0"
               >
-                <li v-for="errorDetail in errorDetails" :key="errorDetail">{{ errorDetail }}</li>
+                <li
+                  v-for="errorDetail in errorDetails"
+                  :key="errorDetail"
+                  v-safe-html="errorDetail"
+                ></li>
               </ul>
             </gl-alert>
           </td>

ee/changelogs/unreleased/326356-on-demand-scans-alert-render-markup.yml

+---
+title: Render links in DAST scans errors
+merge_request: 58815
+author:
+type: fixed

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);
+      });
     });
   });
 

ee/spec/frontend/security_configuration/dast_profiles/components/dast_profiles_list_spec.js

@@ -244,6 +244,17 @@ describe('EE - DastProfilesList', () => {
       expect(within(getErrorDetails()).getByText(errorDetails[0])).not.toBe(null);
       expect(within(getErrorDetails()).getByText(errorDetails[1])).not.toBe(null);
     });
+
+    it('properly renders errors containing markup', () => {
+      const errorDetails = ['an error <a href="#">with a link</a>'];
+      createFullComponent({
+        propsData: { errorMessage: TEST_ERROR_MESSAGE, errorDetails },
+      });
+
+      expect(getErrorMessage()).not.toBe(null);
+      expect(getErrorDetails()).not.toBe(null);
+      expect(within(getErrorDetails()).getByRole('link', { name: 'with a link' })).not.toBe(null);
+    });
   });
 
   describe('profile referenced in a security policy', () => {