Add secure_vulnerability_training FF and vulnerability management tab

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

 <script>
 import { GlTab, GlTabs, GlSprintf, GlLink, GlAlert } from '@gitlab/ui';
 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 AutoDevOpsAlert from './auto_dev_ops_alert.vue';
@@ -23,6 +24,8 @@ export const i18n = {
      any subsequent feature branch you create will include the scan.`,
   ),
   securityConfiguration: __('Security Configuration'),
+  vulnerabilityManagement: s__('SecurityConfiguration|Vulnerability Management'),
+  securityTraining: s__('SecurityConfiguration|Security training'),
 };
 
 export default {
@@ -41,6 +44,7 @@ export default {
     UpgradeBanner,
     UserCalloutDismisser,
   },
+  mixins: [glFeatureFlagsMixin()],
   inject: ['projectPath'],
   props: {
     augmentedSecurityFeatures: {
@@ -231,6 +235,13 @@ export default {
           </template>
         </section-layout>
       </gl-tab>
+      <gl-tab
+        v-if="glFeatures.secureVulnerabilityTraining"
+        data-testid="vulnerability-management-tab"
+        :title="$options.i18n.vulnerabilityManagement"
+      >
+        <section-layout :heading="$options.i18n.securityTraining" />
+      </gl-tab>
     </gl-tabs>
   </article>
 </template>

config/feature_flags/development/secure_vulnerability_training.yml

+---
+name: secure_vulnerability_training
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/issues/346074
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/346308
+milestone: '14.6'
+type: development
+group: group::threat insights
+default_enabled: false

ee/app/controllers/ee/projects/security/configuration_controller.rb

@@ -15,6 +15,7 @@ module EE
           before_action only: [:show] do
             push_frontend_feature_flag(:security_auto_fix, project, default_enabled: false)
             push_frontend_feature_flag(:corpus_management, project, default_enabled: :yaml)
+            push_frontend_feature_flag(:secure_vulnerability_training, project, default_enabled: :yaml)
           end
 
           before_action only: [:auto_fix] do

locale/gitlab.pot

@@ -30836,6 +30836,9 @@ msgstr ""
 msgid "SecurityConfiguration|Security testing"
 msgstr ""
 
+msgid "SecurityConfiguration|Security training"
+msgstr ""
+
 msgid "SecurityConfiguration|The status of the tools only applies to the default branch and is based on the %{linkStart}latest pipeline%{linkEnd}."
 msgstr ""
 
@@ -30845,6 +30848,9 @@ msgstr ""
 msgid "SecurityConfiguration|Using custom settings. You won't receive automatic updates on this variable. %{anchorStart}Restore to default%{anchorEnd}"
 msgstr ""
 
+msgid "SecurityConfiguration|Vulnerability Management"
+msgstr ""
+
 msgid "SecurityConfiguration|Vulnerability details and statistics in the merge request"
 msgstr ""
 

spec/frontend/security_configuration/components/app_spec.js

@@ -39,7 +39,11 @@ describe('App component', () => {
   let wrapper;
   let userCalloutDismissSpy;
 
-  const createComponent = ({ shouldShowCallout = true, ...propsData }) => {
+  const createComponent = ({
+    shouldShowCallout = true,
+    secureVulnerabilityTraining = true,
+    ...propsData
+  }) => {
     userCalloutDismissSpy = jest.fn();
 
     wrapper = extendedWrapper(
@@ -50,6 +54,9 @@ describe('App component', () => {
           autoDevopsHelpPagePath,
           autoDevopsPath,
           projectPath,
+          glFeatures: {
+            secureVulnerabilityTraining,
+          },
         },
         stubs: {
           ...stubChildren(SecurityConfigurationApp),
@@ -138,20 +145,20 @@ describe('App component', () => {
       expect(mainHeading.text()).toContain('Security Configuration');
     });
 
-    it('renders GlTab Component ', () => {
-      expect(findTab().exists()).toBe(true);
-    });
+    describe('tabs', () => {
+      const expectedTabs = ['security-testing', 'compliance-testing', 'vulnerability-management'];
 
-    it('renders right amount of tabs with correct title ', () => {
-      expect(findTabs()).toHaveLength(2);
-    });
+      it('renders GlTab Component', () => {
+        expect(findTab().exists()).toBe(true);
+      });
 
-    it('renders security-testing tab', () => {
-      expect(findByTestId('security-testing-tab').exists()).toBe(true);
-    });
+      it('renders correct amount of tabs', () => {
+        expect(findTabs()).toHaveLength(expectedTabs.length);
+      });
 
-    it('renders compliance-testing tab', () => {
-      expect(findByTestId('compliance-testing-tab').exists()).toBe(true);
+      it.each(expectedTabs)('renders the %s tab', (tabName) => {
+        expect(findByTestId(`${tabName}-tab`).exists()).toBe(true);
+      });
     });
 
     it('renders right amount of feature cards for given props with correct props', () => {
@@ -418,4 +425,22 @@ describe('App component', () => {
       expect(findSecurityViewHistoryLink().attributes('href')).toBe('test/historyPath');
     });
   });
+
+  describe('when secureVulnerabilityTraining feature flag is disabled', () => {
+    beforeEach(() => {
+      createComponent({
+        augmentedSecurityFeatures: securityFeaturesMock,
+        augmentedComplianceFeatures: complianceFeaturesMock,
+        secureVulnerabilityTraining: false,
+      });
+    });
+
+    it('renders correct amount of tabs', () => {
+      expect(findTabs()).toHaveLength(2);
+    });
+
+    it('does not render the vulnerability-management tab', () => {
+      expect(wrapper.findByTestId('vulnerability-management-tab').exists()).toBe(false);
+    });
+  });
 });