Move translations mapping to a helper

This extracts the code that maps scanner names to their translations
into a dedicated helper.

app/assets/javascripts/security_configuration/utils.js

 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { SCANNER_NAMES_MAP } from '~/security_configuration/components/constants';
 
 export const augmentFeatures = (securityFeatures, complianceFeatures, features = []) => {
   const featuresByType = features.reduce((acc, feature) => {
@@ -24,3 +25,13 @@ export const augmentFeatures = (securityFeatures, complianceFeatures, features =
     augmentedComplianceFeatures: complianceFeatures.map((feature) => augmentFeature(feature)),
   };
 };
+
+/**
+ * Converts a list of security scanner IDs (such as SAST_IAC) into a list of their translated
+ * names defined in the SCANNER_NAMES_MAP constant (eg. IaC Scanning).
+ *
+ * @param {String[]} scannerNames
+ * @returns {String[]}
+ */
+export const translateScannerNames = (scannerNames = []) =>
+  scannerNames.map((scannerName) => SCANNER_NAMES_MAP[scannerName] || scannerName);

ee/app/assets/javascripts/security_dashboard/components/project/project_vulnerabilities.vue

@@ -9,7 +9,7 @@ import { preparePageInfo } from 'ee/security_dashboard/helpers';
 import { VULNERABILITIES_PER_PAGE } from 'ee/security_dashboard/store/constants';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
-import { SCANNER_NAMES_MAP } from '~/security_configuration/components/constants';
+import { translateScannerNames } from '~/security_configuration/utils';
 import VulnerabilityList from '../shared/vulnerability_list.vue';
 import SecurityScannerAlert from './security_scanner_alert.vue';
 
@@ -92,12 +92,11 @@ export default {
       },
       update({ project = {} }) {
         const { available = [], enabled = [], pipelineRun = [] } = project?.securityScanners || {};
-        const translateScannerName = (scannerName) => SCANNER_NAMES_MAP[scannerName] || scannerName;
 
         return {
-          available: available.map(translateScannerName),
-          enabled: enabled.map(translateScannerName),
-          pipelineRun: pipelineRun.map(translateScannerName),
+          available: translateScannerNames(available),
+          enabled: translateScannerNames(enabled),
+          pipelineRun: translateScannerNames(pipelineRun),
         };
       },
     },

ee/app/assets/javascripts/security_dashboard/components/project/project_vulnerability_report.vue

@@ -4,7 +4,7 @@ import { difference } from 'lodash';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import { SCANNER_NAMES_MAP } from '~/security_configuration/components/constants';
+import { translateScannerNames } from '~/security_configuration/utils';
 import ReportNotConfiguredProject from '../shared/empty_states/report_not_configured_project.vue';
 import VulnerabilityReportTabs from '../shared/vulnerability_report/vulnerability_report_tabs.vue';
 import projectVulnerabilitiesQuery from '../../graphql/queries/project_vulnerabilities.query.graphql';
@@ -40,12 +40,11 @@ export default {
       },
       update({ project = {} }) {
         const { available = [], enabled = [], pipelineRun = [] } = project?.securityScanners || {};
-        const translateScannerName = (scannerName) => SCANNER_NAMES_MAP[scannerName] || scannerName;
 
         return {
-          available: available.map(translateScannerName),
-          enabled: enabled.map(translateScannerName),
-          pipelineRun: pipelineRun.map(translateScannerName),
+          available: translateScannerNames(available),
+          enabled: translateScannerNames(enabled),
+          pipelineRun: translateScannerNames(pipelineRun),
         };
       },
     },

spec/frontend/security_configuration/utils_spec.js

-import { augmentFeatures } from '~/security_configuration/utils';
+import { augmentFeatures, translateScannerNames } from '~/security_configuration/utils';
+import { SCANNER_NAMES_MAP } from '~/security_configuration/components/constants';
 
-const mockSecurityFeatures = [
+describe('augmentFeatures', () => {
+  const mockSecurityFeatures = [
     {
       name: 'SAST',
       type: 'SAST',
     },
-];
+  ];
 
-const mockComplianceFeatures = [
+  const mockComplianceFeatures = [
     {
       name: 'LICENSE_COMPLIANCE',
       type: 'LICENSE_COMPLIANCE',
     },
-];
+  ];
 
-const mockFeaturesWithSecondary = [
+  const mockFeaturesWithSecondary = [
     {
       name: 'DAST',
       type: 'DAST',
@@ -23,46 +25,46 @@ const mockFeaturesWithSecondary = [
         name: 'DAST PROFILES',
       },
     },
-];
+  ];
 
-const mockInvalidCustomFeature = [
+  const mockInvalidCustomFeature = [
     {
       foo: 'bar',
     },
-];
+  ];
 
-const mockValidCustomFeature = [
+  const mockValidCustomFeature = [
     {
       name: 'SAST',
       type: 'SAST',
       customField: 'customvalue',
     },
-];
+  ];
 
-const mockValidCustomFeatureSnakeCase = [
+  const mockValidCustomFeatureSnakeCase = [
     {
       name: 'SAST',
       type: 'SAST',
       custom_field: 'customvalue',
     },
-];
+  ];
 
-const expectedOutputDefault = {
+  const expectedOutputDefault = {
     augmentedSecurityFeatures: mockSecurityFeatures,
     augmentedComplianceFeatures: mockComplianceFeatures,
-};
+  };
 
-const expectedOutputSecondary = {
+  const expectedOutputSecondary = {
     augmentedSecurityFeatures: mockSecurityFeatures,
     augmentedComplianceFeatures: mockFeaturesWithSecondary,
-};
+  };
 
-const expectedOutputCustomFeature = {
+  const expectedOutputCustomFeature = {
     augmentedSecurityFeatures: mockValidCustomFeature,
     augmentedComplianceFeatures: mockComplianceFeatures,
-};
+  };
 
-describe('returns an object with augmentedSecurityFeatures and augmentedComplianceFeatures when', () => {
+  describe('returns an object with augmentedSecurityFeatures and augmentedComplianceFeatures when', () => {
     it('given an empty array', () => {
       expect(augmentFeatures(mockSecurityFeatures, mockComplianceFeatures, [])).toEqual(
         expectedOutputDefault,
@@ -86,9 +88,9 @@ describe('returns an object with augmentedSecurityFeatures and augmentedComplian
         augmentFeatures(mockSecurityFeatures, mockComplianceFeatures, mockValidCustomFeature),
       ).toEqual(expectedOutputCustomFeature);
     });
-});
+  });
 
-describe('returns an object with camelcased keys', () => {
+  describe('returns an object with camelcased keys', () => {
     it('given a customfeature in snakecase', () => {
       expect(
         augmentFeatures(
@@ -98,4 +100,21 @@ describe('returns an object with camelcased keys', () => {
         ),
       ).toEqual(expectedOutputCustomFeature);
     });
+  });
+});
+
+describe('translateScannerNames', () => {
+  it.each(['', undefined, null, 1, 'UNKNOWN_SCANNER_KEY'])('returns %p as is', (key) => {
+    expect(translateScannerNames([key])).toEqual([key]);
+  });
+
+  it('returns an empty array if no input is provided', () => {
+    expect(translateScannerNames([])).toEqual([]);
+  });
+
+  it('returns translated scanner names', () => {
+    expect(translateScannerNames(Object.keys(SCANNER_NAMES_MAP))).toEqual(
+      Object.values(SCANNER_NAMES_MAP),
+    );
+  });
 });