From 99563ce6b04cf55e737938b191d72ea7a53d2661 Mon Sep 17 00:00:00 2001
From: Yevhen Zavhorodnii <yevhen.zavhorodnii@ticketmaster.co.uk>
Date: Wed, 20 Nov 2024 07:32:40 +0000
Subject: [PATCH] Move risk tracking to bottom

---
 server/static/css/edit-model.css | 13 +++++++++----
 server/static/edit-model.html    |  4 ++++
 server/static/js/edit-model.js   | 22 ++++++++++++++--------
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/server/static/css/edit-model.css b/server/static/css/edit-model.css
index 37c35168..9529ab0e 100644
--- a/server/static/css/edit-model.css
+++ b/server/static/css/edit-model.css
@@ -40,10 +40,6 @@ body {
   border: 1px solid #ccc;
 }
 
-.checkbox-label {
-  font-size: 0.6em;
-}
-
 .property-editor {
   border: 1px solid #ccc;
   padding: 10px;
@@ -53,6 +49,15 @@ body {
   overflow-y: auto; /* Enable vertical scroll */
 }
 
+.risk-property-editor {
+  border: 1px solid #ccc;
+  padding: 10px;
+  width: 50%;
+  height: 320px;
+  background-color: #efb9b9;
+  overflow-y: auto; /* Enable vertical scroll */
+}
+
 .property-editor-item {
   display: flex;
   align-items: center;
diff --git a/server/static/edit-model.html b/server/static/edit-model.html
index 2c1c6b2d..0d3c736a 100644
--- a/server/static/edit-model.html
+++ b/server/static/edit-model.html
@@ -40,6 +40,10 @@
           <div id="myDiagramDiv" class="diagram"></div>
           <div id="itemPropertyEditor" class="property-editor"></div>
         </div>
+        <div class="diagram-container">
+          <div id="riskTrackingPropertyEditor" class="risk-property-editor"></div>
+          <div id="riskPropertyEditor" class="risk-property-editor"></div>
+        </div>
     </body>
     <script src="./js/schema.js"></script>
     <script src="./js/property-editor.js"></script>
diff --git a/server/static/js/edit-model.js b/server/static/js/edit-model.js
index 132100e0..573626d5 100644
--- a/server/static/js/edit-model.js
+++ b/server/static/js/edit-model.js
@@ -28,14 +28,14 @@ $(document).ready(function() {
       .add(
         new go.Panel("Auto")
           .add(
-            new go.Shape("RoundedRectangle", {  // surrounds the Placeholder
+            new go.Shape("RoundedRectangle", {
                 parameter1: 14,
                 fill: "rgba(128,128,128,0.33)"
               }),
-            new go.Placeholder(    // represents the area of all member parts,
-                { padding: 5})  // with some extra padding around them
+            new go.Placeholder(
+                { padding: 5})
           ),
-        new go.TextBlock({         // group title
+        new go.TextBlock({
             alignment: go.Spot.Right, font: "Bold 12pt Sans-Serif"
           })
           .bind("caption")
@@ -147,6 +147,7 @@ $(document).ready(function() {
     showDataAssetsObjects(yamlData);
     showTrustBoundaries(yamlData);
     showSharedRuntimes(yamlData);
+    showRiskTrackingObjects(yamlData);
   }
 
   function openAssetEditor(nodeData, nodeType, title) {
@@ -161,10 +162,8 @@ $(document).ready(function() {
 
   function showProjectFields(nodeData) {
     const projectEditor = new EditorGenerator(nodeData, schema.properties, $('#projectInfo'), undefined, generateEnumFields());
-    const hiddenProperties = ['communication_links', 'data_assets_processed', 'data_assets_stored',
-      'data_assets_sent', 'data_assets_received', 'data_assets', 'technical_assets',
-      'trust_boundaries', 'shared_runtimes', 'individual_risk_categories', 'includes'];
-    const extendableProperties = ['questions', 'abuse_cases', 'security_requirements', 'risk_tracking'];
+    const hiddenProperties = ['data_assets', 'technical_assets',  'trust_boundaries', 'shared_runtimes', 'risk_tracking'];
+    const extendableProperties = ['questions', 'abuse_cases', 'security_requirements', 'individual_risk_categories'];
     projectEditor.generateEditor(hiddenProperties, extendableProperties);
   }
 
@@ -182,6 +181,13 @@ $(document).ready(function() {
     });
   }
 
+  function showRiskTrackingObjects(data) {
+    const editor = new EditorGenerator(data, schema.properties, $('#riskTrackingPropertyEditor'), undefined, generateEnumFields());
+    editor.generateEditorForObject('risk_tracking', (key, value) => {
+      updateDiagramModel(diagramYaml);
+    });
+  }
+
   function showTrustBoundaries(data) {
     const editor = new EditorGenerator(data, schema.properties, $('#trustBoundaries'), undefined, generateEnumFields());
     editor.generateEditorForObject('trust_boundaries', (key, value) => {