Fix security provider logo

Use import svg logos as relative path is not working in production

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

@@ -16,6 +16,8 @@ import {
   REPORT_TYPE_LICENSE_COMPLIANCE,
 } from '~/vue_shared/security_reports/constants';
 
+import kontraLogo from 'images/vulnerability/kontra-logo.svg';
+import scwLogo from 'images/vulnerability/scw-logo.svg';
 import configureSastMutation from '../graphql/configure_sast.mutation.graphql';
 import configureSastIacMutation from '../graphql/configure_iac.mutation.graphql';
 import configureSecretDetectionMutation from '../graphql/configure_secret_detection.mutation.graphql';
@@ -284,9 +286,9 @@ export const AUTO_DEVOPS_ENABLED_ALERT_DISMISSED_STORAGE_KEY =
 // https://gitlab.com/gitlab-org/gitlab/-/issues/346899
 export const TEMP_PROVIDER_LOGOS = {
   Kontra: {
-    svg: '/assets/vulnerability/kontra-logo.svg',
+    svg: kontraLogo,
   },
   [__('Secure Code Warrior')]: {
-    svg: '/assets/vulnerability/scw-logo.svg',
+    svg: scwLogo,
   },
 };

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

@@ -7,6 +7,7 @@ import {
   GlLink,
   GlSkeletonLoader,
   GlIcon,
+  GlSafeHtmlDirective,
 } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import Tracking from '~/tracking';
@@ -50,6 +51,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
+    SafeHtml: GlSafeHtmlDirective,
   },
   mixins: [Tracking.mixin()],
   inject: ['projectFullPath'],
@@ -233,11 +235,12 @@ export default {
               @change="toggleProvider(provider)"
             />
             <div v-if="$options.TEMP_PROVIDER_LOGOS[provider.name]" class="gl-ml-4">
-              <img
-                :src="$options.TEMP_PROVIDER_LOGOS[provider.name].svg"
-                width="18"
+              <div
+                v-safe-html="$options.TEMP_PROVIDER_LOGOS[provider.name].svg"
+                data-testid="provider-logo"
+                style="width: 18px"
                 role="presentation"
-              />
+              ></div>
             </div>
             <div class="gl-ml-3">
               <h3 class="gl-font-lg gl-m-0 gl-mb-2">{{ provider.name }}</h3>

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

 <script>
-import { GlLink, GlIcon, GlSkeletonLoader } from '@gitlab/ui';
+import { GlLink, GlIcon, GlSkeletonLoader, GlSafeHtmlDirective } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import { s__, __ } from '~/locale';
 import securityTrainingProvidersQuery from '~/security_configuration/graphql/security_training_providers.query.graphql';
@@ -30,6 +30,9 @@ export default {
     GlIcon,
     GlSkeletonLoader,
   },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   mixins: [glFeatureFlagsMixin(), Tracking.mixin()],
   props: {
     projectFullPath: {
@@ -162,7 +165,12 @@ export default {
       <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" />
+            <div
+              v-safe-html="$options.TEMP_PROVIDER_LOGOS[name].svg"
+              data-testid="provider-logo"
+              style="width: 12px"
+              role="presentation"
+            ></div>
           </span>
           <span class="gl-font-weight-bold gl-font-base">{{ name }}</span>
         </div>

ee/spec/frontend/vulnerabilities/vulnerability_training_spec.js

@@ -99,7 +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');
+  const findTrainingLogos = () => wrapper.findAllByTestId('provider-logo');
 
   describe('with the query being successful', () => {
     describe('basic structure', () => {
@@ -225,15 +225,15 @@ describe('VulnerabilityTraining component', () => {
       const providerIndexArray = [0, 1];
 
       it.each(providerIndexArray)('displays the correct width for training item %s', (index) => {
-        expect(findTrainingLogos().at(index).attributes('width')).toBe('12');
+        expect(findTrainingLogos().at(index).attributes('style')).toBe('width: 12px;');
       });
 
       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(
+      it.each(providerIndexArray)('renders the svg content for training item %s', (index) => {
+        expect(findTrainingLogos().at(index).html()).toContain(
           tempProviderLogos[testProviderName[index]].svg,
         );
       });

spec/frontend/security_configuration/components/training_provider_list_spec.js

@@ -89,7 +89,7 @@ describe('TrainingProviderList component', () => {
   const findPrimaryProviderRadios = () => wrapper.findAllByTestId('primary-provider-radio');
   const findLoader = () => wrapper.findComponent(GlSkeletonLoader);
   const findErrorAlert = () => wrapper.findComponent(GlAlert);
-  const findLogos = () => wrapper.findAll('img');
+  const findLogos = () => wrapper.findAllByTestId('provider-logo');
 
   const toggleFirstProvider = () => findFirstToggle().vm.$emit('change', testProviderIds[0]);
 
@@ -205,15 +205,15 @@ describe('TrainingProviderList component', () => {
       const providerIndexArray = [0, 1];
 
       it.each(providerIndexArray)('displays the correct width for provider %s', (provider) => {
-        expect(findLogos().at(provider).attributes('width')).toBe('18');
+        expect(findLogos().at(provider).attributes('style')).toBe('width: 18px;');
       });
 
       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(
+      it.each(providerIndexArray)('renders the svg content for provider %s', (provider) => {
+        expect(findLogos().at(provider).html()).toContain(
           tempProviderLogos[testProviderName[provider]].svg,
         );
       });

spec/frontend/security_configuration/mock_data.js

@@ -105,9 +105,9 @@ export const updateSecurityTrainingProvidersErrorResponse = {
 // https://gitlab.com/gitlab-org/gitlab/-/issues/346899
 export const tempProviderLogos = {
   [testProviderName[0]]: {
-    svg: '/assets/illustrations/vulnerability/vendor-1.svg',
+    svg: `<svg>${[testProviderName[0]]}</svg>`,
   },
   [testProviderName[1]]: {
-    svg: '/assets/illustrations/vulnerability/vendor-2.svg',
+    svg: `<svg>${[testProviderName[1]]}</svg>`,
   },
 };