Hide training section in vulnerability details

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

ee/app/assets/javascripts/security_dashboard/graphql/provider.js

@@ -3,6 +3,7 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
 import { vulnerabilityLocationTypes } from '~/graphql_shared/fragment_types/vulnerability_location_types';
+import tempResolvers from '~/security_configuration/resolver';
 
 Vue.use(VueApollo);
 
@@ -13,7 +14,9 @@ const fragmentMatcher = new IntrospectionFragmentMatcher({
 });
 
 const defaultClient = createDefaultClient(
-  {},
+  {
+    ...tempResolvers,
+  },
   {
     cacheConfig: {
       fragmentMatcher,

ee/app/assets/javascripts/vulnerabilities/components/vulnerability_training.vue

 <script>
 import { s__ } from '~/locale';
+import securityTrainingProvidersQuery from '~/security_configuration/graphql/security_training_providers.query.graphql';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { SUPPORTED_REFERENCE_SCHEMA } from '../constants';
 
@@ -20,9 +21,23 @@ export default {
       required: true,
     },
   },
+  apollo: {
+    securityTrainingProviders: {
+      query: securityTrainingProvidersQuery,
+    },
+  },
+  data() {
+    return {
+      securityTrainingProviders: [],
+    };
+  },
   computed: {
     hasTraining() {
-      return this.glFeatures.secureVulnerabilityTraining && this.identifiers?.length;
+      return (
+        this.glFeatures.secureVulnerabilityTraining &&
+        this.securityTrainingProviders?.length &&
+        this.identifiers?.length
+      );
     },
     isSupportedReferenceSchema() {
       return this.referenceSchemas?.some(

ee/spec/frontend/vulnerabilities/vulnerability_training_spec.js

+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import VulnerabilityTraining, {
   i18n,
 } from 'ee/vulnerabilities/components/vulnerability_training.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { SUPPORTED_REFERENCE_SCHEMA } from 'ee/vulnerabilities/constants';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import { createMockResolvers } from 'jest/security_configuration/mock_data';
 
 const defaultProps = {
   identifiers: [{ externalType: SUPPORTED_REFERENCE_SCHEMA.cwe }, { externalType: 'cve' }],
 };
 
+Vue.use(VueApollo);
+
 describe('VulnerabilityTraining component', () => {
   let wrapper;
+  let apolloProvider;
+
+  const createApolloProvider = ({ resolvers } = {}) => {
+    apolloProvider = createMockApollo([], createMockResolvers({ resolvers }));
+  };
 
   const createComponent = (props = {}, { secureVulnerabilityTraining = true } = {}) => {
     wrapper = shallowMountExtended(VulnerabilityTraining, {
@@ -17,6 +29,7 @@ describe('VulnerabilityTraining component', () => {
         ...defaultProps,
         ...props,
       },
+      apolloProvider,
       provide: {
         glFeatures: {
           secureVulnerabilityTraining,
@@ -25,10 +38,16 @@ describe('VulnerabilityTraining component', () => {
     });
   };
 
+  beforeEach(async () => {
+    createApolloProvider();
+  });
+
   afterEach(() => {
     wrapper.destroy();
+    apolloProvider = null;
   });
 
+  const waitForQueryToBeLoaded = () => waitForPromises();
   const findTitle = () => wrapper.findByRole('heading', i18n.trainingTitle);
   const findDescription = () => wrapper.findByTestId('description');
   const findUnavailableMessage = () => wrapper.findByTestId('unavailable-message');
@@ -38,11 +57,13 @@ describe('VulnerabilityTraining component', () => {
       createComponent();
     });
 
-    it('displays the title', () => {
+    it('displays the title', async () => {
+      await waitForQueryToBeLoaded();
       expect(findTitle().text()).toBe(i18n.trainingTitle);
     });
 
-    it('displays the description', () => {
+    it('displays the description', async () => {
+      await waitForQueryToBeLoaded();
       expect(findDescription().text()).toBe(i18n.trainingDescription);
     });
 
@@ -50,21 +71,29 @@ describe('VulnerabilityTraining component', () => {
       createComponent({ identifiers: [] });
       expect(wrapper.html()).toBeFalsy();
     });
+
+    it('does not render component when there are no securityTrainingProviders', () => {
+      expect(wrapper.html()).toBeFalsy();
+    });
   });
 
   describe('training availability message', () => {
-    it('displays the message', () => {
-      createComponent({ identifiers: [{ externalType: 'not supported identifier' }] });
+    it('displays the message', async () => {
+      createComponent({
+        identifiers: [{ externalType: 'not supported identifier' }],
+      });
+      await waitForQueryToBeLoaded();
       expect(findUnavailableMessage().text()).toBe(i18n.trainingUnavailable);
     });
 
     it.each`
-      identifiers                                                         | exists
-      ${[{ externalType: 'cve' }]}                                        | ${true}
-      ${[{ externalType: SUPPORTED_REFERENCE_SCHEMA.cwe.toUpperCase() }]} | ${false}
-      ${[{ externalType: SUPPORTED_REFERENCE_SCHEMA.cwe.toLowerCase() }]} | ${false}
-    `('sets it to "$exists" for "$identifiers"', ({ identifiers, exists }) => {
-      createComponent({ identifiers });
+      identifier                                      | exists
+      ${'not supported identifier'}                   | ${true}
+      ${SUPPORTED_REFERENCE_SCHEMA.cwe.toUpperCase()} | ${false}
+      ${SUPPORTED_REFERENCE_SCHEMA.cwe.toLowerCase()} | ${false}
+    `('sets it to "$exists" for "$identifier"', async ({ identifier, exists }) => {
+      createComponent({ identifiers: [{ externalType: identifier }] });
+      await waitForQueryToBeLoaded();
       expect(findUnavailableMessage().exists()).toBe(exists);
     });
   });