From 54e0de64a73b3e8b9db6a44fc757e486dcb63bca Mon Sep 17 00:00:00 2001
From: GogoVega <92022724+GogoVega@users.noreply.github.com>
Date: Sat, 22 Jun 2024 15:24:41 +0200
Subject: [PATCH] Add the `changed` badge for the config node

---
 .../editor-client/src/js/ui/tab-config.js     | 29 ++++++++++++++-----
 .../editor-client/src/sass/tab-config.scss    |  2 +-
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js
index b8e3aa0ba..bfd595690 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js
@@ -150,9 +150,6 @@ RED.sidebar.config = (function() {
                     $('<li class="red-ui-palette-node-config-type">'+node.type+'</li>').appendTo(list);
                     currentType = node.type;
                 }
-                if (node.changed) {
-                    labelText += "!!"
-                }
                 var entry = $('<li class="red-ui-palette-node_id_'+node.id.replace(/\./g,"-")+'"></li>').appendTo(list);
                 var nodeDiv = $('<div class="red-ui-palette-node-config red-ui-palette-node"></div>').appendTo(entry);
                 entry.data('node',node.id);
@@ -181,15 +178,31 @@ RED.sidebar.config = (function() {
                     }
                 }
 
+                if (node.changed) {
+                    const nodeDivAnnotations = $('<svg class="red-ui-palette-node-annotations red-ui-flow-node-changed" width="10" height="10" style="left:calc(100% - 15px);"></svg>').appendTo(nodeDiv);
+                    const changedBadge = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+                    changedBadge.setAttribute("cx", "5");
+                    changedBadge.setAttribute("cy", "5");
+                    changedBadge.setAttribute("r", "5");
+                    nodeDivAnnotations.append($(changedBadge));
+                }
+
                 if (!node.valid) {
-                    nodeDiv.addClass("red-ui-palette-node-config-invalid")
-                    const nodeDivAnnotations = $('<svg class="red-ui-palette-node-annotations red-ui-flow-node-error" width="10" height="10"></svg>').appendTo(nodeDiv)
-                    const errorBadge = document.createElementNS("http://www.w3.org/2000/svg","path");
+                    nodeDiv.addClass("red-ui-palette-node-config-invalid");
+                    const nodeDivAnnotations = $('<svg class="red-ui-palette-node-annotations red-ui-flow-node-error" width="10" height="10"></svg>').appendTo(nodeDiv);
+                    const errorBadge = document.createElementNS("http://www.w3.org/2000/svg", "path");
                     errorBadge.setAttribute("d","M 0,9 l 10,0 -5,-8 z");
-                    nodeDivAnnotations.append($(errorBadge))
+                    nodeDivAnnotations.append($(errorBadge));
+
+                    if (node.changed) {
+                        nodeDivAnnotations.css("left", "calc(100% - 28px)");
+                    } else {
+                        nodeDivAnnotations.css("left", "calc(100% - 15px)");
+                    }
+
                     RED.popover.tooltip(nodeDivAnnotations, function () {
                         if (node.validationErrors && node.validationErrors.length > 0) {
-                            return RED._("editor.errors.invalidProperties")+"<br>  - "+node.validationErrors.join("<br>  - ")
+                            return RED._("editor.errors.invalidProperties") + "<br>  - " + node.validationErrors.join("<br>  - ");
                         }
                     })
                 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss
index aed01240a..aeb57a5a6 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss
@@ -117,7 +117,7 @@ ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type {
 }
 .red-ui-palette-node-annotations {
     position: absolute;
-    left: calc(100% - 15px);
+    //left: calc(100% - 15px);
     top: -8px;
     display: block;
 }