Remove badges in DAST site validations

Use icons instead of badges for showing
site validation statuses in DAST profile
library page

ee/app/assets/javascripts/security_configuration/dast_profiles/components/dast_site_profiles_list.vue

 <script>
-import { GlButton, GlIcon, GlTooltipDirective, GlBadge, GlLink } from '@gitlab/ui';
+import { GlButton, GlIcon, GlTooltipDirective, GlLink } from '@gitlab/ui';
 import {
   DAST_SITE_VALIDATION_STATUS,
   DAST_SITE_VALIDATION_STATUS_PROPS,
@@ -19,7 +19,6 @@ export default {
   components: {
     GlButton,
     GlIcon,
-    GlBadge,
     GlLink,
     DastSiteValidationModal,
     ProfilesList,
@@ -139,14 +138,8 @@ export default {
     </template>
     <template #cell(validationStatus)="{ value }">
       <template v-if="shouldShowValidationStatus(value)">
-        <gl-badge
-          v-gl-tooltip
-          size="sm"
-          :variant="$options.statuses[value].badgeVariant"
-          :title="$options.statuses[value].tooltipText"
-        >
-          <gl-icon :size="12" class="gl-mr-2" :name="$options.statuses[value].badgeIcon" />
-          {{ $options.statuses[value].label }}</gl-badge
+        <gl-icon v-gl-tooltip v-bind="$options.statuses[value]" :size="12" class="gl-mr-3" /><span
+          >{{ $options.statuses[value].labelText }}</span
         >
       </template>
     </template>

ee/app/assets/javascripts/security_configuration/dast_site_validation/constants.js

@@ -29,28 +29,28 @@ export const DAST_SITE_VALIDATION_STATUS = {
 };
 
 const INPROGRESS_VALIDATION_PROPS = {
-  label: s__('DastSiteValidation|Validating...'),
-  badgeVariant: 'info',
-  badgeIcon: 'status-running',
-  tooltipText: s__('DastSiteValidation|The validation is in progress. Please wait...'),
+  labelText: s__('DastSiteValidation|Validating...'),
+  name: 'status-running',
+  class: 'gl-text-blue-500',
+  title: s__('DastSiteValidation|The validation is in progress. Please wait...'),
 };
 
 export const DAST_SITE_VALIDATION_STATUS_PROPS = {
   [DAST_SITE_VALIDATION_STATUS.PENDING]: INPROGRESS_VALIDATION_PROPS,
   [DAST_SITE_VALIDATION_STATUS.INPROGRESS]: INPROGRESS_VALIDATION_PROPS,
   [DAST_SITE_VALIDATION_STATUS.PASSED]: {
-    label: s__('DastSiteValidation|Validated'),
-    badgeVariant: 'success',
-    badgeIcon: 'status-success',
-    tooltipText: s__(
+    labelText: s__('DastSiteValidation|Validated'),
+    name: 'status-success',
+    class: 'gl-text-green-500',
+    title: s__(
       'DastSiteValidation|Validation succeeded. Both active and passive scans can be run against the target site.',
     ),
   },
   [DAST_SITE_VALIDATION_STATUS.FAILED]: {
-    label: s__('DastSiteValidation|Validation failed'),
-    badgeVariant: 'danger',
-    badgeIcon: 'status-failed',
-    tooltipText: s__('DastSiteValidation|The validation has failed. Please try again.'),
+    labelText: s__('DastSiteValidation|Validation failed'),
+    name: 'status-failed',
+    class: 'gl-text-red-500',
+    title: s__('DastSiteValidation|The validation has failed. Please try again.'),
   },
 };
 

ee/changelogs/unreleased/djadmin-remove-validation-badges.yml

+---
+title: Remove badges design from DAST validation statuses
+merge_request: 52301
+author:
+type: changed