Merge pull request #4747 from GogoVega/tooltip-input-validation

Add tooltip and message validation to `typedInput`

packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js

@@ -367,7 +367,8 @@
             valueLabel: contextLabel,
             autoComplete: contextAutoComplete
         },
-        global: {value:"global",label:"global.",hasValue:true,
+        global: {
+            value: "global", label: "global.", hasValue: true,
             options: [],
             validate: RED.utils.validatePropertyExpression,
             parse: contextParse,
@@ -376,15 +377,17 @@
             autoComplete: contextAutoComplete
         },
         str: { value: "str", label: "string", icon: "red/images/typedInput/az.svg" },
-        num: {value:"num",label:"number",icon:"red/images/typedInput/09.svg",validate: function(v) {
-            return (true === RED.utils.validateTypedProperty(v, "num"));
+        num: { value: "num", label: "number", icon: "red/images/typedInput/09.svg", validate: function (v, o) {
+            return RED.utils.validateTypedProperty(v, "num", o);
         } },
         bool: { value: "bool", label: "boolean", icon: "red/images/typedInput/bool.svg", options: ["true", "false"] },
         json: {
             value: "json",
             label: "JSON",
             icon: "red/images/typedInput/json.svg",
-            validate: function(v) { try{JSON.parse(v);return true;}catch(e){return false;}},
+            validate: function (v, o) {
+                return RED.utils.validateTypedProperty(v, "json", o);
+            },
             expand: function () {
                 var that = this;
                 var value = this.value();
@@ -431,7 +434,9 @@
             value: "jsonata",
             label: "expression",
             icon: "red/images/typedInput/expr.svg",
-            validate: function(v) { try{jsonata(v);return true;}catch(e){return false;}},
+            validate: function (v, o) {
+                return RED.utils.validateTypedProperty(v, "jsonata", o);
+            },
             expand: function () {
                 var that = this;
                 RED.editor.editExpression({
@@ -1538,26 +1543,48 @@
                 }
             }
         },
-        validate: function() {
-            var result;
-            var value = this.value();
-            var type = this.type();
+        validate: function(options) {
+            let valid = true;
+            const value = this.value();
+            const type = this.type();
             if (this.typeMap[type] && this.typeMap[type].validate) {
-                var val = this.typeMap[type].validate;
-                if (typeof val === 'function') {
-                    result = val(value);
+                const validate = this.typeMap[type].validate;
+                if (typeof validate === 'function') {
+                    valid = validate(value, {});
                 } else {
-                    result = val.test(value);
+                    // Regex
+                    valid = validate.test(value);
+                    if (!valid) {
+                        valid = RED._("validator.errors.invalid-regexp");
+                    }
+                }
+            }
+            if ((typeof valid === "string") || !valid) {
+                this.element.addClass("input-error");
+                this.uiSelect.addClass("input-error");
+                if (typeof valid === "string") {
+                    let tooltip = this.element.data("tooltip");
+                    if (tooltip) {
+                        tooltip.setContent(valid);
+                    } else {
+                        tooltip = RED.popover.tooltip(this.elementDiv, valid);
+                        this.element.data("tooltip", tooltip);
+                    }
                 }
             } else {
-                result = true;
+                this.element.removeClass("input-error");
+                this.uiSelect.removeClass("input-error");
+                const tooltip = this.element.data("tooltip");
+                if (tooltip) {
+                    this.element.data("tooltip", null);
+                    tooltip.delete();
                 }
-            if (result) {
-                this.uiSelect.removeClass('input-error');
-            } else {
-                this.uiSelect.addClass('input-error');
             }
-            return result;
+            if (options?.returnErrorMessage === true) {
+                return valid;
+            }
+            // Must return a boolean for no 3.x validator
+            return (typeof valid === "string") ? false : valid;
         },
         show: function() {
             this.uiSelect.show();

packages/node_modules/@node-red/editor-client/src/js/ui/editor.js

@@ -190,7 +190,10 @@ RED.editor = (function() {
                 const input = $("#"+prefix+"-"+property);
                 const isTypedInput = input.length > 0 && input.next(".red-ui-typedInput-container").length > 0;
                 if (isTypedInput) {
-                    valid = input.typedInput("validate");
+                    valid = input.typedInput("validate", { returnErrorMessage: true });
+                    if (typeof valid === "string") {
+                        return label ? label + ": " + valid : valid;
+                    }
                 }
             }
         }

packages/node_modules/@node-red/editor-client/src/js/ui/utils.js

@@ -901,11 +901,25 @@ RED.utils = (function() {
         return parts;
     }
 
-    function validatePropertyExpression(str) {
+    /**
+     * Validate a property expression
+     * @param {*} str - the property value
+     * @returns {boolean|string} whether the node proprty is valid. `true`: valid `false|String`: invalid
+     */
+    function validatePropertyExpression(str, opt) {
         try {
-            var parts = normalisePropertyExpression(str);
+            const parts = normalisePropertyExpression(str);
             return true;
         } catch(err) {
+            // If the validator has opt, it is a 3.x validator that
+            // can return a String to mean 'invalid' and provide a reason
+            if (opt) {
+                if (opt.label) {
+                    return opt.label + ': ' + err.message;
+                }
+                return err.message;
+            }
+            // Otherwise, a 2.x returns a false value
             return false;
         }
     }
@@ -923,22 +937,24 @@ RED.utils = (function() {
             // Allow ${ENV_VAR} value
             return true
         }
-        let error
+        let error;
         if (propertyType === 'json') {
             try {
                 JSON.parse(propertyValue);
             } catch(err) {
                 error = RED._("validator.errors.invalid-json", {
                     error: err.message
-                })
+                });
             }
         } else if (propertyType === 'msg' || propertyType === 'flow' || propertyType === 'global' ) {
-            if (!RED.utils.validatePropertyExpression(propertyValue)) {
-                error = RED._("validator.errors.invalid-prop")
+            // To avoid double label
+            const valid = RED.utils.validatePropertyExpression(propertyValue, opt ? {} : null);
+            if (valid !== true) {
+                error = opt ? valid : RED._("validator.errors.invalid-prop");
             }
         } else if (propertyType === 'num') {
             if (!/^NaN$|^[+-]?[0-9]*\.?[0-9]*([eE][-+]?[0-9]+)?$|^[+-]?(0b|0B)[01]+$|^[+-]?(0o|0O)[0-7]+$|^[+-]?(0x|0X)[0-9a-fA-F]+$/.test(propertyValue)) {
-                error = RED._("validator.errors.invalid-num")
+                error = RED._("validator.errors.invalid-num");
             }
         } else if (propertyType === 'jsonata') {
             try { 
@@ -946,16 +962,16 @@ RED.utils = (function() {
             } catch(err) {
                 error = RED._("validator.errors.invalid-expr", {
                     error: err.message
-                })
+                });
             }
         }
         if (error) {
             if (opt && opt.label) {
-                return opt.label+': '+error
+                return opt.label + ': ' + error;
             }
-            return error
+            return error;
         }
-        return true
+        return true;
     }
 
     function getMessageProperty(msg,expr) {