From 68b94737ed648d39e183144e3a68a70b63b88602 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 16 May 2019 14:42:21 +0100
Subject: [PATCH] Add tooltip on node error icon for validation errs

---
 .../editor-client/locales/en-US/editor.json   |  3 +-
 .../editor-client/src/js/ui/editor.js         | 21 ++++---
 .../@node-red/editor-client/src/js/ui/view.js | 62 ++++++++++---------
 .../editor-client/src/sass/flow.scss          |  1 +
 4 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json
index a48af013d..0b979f5d5 100755
--- a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json
+++ b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json
@@ -321,7 +321,8 @@
         "show": "Show",
         "hide": "Hide",
         "errors": {
-            "scopeChange": "Changing the scope will make it unavailable to nodes in other flows that use it"
+            "scopeChange": "Changing the scope will make it unavailable to nodes in other flows that use it",
+            "invalidProperties": "Invalid properties:"
         }
     },
     "keyboard": {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
index fa11149c0..d580bd5e5 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
@@ -45,6 +45,7 @@ RED.editor = (function() {
         node.valid = true;
         var subflow;
         var isValid;
+        var validationErrors;
         var hasChanged;
         if (node.type.indexOf("subflow:")===0) {
             subflow = RED.nodes.subflow(node.type.substring(8));
@@ -54,13 +55,17 @@ RED.editor = (function() {
                 isValid = validateNode(subflow);
                 hasChanged = subflow.changed;
             }
-            node.valid = isValid && validateNodeProperties(node, node._def.defaults, node);
+            validationErrors = validateNodeProperties(node, node._def.defaults, node);
+            node.valid = isValid && validationErrors.length === 0;
             node.changed = node.changed || hasChanged;
+            node.validationErrors = validationErrors;
         } else if (node._def) {
-            node.valid = validateNodeProperties(node, node._def.defaults, node);
+            validationErrors = validateNodeProperties(node, node._def.defaults, node);
             if (node._def._creds) {
-                node.valid = node.valid && validateNodeProperties(node, node._def.credentials, node._def._creds);
+                validationErrors = validationErrors.concat(validateNodeProperties(node, node._def.credentials, node._def._creds))
             }
+            node.valid = (validationErrors.length === 0);
+            node.validationErrors = validationErrors;
         } else if (node.type == "subflow") {
             var subflowNodes = RED.nodes.filterNodes({z:node.id});
             for (var i=0;i<subflowNodes.length;i++) {
@@ -103,18 +108,18 @@ RED.editor = (function() {
      * @param node - the node being validated
      * @param definition - the node property definitions (either def.defaults or def.creds)
      * @param properties - the node property values to validate
-     * @returns {boolean} whether the node's properties are valid
+     * @returns {array} an array of invalid properties
      */
     function validateNodeProperties(node, definition, properties) {
-        var isValid = true;
+        var result = [];
         for (var prop in definition) {
             if (definition.hasOwnProperty(prop)) {
                 if (!validateNodeProperty(node, definition, prop, properties[prop])) {
-                    isValid = false;
+                    result.push(prop);
                 }
             }
         }
-        return isValid;
+        return result;
     }
 
     /**
@@ -127,9 +132,11 @@ RED.editor = (function() {
      */
     function validateNodeProperty(node,definition,property,value) {
         var valid = true;
+        // Check for $(env-var) and consider it valid
         if (/^\$\([a-zA-Z_][a-zA-Z0-9_]*\)$/.test(value)) {
             return true;
         }
+        // Check for ${env-var} and consider it valid
         if (/^\$\{[a-zA-Z_][a-zA-Z0-9_]*\}$/.test(value)) {
             return true;
         }
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
index bcbf528c6..b0ab85e72 100755
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
@@ -2053,18 +2053,18 @@ RED.view = (function() {
             .attr("class","red-ui-flow-port-tooltip");
 
         var lines = content.split("\n");
-        var labelWidth = 0;
-        var labelHeight = 4;
+        var labelWidth = 6;
+        var labelHeight = 12;
         var labelHeights = [];
         var lineHeight = 0;
         lines.forEach(function(l,i) {
             var labelDimensions = calculateTextDimensions(l||"&nbsp;", "red-ui-flow-port-tooltip-label", 8,0);
-            labelWidth = Math.max(labelWidth,labelDimensions[0]);
-            labelHeights.push(0.8*labelDimensions[1]);
+            labelWidth = Math.max(labelWidth,labelDimensions[0] + 6);
+            labelHeights.push(labelDimensions[1]);
             if (i === 0) {
-                lineHeight = 0.8*labelDimensions[1];
+                lineHeight = labelDimensions[1];
             }
-            labelHeight += 0.8*labelDimensions[1];
+            labelHeight += labelDimensions[1];
         });
         var labelWidth1 = (labelWidth/2)-5-2;
         var labelWidth2 = labelWidth - 4;
@@ -2073,20 +2073,20 @@ RED.view = (function() {
         var labelHeight2 = labelHeight - 4;
         var path;
         var lx;
-        var ly = -labelHeight/2+1;
+        var ly = -labelHeight/2+3;
         var anchor;
         if (direction === "left") {
             path = "M0 0 l -5 -5 v -"+(labelHeight1)+" q 0 -2 -2 -2 h -"+labelWidth+" q -2 0 -2 2 v "+(labelHeight2)+" q 0 2 2 2 h "+labelWidth+" q 2 0 2 -2 v -"+(labelHeight1)+" l 5 -5";
-            lx = -10;
+            lx = -14;
             anchor = "end";
         } else if (direction === "right") {
             path = "M0 0 l 5 -5 v -"+(labelHeight1)+" q 0 -2 2 -2 h "+labelWidth+" q 2 0 2 2 v "+(labelHeight2)+" q 0 2 -2 2 h -"+labelWidth+" q -2 0 -2 -2 v -"+(labelHeight1)+" l -5 -5"
-            lx = 10;
+            lx = 14;
             anchor = "start";
         } else if (direction === "top") {
             path = "M0 0 l 5 -5 h "+(labelWidth1)+" q 2 0 2 -2 v -"+labelHeight+" q 0 -2 -2 -2 h -"+(labelWidth2)+" q -2 0 -2 2 v "+labelHeight+" q 0 2 2 2 h "+(labelWidth1)+" l 5 5"
-            lx = -labelWidth/2 + 4;
-            ly = -labelHeight-lineHeight+5;
+            lx = -labelWidth/2 + 6;
+            ly = -labelHeight-lineHeight+10;
             anchor = "start";
         }
         tooltip.append("path").attr("d",path);
@@ -2781,25 +2781,27 @@ RED.view = (function() {
 
                     node.append("g").attr("class","red-ui-flow-node-changed hide").attr("transform","translate(20, -2)").append("circle").attr("r",5);
                     var nodeErrorButton = node.append("g").attr("class","red-ui-flow-node-error hide").attr("transform","translate(0, -2)").append("path").attr("d","M -5,4 l 10,0 -5,-8 z");
-                    // nodeErrorButton.on("mouseenter", function() {
-                    //     clearTimeout(portLabelHoverTimeout);
-                    //     portLabelHoverTimeout = setTimeout(function() {
-                    //         var pos = getElementPosition(nodeErrorButton.node());
-                    //         portLabelHoverTimeout = null;
-                    //         portLabelHover = showTooltip(
-                    //             (pos[0]),
-                    //             (pos[1]),
-                    //             tooltip,
-                    //             "top"
-                    //         );
-                    //     },500);
-                    // }).on("mouseleave", function() {
-                    //     clearTimeout(portLabelHoverTimeout);
-                    //     if (portLabelHover) {
-                    //         portLabelHover.remove();
-                    //         portLabelHover = null;
-                    //     }
-                    // });
+                    nodeErrorButton.on("mouseenter", function() {
+                        if (d.validationErrors && d.validationErrors.length > 0) {
+                            clearTimeout(portLabelHoverTimeout);
+                            portLabelHoverTimeout = setTimeout(function() {
+                                var pos = getElementPosition(nodeErrorButton.node());
+                                portLabelHoverTimeout = null;
+                                portLabelHover = showTooltip(
+                                    (pos[0]),
+                                    (pos[1]),
+                                    RED._("editor.errors.invalidProperties")+"\n  - "+d.validationErrors.join("\n    - "),
+                                    "top"
+                                );
+                            },500);
+                        }
+                    }).on("mouseleave", function() {
+                        clearTimeout(portLabelHoverTimeout);
+                        if (portLabelHover) {
+                            portLabelHover.remove();
+                            portLabelHover = null;
+                        }
+                    });
             });
 
             node.each(function(d,i) {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
index 4c152a356..367a7e10a 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
@@ -256,5 +256,6 @@ g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
     font-size: 12px;
     pointer-events: none;
     -webkit-touch-callout: none;
+    white-space: pre;
     @include disable-selection;
 }