Merge branch...

Merge branch '356089-learn-more-link-for-security-training-providers-point-to-the-wrong-location' into 'master'

Fix learn-more links for sec providers

See merge request gitlab-org/gitlab!83081

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

@@ -292,3 +292,10 @@ export const TEMP_PROVIDER_LOGOS = {
     svg: scwLogo,
   },
 };
+
+// Use the `url` field from the GraphQL query once this issue is resolved
+// https://gitlab.com/gitlab-org/gitlab/-/issues/356129
+export const TEMP_PROVIDER_URLS = {
+  Kontra: 'https://application.security/',
+  [__('Secure Code Warrior')]: 'https://www.securecodewarrior.com/',
+};

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

@@ -25,7 +25,7 @@ import {
   updateSecurityTrainingCache,
   updateSecurityTrainingOptimisticResponse,
 } from '~/security_configuration/graphql/cache_utils';
-import { TEMP_PROVIDER_LOGOS } from './constants';
+import { TEMP_PROVIDER_LOGOS, TEMP_PROVIDER_URLS } from './constants';
 
 const i18n = {
   providerQueryErrorMessage: __(
@@ -206,6 +206,7 @@ export default {
   },
   i18n,
   TEMP_PROVIDER_LOGOS,
+  TEMP_PROVIDER_URLS,
 };
 </script>
 
@@ -247,7 +248,8 @@ export default {
               <p>
                 {{ provider.description }}
                 <gl-link
-                  :href="provider.url"
+                  v-if="$options.TEMP_PROVIDER_URLS[provider.name]"
+                  :href="$options.TEMP_PROVIDER_URLS[provider.name]"
                   target="_blank"
                   @click="trackProviderLearnMoreClick(provider.id)"
                 >

spec/frontend/security_configuration/components/training_provider_list_spec.js

@@ -12,6 +12,7 @@ import {
   TRACK_PROVIDER_LEARN_MORE_CLICK_ACTION,
   TRACK_PROVIDER_LEARN_MORE_CLICK_LABEL,
 } from '~/security_configuration/constants';
+import { TEMP_PROVIDER_URLS } from '~/security_configuration/components/constants';
 import TrainingProviderList from '~/security_configuration/components/training_provider_list.vue';
 import { updateSecurityTrainingOptimisticResponse } from '~/security_configuration/graphql/cache_utils';
 import securityTrainingProvidersQuery from '~/security_configuration/graphql/security_training_providers.query.graphql';
@@ -145,8 +146,7 @@ describe('TrainingProviderList component', () => {
         expect(findCards()).toHaveLength(TEST_TRAINING_PROVIDERS_DEFAULT.data.length);
       });
 
-      TEST_TRAINING_PROVIDERS_DEFAULT.data.forEach(
-        ({ name, description, url, isEnabled }, index) => {
+      TEST_TRAINING_PROVIDERS_DEFAULT.data.forEach(({ name, description, isEnabled }, index) => {
         it(`shows the name for card ${index}`, () => {
           expect(findCards().at(index).text()).toContain(name);
         });
@@ -155,11 +155,18 @@ describe('TrainingProviderList component', () => {
           expect(findCards().at(index).text()).toContain(description);
         });
 
-          it(`shows the learn more link for card ${index}`, () => {
-            expect(findLinks().at(index).attributes()).toEqual({
+        it(`shows the learn more link for enabled card ${index}`, () => {
+          const learnMoreLink = findCards().at(index).find(GlLink);
+          const tempLogo = TEMP_PROVIDER_URLS[name];
+
+          if (tempLogo) {
+            expect(learnMoreLink.attributes()).toEqual({
               target: '_blank',
-              href: url,
+              href: TEMP_PROVIDER_URLS[name],
             });
+          } else {
+            expect(learnMoreLink.exists()).toBe(false);
+          }
         });
 
         it(`shows the toggle with the correct value for card ${index}`, () => {
@@ -192,8 +199,7 @@ describe('TrainingProviderList component', () => {
         it('does not show loader when query is populated', () => {
           expect(findLoader().exists()).toBe(false);
         });
-        },
-      );
+      });
     });
 
     describe('provider logo', () => {

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'];
+export const testProviderName = ['Kontra', 'Secure Code Warrior', 'Other Vendor'];
 export const testTrainingUrls = [
   'https://www.vendornameone.com/url',
   'https://www.vendornametwo.com/url',