1 files changed, 35 insertions, 6 deletions

diff --git a/app/assets/javascripts/security_configuration/components/feature_card.vue b/app/assets/javascripts/security_configuration/components/feature_card.vue
index cd5ad86e1a8..309e5f21445 100644
--- a/app/assets/javascripts/security_configuration/components/feature_card.vue
+++ b/app/assets/javascripts/security_configuration/components/feature_card.vue
@@ -1,7 +1,9 @@
 <script>
 import { GlButton, GlCard, GlIcon, GlLink } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
+import { REPORT_TYPE_SAST_IAC } from '~/vue_shared/security_reports/constants';
 import ManageViaMr from '~/vue_shared/security_configuration/components/manage_via_mr.vue';
+import FeatureCardBadge from './feature_card_badge.vue';
 
 export default {
   components: {
@@ -9,6 +11,7 @@ export default {
     GlCard,
     GlIcon,
     GlLink,
+    FeatureCardBadge,
     ManageViaMr,
   },
   props: {
@@ -36,11 +39,14 @@ export default {
             text: this.$options.i18n.enableFeature,
           };
 
-      button.category = 'secondary';
+      button.category = this.feature.category || 'secondary';
       button.text = sprintf(button.text, { feature: this.shortName });
 
       return button;
     },
+    manageViaMrButtonCategory() {
+      return this.feature.category || 'secondary';
+    },
     showManageViaMr() {
       return ManageViaMr.canRender(this.feature);
     },
@@ -48,19 +54,32 @@ export default {
       return { 'gl-bg-gray-10': !this.available };
     },
     statusClasses() {
-      const { enabled } = this;
+      const { enabled, hasBadge } = this;
 
       return {
         'gl-ml-auto': true,
         'gl-flex-shrink-0': true,
         'gl-text-gray-500': !enabled,
         'gl-text-green-500': enabled,
+        'gl-w-full': hasBadge,
+        'gl-justify-content-space-between': hasBadge,
+        'gl-display-flex': hasBadge,
+        'gl-mb-4': hasBadge,
       };
     },
     hasSecondary() {
       const { name, description, configurationText } = this.feature.secondary ?? {};
       return Boolean(name && description && configurationText);
     },
+    // This condition is a temporary hack to not display any wrong information
+    // until this BE Bug is fixed: https://gitlab.com/gitlab-org/gitlab/-/issues/350307.
+    // More Information: https://gitlab.com/gitlab-org/gitlab/-/issues/350307#note_825447417
+    isNotSastIACTemporaryHack() {
+      return this.feature.type !== REPORT_TYPE_SAST_IAC;
+    },
+    hasBadge() {
+      return Boolean(this.available && this.feature.badge?.text);
+    },
   },
   methods: {
     onError(message) {
@@ -81,21 +100,31 @@ export default {
 
 <template>
   <gl-card :class="cardClasses">
-    <div class="gl-display-flex gl-align-items-baseline">
+    <div
+      class="gl-display-flex gl-align-items-baseline"
+      :class="{ 'gl-flex-direction-column-reverse': hasBadge }"
+    >
       <h3 class="gl-font-lg gl-m-0 gl-mr-3">{{ feature.name }}</h3>
 
       <div
+        v-if="isNotSastIACTemporaryHack"
         :class="statusClasses"
         data-testid="feature-status"
         :data-qa-selector="`${feature.type}_status`"
       >
+        <feature-card-badge
+          v-if="hasBadge"
+          :badge="feature.badge"
+          :badge-href="feature.badge.badgeHref"
+        />
+
         <template v-if="enabled">
           <gl-icon name="check-circle-filled" />
           <span class="gl-text-green-700">{{ $options.i18n.enabled }}</span>
         </template>
 
         <template v-else-if="available">
-          {{ $options.i18n.notEnabled }}
+          <span>{{ $options.i18n.notEnabled }}</span>
         </template>
 
         <template v-else>
@@ -109,7 +138,7 @@ export default {
       <gl-link :href="feature.helpPath">{{ $options.i18n.learnMore }}</gl-link>
     </p>
 
-    <template v-if="available">
+    <template v-if="available && isNotSastIACTemporaryHack">
       <gl-button
         v-if="feature.configurationPath"
         :href="feature.configurationPath"
@@ -125,7 +154,7 @@ export default {
         v-else-if="showManageViaMr"
         :feature="feature"
         variant="confirm"
-        category="secondary"
+        :category="manageViaMrButtonCategory"
         class="gl-mt-5"
         :data-qa-selector="`${feature.type}_mr_button`"
         @error="onError"