Add provider logo UI to security config

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

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

@@ -27,6 +27,17 @@ 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,
@@ -187,6 +198,7 @@ export default {
     },
   },
   i18n,
+  TEMP_PROVIDER_LOGOS,
 };
 </script>
 
@@ -215,7 +227,10 @@ export default {
               label-position="hidden"
               @change="toggleProvider(provider)"
             />
-            <div class="gl-ml-5">
+            <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>
+            <div class="gl-ml-3">
               <h3 class="gl-font-lg gl-m-0 gl-mb-2">{{ provider.name }}</h3>
               <p>
                 {{ provider.description }}

ee/app/assets/images/illustrations/vulnerability/kontra-logo.svg

+<svg enable-background="new 0 0 50 50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="10.2941" x2="50" y1="17.8247" y2="17.8247"><stop offset="0" stop-color="#f39c63"/><stop offset="1" stop-color="#ef5d4f"/></linearGradient><linearGradient id="b"><stop offset="0" stop-color="#231c4f"/><stop offset="1" stop-color="#0a0430"/></linearGradient><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="16.9118" x2="25" xlink:href="#b" y1="27.2046" y2="27.2046"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="27.9412" x2="33.0882" xlink:href="#b" y1="22.0575" y2="22.0575"/><g clip-rule="evenodd" fill-rule="evenodd"><path d="m31.94 41.71-31.94 8.41v-21.23c0-4.73 3.19-8.87 7.77-10.07l19.29-5.08c6.4-1.68 12.65 3.14 12.65 9.75v8.14c0 4.74-3.19 8.88-7.77 10.08z" fill="#2b6af9"/><path d="m50 0v21.23c0 4.73-3.19 8.87-7.77 10.07l-14.79 3.89c-8.67 2.28-17.15-4.26-17.15-13.22v-3.49c0-4.73 3.19-8.87 7.77-10.07z" fill="url(#a)"/><path d="m23.36 36.33 16.35-4.3v-8.16c0-6.83-6.46-11.81-13.06-10.07l-16.35 4.3v8.16c-.01 6.82 6.45 11.8 13.06 10.07z" fill="#fff"/><circle cx="20.96" cy="27.2" fill="url(#c)" r="4.04"/><circle cx="30.51" cy="22.06" fill="url(#d)" r="2.57"/></g></svg>
\ No newline at end of file

ee/app/assets/images/illustrations/vulnerability/scw-logo.svg

+<svg enable-background="new 0 0 0 0" viewBox="0 0 800 780" xmlns="http://www.w3.org/2000/svg"><path d="m594.4 737.87c-.75-1.93-1.86-3.7-3.34-5.29-1.48-1.6-3.29-2.86-5.44-3.8-2.15-.93-4.62-1.4-7.41-1.4s-5.26.47-7.41 1.4c-2.14.94-3.96 2.21-5.43 3.8-1.48 1.59-2.59 3.36-3.34 5.29s-1.13 3.91-1.13 5.95v.96c0 1.96.36 3.91 1.1 5.86.73 1.96 1.82 3.74 3.28 5.35s3.27 2.91 5.43 3.89c2.17.98 4.67 1.46 7.5 1.46s5.33-.49 7.5-1.46c2.16-.98 3.98-2.28 5.43-3.89 1.46-1.61 2.55-3.4 3.28-5.35s1.1-3.91 1.1-5.86v-.96c.01-2.04-.37-4.02-1.12-5.95zm-4.01 13.45c-1.15 2.1-2.78 3.77-4.86 5.02-2.09 1.25-4.52 1.89-7.32 1.89-2.79 0-5.24-.63-7.32-1.89-2.09-1.25-3.71-2.93-4.86-5.02s-1.73-4.42-1.73-6.97c0-2.63.58-4.99 1.73-7.09 1.15-2.09 2.77-3.74 4.86-4.96 2.08-1.21 4.52-1.82 7.32-1.82 2.79 0 5.23.61 7.32 1.82 2.08 1.22 3.71 2.87 4.86 4.96 1.15 2.1 1.73 4.46 1.73 7.09 0 2.56-.58 4.88-1.73 6.97z" fill="#f79200"/><path d="m584.11 746.03c1.42-1.12 2.12-2.73 2.12-4.84s-.71-3.73-2.12-4.85c-1.42-1.11-3.4-1.67-5.95-1.67h-2.55-2.37-2.12v18.66h4.49v-5.62h2.55c.09 0 .17-.01.25-.01l3.81 5.64h5.1l-4.69-6.45c.54-.25 1.04-.52 1.48-.86zm-8.5-7.6h2.85c1.1 0 1.9.23 2.43.69s.79 1.15.79 2.07-.26 1.6-.79 2.06-1.33.68-2.43.68h-2.85z" fill="#f79200"/><path d="m333.8 753.41-17.62 7.9v-88.45s76.18-50.47 93.76-64.21c46.25-36.15 101.39-92.54 101.39-155.86v-22.33l40.76-32.62h-235.91v-83.73h280.18v138.69c0 180.72-251.84 295.81-262.56 300.61zm-17.53-638.54c21.22 2.88 121.7 20.25 195.07 97.32v62.85h85.03v-94.02l-10-11.68c-104.42-122.2-259.7-137.72-266.27-138.32l-3.92-.36v84.23c.03-.01.06-.01.09-.02z" fill="#ffbe12"/><path d="m316.18 397.85h-280.18v-216.82l9.99-11.68c104.42-122.21 259.7-137.73 266.25-138.33l3.94-.36v84.23c-21.06 2.97-122.24 20.87-195.17 97.32v74.53l-36.5 27.39h231.66v83.72zm-93.77 210.81c-46.27-36.15-101.4-87.26-101.4-143.31l20.24-28.41h-105.25v28.41c0 171.17 251.84 283.27 262.56 288.07l17.63 7.9v-88.45c-.01 0-76.2-50.47-93.78-64.21z" fill="#f79200"/></svg>
\ No newline at end of file

spec/frontend/security_configuration/components/training_provider_list_spec.js

@@ -25,6 +25,7 @@ import {
   updateSecurityTrainingProvidersErrorResponse,
   testProjectPath,
   testProviderIds,
+  tempProviderLogos,
 } from '../mock_data';
 
 Vue.use(VueApollo);
@@ -83,6 +84,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 toggleFirstProvider = () => findFirstToggle().vm.$emit('change', testProviderIds[0]);
 
@@ -179,6 +181,25 @@ describe('TrainingProviderList component', () => {
       );
     });
 
+    describe('provider logo', () => {
+      beforeEach(async () => {
+        wrapper.vm.$options.TEMP_PROVIDER_LOGOS = tempProviderLogos;
+        await waitForQueryToBeLoaded();
+      });
+
+      const providerIndexArray = [0, 1];
+
+      it.each(providerIndexArray)('displays the correct width for provider %s', (provider) => {
+        expect(findLogos().at(provider).attributes('width')).toBe('18');
+      });
+
+      it.each(providerIndexArray)('displays the correct svg path for provider %s', (provider) => {
+        expect(findLogos().at(provider).attributes('src')).toBe(
+          tempProviderLogos[testProviderIds[provider]].svg,
+        );
+      });
+    });
+
     describe('storing training provider settings', () => {
       beforeEach(async () => {
         jest.spyOn(apolloProvider.defaultClient, 'mutate');

spec/frontend/security_configuration/mock_data.js

@@ -95,3 +95,14 @@ 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]]: {
+    svg: '/assets/illustrations/vulnerability/vendor-1.svg',
+  },
+  [testProviderIds[1]]: {
+    svg: '/assets/illustrations/vulnerability/vendor-2.svg',
+  },
+};