Render markup in DAST profiles library errors

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/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', () => {