From 658b4c9817467d26fb3b38aa214d77e5ee770221 Mon Sep 17 00:00:00 2001
From: nscuro <nscuro@protonmail.com>
Date: Sun, 14 Apr 2024 18:01:43 +0200
Subject: [PATCH 1/2] Add support for component properties

Based on https://github.com/DependencyTrack/dependency-track/pull/3499

Signed-off-by: nscuro <nscuro@protonmail.com>
---
 src/i18n/locales/en.json                      |   2 +
 src/views/portfolio/projects/Component.vue    |   6 +
 .../projects/ComponentCreatePropertyModal.vue | 123 +++++++++++++++
 .../projects/ComponentDetailsModal.vue        |   9 ++
 .../projects/ComponentPropertiesModal.vue     | 145 ++++++++++++++++++
 5 files changed, 285 insertions(+)
 create mode 100644 src/views/portfolio/projects/ComponentCreatePropertyModal.vue
 create mode 100644 src/views/portfolio/projects/ComponentPropertiesModal.vue

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 665c9704d..a46858dc9 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -362,6 +362,7 @@
     "component_namespace_group_vendor": "Namespace / group / vendor",
     "component_operating_system": "Operating system",
     "component_package_url_desc": "A Valid Package URL is required for libraries and frameworks. PURL syntax: pkg:type/namespace/name@version?qualifiers#subpath",
+    "component_properties": "Component Properties",
     "component_search": "Component Search",
     "component_spdx_license_desc": "Specifies the SPDX license ID of the component",
     "component_supplier_name_desc": "The organization that supplied the component",
@@ -381,6 +382,7 @@
     "cpe": "CPE",
     "cpe_full": "Common Platform Enumeration (CPE)",
     "create": "Create",
+    "create_component_property": "Create Component Property",
     "create_license_group": "Create License Group",
     "create_policy": "Create Policy",
     "create_project": "Create Project",
diff --git a/src/views/portfolio/projects/Component.vue b/src/views/portfolio/projects/Component.vue
index 13dee8516..e27f0e2aa 100644
--- a/src/views/portfolio/projects/Component.vue
+++ b/src/views/portfolio/projects/Component.vue
@@ -162,6 +162,8 @@
       :component="cloneDeep(component)"
       v-on:componentUpdated="syncComponentFields"
     />
+    <component-properties-modal :uuid="this.uuid" />
+    <component-create-property-modal :uuid="this.uuid" />
   </div>
 </template>
 
@@ -178,10 +180,14 @@ import EventBus from '../../../shared/eventbus';
 import permissionsMixin from '../../../mixins/permissionsMixin';
 import ComponentDetailsModal from './ComponentDetailsModal';
 import ExternalReferencesDropdown from '../../components/ExternalReferencesDropdown.vue';
