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..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 @@ -158,6 +158,7 @@ RED.sidebar.config = (function() { entry.data('node',node.id); nodeDiv.data('node',node.id); var label = $('
').text(labelText).appendTo(nodeDiv); + if (node.d) { nodeDiv.addClass("red-ui-palette-node-config-disabled"); $('').prependTo(label); @@ -179,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 c1f151ca6..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; @@ -113,6 +113,15 @@ 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-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;