2 files changed, 63 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>
diff --git a/app/assets/javascripts/security_configuration/components/training_provider_list.vue b/app/assets/javascripts/security_configuration/components/training_provider_list.vue
new file mode 100644
index 00000000000..160540f6989
--- /dev/null
+++ b/app/assets/javascripts/security_configuration/components/training_provider_list.vue
@@ -0,0 +1,36 @@
+<script>
+import { GlCard, GlToggle, GlLink } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlCard,
+    GlToggle,
+    GlLink,
+  },
+  props: {
+    providers: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <ul class="gl-list-style-none gl-m-0 gl-p-0">
+    <li v-for="{ id, isEnabled, name, description, url } in providers" :key="id" class="gl-mb-6">
+      <gl-card>
+        <div class="gl-display-flex">
+          <gl-toggle :value="isEnabled" :label="__('Training mode')" label-position="hidden" />
+          <div class="gl-ml-5">
+            <h3 class="gl-font-lg gl-m-0 gl-mb-2">{{ name }}</h3>
+            <p>
+              {{ description }}
+              <gl-link :href="url" target="_blank">{{ __('Learn more.') }}</gl-link>
+            </p>
+          </div>
+        </div>
+      </gl-card>
+    </li>
+  </ul>
+</template>