+import ComponentCreatePropertyModal from './ComponentCreatePropertyModal.vue';
+import ComponentPropertiesModal from './ComponentPropertiesModal.vue';
 
 export default {
   mixins: [permissionsMixin],
   components: {
+    ComponentCreatePropertyModal,
+    ComponentPropertiesModal,
     SeverityBarChart,
     ComponentDashboard,
     ComponentVulnerabilities,
diff --git a/src/views/portfolio/projects/ComponentCreatePropertyModal.vue b/src/views/portfolio/projects/ComponentCreatePropertyModal.vue
new file mode 100644
index 000000000..32ba07194
--- /dev/null
+++ b/src/views/portfolio/projects/ComponentCreatePropertyModal.vue
@@ -0,0 +1,123 @@
+<template>
+  <b-modal
+    id="componentCreatePropertyModal"
+    @hide="resetValues()"
+    size="md"
+    hide-header-close
+    no-stacking
+    :title="$t('message.create_component_property')"
+  >
+    <b-form-group
+      id="fieldset-1"
+      :label="this.$t('message.group_name')"
+      label-for="input-1"
+    >
+      <b-form-input id="input-1" v-model="groupName" trim />
+    </b-form-group>
+    <b-form-group
+      id="fieldset-2"
+      :label="this.$t('message.property_name')"
+      label-for="input-2"
+      label-class="required"
+    >
+      <b-form-input id="input-2" v-model="propertyName" class="required" trim />
+    </b-form-group>
+    <b-form-group
+      id="fieldset-3"
+      :label="this.$t('message.property_value')"
+      label-for="input-3"
+      label-class="required"
+    >
+      <b-form-textarea
+        id="input-3"
+        v-model="propertyValue"
+        class="required"
+        trim
+      />
+    </b-form-group>
+    <b-form-group
+      id="fieldset-4"
+      :label="this.$t('message.property_type')"
+      label-for="input-4"
+      label-class="required"
+    >
+      <b-form-select
+        id="input-4"
+        v-model="propertyType"
+        class="required"
+        :options="options"
+      />
+    </b-form-group>
+    <b-form-group
+      id="fieldset-5"
+      :label="this.$t('message.description')"
+      label-for="input-5"
+    >
+      <b-form-textarea id="input-5" v-model="description" trim />
+    </b-form-group>
+    <template v-slot:modal-footer="{ cancel }">
+      <b-button size="md" variant="secondary" @click="cancel()">{{
+        $t('message.close')
+      }}</b-button>
+      <b-button size="md" variant="primary" @click="createProperty()">{{
+        $t('message.create')
+      }}</b-button>
+    </template>
+  </b-modal>
+</template>
+
+<script>
+export default {
+  name: 'ComponentCreatePropertyModal',
+  props: {
+    uuid: String,
+  },
+  data() {
+    return {
+      groupName: null,
+      propertyName: null,
+      propertyValue: null,
+      propertyType: null,
+      description: null,
+      options: [
+        { value: 'BOOLEAN', text: 'BOOLEAN' },
+        { value: 'INTEGER', text: 'INTEGER' },
+        { value: 'NUMBER', text: 'NUMBER' },
+        { value: 'STRING', text: 'STRING' },
+        { value: 'TIMESTAMP', text: 'TIMESTAMP' },
+        { value: 'URL', text: 'URL' },
+        { value: 'UUID', text: 'UUID' },
+      ],
+    };
+  },
+  methods: {
+    createProperty: function () {
+      let url = `${this.$api.BASE_URL}/${this.$api.URL_COMPONENT}/${this.uuid}/property`;
+      this.axios
+        .put(url, {
+          groupName: this.groupName,
+          propertyName: this.propertyName,
+          propertyValue: this.propertyValue,
+          propertyType: this.propertyType,
+          description: this.description,
+        })
+        .then(() => {
+          this.$root.$emit('bv::hide::modal', 'componentCreatePropertyModal');
+          this.$root.$emit('bv::show::modal', 'componentPropertiesModal');
+          this.$toastr.s(this.$t('message.property_created'));
+        });
+    },
+    resetValues: function () {
+      this.groupName = null;
+      this.propertyName = null;
+      this.propertyValue = null;
+      this.propertyType = null;
+      this.description = null;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../../assets/scss/vendors/vue-tags-input/vue-tags-input';
+</style>
diff --git a/src/views/portfolio/projects/ComponentDetailsModal.vue b/src/views/portfolio/projects/ComponentDetailsModal.vue
index 231fc40b2..f302ada12 100644
--- a/src/views/portfolio/projects/ComponentDetailsModal.vue
+++ b/src/views/portfolio/projects/ComponentDetailsModal.vue
@@ -363,6 +363,13 @@
         v-permission="PERMISSIONS.PORTFOLIO_MANAGEMENT"
         >{{ $t('message.delete') }}</b-button
       >
+      <b-button
+        size="md"
+        variant="outline-primary"
+        v-b-modal.componentPropertiesModal
+        v-permission="PERMISSIONS.PORTFOLIO_MANAGEMENT"
+        >{{ $t('message.properties') }}</b-button
+      >
       <b-button size="md" variant="secondary" @click="cancel()">{{
         $t('message.close')
       }}</b-button>
@@ -380,6 +387,7 @@
 <script>
 import BInputGroupFormInput from '../../../forms/BInputGroupFormInput';
 import BInputGroupFormSelect from '../../../forms/BInputGroupFormSelect';
+import ComponentPropertiesModal from './ComponentPropertiesModal.vue';
 import permissionsMixin from '../../../mixins/permissionsMixin';
 import xssFilters from 'xss-filters';
 import common from '@/shared/common';
@@ -390,6 +398,7 @@ export default {
   components: {
     BInputGroupFormInput,
     BInputGroupFormSelect,
+    ComponentPropertiesModal,
   },
   props: {
     component: Object,
diff --git a/src/views/portfolio/projects/ComponentPropertiesModal.vue b/src/views/portfolio/projects/ComponentPropertiesModal.vue
new file mode 100644
index 000000000..de6aba266
--- /dev/null
+++ b/src/views/portfolio/projects/ComponentPropertiesModal.vue
@@ -0,0 +1,145 @@
+<template>
+  <b-modal
+    id="componentPropertiesModal"
+    size="lg"
+    hide-header-close
+    no-stacking
+    :title="$t('message.component_properties')"
+  >
+    <bootstrap-table
+      ref="table"
+      :columns="columns"
+      :data="data"
+      :options="options"
+      @on-check="onRowSelectionChange"
+      @on-uncheck="onRowSelectionChange"
+    >
+    </bootstrap-table>
+    <template v-slot:modal-footer="{ cancel }">
+      <b-button
+        size="md"
+        variant="outline-danger"
+        @click="deleteProperty"
+        :disabled="!hasRowsSelected"
+        >{{ $t('message.delete') }}</b-button
+      >
+      <b-button size="md" variant="secondary" @click="cancel()">{{
+        $t('message.close')
+      }}</b-button>
+      <b-button
+        size="md"
+        variant="primary"
+        v-b-modal.componentCreatePropertyModal
+        >{{ $t('message.create_property') }}</b-button
+      >
+    </template>
+  </b-modal>
+</template>
+
+<script>
+import common from '../../../shared/common';
+import xssFilters from 'xss-filters';
+
+export default {
+  name: 'ComponentPropertiesModal',
+  props: {
+    uuid: String,
+  },
+  data() {
+    return {
+      columns: [
+        {
+          field: 'state',
+          checkbox: true,
+        },
+        {
+          title: this.$t('message.group'),
+          field: 'groupName',
+          sortable: false,
+          formatter(value) {
+            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
+          },
+        },
+        {
+          title: this.$t('message.name'),
+          field: 'propertyName',
+          sortable: false,
+          formatter(value) {
+            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
+          },
+        },
+        {
+          title: this.$t('message.value'),
+          field: 'propertyValue',
+          sortable: false,
+          editable: true,
+          formatter(value) {
+            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
+          },
+        },
+        {
+          title: this.$t('message.type'),
+          field: 'propertyType',
+          sortable: false,
+          formatter(value) {
+            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
+          },
+        },
+        {
+          title: this.$t('message.description'),
+          field: 'description',
+          sortable: false,
+          visible: false,
+          formatter(value) {
+            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
+          },
+        },
+      ],
+      data: [],
+      options: {
+        search: true,
+        showColumns: true,
+        showRefresh: true,
+        pagination: true,
+        silentSort: false,
+        sidePagination: 'client',
+        queryParamsType: 'pageSize',
+        pageList: '[10, 25]',
+        pageSize: 10,
+        icons: {
+          refresh: 'fa-refresh',
+        },
+        responseHandler: function (res, xhr) {
+          res.total = xhr.getResponseHeader('X-Total-Count');
+          return res;
+        },
+        url: this.apiUrl(),
+      },
+      hasRowsSelected: false,
+    };
+  },
+  methods: {
+    apiUrl: function () {
+      return `${this.$api.BASE_URL}/${this.$api.URL_COMPONENT}/${this.uuid}/property`;
+    },
+    onRowSelectionChange: function () {
+      this.hasRowsSelected = this.$refs.table.getSelections().length > 0;
+    },
+    deleteProperty: function () {
+      let selections = this.$refs.table.getSelections();
+      for (let i = 0; i < selections.length; i++) {
+        this.axios.delete(`${this.apiUrl()}/${selections[i].uuid}`).then(() => {
+          this.$refs.table.refresh({ silent: true });
+          this.$toastr.s(this.$t('message.property_deleted'));
+        });
+      }
+      this.$refs.table.uncheckAll();
+      this.hasRowsSelected = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../../assets/scss/vendors/vue-tags-input/vue-tags-input';
+</style>

From 11e32fed929c1cae4ab4813e4a511b03ae490d98 Mon Sep 17 00:00:00 2001
From: nscuro <nscuro@protonmail.com>
Date: Sun, 14 Apr 2024 18:33:07 +0200
Subject: [PATCH 2/2] Add missing translations

Signed-off-by: nscuro <nscuro@protonmail.com>
---
 src/i18n/locales/de.json    | 4 +++-
 src/i18n/locales/es.json    | 4 +++-
 src/i18n/locales/fr.json    | 4 +++-
 src/i18n/locales/hi.json    | 4 +++-
 src/i18n/locales/it.json    | 4 +++-
 src/i18n/locales/ja.json    | 4 +++-
 src/i18n/locales/pl.json    | 4 +++-
 src/i18n/locales/pt-BR.json | 4 +++-
 src/i18n/locales/pt.json    | 4 +++-
 src/i18n/locales/ru.json    | 4 +++-
 src/i18n/locales/zh.json    | 4 +++-
 11 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index d41f37700..f29eb3913 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -814,7 +814,9 @@
     "weakness": "Schwäche",
     "will_not_fix": "Wird nicht repariert",
     "workaround_available": "Problemumgehung verfügbar",
-    "x_trust_boundary": "Vertrauensgrenzen überschreiten"
+    "x_trust_boundary": "Vertrauensgrenzen überschreiten",
+    "component_properties": "Komponenteneigenschaften",
+    "create_component_property": "Komponenteneigenschaft erstellen"
   },
   "operator": {
     "contains_all": "enthält alle",
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index 2057a0925..8c2152805 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -814,7 +814,9 @@
     "weakness": "Debilidad",
     "will_not_fix": "No se reparara",
     "workaround_available": "Solución alternativa disponible",
-    "x_trust_boundary": "Cruzar el límite de confianza"
+    "x_trust_boundary": "Cruzar el límite de confianza",
+    "component_properties": "Propiedades de los componentes",
+    "create_component_property": "Crear propiedad de componente"
   },
   "operator": {
     "contains_all": "contiene todo",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index fdffebd2f..8b1b1a4e1 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -814,7 +814,9 @@
     "weakness": "Faiblesse",
     "will_not_fix": "Ne réglera pas",
     "workaround_available": "Solution de contournement disponible",
-    "x_trust_boundary": "Frontière de confiance croisée"
+    "x_trust_boundary": "Frontière de confiance croisée",
+    "component_properties": "Propriétés des composants",
+    "create_component_property": "Créer une propriété de composant"
   },
   "operator": {
     "contains_all": "contient tout",
diff --git a/src/i18n/locales/hi.json b/src/i18n/locales/hi.json
index ad3b95cd8..fa01f570a 100644
--- a/src/i18n/locales/hi.json
+++ b/src/i18n/locales/hi.json
@@ -814,7 +814,9 @@
     "weakness": "कमजोरी",
     "will_not_fix": "ठीक नहीं होगा",
     "workaround_available": "वैकल्पिक उपाय उपलब्ध है",
-    "x_trust_boundary": "क्रॉस ट्रस्ट सीमा"
+    "x_trust_boundary": "क्रॉस ट्रस्ट सीमा",
+    "component_properties": "घटक गुण",
+    "create_component_property": "घटक संपत्ति बनाएँ"
   },
   "operator": {
     "contains_all": "इसमें सभी शामिल हैं",
diff --git a/src/i18n/locales/it.json b/src/i18n/locales/it.json
index b3a30d626..d97dc91f1 100644
--- a/src/i18n/locales/it.json
+++ b/src/i18n/locales/it.json
@@ -814,7 +814,9 @@
     "weakness": "Debolezza",
     "will_not_fix": "Non risolverà",
     "workaround_available": "Soluzione disponibile",
-    "x_trust_boundary": "Confine di fiducia incrociata"
+    "x_trust_boundary": "Confine di fiducia incrociata",
+    "component_properties": "Proprietà del componente",
+    "create_component_property": "Crea proprietà componente"
   },
   "operator": {
     "contains_all": "contiene tutto",
diff --git a/src/i18n/locales/ja.json b/src/i18n/locales/ja.json
index 1bd9cf407..f0e0f4bec 100644
--- a/src/i18n/locales/ja.json
+++ b/src/i18n/locales/ja.json
@@ -814,7 +814,9 @@
     "weakness": "弱点",
     "will_not_fix": "直らないでしょう",
     "workaround_available": "回避策あり",
-    "x_trust_boundary": "信頼境界を越える"
+    "x_trust_boundary": "信頼境界を越える",
+    "component_properties": "コンポーネントのプロパティ",
+    "create_component_property": "コンポーネントプロパティの作成"
   },
   "operator": {
     "contains_all": "すべてを含む",
diff --git a/src/i18n/locales/pl.json b/src/i18n/locales/pl.json
index 8f5c5a0a6..fa52be18f 100644
--- a/src/i18n/locales/pl.json
+++ b/src/i18n/locales/pl.json
@@ -814,7 +814,9 @@
     "weakness": "Słabość",
     "will_not_fix": "Nie naprawi",
     "workaround_available": "Dostępne obejście",
-    "x_trust_boundary": "Granica zaufania krzyżowego"
+    "x_trust_boundary": "Granica zaufania krzyżowego",
+    "component_properties": "Właściwości komponentu",
+    "create_component_property": "Utwórz właściwość komponentu"
   },
   "operator": {
     "contains_all": "zawiera wszystko",
diff --git a/src/i18n/locales/pt-BR.json b/src/i18n/locales/pt-BR.json
index d481e2576..cbf4da78e 100644
--- a/src/i18n/locales/pt-BR.json
+++ b/src/i18n/locales/pt-BR.json
@@ -814,7 +814,9 @@
     "weakness": "Fraqueza",
     "will_not_fix": "Não irá corrigir",
     "workaround_available": "Solução alternativa disponível",
-    "x_trust_boundary": "Limite de confiança cruzada"
+    "x_trust_boundary": "Limite de confiança cruzada",
+    "component_properties": "Propriedades do Componente",
+    "create_component_property": "Criar propriedade de componente"
   },
   "operator": {
     "contains_all": "contém tudo",
diff --git a/src/i18n/locales/pt.json b/src/i18n/locales/pt.json
index 814976913..1a8ee6c15 100644
--- a/src/i18n/locales/pt.json
+++ b/src/i18n/locales/pt.json
@@ -814,7 +814,9 @@
     "weakness": "Fraqueza",
     "will_not_fix": "Não irá corrigir",
     "workaround_available": "Solução alternativa disponível",
-    "x_trust_boundary": "Limite de confiança cruzada"
+    "x_trust_boundary": "Limite de confiança cruzada",
+    "component_properties": "Propriedades do Componente",
+    "create_component_property": "Criar propriedade de componente"
   },
   "operator": {
     "contains_all": "contém tudo",
diff --git a/src/i18n/locales/ru.json b/src/i18n/locales/ru.json
index 15da20214..3c6063301 100644
--- a/src/i18n/locales/ru.json
+++ b/src/i18n/locales/ru.json
@@ -814,7 +814,9 @@
     "weakness": "Слабость",
     "will_not_fix": "Не будет исправлено",
     "workaround_available": "Доступное решение",
-    "x_trust_boundary": "Пересечение границы доверия"
+    "x_trust_boundary": "Пересечение границы доверия",
+    "component_properties": "Свойства компонента",
+    "create_component_property": "Создать свойство компонента"
   },
   "operator": {
     "contains_all": "содержит все",
diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json
index feda6b6a0..667b0c620 100644
--- a/src/i18n/locales/zh.json
+++ b/src/i18n/locales/zh.json
@@ -814,7 +814,9 @@
     "weakness": "弱点",
     "will_not_fix": "不会修复",
     "workaround_available": "有解决方法",
-    "x_trust_boundary": "跨越信任边界"
+    "x_trust_boundary": "跨越信任边界",
+    "component_properties": "组件属性",
+    "create_component_property": "创建组件属性"
   },
   "operator": {
     "contains_all": "包含全部",