1 files changed, 27 insertions, 1 deletions
diff --git a/app/assets/javascripts/security_configuration/components/app.vue b/app/assets/javascripts/security_configuration/components/app.vue
index cd2add6407f..62c30c941eb 100644
--- a/app/assets/javascripts/security_configuration/components/app.vue
+++ b/app/assets/javascripts/security_configuration/components/app.vue
@@ -8,6 +8,7 @@ import AutoDevOpsAlert from './auto_dev_ops_alert.vue';
 import AutoDevOpsEnabledAlert from './auto_dev_ops_enabled_alert.vue';
 import { AUTO_DEVOPS_ENABLED_ALERT_DISMISSED_STORAGE_KEY } from './constants';
 import FeatureCard from './feature_card.vue';
+import TrainingProviderList from './training_provider_list.vue';
 import SectionLayout from './section_layout.vue';
 import UpgradeBanner from './upgrade_banner.vue';
 
@@ -28,8 +29,28 @@ export const i18n = {
   securityTraining: s__('SecurityConfiguration|Security training'),
 };
 
+// This will be removed and replaced with GraphQL query:
+// https://gitlab.com/gitlab-org/gitlab/-/issues/346480
+export const TRAINING_PROVIDERS = [
+  {
+    id: 101,
+    name: __('Kontra'),
+    description: __('Interactive developer security education.'),
+    url: 'https://application.security/',
+    isEnabled: false,
+  },
+  {
+    id: 102,
+    name: __('SecureCodeWarrior'),
+    description: __('Security training with guide and learning pathways.'),
+    url: 'https://www.securecodewarrior.com/',
+    isEnabled: true,
+  },
+];
+
 export default {
   i18n,
+  TRAINING_PROVIDERS,
   components: {
     AutoDevOpsAlert,
     AutoDevOpsEnabledAlert,
@@ -43,6 +64,7 @@ export default {
     SectionLayout,
     UpgradeBanner,
     UserCalloutDismisser,
+    TrainingProviderList,
   },
   mixins: [glFeatureFlagsMixin()],
   inject: ['projectPath'],
@@ -240,7 +262,11 @@ export default {
         data-testid="vulnerability-management-tab"
         :title="$options.i18n.vulnerabilityManagement"
       >
-        <section-layout :heading="$options.i18n.securityTraining" />
+        <section-layout :heading="$options.i18n.securityTraining">
+          <template #features>
+            <training-provider-list :providers="$options.TRAINING_PROVIDERS" />
+          </template>
+        </section-layout>
       </gl-tab>
     </gl-tabs>
   </article>