Fixed classifier i18n

DependencyTrack · Feb 17, 2022 · 52bae94 · 52bae94
1 parent 3661ecf
commit 52bae94
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 29 deletions.
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -304,7 +304,7 @@
     "component_framework": "Framework",
     "component_library": "Library",
     "component_container": "Container",
-    "component_os": "Operation system",
+    "component_operating_system": "Operation system",
     "component_device": "Device",
     "component_firmware": "Firmware",
     "component_file": "File"

diff --git a/src/shared/common.js b/src/shared/common.js
@@ -190,6 +190,31 @@ $common.makeAnalysisResponseLabelFormatter = (i18n) => {
   }
 };
 
+/**
+ *
+ * @param {*} i18n - VueI18n instance with $t translate function available
+ * @returns a specialized label for component and project classifiers (APPLICATION, LIBRARY, etc).
+ * It must have a corresponding entry in the locales files (e.g. src/locales/en.json)
+ * (application, library, etc.)
+ */
+$common.componentClassifierLabelFormatter = (i18n) => {
+  return function (value) {
+    switch (value) {
+      case 'APPLICATION':
+      case 'FRAMEWORK':
+      case 'LIBRARY':
+      case 'CONTAINER':
+      case 'OPERATING_SYSTEM':
+      case 'DEVICE':
+      case 'FIRMWARE':
+      case 'FILE':
+        return i18n.$t(`message.component_${value.toLowerCase()}`)
+      default:
+        return null;
+    }
+  }
+};
+
 /**
  * Given a UNIX timestamp, this function will return a formatted date.
  * i.e. 15 Jan 2017
@@ -291,6 +316,7 @@ module.exports = {
   formatAnalyzerLabel: $common.formatAnalyzerLabel,
   makeAnalysisStateLabelFormatter: $common.makeAnalysisStateLabelFormatter,
   makeAnalysisJustificationLabelFormatter: $common.makeAnalysisJustificationLabelFormatter,
+  componentClassifierLabelFormatter: $common.componentClassifierLabelFormatter,
   formatTimestamp: $common.formatTimestamp,
   concatenateComponentName: $common.concatenateComponentName,
   valueWithDefault: $common.valueWithDefault,

diff --git a/src/views/portfolio/projects/ComponentDetailsModal.vue b/src/views/portfolio/projects/ComponentDetailsModal.vue
@@ -146,14 +146,14 @@
     data() {
       return {
         availableClassifiers: [
-          { value: 'APPLICATION', text: 'Application' },
-          { value: 'FRAMEWORK', text: 'Framework' },
-          { value: 'LIBRARY', text: 'Library' },
-          { value: 'CONTAINER', text: 'Container' },
-          { value: 'OPERATING_SYSTEM', text: 'Operating System' },
-          { value: 'DEVICE', text: 'Device' },
-          { value: 'FIRMWARE', text: 'Firmware' },
-          { value: 'FILE', text: 'File' }
+          { value: 'APPLICATION', text: this.$i18n.t('message.component_application') },
+          { value: 'FRAMEWORK', text: this.$i18n.t('message.component_framework') },
+          { value: 'LIBRARY', text: this.$i18n.t('message.component_library') },
+          { value: 'CONTAINER', text: this.$i18n.t('message.component_container') },
+          { value: 'OPERATING_SYSTEM', text: this.$i18n.t('message.component_operating_system') },
+          { value: 'DEVICE', text: this.$i18n.t('message.component_device') },
+          { value: 'FIRMWARE', text: this.$i18n.t('message.component_firmware') },
+          { value: 'FILE', text: this.$i18n.t('message.component_file') }
         ],
         selectableLicenses: [],
         selectedLicense: '',

diff --git a/src/views/portfolio/projects/ProjectAddComponentModal.vue b/src/views/portfolio/projects/ProjectAddComponentModal.vue
@@ -110,14 +110,14 @@
     data() {
       return {
         availableClassifiers: [
-          { value: 'APPLICATION', text: 'Application' },
-          { value: 'FRAMEWORK', text: 'Framework' },
-          { value: 'LIBRARY', text: 'Library' },
-          { value: 'CONTAINER', text: 'Container' },
-          { value: 'OPERATING_SYSTEM', text: 'Operating System' },
-          { value: 'DEVICE', text: 'Device' },
-          { value: 'FIRMWARE', text: 'Firmware' },
-          { value: 'FILE', text: 'File' }
+          { value: 'APPLICATION', text: this.$i18n.t('message.component_application') },
+          { value: 'FRAMEWORK', text: this.$i18n.t('message.component_framework') },
+          { value: 'LIBRARY', text: this.$i18n.t('message.component_library') },
+          { value: 'CONTAINER', text: this.$i18n.t('message.component_container') },
+          { value: 'OPERATING_SYSTEM', text: this.$i18n.t('message.component_operating_system') },
+          { value: 'DEVICE', text: this.$i18n.t('message.component_device') },
+          { value: 'FIRMWARE', text: this.$i18n.t('message.component_firmware') },
+          { value: 'FILE', text: this.$i18n.t('message.component_file') }
         ],
         selectableLicenses: [],
         selectedLicense: '',

diff --git a/src/views/portfolio/projects/ProjectCreateProjectModal.vue b/src/views/portfolio/projects/ProjectCreateProjectModal.vue
@@ -104,7 +104,7 @@
           { value: 'FRAMEWORK', text: this.$i18n.t('message.component_framework') },
           { value: 'LIBRARY', text: this.$i18n.t('message.component_library') },
           { value: 'CONTAINER', text: this.$i18n.t('message.component_container') },
-          { value: 'OPERATING_SYSTEM', text: this.$i18n.t('message.component_os') },
+          { value: 'OPERATING_SYSTEM', text: this.$i18n.t('message.component_operating_system') },
           { value: 'DEVICE', text: this.$i18n.t('message.component_device') },
           { value: 'FIRMWARE', text: this.$i18n.t('message.component_firmware') },
           { value: 'FILE', text: this.$i18n.t('message.component_file') }
@@ -135,8 +135,8 @@
       sortAvailableClassifiers: function() {
         this.availableClassifiers.sort(function(a, b) {
           return a.text.localeCompare(b.text);
-        });      
-        return this.availableClassifiers;  
+        });
+        return this.availableClassifiers;
       }
     },
     methods: {

diff --git a/src/views/portfolio/projects/ProjectDetailsModal.vue b/src/views/portfolio/projects/ProjectDetailsModal.vue
@@ -106,14 +106,14 @@
         readOnlyProjectName: '',
         readOnlyProjectVersion: '',
         availableClassifiers: [
-          { value: 'APPLICATION', text: 'Application' },
-          { value: 'FRAMEWORK', text: 'Framework' },
-          { value: 'LIBRARY', text: 'Library' },
-          { value: 'CONTAINER', text: 'Container' },
-          { value: 'OPERATING_SYSTEM', text: 'Operating System' },
-          { value: 'DEVICE', text: 'Device' },
-          { value: 'FIRMWARE', text: 'Firmware' },
-          { value: 'FILE', text: 'File' }
+          { value: 'APPLICATION', text: this.$i18n.t('message.component_application') },
+          { value: 'FRAMEWORK', text: this.$i18n.t('message.component_framework') },
+          { value: 'LIBRARY', text: this.$i18n.t('message.component_library') },
+          { value: 'CONTAINER', text: this.$i18n.t('message.component_container') },
+          { value: 'OPERATING_SYSTEM', text: this.$i18n.t('message.component_operating_system') },
+          { value: 'DEVICE', text: this.$i18n.t('message.component_device') },
+          { value: 'FIRMWARE', text: this.$i18n.t('message.component_firmware') },
+          { value: 'FILE', text: this.$i18n.t('message.component_file') }
         ],
         tag: '', // The contents of a tag as its being typed into the vue-tag-input
         tags: [], // An array of tags bound to the vue-tag-input

diff --git a/src/views/portfolio/projects/ProjectList.vue b/src/views/portfolio/projects/ProjectList.vue
@@ -92,7 +92,8 @@
           {
             title: this.$t('message.classifier'),
             field: "classifier",
-            sortable: true
+            sortable: true,
+            formatter: common.componentClassifierLabelFormatter(this),
           },
           {
             title: this.$t('message.last_bom_import'),