Update security config to use provider name

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

app/assets/javascripts/security_configuration/components/constants.js

@@ -281,3 +281,14 @@ export const featureToMutationMap = {
 
 export const AUTO_DEVOPS_ENABLED_ALERT_DISMISSED_STORAGE_KEY =
   'security_configuration_auto_devops_enabled_dismissed_projects';
+
+// Fetch the svg path from the GraphQL query once this issue is resolved
+// https://gitlab.com/gitlab-org/gitlab/-/issues/346899
+export const TEMP_PROVIDER_LOGOS = {
+  Kontra: {
+    svg: '/assets/illustrations/vulnerability/kontra-logo.svg',
+  },
+  [__('Secure Code Warrior')]: {
+    svg: '/assets/illustrations/vulnerability/scw-logo.svg',
+  },
+};

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

@@ -16,6 +16,7 @@ import {
   updateSecurityTrainingCache,
   updateSecurityTrainingOptimisticResponse,
 } from '~/security_configuration/graphql/cache_utils';
+import { TEMP_PROVIDER_LOGOS } from './constants';
 
 const i18n = {
   providerQueryErrorMessage: __(
@@ -27,17 +28,6 @@ const i18n = {
   primaryTraining: s__('SecurityTraining|Primary Training'),
 };
 
-// Fetch the svg path from the GraphQL query once this issue is resolved
-// https://gitlab.com/gitlab-org/gitlab/-/issues/346899
-const TEMP_PROVIDER_LOGOS = {
-  'gid://gitlab/Security::TrainingProvider/1': {
-    svg: '/assets/illustrations/vulnerability/kontra-logo.svg',
-  },
-  'gid://gitlab/Security::TrainingProvider/2': {
-    svg: '/assets/illustrations/vulnerability/scw-logo.svg',
-  },
-};
-
 export default {
   components: {
     GlAlert,
@@ -227,8 +217,12 @@ export default {
               label-position="hidden"
               @change="toggleProvider(provider)"
             />
-            <div v-if="$options.TEMP_PROVIDER_LOGOS[provider.id]" class="gl-ml-4">
-              <img :src="$options.TEMP_PROVIDER_LOGOS[provider.id].svg" width="18" />
+            <div v-if="$options.TEMP_PROVIDER_LOGOS[provider.name]" class="gl-ml-4">
+              <img
+                :src="$options.TEMP_PROVIDER_LOGOS[provider.name].svg"
+                width="18"
+                role="presentation"
+              />
             </div>
             <div class="gl-ml-3">
               <h3 class="gl-font-lg gl-m-0 gl-mb-2">{{ provider.name }}</h3>

locale/gitlab.pot

@@ -32377,6 +32377,9 @@ msgstr ""
 msgid "Secret token"
 msgstr ""
 
+msgid "Secure Code Warrior"
+msgstr ""
+
 msgid "Secure Files"
 msgstr ""
 

spec/frontend/security_configuration/components/training_provider_list_spec.js

@@ -25,6 +25,7 @@ import {
   updateSecurityTrainingProvidersErrorResponse,
   testProjectPath,
   testProviderIds,
+  testProviderName,
   tempProviderLogos,
 } from '../mock_data';
 
@@ -193,9 +194,13 @@ describe('TrainingProviderList component', () => {
         expect(findLogos().at(provider).attributes('width')).toBe('18');
       });
 
+      it.each(providerIndexArray)('has a11y decorative attribute for provider %s', (provider) => {
+        expect(findLogos().at(provider).attributes('role')).toBe('presentation');
+      });
+
       it.each(providerIndexArray)('displays the correct svg path for provider %s', (provider) => {
         expect(findLogos().at(provider).attributes('src')).toBe(
-          tempProviderLogos[testProviderIds[provider]].svg,
+          tempProviderLogos[testProviderName[provider]].svg,
         );
       });
     });

spec/frontend/security_configuration/mock_data.js

 export const testProjectPath = 'foo/bar';
-
 export const testProviderIds = [101, 102, 103];
+export const testProviderName = ['Vendor Name 1', 'Vendor Name 2', 'Vendor Name 3'];
 
 const createSecurityTrainingProviders = ({ providerOverrides = {} }) => [
   {
     id: testProviderIds[0],
-    name: 'Vendor Name 1',
+    name: testProviderName[0],
     description: 'Interactive developer security education',
     url: 'https://www.example.org/security/training',
     isEnabled: false,
@@ -14,7 +14,7 @@ const createSecurityTrainingProviders = ({ providerOverrides = {} }) => [
   },
   {
     id: testProviderIds[1],
-    name: 'Vendor Name 2',
+    name: testProviderName[1],
     description: 'Security training with guide and learning pathways.',
     url: 'https://www.vendornametwo.com/',
     isEnabled: false,
@@ -23,7 +23,7 @@ const createSecurityTrainingProviders = ({ providerOverrides = {} }) => [
   },
   {
     id: testProviderIds[2],
-    name: 'Vendor Name 3',
+    name: testProviderName[2],
     description: 'Security training for the everyday developer.',
     url: 'https://www.vendornamethree.com/',
     isEnabled: false,
@@ -99,10 +99,10 @@ export const updateSecurityTrainingProvidersErrorResponse = {
 // Will remove once this issue is resolved where the svg path will be available in the GraphQL query
 // https://gitlab.com/gitlab-org/gitlab/-/issues/346899
 export const tempProviderLogos = {
-  [testProviderIds[0]]: {
+  [testProviderName[0]]: {
     svg: '/assets/illustrations/vulnerability/vendor-1.svg',
   },
-  [testProviderIds[1]]: {
+  [testProviderName[1]]: {
     svg: '/assets/illustrations/vulnerability/vendor-2.svg',
   },
 };