Add vulnerability training doc link

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

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

@@ -4,6 +4,7 @@ import { __, s__ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
+import { helpPagePath } from '~/helpers/help_page_helper';
 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';
@@ -30,6 +31,7 @@ export const i18n = {
   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.',
   ),
+  securityTrainingDoc: s__('SecurityConfiguration|Learn more about vulnerability training'),
 };
 
 export default {
@@ -125,6 +127,9 @@ export default {
     },
   },
   autoDevopsEnabledAlertStorageKey: AUTO_DEVOPS_ENABLED_ALERT_DISMISSED_STORAGE_KEY,
+  securityTraininDocLink: helpPagePath('user/application_security/vulnerabilities/index', {
+    anchor: 'enable-security-training-for-vulnerabilities',
+  }),
 };
 </script>
 
@@ -262,6 +267,11 @@ export default {
             <p>
               {{ $options.i18n.securityTrainingDescription }}
             </p>
+            <p>
+              <gl-link :href="$options.securityTraininDocLink">{{
+                $options.i18n.securityTrainingDoc
+              }}</gl-link>
+            </p>
           </template>
           <template #features>
             <training-provider-list />

locale/gitlab.pot

@@ -32865,6 +32865,9 @@ msgstr ""
 msgid "SecurityConfiguration|Immediately begin risk analysis and remediation with application security features. Start with SAST and Secret Detection, available to all plans. Upgrade to Ultimate to get all features, including:"
 msgstr ""
 
+msgid "SecurityConfiguration|Learn more about vulnerability training"
+msgstr ""
+
 msgid "SecurityConfiguration|Manage corpus"
 msgstr ""
 

spec/frontend/security_configuration/components/app_spec.js

-import { GlTab, GlTabs } from '@gitlab/ui';
+import { GlTab, GlTabs, GlLink } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
@@ -107,6 +107,7 @@ describe('App component', () => {
   const findUpgradeBanner = () => wrapper.findComponent(UpgradeBanner);
   const findAutoDevopsAlert = () => wrapper.findComponent(AutoDevopsAlert);
   const findAutoDevopsEnabledAlert = () => wrapper.findComponent(AutoDevopsEnabledAlert);
+  const findVulnerabilityManagementTab = () => wrapper.findByTestId('vulnerability-management-tab');
 
   const securityFeaturesMock = [
     {
@@ -454,9 +455,16 @@ describe('App component', () => {
     });
 
     it('renders security training description', () => {
-      const vulnerabilityManagementTab = wrapper.findByTestId('vulnerability-management-tab');
+      expect(findVulnerabilityManagementTab().text()).toContain(i18n.securityTrainingDescription);
+    });
+
+    it('renders link to help docs', () => {
+      const trainingLink = findVulnerabilityManagementTab().findComponent(GlLink);
 
-      expect(vulnerabilityManagementTab.text()).toContain(i18n.securityTrainingDescription);
+      expect(trainingLink.text()).toBe('Learn more about vulnerability training');
+      expect(trainingLink.attributes('href')).toBe(
+        '/help/user/application_security/vulnerabilities/index#enable-security-training-for-vulnerabilities',
+      );
     });
   });