From 00b0236eae12e48352e50e500006094606a4defe Mon Sep 17 00:00:00 2001
From: Yevhen Zavhorodnii <yevhen.zavhorodnii@ticketmaster.co.uk>
Date: Thu, 21 Nov 2024 11:01:53 +0000
Subject: [PATCH] Add caption for add buttons

---
 server/static/js/edit-model.js      | 26 +++++++++++++++++++++++---
 server/static/js/property-editor.js | 13 +++++++------
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/server/static/js/edit-model.js b/server/static/js/edit-model.js
index a9bd3ee5..62e1e9e3 100644
--- a/server/static/js/edit-model.js
+++ b/server/static/js/edit-model.js
@@ -180,7 +180,13 @@ $(document).ready(function() {
           schema.properties.data_assets.additionalProperties.properties :
           schema.properties.technical_assets.additionalProperties.properties;
     const assetEditor = new EditorGenerator(nodeData, editorSchema, $('#itemPropertyEditor'), title, generateEnumFields());
-    assetEditor.generateEditor([], ['communication_links'], () => {
+    const hiddenProperties = [];
+    const extendableProperties = {
+      'communication_links': {
+        addCaption: 'Add communication link'
+      }
+    };
+    assetEditor.generateEditor(hiddenProperties, extendableProperties, () => {
       updateDiagramModel(diagramYaml);
     });
   }
@@ -188,13 +194,27 @@ $(document).ready(function() {
   function showProjectFields(nodeData) {
     const projectEditor = new EditorGenerator(nodeData, schema.properties, $('#projectInfo'), undefined, generateEnumFields());
     const hiddenProperties = ['data_assets', 'technical_assets',  'trust_boundaries', 'shared_runtimes', 'risk_tracking'];
-    const extendableProperties = ['questions', 'abuse_cases', 'security_requirements', 'individual_risk_categories'];
+    const extendableProperties = {
+      'questions': {
+        addCaption: 'Add question'
+      },
+      'abuse_cases': {
+        addCaption: 'Add abuse case'
+
+      },
+      'security_requirements': {
+        addCaption: 'Add security requirement'
+      },
+      'individual_risk_categories': {
+        addCaption: 'Add individual risk category'
+      }
+    };
     projectEditor.generateEditor(hiddenProperties, extendableProperties);
   }
 
   function showTechnicalAssets(data) {
     const editor = new EditorGenerator(data, schema.properties, $('#technicalAssets'), undefined, generateEnumFields());
-    editor.generateEditorForKeys('technical_assets', (key, value) => {
+    editor.generateEditorForKeys('technical_assets', 'Add technical asset', (key, value) => {
       updateDiagramModel(diagramYaml);
     });
   }
diff --git a/server/static/js/property-editor.js b/server/static/js/property-editor.js
index 43b68cbd..50e18a29 100644
--- a/server/static/js/property-editor.js
+++ b/server/static/js/property-editor.js
@@ -7,7 +7,7 @@ class EditorGenerator {
         this.customEnumFields = customEnumFields;
     }
 
-    generateEditor(ignoreFields = [], extendableProperties = [], callback = (key, value) => {}) {
+    generateEditor(ignoreFields = [], extendableProperties = {}, callback = (key, value) => {}) {
         this.formContainer.empty();
         if (this.title) {
             const title = $('<label>')
@@ -121,10 +121,11 @@ class EditorGenerator {
                     const subObject = this.object[key] || {};
                     const subSchema = property.properties || {};
 
-                    if (extendableProperties.includes(key)) {
+                    if (extendableProperties[key]) {
                         const extendableContainer = $('<div>').addClass('property-editor-extendable');
+                        const addEntryCaption = extendableProperties[key].addCaption ? extendableProperties[key].addCaption : 'Add entry'
                         const addButton = $('<button>')
-                            .text('Add Entry')
+                            .text(addEntryCaption)
                             .on('click', () => {
                                 const newKey = prompt('Enter key for the new entry:');
                                 if (!newKey) return;
@@ -353,7 +354,7 @@ class EditorGenerator {
         }
     }
 
-    generateEditorForKeys(objectKey, callback = (key, value) => {}) {
+    generateEditorForKeys(objectKey, addCaption, callback = (key, value) => {}) {
         this.formContainer.empty();
         if (this.title) {
             const title = $('<label>')
@@ -370,7 +371,7 @@ class EditorGenerator {
             const subObject = this.object[key] || {};
             const extendableContainer = $('<div>').addClass('property-editor-extendable');
             const addButton = $('<button>')
-                .text('Add Entry')
+                .text(addCaption)
                 .on('click', () => {
                     const newKey = prompt('Enter key for the new entry:');
                     if (!newKey) {
@@ -501,7 +502,7 @@ class EditorGenerator {
                             '',
                             customEnumFields
                         );
-                        entrySubEditor.generateEditor([], [], callback);
+                        entrySubEditor.generateEditor([], {}, callback);
                         valueEditor = entrySubEditor.formContainer;
                     } else {
                         valueEditor = $('<input type="text">')