From 89c2efe17d4750b16f761c78a373a01e7c34dee1 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Mon, 15 Jan 2024 17:49:17 +0000 Subject: [PATCH 1/3] Highlight errors in config node sidebar Fixes #4397 --- .../@node-red/editor-client/src/js/ui/tab-config.js | 4 ++++ .../@node-red/editor-client/src/sass/tab-config.scss | 3 +++ 2 files changed, 7 insertions(+) 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 90ecf6093..16d02456c 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 @@ -158,6 +158,10 @@ RED.sidebar.config = (function() { entry.data('node',node.id); nodeDiv.data('node',node.id); var label = $('
').text(labelText).appendTo(nodeDiv); + + if (!node.valid) { + nodeDiv.addClass("red-ui-palette-node-config-invalid") + } if (node.d) { nodeDiv.addClass("red-ui-palette-node-config-disabled"); $('').prependTo(label); 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 c1f151ca6..6161cbb82 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 @@ -113,6 +113,9 @@ ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type { margin-right: 5px; } } +.red-ui-palette-node-config-invalid { + border-color: var(--red-ui-node-border-unknown) +} .red-ui-sidebar-node-config-filter-info { position: absolute; top: 0; From b0086edcf909a32696323b890aba2f196a253ec4 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Mon, 15 Jan 2024 20:16:18 +0000 Subject: [PATCH 2/3] Update packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss Co-authored-by: Mauricio Bonani --- .../@node-red/editor-client/src/sass/tab-config.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 6161cbb82..52a2bc4e2 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 @@ -114,7 +114,7 @@ ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type { } } .red-ui-palette-node-config-invalid { - border-color: var(--red-ui-node-border-unknown) + border-color: var(--red-ui-form-input-border-error-color) } .red-ui-sidebar-node-config-filter-info { position: absolute; From 6620679008037027b0f07665a29700922d3182fe Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Tue, 16 Jan 2024 17:35:50 +0000 Subject: [PATCH 3/3] Show standard validation triangle on config nodes --- .../editor-client/src/js/ui/tab-config.js | 17 ++++++++++++++--- .../editor-client/src/sass/tab-config.scss | 8 +++++++- 2 files changed, 21 insertions(+), 4 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 16d02456c..e2c8185cb 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 @@ -159,9 +159,6 @@ RED.sidebar.config = (function() { nodeDiv.data('node',node.id); var label = $('
').text(labelText).appendTo(nodeDiv); - if (!node.valid) { - nodeDiv.addClass("red-ui-palette-node-config-invalid") - } if (node.d) { nodeDiv.addClass("red-ui-palette-node-config-disabled"); $('').prependTo(label); @@ -183,6 +180,20 @@ RED.sidebar.config = (function() { nodeDiv.addClass("red-ui-palette-node-config-unused"); } } + + if (!node.valid) { + nodeDiv.addClass("red-ui-palette-node-config-invalid") + const nodeDivAnnotations = $('').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")+"
- "+node.validationErrors.join("
- ") + } + }) + } + nodeDiv.on('click',function(e) { e.stopPropagation(); RED.view.select(false); 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 52a2bc4e2..9d678daa1 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 @@ -36,7 +36,7 @@ ul.red-ui-sidebar-node-config-list { text-align: center; } .red-ui-palette-node { - overflow: hidden; + // overflow: hidden; cursor: default; &.selected { border-color: transparent; @@ -116,6 +116,12 @@ ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type { .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 { position: absolute; top: 0;