Switch to use local resolver

Address reviewer comment and adjust to use client directive

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

@@ -25,7 +25,7 @@ export default {
 <template>
   <div
     v-if="loading"
-    class="gl-mb-6 gl-bg-white gl-py-6 gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100"
+    class="gl-bg-white gl-py-6 gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100"
   >
     <gl-skeleton-loader :width="350" :height="44">
       <rect width="200" height="8" x="10" y="0" rx="4" />

app/assets/javascripts/security_configuration/graphql/security_training_providers.query.graphql

 query Query {
-  securityTrainingProviders {
+  securityTrainingProviders @client {
     name
     id
     description

app/assets/javascripts/security_configuration/index.js

@@ -2,10 +2,39 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
 import { parseBooleanDataAttributes } from '~/lib/utils/dom_utils';
+import { __ } from '~/locale';
 import SecurityConfigurationApp from './components/app.vue';
 import { securityFeatures, complianceFeatures } from './components/constants';
 import { augmentFeatures } from './utils';
 
+// Note: this is behind a feature flag and only a placeholder
+// until the actual GraphQL fields have been added
+// https://gitlab.com/gitlab-org/gi tlab/-/issues/346480
+export const tempResolvers = {
+  Query: {
+    securityTrainingProviders() {
+      return [
+        {
+          __typename: 'SecurityTrainingProvider',
+          id: 101,
+          name: __('Kontra'),
+          description: __('Interactive developer security education.'),
+          url: 'https://application.security/',
+          isEnabled: false,
+        },
+        {
+          __typename: 'SecurityTrainingProvider',
+          id: 102,
+          name: __('SecureCodeWarrior'),
+          description: __('Security training with guide and learning pathways.'),
+          url: 'https://www.securecodewarrior.com/',
+          isEnabled: true,
+        },
+      ];
+    },
+  },
+};
+
 export const initSecurityConfiguration = (el) => {
   if (!el) {
     return null;
@@ -14,7 +43,7 @@ export const initSecurityConfiguration = (el) => {
   Vue.use(VueApollo);
 
   const apolloProvider = new VueApollo({
-    defaultClient: createDefaultClient(),
+    defaultClient: createDefaultClient(tempResolvers),
   });
 
   const {

locale/gitlab.pot

@@ -19017,6 +19017,9 @@ msgstr ""
 msgid "Integrations|can't exceed %{recipients_limit}"
 msgstr ""
 
+msgid "Interactive developer security education."
+msgstr ""
+
 msgid "Interactive mode"
 msgstr ""
 
@@ -20346,6 +20349,9 @@ msgstr ""
 msgid "Ki"
 msgstr ""
 
+msgid "Kontra"
+msgstr ""
+
 msgid "Kroki"
 msgstr ""
 
@@ -30854,6 +30860,9 @@ msgstr ""
 msgid "Secure token that identifies an external storage request."
 msgstr ""
 
+msgid "SecureCodeWarrior"
+msgstr ""
+
 msgid "Security"
 msgstr ""
 
@@ -30878,6 +30887,9 @@ msgstr ""
 msgid "Security report is out of date. Run %{newPipelineLinkStart}a new pipeline%{newPipelineLinkEnd} for the target branch (%{targetBranchName})"
 msgstr ""
 
+msgid "Security training with guide and learning pathways."
+msgstr ""
+
 msgid "SecurityApprovals|A merge request approval is required when a security report contains a new vulnerability."
 msgstr ""
 

spec/frontend/security_configuration/components/app_spec.js

@@ -29,8 +29,8 @@ import {
   REPORT_TYPE_LICENSE_COMPLIANCE,
   REPORT_TYPE_SAST,
 } from '~/vue_shared/security_reports/constants';
-import securityTrainingProvidersQuery from '~/security_configuration/graphql/security_training_providers.query.graphql';
-import { securityTrainingProvidersResponse, securityTrainingProviders } from '../mock_data';
+import waitForPromises from 'helpers/wait_for_promises';
+import { securityTrainingProviders } from '../mock_data';
 
 const upgradePath = '/upgrade';
 const autoDevopsHelpPagePath = '/autoDevopsHelpPagePath';
@@ -45,6 +45,15 @@ describe('App component', () => {
   let wrapper;
   let userCalloutDismissSpy;
   let mockApollo;
+  let mockSecurityTrainingProvidersData;
+
+  const mockResolvers = {
+    Query: {
+      securityTrainingProviders() {
+        return securityTrainingProviders;
+      },
+    },
+  };
 
   const createComponent = ({
     shouldShowCallout = true,
@@ -52,12 +61,7 @@ describe('App component', () => {
     ...propsData
   }) => {
     userCalloutDismissSpy = jest.fn();
-    mockApollo = createMockApollo([
-      [
-        securityTrainingProvidersQuery,
-        jest.fn().mockResolvedValue(securityTrainingProvidersResponse),
-      ],
-    ]);
+    mockApollo = createMockApollo([], mockResolvers);
 
     wrapper = extendedWrapper(
       mount(SecurityConfigurationApp, {
@@ -149,6 +153,9 @@ describe('App component', () => {
 
   describe('basic structure', () => {
     beforeEach(() => {
+      mockSecurityTrainingProvidersData = jest.fn();
+      mockSecurityTrainingProvidersData.mockResolvedValue(securityTrainingProviders);
+
       createComponent({
         augmentedSecurityFeatures: securityFeaturesMock,
         augmentedComplianceFeatures: complianceFeaturesMock,
@@ -197,7 +204,8 @@ describe('App component', () => {
       expect(findSecurityViewHistoryLink().exists()).toBe(false);
     });
 
-    it('renders training provider list with correct props', () => {
+    it('renders training provider list with correct props', async () => {
+      await waitForPromises();
       expect(findTrainingProviderList().props('providers')).toEqual(securityTrainingProviders);
     });
   });