Adding frontend support for component notes - DependencyTrack/dependency-track#682

Author: stevespringett

src/i18n/locales/en.json

@@ -243,7 +243,8 @@
     "package_url": "Package URL (PURL)",
     "conditions": "Conditions",
     "condition": "Condition",
-    "condition_deleted": "Condition deleted"
+    "condition_deleted": "Condition deleted",
+    "notes": "Notes"
   },
   "admin": {
     "configuration": "Configuration",

src/views/portfolio/projects/ComponentDetailsModal.vue

@@ -90,6 +90,18 @@
                                     :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)" />
         </b-card>
       </b-tab>
+      <b-tab>
+        <template v-slot:title><i class="fa fa-file-text-o"></i> {{ $t('message.notes') }}</template>
+        <b-card>
+          <b-form-group
+            id="component-notes-form-group"
+            :label="this.$t('message.notes')"
+            label-for="component-notes-input">
+            <b-form-textarea id="component-notes-description" v-model="component.notes" rows="3"
+                             :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)" />
+          </b-form-group>
+        </b-card>
+      </b-tab>
     </b-tabs>
     <template v-slot:modal-footer="{ cancel }">
       <b-button size="md" variant="outline-danger" @click="deleteComponent()" v-permission="PERMISSIONS.PORTFOLIO_MANAGEMENT">{{ $t('message.delete') }}</b-button>
@@ -158,7 +170,8 @@
           sha256: this.component.sha256,
           sha512: this.component.sha512,
           sha3_256: this.component.sha3_256,
-          sha3_512: this.component.sha3_512
+          sha3_512: this.component.sha3_512,
+          notes: this.component.notes
         }).then((response) => {
           this.$emit('componentUpdated', response.data);
           this.$toastr.s(this.$t('message.component_updated'));

src/views/portfolio/projects/ProjectAddComponentModal.vue

@@ -73,6 +73,17 @@
                                     required="false" :label="$t('message.sha3_512')" :tooltip="$t('message.component_hash_desc')" />
         </b-card>
       </b-tab>
+      <b-tab>
+        <template v-slot:title><i class="fa fa-file-text-o"></i> {{ $t('message.notes') }}</template>
+        <b-card>
+          <b-form-group
+            id="component-notes-form-group"
+            :label="this.$t('message.notes')"
+            label-for="component-notes-input">
+            <b-form-textarea id="component-notes-description" v-model="component.notes" rows="3" />
+          </b-form-group>
+        </b-card>
+      </b-tab>
     </b-tabs>
     <template v-slot:modal-footer="{ cancel }">
       <b-button size="md" variant="secondary" @click="cancel()">{{ $t('message.close') }}</b-button>
@@ -138,7 +149,8 @@
           sha256: this.component.sha256,
           sha512: this.component.sha512,
           sha3_256: this.component.sha3_256,
-          sha3_512: this.component.sha3_512
+          sha3_512: this.component.sha3_512,
+          notes: this.component.notes
         }).then((response) => {
           this.$emit('refreshTable');
           this.$toastr.s(this.$t('message.component_created'));
@@ -165,7 +177,8 @@
           sha256: null,
           sha512: null,
           sha3_256: null,
-          sha3_512: null
+          sha3_512: null,
+          notes: null
         }
       },
       retrieveLicenses: function() {