1 files changed, 61 insertions, 0 deletions
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..509377a63e8
--- /dev/null
+++ b/app/assets/javascripts/security_configuration/components/training_provider_list.vue
@@ -0,0 +1,61 @@
+<script>
+import { GlCard, GlToggle, GlLink, GlSkeletonLoader } from '@gitlab/ui';
+import securityTrainingProvidersQuery from '../graphql/security_training_providers.query.graphql';
+
+export default {
+  components: {
+    GlCard,
+    GlToggle,
+    GlLink,
+    GlSkeletonLoader,
+  },
+  apollo: {
+    securityTrainingProviders: {
+      query: securityTrainingProvidersQuery,
+    },
+  },
+  data() {
+    return {
+      securityTrainingProviders: [],
+    };
+  },
+  computed: {
+    isLoading() {
+      return this.$apollo.queries.securityTrainingProviders.loading;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    v-if="isLoading"
+    class="gl-bg-white gl-py-6 gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100"
+  >
+    <gl-skeleton-loader :width="350" :height="44">
+      <rect width="200" height="8" x="10" y="0" rx="4" />
+      <rect width="300" height="8" x="10" y="15" rx="4" />
+      <rect width="100" height="8" x="10" y="35" rx="4" />
+    </gl-skeleton-loader>
+  </div>
+  <ul v-else class="gl-list-style-none gl-m-0 gl-p-0">
+    <li
+      v-for="{ id, isEnabled, name, description, url } in securityTrainingProviders"
+      :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>