Add security training description in config

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/346488

app/assets/javascripts/security_configuration/components/app.vue

@@ -27,6 +27,9 @@ export const i18n = {
   securityConfiguration: __('Security Configuration'),
   vulnerabilityManagement: s__('SecurityConfiguration|Vulnerability Management'),
   securityTraining: s__('SecurityConfiguration|Security training'),
+  securityTrainingDescription: s__(
+    'SecurityConfiguration|Enable security training to help your developers learn how to fix vulnerabilities. Developers can view security training from selected educational providers, relevant to the detected vulnerability.',
+  ),
 };
 
 export default {
@@ -252,6 +255,11 @@ export default {
         query-param-value="vulnerability-management"
       >
         <section-layout :heading="$options.i18n.securityTraining">
+          <template #description>
+            <p>
+              {{ $options.i18n.securityTrainingDescription }}
+            </p>
+          </template>
           <template #features>
             <training-provider-list />
           </template>

locale/gitlab.pot

@@ -31249,6 +31249,9 @@ msgstr ""
 msgid "SecurityConfiguration|Enable Auto DevOps"
 msgstr ""
 
+msgid "SecurityConfiguration|Enable security training to help your developers learn how to fix vulnerabilities. Developers can view security training from selected educational providers, relevant to the detected vulnerability."
+msgstr ""
+
 msgid "SecurityConfiguration|Enabled"
 msgstr ""
 

spec/frontend/security_configuration/components/app_spec.js

@@ -191,10 +191,6 @@ describe('App component', () => {
       expect(findComplianceViewHistoryLink().exists()).toBe(false);
       expect(findSecurityViewHistoryLink().exists()).toBe(false);
     });
-
-    it('renders TrainingProviderList component', () => {
-      expect(findTrainingProviderList().exists()).toBe(true);
-    });
   });
 
   describe('Manage via MR Error Alert', () => {
@@ -441,6 +437,25 @@ describe('App component', () => {
     });
   });
 
+  describe('Vulnerability management', () => {
+    beforeEach(() => {
+      createComponent({
+        augmentedSecurityFeatures: securityFeaturesMock,
+        augmentedComplianceFeatures: complianceFeaturesMock,
+      });
+    });
+
+    it('renders TrainingProviderList component', () => {
+      expect(findTrainingProviderList().exists()).toBe(true);
+    });
+
+    it('renders security training description', () => {
+      const vulnerabilityManagementTab = wrapper.findByTestId('vulnerability-management-tab');
+
+      expect(vulnerabilityManagementTab.text()).toContain(i18n.securityTrainingDescription);
+    });
+  });
+
   describe('when secureVulnerabilityTraining feature flag is disabled', () => {
     beforeEach(() => {
       createComponent({