Refactor to load vulnerability link from backend

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/356279

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

@@ -4,7 +4,6 @@ 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';
@@ -52,7 +51,7 @@ export default {
     TrainingProviderList,
   },
   mixins: [glFeatureFlagsMixin()],
-  inject: ['projectFullPath'],
+  inject: ['projectFullPath', 'vulnerabilityTrainingDocsPath'],
   props: {
     augmentedSecurityFeatures: {
       type: Array,
@@ -127,9 +126,6 @@ export default {
     },
   },
   autoDevopsEnabledAlertStorageKey: AUTO_DEVOPS_ENABLED_ALERT_DISMISSED_STORAGE_KEY,
-  securityTraininDocLink: helpPagePath('user/application_security/vulnerabilities/index', {
-    anchor: 'enable-security-training-for-vulnerabilities',
-  }),
 };
 </script>
 
@@ -268,7 +264,7 @@ export default {
               {{ $options.i18n.securityTrainingDescription }}
             </p>
             <p>
-              <gl-link :href="$options.securityTraininDocLink">{{
+              <gl-link :href="vulnerabilityTrainingDocsPath">{{
                 $options.i18n.securityTrainingDoc
               }}</gl-link>
             </p>

app/assets/javascripts/security_configuration/index.js

@@ -25,6 +25,7 @@ export const initSecurityConfiguration = (el) => {
     gitlabCiHistoryPath,
     autoDevopsHelpPagePath,
     autoDevopsPath,
+    vulnerabilityTrainingDocsPath,
   } = el.dataset;
 
   const { augmentedSecurityFeatures, augmentedComplianceFeatures } = augmentFeatures(
@@ -41,6 +42,7 @@ export const initSecurityConfiguration = (el) => {
       upgradePath,
       autoDevopsHelpPagePath,
       autoDevopsPath,
+      vulnerabilityTrainingDocsPath,
     },
     render(createElement) {
       return createElement(SecurityConfigurationApp, {

app/helpers/projects/security/configuration_helper.rb

@@ -6,6 +6,10 @@ module Projects
       def security_upgrade_path
         "https://#{ApplicationHelper.promo_host}/pricing/"
       end
+
+      def vulnerability_training_docs_path
+        help_page_path('user/application_security/vulnerabilities/index', anchor: 'enable-security-training-for-vulnerabilities')
+      end
     end
   end
 end

app/views/projects/security/configuration/show.html.haml

@@ -3,5 +3,6 @@
 - @content_class = "limit-container-width" unless fluid_layout
 
 #js-security-configuration{ data: { **@configuration.to_html_data_attribute,
+  vulnerability_training_docs_path: vulnerability_training_docs_path,
   upgrade_path: security_upgrade_path,
   project_full_path: @project.full_path } }

ee/app/views/projects/security/configuration/show.html.haml

@@ -3,5 +3,6 @@
 - @content_class = "limit-container-width" unless fluid_layout
 
 #js-security-configuration{ data: { **@configuration.to_html_data_attribute,
+  vulnerability_training_docs_path: vulnerability_training_docs_path,
   upgrade_path: security_upgrade_path,
   project_full_path: @project.full_path } }

spec/frontend/security_configuration/components/app_spec.js

@@ -33,6 +33,7 @@ const autoDevopsHelpPagePath = '/autoDevopsHelpPagePath';
 const autoDevopsPath = '/autoDevopsPath';
 const gitlabCiHistoryPath = 'test/historyPath';
 const projectFullPath = 'namespace/project';
+const vulnerabilityTrainingDocsPath = 'user/application_security/vulnerabilities/index';
 
 useLocalStorageSpy();
 
@@ -55,6 +56,7 @@ describe('App component', () => {
           autoDevopsHelpPagePath,
           autoDevopsPath,
           projectFullPath,
+          vulnerabilityTrainingDocsPath,
           glFeatures: {
             secureVulnerabilityTraining,
           },
@@ -462,9 +464,7 @@ describe('App component', () => {
       const trainingLink = findVulnerabilityManagementTab().findComponent(GlLink);
 
       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',
-      );
+      expect(trainingLink.attributes('href')).toBe(vulnerabilityTrainingDocsPath);
     });
   });
 

spec/helpers/projects/security/configuration_helper_spec.rb

@@ -10,4 +10,10 @@ RSpec.describe Projects::Security::ConfigurationHelper do
 
     it { is_expected.to eq("https://#{ApplicationHelper.promo_host}/pricing/") }
   end
+
+  describe 'vulnerability_training_docs_path' do
+    subject { helper.vulnerability_training_docs_path }
+
+    it { is_expected.to eq(help_page_path('user/application_security/vulnerabilities/index', anchor: 'enable-security-training-for-vulnerabilities')) }
+  end
 end