Display parent subflow properties in edit dialog

packages/node_modules/@node-red/editor-client/locales/en-US/editor.json

@@ -277,6 +277,10 @@
         "deleteSubflow": "delete subflow",
         "info": "Description",
         "category": "Category",
+        "env": {
+            "restore": "Restore to subflow default",
+            "remove": "Remove environment variable"
+        },
         "errors": {
             "noNodesSelected": "<strong>Cannot create subflow</strong>: no nodes selected",
             "multipleInputsToSelection": "<strong>Cannot create subflow</strong>: multiple inputs to selection"

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

@@ -550,54 +550,129 @@ RED.editor = (function() {
             .editableList({
                 addItem: function(container, i, opt) {
                     var row = $('<div/>').appendTo(container);
-                    var nameField = $('<input/>', {
+                    if (opt.parent) {
+                        $('<div/>', {
+                            class:"uneditable-input",
+                            style: "margin-left: 5px; width: calc(40% - 8px)",
+                        }).appendTo(row).text(opt.name);
+                    } else {
+                        $('<input/>', {
                             class: "node-input-env-name",
                             type: "text",
-                        style: "margin-left: 5px; width: calc(40% - 5px)",
+                            style: "margin-left: 5px; width: calc(40% - 8px)",
                             placeholder: RED._("common.label.name")
-                    }).appendTo(row);
+                        }).appendTo(row).val(opt.name);
+                    }
                     var valueField = $('<input/>',{
                         class: "node-input-env-value",
                         type: "text",
-                        style: "margin-left: 5px; width: calc(60% - 5px)"
+                        style: "margin-left: 5px; width: calc(60% - 8px)"
                     }).appendTo(row)
+
                     valueField.typedInput({default:'str',
                                            types:['str','num','bool','json','bin','re','date']
                                           });
-                    if (opt) {
+
-                        nameField.val(opt.name);
+                    valueField.typedInput('type', opt.parent?(opt.type||opt.parent.type):opt.type);
-                        valueField.typedInput('type', opt.type);
+                    valueField.typedInput('value', opt.parent?(opt.value||opt.parent.value):opt.value);
-                        valueField.typedInput('value', opt.value);
+
+                    var actionButton = $('<a/>',{href:"#",class:"red-ui-editableList-item-remove editor-button editor-button-small"}).appendTo(container);
+                    $('<i/>',{class:"fa "+(opt.parent?"fa-reply":"fa-remove")}).appendTo(actionButton);
+                    container.parent().addClass("red-ui-editableList-item-removable");
+                    if (opt.parent) {
+                        if (opt.value && (opt.value !== opt.parent.value || opt.type !== opt.parent.type)) {
+                            actionButton.show();
+                        } else {
+                            actionButton.hide();
+                        }
+                        var restoreTip = RED.popover.tooltip(actionButton,RED._("subflow.env.restore"));
+                        valueField.change(function(evt) {
+                            var newType = valueField.typedInput('type');
+                            var newValue = valueField.typedInput('value');
+                            if (newType === opt.parent.type && newValue === opt.parent.value) {
+                                actionButton.hide();
+                            } else {
+                                actionButton.show();
+                            }
+                        })
+                        actionButton.click(function(evt) {
+                            evt.preventDefault();
+                            restoreTip.close();
+                            valueField.typedInput('type', opt.parent.type);
+                            valueField.typedInput('value', opt.parent.value);
+                        })
+                    } else {
+                        var removeTip = RED.popover.tooltip(actionButton,RED._("subflow.env.remove"));
+                        actionButton.click(function(evt) {
+                            evt.preventDefault();
+                            removeTip.close();
+                            container.parent().addClass("red-ui-editableList-item-deleting")
+                            container.fadeOut(300, function() {
+                                env_container.editableList('removeItem',opt);
+                            });
+                        });
                     }
                 },
-                sortable: true,
+                sortable: false,
-                removable: true
+                removable: false
             });
-        var envs = node.env;
+        var parentEnv = {};
-        if (envs) {
+        var envList = [];
-            for (var i = 0; i < envs.length; i++) {
+        if (/^subflow:/.test(node.type)) {
-                var env = envs[i];
+            var subflowDef = RED.nodes.subflow(node.type.substring(8));
-                env_container.editableList('addItem', env);
+            if (subflowDef.env) {
+                subflowDef.env.forEach(function(env) {
+                    var item = {
+                        name:env.name,
+                        parent: {
+                            type: env.type,
+                            value: env.value
                         }
                     }
+                    envList.push(item);
+                    parentEnv[env.name] = item;
+                })
+            }
         }
 
-    function convEnv(editable_list) {
+        if (node.env) {
-        if (editable_list) {
+            for (var i = 0; i < node.env.length; i++) {
+                var env = node.env[i];
+                if (parentEnv.hasOwnProperty(env.name)) {
+                    parentEnv[env.name].type = env.type;
+                    parentEnv[env.name].value = env.value;
+                } else {
+                    envList.push({
+                        name: env.name,
+                        type: env.type,
+                        value: env.value
+                    });
+                }
+            }
+        }
+        envList.forEach(function(env) {
+            env_container.editableList('addItem', env);
+        })
+    }
+
+    function exportEnvList(list) {
+        if (list) {
             var env = [];
-            editable_list.each(function(i) {
+            list.each(function(i) {
                 var entry = $(this);
-                var nf = entry.find(".node-input-env-name");
+                var item = entry.data('data');
-                var vf = entry.find(".node-input-env-value");
+                var name = item.parent?item.name:entry.find(".node-input-env-name").val();
-                var name = nf.val();
+                var valueInput = entry.find(".node-input-env-value");
-                var value = vf.typedInput("value");
+                var value = valueInput.typedInput("value");
-                var type = vf.typedInput("type");
+                var type = valueInput.typedInput("type");
+                if (!item.parent || (item.parent.value !== value || item.parent.type !== type)) {
                     var item = {
                         name: name,
                         type: type,
                         value: value
                     };
                     env.push(item);
+                }
             });
             return env;
         }
@@ -1343,7 +1418,7 @@ RED.editor = (function() {
 
                         if (type === "subflow") {
                             var old_env = editing_node.env;
-                            var new_env = convEnv($("#node-input-env-container").editableList("items"));
+                            var new_env = exportEnvList($("#node-input-env-container").editableList("items"));
                             if (!isSameEnv(old_env, new_env)) {
                                 editing_node.env = new_env;
                                 changes.env = editing_node.env;
@@ -2070,7 +2145,7 @@ RED.editor = (function() {
                         }
 
                         var old_env = editing_node.env;
-                        var new_env = convEnv($("#node-input-env-container").editableList("items"));
+                        var new_env = exportEnvList($("#node-input-env-container").editableList("items"));
                         if (!isSameEnv(old_env, new_env)) {
                             editing_node.env = new_env;
                             changes.env = editing_node.env;