From e82af095c7f467bc33cfaa992b94e092ad95e33d Mon Sep 17 00:00:00 2001
From: Samantha Ming <sming@gitlab.com>
Date: Wed, 9 Mar 2022 18:24:39 -0800
Subject: [PATCH] Update security config to use provider name
Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/355119
---
.../components/constants.js | 11 ++++++++++
.../components/training_provider_list.vue | 20 +++++++------------
locale/gitlab.pot | 3 +++
.../components/training_provider_list_spec.js | 7 ++++++-
.../security_configuration/mock_data.js | 12 +++++------
5 files changed, 33 insertions(+), 20 deletions(-)
diff --git a/app/assets/javascripts/security_configuration/components/constants.js b/app/assets/javascripts/security_configuration/components/constants.js
index 81d222438e320..11e092d8eb444 100644
--- a/app/assets/javascripts/security_configuration/components/constants.js
+++ b/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',
+ },
+};
diff --git a/app/assets/javascripts/security_configuration/components/training_provider_list.vue b/app/assets/javascripts/security_configuration/components/training_provider_list.vue
index 4b40e5a1e1d0e..40f53a7f95077 100644
--- a/app/assets/javascripts/security_configuration/components/training_provider_list.vue
+++ b/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>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 62a0e00609255..a449b57109417 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -32377,6 +32377,9 @@ msgstr ""
msgid "Secret token"
msgstr ""
+msgid "Secure Code Warrior"
+msgstr ""
+
msgid "Secure Files"
msgstr ""
diff --git a/spec/frontend/security_configuration/components/training_provider_list_spec.js b/spec/frontend/security_configuration/components/training_provider_list_spec.js
index 08b7993006736..f9132a75f4a8b 100644
--- a/spec/frontend/security_configuration/components/training_provider_list_spec.js
+++ b/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,
);
});
});
diff --git a/spec/frontend/security_configuration/mock_data.js b/spec/frontend/security_configuration/mock_data.js
index 588fac119879e..3bad687740c8c 100644
--- a/spec/frontend/security_configuration/mock_data.js
+++ b/spec/frontend/security_configuration/mock_data.js
@@ -1,11 +1,11 @@
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',
},
};
--
GitLab