5 files changed, 177 insertions, 65 deletions

diff --git a/app/assets/javascripts/security_configuration/components/configuration_table.vue b/app/assets/javascripts/security_configuration/components/configuration_table.vue
index 4a3f988296c..2110af1522b 100644
--- a/app/assets/javascripts/security_configuration/components/configuration_table.vue
+++ b/app/assets/javascripts/security_configuration/components/configuration_table.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlLink, GlTable, GlAlert } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
+import ManageViaMR from '~/vue_shared/security_configuration/components/manage_via_mr.vue';
 import {
   REPORT_TYPE_SAST,
   REPORT_TYPE_DAST,
@@ -11,8 +12,8 @@ import {
   REPORT_TYPE_API_FUZZING,
   REPORT_TYPE_LICENSE_COMPLIANCE,
 } from '~/vue_shared/security_reports/constants';
-import ManageSast from './manage_sast.vue';
-import { scanners } from './scanners_constants';
+
+import { scanners } from './constants';
 import Upgrade from './upgrade.vue';
 
 const borderClasses = 'gl-border-b-1! gl-border-b-solid! gl-border-gray-100!';
@@ -40,7 +41,7 @@ export default {
     },
     getComponentForItem(item) {
       const COMPONENTS = {
-        [REPORT_TYPE_SAST]: ManageSast,
+        [REPORT_TYPE_SAST]: ManageViaMR,
         [REPORT_TYPE_DAST]: Upgrade,
         [REPORT_TYPE_DAST_PROFILES]: Upgrade,
         [REPORT_TYPE_DEPENDENCY_SCANNING]: Upgrade,
@@ -49,7 +50,6 @@ export default {
         [REPORT_TYPE_API_FUZZING]: Upgrade,
         [REPORT_TYPE_LICENSE_COMPLIANCE]: Upgrade,
       };
-
       return COMPONENTS[item.type];
     },
   },
@@ -95,7 +95,12 @@ export default {
       </template>
 
       <template #cell(manage)="{ item }">
-        <component :is="getComponentForItem(item)" :data-testid="item.type" @error="onError" />
+        <component
+          :is="getComponentForItem(item)"
+          :feature="item"
+          :data-testid="item.type"
+          @error="onError"
+        />
       </template>
     </gl-table>
   </div>
diff --git a/app/assets/javascripts/security_configuration/components/scanners_constants.js b/app/assets/javascripts/security_configuration/components/constants.js
index 9846df0b4bf..3cdcac4c0b4 100644
--- a/app/assets/javascripts/security_configuration/components/scanners_constants.js
+++ b/app/assets/javascripts/security_configuration/components/constants.js
@@ -1,6 +1,7 @@
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { __, s__ } from '~/locale';
 
+import configureSastMutation from '~/security_configuration/graphql/configure_sast.mutation.graphql';
 import {
   REPORT_TYPE_SAST,
   REPORT_TYPE_DAST,
@@ -134,3 +135,18 @@ export const scanners = [
     type: REPORT_TYPE_LICENSE_COMPLIANCE,
   },
 ];
+
+export const featureToMutationMap = {
+  [REPORT_TYPE_SAST]: {
+    mutationId: 'configureSast',
+    getMutationPayload: (projectPath) => ({
+      mutation: configureSastMutation,
+      variables: {
+        input: {
+          projectPath,
+          configuration: { global: [], pipeline: [], analyzers: [] },
+        },
+      },
+    }),
+  },
+};
diff --git a/app/assets/javascripts/security_configuration/components/feature_card.vue b/app/assets/javascripts/security_configuration/components/feature_card.vue
new file mode 100644
index 00000000000..518a6ede3de
--- /dev/null
+++ b/app/assets/javascripts/security_configuration/components/feature_card.vue
@@ -0,0 +1,150 @@
+<script>
+import { GlButton, GlCard, GlIcon, GlLink } from '@gitlab/ui';
+import { __, s__, sprintf } from '~/locale';
+import ManageViaMr from '~/vue_shared/security_configuration/components/manage_via_mr.vue';
+
+export default {
+  components: {
+    GlButton,
+    GlCard,
+    GlIcon,
+    GlLink,
+    ManageViaMr,
+  },
+  props: {
+    feature: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    available() {
+      return this.feature.available;
+    },
+    enabled() {
+      return this.available && this.feature.configured;
+    },
+    hasStatus() {
+      return !this.available || typeof this.feature.configured === 'boolean';
+    },
+    shortName() {
+      return this.feature.shortName ?? this.feature.name;
+    },
+    configurationButton() {
+      const button = this.enabled
+        ? {
+            text: this.$options.i18n.configureFeature,
+            category: 'secondary',
+          }
+        : {
+            text: this.$options.i18n.enableFeature,
+            category: 'primary',
+          };
+
+      button.text = sprintf(button.text, { feature: this.shortName });
+
+      return button;
+    },
+    showManageViaMr() {
+      const { available, configured, canEnableByMergeRequest } = this.feature;
+      return canEnableByMergeRequest && available && !configured;
+    },
+    cardClasses() {
+      return { 'gl-bg-gray-10': !this.available };
+    },
+    statusClasses() {
+      const { enabled } = this;
+
+      return {
+        'gl-ml-auto': true,
+        'gl-flex-shrink-0': true,
+        'gl-text-gray-500': !enabled,
+        'gl-text-green-500': enabled,
+      };
+    },
+    hasSecondary() {
+      const { name, description, configurationText } = this.feature.secondary ?? {};
+      return Boolean(name && description && configurationText);
+    },
+  },
+  i18n: {
+    enabled: s__('SecurityConfiguration|Enabled'),
+    notEnabled: s__('SecurityConfiguration|Not enabled'),
+    availableWith: s__('SecurityConfiguration|Available with Ultimate'),
+    configurationGuide: s__('SecurityConfiguration|Configuration guide'),
+    configureFeature: s__('SecurityConfiguration|Configure %{feature}'),
+    enableFeature: s__('SecurityConfiguration|Enable %{feature}'),
+    learnMore: __('Learn more'),
+  },
+};
+</script>
+
+<template>
+  <gl-card :class="cardClasses">
+    <div class="gl-display-flex gl-align-items-baseline">
+      <h3 class="gl-font-lg gl-m-0 gl-mr-3">{{ feature.name }}</h3>
+
+      <div :class="statusClasses" data-testid="feature-status">
+        <template v-if="hasStatus">
+          <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 }}
+          </template>
+
+          <template v-else>
+            {{ $options.i18n.availableWith }}
+          </template>
+        </template>
+      </div>
+    </div>
+
+    <p class="gl-mb-0 gl-mt-5">
+      {{ feature.description }}
+      <gl-link :href="feature.helpPath">{{ $options.i18n.learnMore }}</gl-link>
+    </p>
+
+    <template v-if="available">
+      <gl-button
+        v-if="feature.configurationPath"
+        :href="feature.configurationPath"
+        variant="confirm"
+        :category="configurationButton.category"
+        class="gl-mt-5"
+      >
+        {{ configurationButton.text }}
+      </gl-button>
+
+      <manage-via-mr
+        v-else-if="showManageViaMr"
+        :feature="feature"
+        variant="confirm"
+        category="primary"
+        class="gl-mt-5"
+      />
+
+      <gl-button v-else icon="external-link" :href="feature.configurationHelpPath" class="gl-mt-5">
+        {{ $options.i18n.configurationGuide }}
+      </gl-button>
+    </template>
+
+    <div v-if="hasSecondary" data-testid="secondary-feature">
+      <h4 class="gl-font-base gl-m-0 gl-mt-6">{{ feature.secondary.name }}</h4>
+
+      <p class="gl-mb-0 gl-mt-5">{{ feature.secondary.description }}</p>
+
+      <gl-button
+        v-if="available && feature.secondary.configurationPath"
+        :href="feature.secondary.configurationPath"
+        variant="confirm"
+        category="secondary"
+        class="gl-mt-5"
+      >
+        {{ feature.secondary.configurationText }}
+      </gl-button>
+    </div>
+  </gl-card>
+</template>
diff --git a/app/assets/javascripts/security_configuration/components/manage_sast.vue b/app/assets/javascripts/security_configuration/components/manage_sast.vue
deleted file mode 100644
index 8a8827b41cd..00000000000
--- a/app/assets/javascripts/security_configuration/components/manage_sast.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<script>
-import { GlButton } from '@gitlab/ui';
-import { redirectTo } from '~/lib/utils/url_utility';
-import { s__ } from '~/locale';
-import configureSastMutation from '~/security_configuration/graphql/configure_sast.mutation.graphql';
-
-export default {
-  components: {
-    GlButton,
-  },
-  inject: {
-    projectPath: {
-      from: 'projectPath',
-      default: '',
-    },
-  },
-  data() {
-    return {
-      isLoading: false,
-    };
-  },
-  methods: {
-    async mutate() {
-      this.isLoading = true;
-      try {
-        const { data } = await this.$apollo.mutate({
-          mutation: configureSastMutation,
-          variables: {
-            input: {
-              projectPath: this.projectPath,
-              configuration: { global: [], pipeline: [], analyzers: [] },
-            },
-          },
-        });
-        const { errors, successPath } = data.configureSast;
-
-        if (errors.length > 0) {
-          throw new Error(errors[0]);
-        }
-
-        if (!successPath) {
-          throw new Error(s__('SecurityConfiguration|SAST merge request creation mutation failed'));
-        }
-
-        redirectTo(successPath);
-      } catch (e) {
-        this.$emit('error', e.message);
-        this.isLoading = false;
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-button :loading="isLoading" variant="success" category="secondary" @click="mutate">{{
-    s__('SecurityConfiguration|Configure via merge request')
-  }}</gl-button>
-</template>
diff --git a/app/assets/javascripts/security_configuration/components/upgrade.vue b/app/assets/javascripts/security_configuration/components/upgrade.vue
index 518eb57731d..2541c29224a 100644
--- a/app/assets/javascripts/security_configuration/components/upgrade.vue
+++ b/app/assets/javascripts/security_configuration/components/upgrade.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlLink, GlSprintf } from '@gitlab/ui';
-import { UPGRADE_CTA } from './scanners_constants';
+import { UPGRADE_CTA } from './constants';
 
 export default {
   components: {