Add training logo to vulnerability details

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

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

@@ -9,6 +9,7 @@ import { convertToGraphQLId } from '~/graphql_shared/utils';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import Tracking from '~/tracking';
 import { TRACK_CLICK_TRAINING_LINK_ACTION } from '~/security_configuration/constants';
+import { TEMP_PROVIDER_LOGOS } from '~/security_configuration/components/constants';
 import { SUPPORTED_IDENTIFIER_TYPES, SECURITY_TRAINING_URL_STATUS_COMPLETED } from '../constants';
 
 export const i18n = {
@@ -22,6 +23,7 @@ export const i18n = {
 
 export default {
   i18n,
+  TEMP_PROVIDER_LOGOS,
   components: {
     GlLink,
     GlIcon,
@@ -142,6 +144,9 @@ export default {
     <div v-else>
       <div v-for="({ name, url }, index) in securityTrainingUrls" :key="index" class="gl-mt-6">
         <div>
+          <span v-if="$options.TEMP_PROVIDER_LOGOS[name]" class="gl-mr-1 gl-display-inline-flex">
+            <img :src="$options.TEMP_PROVIDER_LOGOS[name].svg" width="12" role="presentation" />
+          </span>
           <span class="gl-font-weight-bold gl-font-base">{{ name }}</span>
         </div>
         <gl-link :href="url" target="_blank" @click="clickTrainingLink(name, url)">

ee/spec/frontend/vulnerabilities/vulnerability_training_spec.js

@@ -20,6 +20,7 @@ import {
   testProviderName,
   testTrainingUrls,
   getSecurityTrainingProvidersData,
+  tempProviderLogos,
 } from 'jest/security_configuration/mock_data';
 import { getSecurityTrainingVulnerabilityData, defaultProps } from './mock_data';
 
@@ -98,6 +99,7 @@ describe('VulnerabilityTraining component', () => {
   const findTrainingItemName = (name) => wrapper.findByText(name);
   const findTrainingItemLinks = () => wrapper.findAllComponents(GlLink);
   const findTrainingItemLinkIcons = () => wrapper.findAllComponents(GlIcon);
+  const findTrainingLogos = () => wrapper.findAll('img');
 
   describe('with the query being successful', () => {
     describe('basic structure', () => {
@@ -217,6 +219,31 @@ describe('VulnerabilityTraining component', () => {
       });
     });
 
+    describe('training logo', () => {
+      beforeEach(async () => {
+        createApolloProvider();
+        createComponent();
+        wrapper.vm.$options.TEMP_PROVIDER_LOGOS = tempProviderLogos;
+        await waitForQueryToBeLoaded();
+      });
+
+      const providerIndexArray = [0, 1];
+
+      it.each(providerIndexArray)('displays the correct width for training item %s', (index) => {
+        expect(findTrainingLogos().at(index).attributes('width')).toBe('12');
+      });
+
+      it.each(providerIndexArray)('has a11y decorative attribute for provider %s', (index) => {
+        expect(findTrainingLogos().at(index).attributes('role')).toBe('presentation');
+      });
+
+      it.each(providerIndexArray)('displays the correct svg path for training item %s', (index) => {
+        expect(findTrainingLogos().at(index).attributes('src')).toBe(
+          tempProviderLogos[testProviderName[index]].svg,
+        );
+      });
+    });
+
     describe('training item', () => {
       it('displays correct number of training items', async () => {
         createApolloProvider();