Add support for component properties

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",

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",

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",

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",

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": "इसमें सभी शामिल हैं",

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",

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": "すべてを含む",

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",

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",

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",

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": "содержит все",

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": "包含全部",

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,

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>

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,