Merge pull request #4529 from node-red/4397-hightlight-config-node-errors

Highlight errors in config node sidebar
This commit is contained in:
Nick O'Leary 2024-01-19 16:08:17 +00:00 committed by GitHub
commit 5b9d002f56
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 1 deletions

View File

@ -158,6 +158,7 @@ RED.sidebar.config = (function() {
entry.data('node',node.id); entry.data('node',node.id);
nodeDiv.data('node',node.id); nodeDiv.data('node',node.id);
var label = $('<div class="red-ui-palette-label"></div>').text(labelText).appendTo(nodeDiv); var label = $('<div class="red-ui-palette-label"></div>').text(labelText).appendTo(nodeDiv);
if (node.d) { if (node.d) {
nodeDiv.addClass("red-ui-palette-node-config-disabled"); nodeDiv.addClass("red-ui-palette-node-config-disabled");
$('<i class="fa fa-ban"></i>').prependTo(label); $('<i class="fa fa-ban"></i>').prependTo(label);
@ -179,6 +180,20 @@ RED.sidebar.config = (function() {
nodeDiv.addClass("red-ui-palette-node-config-unused"); nodeDiv.addClass("red-ui-palette-node-config-unused");
} }
} }
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");
errorBadge.setAttribute("d","M 0,9 l 10,0 -5,-8 z");
nodeDivAnnotations.append($(errorBadge))
RED.popover.tooltip(nodeDivAnnotations, function () {
if (node.validationErrors && node.validationErrors.length > 0) {
return RED._("editor.errors.invalidProperties")+"<br> - "+node.validationErrors.join("<br> - ")
}
})
}
nodeDiv.on('click',function(e) { nodeDiv.on('click',function(e) {
e.stopPropagation(); e.stopPropagation();
RED.view.select(false); RED.view.select(false);

View File

@ -36,7 +36,7 @@ ul.red-ui-sidebar-node-config-list {
text-align: center; text-align: center;
} }
.red-ui-palette-node { .red-ui-palette-node {
overflow: hidden; // overflow: hidden;
cursor: default; cursor: default;
&.selected { &.selected {
border-color: transparent; border-color: transparent;
@ -113,6 +113,15 @@ ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type {
margin-right: 5px; margin-right: 5px;
} }
} }
.red-ui-palette-node-config-invalid {
border-color: var(--red-ui-form-input-border-error-color)
}
.red-ui-palette-node-annotations {
position: absolute;
left: calc(100% - 15px);
top: -8px;
display: block;
}
.red-ui-sidebar-node-config-filter-info { .red-ui-sidebar-node-config-filter-info {
position: absolute; position: absolute;
top: 0; top: 0;