From 6aecc3915c51a939b25f11ba1c2ef4addcf4d7c9 Mon Sep 17 00:00:00 2001
From: Hiroyasu Nishiyama <hiroyasu.nishiyama.uq@hitachi.com>
Date: Thu, 19 Aug 2021 21:15:13 +0900
Subject: [PATCH 01/27] add support of environtment variable for tab & group

---
 .../@node-red/editor-client/src/js/nodes.js   |   8 +-
 .../editor-client/src/js/ui/editor.js         |  45 +++++
 .../editor-client/src/js/ui/group.js          |   7 +-
 .../editor-client/src/js/ui/subflow.js        |  62 ++++---
 .../editor-client/src/js/ui/workspaces.js     | 169 +++++++++++++-----
 .../@node-red/runtime/lib/flows/Flow.js       |  66 +++++++
 .../@node-red/runtime/lib/flows/Subflow.js    |  58 ++++++
 .../@node-red/runtime/lib/flows/index.js      |   9 +
 .../@node-red/runtime/lib/flows/util.js       |  13 +-
 .../@node-red/runtime/lib/nodes/Node.js       |   1 +
 .../@node-red/runtime/lib/nodes/index.js      |   2 +-
 .../node_modules/@node-red/util/lib/util.js   |  87 +++++++--
 test/nodes/core/function/15-change_spec.js    |  71 ++++++++
 test/nodes/subflow/subflow_spec.js            | 120 +++++++++++++
 .../@node-red/runtime/lib/flows/Flow_spec.js  |  50 ++++++
 15 files changed, 673 insertions(+), 95 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/nodes.js b/packages/node_modules/@node-red/editor-client/src/js/nodes.js
index ee3542eee..3ba5e5961 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/nodes.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/nodes.js
@@ -53,7 +53,8 @@ RED.nodes = (function() {
             defaults: {
                 label: {value:""},
                 disabled: {value: false},
-                info: {value: ""}
+                info: {value: ""},
+                env: {value: []}
             }
         };
 
@@ -1387,7 +1388,8 @@ RED.nodes = (function() {
                         type: "tab",
                         disabled: false,
                         label: RED._("clipboard.recoveredNodes"),
-                        info: RED._("clipboard.recoveredNodesInfo")
+                        info: RED._("clipboard.recoveredNodesInfo"),
+                        env: []
                     }
                     addWorkspace(recoveryWorkspace);
                     RED.workspaces.add(recoveryWorkspace);
@@ -1518,7 +1520,7 @@ RED.nodes = (function() {
 
         // Add a tab if there isn't one there already
         if (defaultWorkspace == null) {
-            defaultWorkspace = { type:"tab", id:getID(), disabled: false, info:"",  label:RED._('workspace.defaultName',{number:1})};
+            defaultWorkspace = { type:"tab", id:getID(), disabled: false, info:"",  label:RED._('workspace.defaultName',{number:1}), env:[]};
             addWorkspace(defaultWorkspace);
             RED.workspaces.add(defaultWorkspace);
             new_workspaces.push(defaultWorkspace);
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 9cac57872..0f24408ba 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
@@ -2637,6 +2637,28 @@ var buildingEditDialog = false;
                                 }
                             }
                         }
+                        {
+                            var old_env = editing_node.env;
+                            var new_env = RED.subflow.exportSubflowInstanceEnv(editing_node);
+                            if (new_env && new_env.length > 0) {
+                                new_env.forEach(function(prop) {
+                                    if (prop.type === "cred") {
+                                        editing_node.credentials = editing_node.credentials || {_:{}};
+                                        editing_node.credentials[prop.name] = prop.value;
+                                        editing_node.credentials['has_'+prop.name] = (prop.value !== "");
+                                        if (prop.value !== '__PWRD__') {
+                                            changed = true;
+                                        }
+                                        delete prop.value;
+                                    }
+                                });
+                            }
+                            if (!isSameObj(old_env, new_env)) {
+                                editing_node.env = new_env;
+                                changes.env = editing_node.env;
+                                changed = true;
+                            }
+                        }
                         if (changed) {
                             var wasChanged = editing_node.changed;
                             editing_node.changed = true;
@@ -2668,6 +2690,16 @@ var buildingEditDialog = false;
                 //         console.log("oneditresize",editing_node.id,editing_node.type,err.toString());
                 //     }
                 // }
+                var envContainer = $("#red-ui-editor-group-env-list");
+                if (envContainer.length) {
+                    var rows = $("#dialog-form>div:not(#group-env-tabs-content)");
+                    var height = size.height;
+                    for (var i=0; i<rows.size(); i++) {
+                        height -= $(rows[i]).outerHeight(true);
+                    }
+                    $("#red-ui-editor-group-env-list").editableList('height',height-30);
+                }
+
             },
             open: function(tray, done) {
                 var trayFooter = tray.find(".red-ui-tray-footer");
@@ -2707,6 +2739,18 @@ var buildingEditDialog = false;
 
                 editorTabs.addTab(nodePropertiesTab);
 
+                var groupPropertiesTab = {
+                    id: "editor-group-envProperties",
+                    label: RED._("editor-tab.envProperties"),
+                    name: RED._("editor-tab.envProperties"),
+                    content: $('<div>', {
+                        id: "editor-group-envProperties-content",
+                        class: "red-ui-tray-content"
+                    }).appendTo(editorContent).hide(),
+                    iconClass: "fa fa-list",
+                };
+                editorTabs.addTab(groupPropertiesTab);
+
                 var descriptionTab = {
                     id: "editor-tab-description",
                     label: RED._("editor-tab.description"),
@@ -2725,6 +2769,7 @@ var buildingEditDialog = false;
                     buildingEditDialog = false;
                     done();
                 });
+
             },
             close: function() {
                 if (RED.view.state() != RED.state.IMPORT_DRAGGING) {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/group.js b/packages/node_modules/@node-red/editor-client/src/js/ui/group.js
index 1c86eb631..7a56de563 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/group.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/group.js
@@ -87,14 +87,18 @@ RED.group = (function() {
         "label-position": "nw"
     };
 
+
     var groupDef = {
         defaults:{
             name:{value:""},
             style:{value:{label:true}},
-            nodes:{value:[]}
+            nodes:{value:[]},
+            env: {value:[]},
         },
         category: "config",
         oneditprepare: function() {
+            RED.subflow.buildPropertiesForm(this);
+
             var style = this.style || {};
             RED.colorPicker.create({
                 id:"node-input-style-stroke",
@@ -144,7 +148,6 @@ RED.group = (function() {
             })
             $("#node-input-style-label").prop("checked", this.style.label)
             $("#node-input-style-label").trigger("change");
-
         },
         oneditresize: function(size) {
         },
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js b/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js
index b0a93630a..e2a982462 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js
@@ -980,6 +980,9 @@ RED.subflow = (function() {
     function buildPropertiesList(envContainer, node) {
 
         var isTemplateNode = (node.type === "subflow");
+        var isGroup = (node.type === "group");
+        var isTab = (node.type === "tab");
+        var kind = isGroup ? "group" : (isTab ? "tab" : "subflow");
 
         if (isTemplateNode) {
             buildEnvControl(envContainer, node);
@@ -1841,27 +1844,30 @@ RED.subflow = (function() {
 
     function exportSubflowInstanceEnv(node) {
         var env = [];
+        var isGroup = (node.type === "group");
+        var isTab = (node.type === "tab");
 
-        // First, get the values for the SubflowTemplate defined properties
-        //  - these are the ones with custom UI elements
-        var parentEnv = getSubflowInstanceParentEnv(node);
-        parentEnv.forEach(function(data) {
-            var item;
-            var ui = data.ui || {};
-            if (!ui.type) {
-                if (data.parent && data.parent.type === "cred") {
-                    ui.type = "cred";
+        if (!isGroup && !isTab) {
+            // First, get the values for the SubflowTemplate defined properties
+            //  - these are the ones with custom UI elements
+            var parentEnv = getSubflowInstanceParentEnv(node);
+            parentEnv.forEach(function(data) {
+                var item;
+                var ui = data.ui || {};
+                if (!ui.type) {
+                    if (data.parent && data.parent.type === "cred") {
+                        ui.type = "cred";
+                    } else {
+                        ui.type = "input";
+                        ui.opts = {types:DEFAULT_ENV_TYPE_LIST}
+                    }
                 } else {
-                    ui.type = "input";
-                    ui.opts = {types:DEFAULT_ENV_TYPE_LIST}
+                    ui.opts = ui.opts || {};
                 }
-            } else {
-                ui.opts = ui.opts || {};
-            }
-            var input = $("#"+getSubflowEnvPropertyName(data.name));
-            if (input.length || ui.type === "cred") {
-                item = { name: data.name };
-                switch(ui.type) {
+                var input = $("#"+getSubflowEnvPropertyName(data.name));
+                if (input.length || ui.type === "cred") {
+                    item = { name: data.name };
+                    switch(ui.type) {
                     case "input":
                         if (ui.opts.types && ui.opts.types.length > 0) {
                             item.value = input.typedInput('value');
@@ -1887,14 +1893,16 @@ RED.subflow = (function() {
                         item.type = 'bool';
                         item.value = ""+input.prop("checked");
                         break;
+                    }
+                    if (ui.type === "cred" || item.type !== data.parent.type || item.value !== data.parent.value) {
+                        env.push(item);
+                    }
                 }
-                if (ui.type === "cred" || item.type !== data.parent.type || item.value !== data.parent.value) {
-                    env.push(item);
-                }
-            }
-        })
+            })
+        }
         // Second, get the values from the Properties table tab
-        var items = $('#red-ui-editor-subflow-env-list').editableList('items');
+        var kind = isGroup ? "group" : (isTab ? "tab" : "subflow");
+        var items = $("#red-ui-editor-"+kind+"-env-list").editableList('items');
         items.each(function (i,el) {
             var data = el.data('data');
             var item;
@@ -1947,11 +1955,13 @@ RED.subflow = (function() {
             buildEnvUI($("#subflow-input-ui"), getSubflowInstanceParentEnv(node), node);
         }
     }
+
     function buildPropertiesForm(node) {
-        var container = $('#editor-subflow-envProperties-content');
+        var kind = (node.type === "group") ? "group" : ((node.type === "tab") ? "tab": "subflow");
+        var container = $("#editor-"+kind+"-envProperties-content");
         var form = $('<form class="dialog-form form-horizontal"></form>').appendTo(container);
         var listContainer = $('<div class="form-row node-input-env-container-row"></div>').appendTo(form);
-        var list = $('<ol id="red-ui-editor-subflow-env-list" class="red-ui-editor-subflow-env-list"></ol>').appendTo(listContainer);
+        var list = $('<ol id="red-ui-editor-'+kind+'-env-list" class="red-ui-editor-subflow-env-list"></ol>').appendTo(listContainer);
         buildPropertiesList(list, node);
     }
 
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
index a7a4e024f..507447686 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
@@ -23,6 +23,9 @@ RED.workspaces = (function() {
     var viewStack = [];
     var viewStackPos = 0;
 
+    function isSameObj(env0, env1) {
+        return (JSON.stringify(env0) === JSON.stringify(env1));
+    }
 
     function addToViewStack(id) {
         if (viewStackPos !== viewStack.length) {
@@ -43,7 +46,7 @@ RED.workspaces = (function() {
                 workspaceIndex += 1;
             } while ($("#red-ui-workspace-tabs a[title='"+RED._('workspace.defaultName',{number:workspaceIndex})+"']").size() !== 0);
 
-            ws = {type:"tab",id:tabId,disabled: false,info:"",label:RED._('workspace.defaultName',{number:workspaceIndex})};
+            ws = {type:"tab",id:tabId,disabled: false,info:"",label:RED._('workspace.defaultName',{number:workspaceIndex}),env:[]};
             RED.nodes.addWorkspace(ws,targetIndex);
             workspace_tabs.addTab(ws,targetIndex);
             workspace_tabs.activateTab(tabId);
@@ -55,6 +58,7 @@ RED.workspaces = (function() {
         RED.view.focus();
         return ws;
     }
+
     function deleteWorkspace(ws) {
         if (workspaceTabCount === 1) {
             return;
@@ -71,6 +75,51 @@ RED.workspaces = (function() {
         RED.sidebar.config.refresh();
     }
 
+    var tabflowEditor;
+
+    function buildProperties(container, workspace) {
+        var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(container);
+        $('<div class="form-row">'+
+          '<label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label>'+
+          '<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">'+
+          '</div>').appendTo(dialogForm);
+
+        var row = $('<div class="form-row node-text-editor-row">'+
+                    '<label for="node-input-info" data-i18n="editor:workspace.info" style="width:300px;"></label>'+
+                    '<div style="min-height:250px;" class="node-text-editor" id="node-input-info"></div>'+
+                    '</div>').appendTo(dialogForm);
+        tabflowEditor = RED.editor.createEditor({
+            id: 'node-input-info',
+            mode: 'ace/mode/markdown',
+            value: ""
+        });
+
+        $('#node-info-input-info-expand').on("click", function(e) {
+            e.preventDefault();
+            var value = tabflowEditor.getValue();
+            RED.editor.editMarkdown({
+                value: value,
+                width: "Infinity",
+                cursor: tabflowEditor.getCursorPosition(),
+                complete: function(v,cursor) {
+                    tabflowEditor.setValue(v, -1);
+                    tabflowEditor.gotoLine(cursor.row+1,cursor.column,false);
+                    setTimeout(function() {
+                        tabflowEditor.focus();
+                    },300);
+                }
+            })
+        });
+
+        $('<input type="text" style="display: none;" />').prependTo(dialogForm);
+        dialogForm.on("submit", function(e) { e.preventDefault();});
+
+        $("#node-input-name").val(workspace.label);
+        RED.text.bidi.prepareInput($("#node-input-name"));
+        tabflowEditor.getSession().setValue(workspace.info || "", -1);
+        dialogForm.i18n();
+    }
+
     function showEditWorkspaceDialog(id) {
         var workspace = RED.nodes.workspace(id);
         if (!workspace) {
@@ -81,7 +130,6 @@ RED.workspaces = (function() {
             return;
         }
         RED.view.state(RED.state.EDITING);
-        var tabflowEditor;
         var trayOptions = {
             title: RED._("workspace.editFlow",{name:RED.utils.sanitize(workspace.label)}),
             buttons: [
@@ -130,6 +178,28 @@ RED.workspaces = (function() {
                         $("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('red-ui-workspace-disabled',!!workspace.disabled);
                         $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!workspace.disabled);
 
+                        var old_env = workspace.env;
+                        var new_env = RED.subflow.exportSubflowInstanceEnv(workspace);
+                        console.log("; NE", new_env);
+                        if (new_env && (new_env.length > 0)) {
+                            new_env.forEach(function(prop) {
+                                if (prop.type === "cred") {
+                                    workspace.credentials = workspace.credentials || {_:{}};
+                                    workspace.credentials[prop.name] = prop.value;
+                                    workspace.credentials['has_'+prop.name] = (prop.value !== "");
+                                    if (prop.value !== '__PWRD__') {
+                                        changed = true;
+                                    }
+                                    delete prop.value;
+                                }
+                            });
+                        }
+                        if (!isSameObj(old_env, new_env)) {
+                            workspace.env = new_env;
+                            changes.env = old_env;
+                            changed = true;
+                        }
+
                         if (changed) {
                             var historyEvent = {
                                 t: "edit",
@@ -156,27 +226,67 @@ RED.workspaces = (function() {
                 }
             ],
             resize: function(dimensions) {
+                var height = dimensions.height;
+
                 var rows = $("#dialog-form>div:not(.node-text-editor-row)");
                 var editorRow = $("#dialog-form>div.node-text-editor-row");
-                var height = $("#dialog-form").height();
                 for (var i=0; i<rows.size(); i++) {
                     height -= $(rows[i]).outerHeight(true);
                 }
-                height -= (parseInt($("#dialog-form").css("marginTop"))+parseInt($("#dialog-form").css("marginBottom")));
-                $(".node-text-editor").css("height",height+"px");
+                var editorHeight = height -(parseInt($("#dialog-form").css("marginTop"))+parseInt($("#dialog-form").css("marginBottom"))) -100;
+                $(".node-text-editor").css("height", editorHeight+"px");
                 tabflowEditor.resize();
+
+                $("#red-ui-editor-tab-env-list").editableList("height", height -70);
             },
             open: function(tray) {
                 var trayFooter = tray.find(".red-ui-tray-footer");
                 var trayBody = tray.find('.red-ui-tray-body');
                 var trayFooterLeft = $('<div class="red-ui-tray-footer-left"></div>').appendTo(trayFooter)
 
-                var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(trayBody);
-                $('<div class="form-row">'+
-                    '<label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label>'+
-                    '<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">'+
-                '</div>').appendTo(dialogForm);
+                var editorTabEl = $('<ul></ul>').appendTo(trayBody);
+                var editorContent = $('<div></div>').appendTo(trayBody);
 
+                var finishedBuilding = false;
+                
+                var editorTabs = RED.tabs.create({
+                    element:editorTabEl,
+                    onchange:function(tab) {
+                        editorContent.children().hide();
+                        if (tab.onchange) {
+                            tab.onchange.call(tab);
+                        }
+                        tab.content.show();
+                        if (finishedBuilding) {
+                            RED.tray.resize();
+                        }
+                    },
+                    collapsible: true,
+                    menu: false
+                });
+
+                var nodePropertiesTab = {
+                    id: "editor-tab-properties",
+                    label: RED._("editor-tab.properties"),
+                    name: RED._("editor-tab.properties"),
+                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
+                    iconClass: "fa fa-cog"
+                };
+                buildProperties(nodePropertiesTab.content, workspace);
+                editorTabs.addTab(nodePropertiesTab);
+
+                var tabPropertiesTab = {
+                    id: "editor-tab-envProperties",
+                    label: RED._("editor-tab.envProperties"),
+                    name: RED._("editor-tab.envProperties"),
+                    content: $('<div>', {
+                        id: "editor-tab-envProperties-content",
+                        class: "red-ui-tray-content"
+                    }).appendTo(editorContent).hide(),
+                    iconClass: "fa fa-list",
+                };
+                RED.subflow.buildPropertiesForm(workspace);
+                editorTabs.addTab(tabPropertiesTab);
 
                 if (!workspace.hasOwnProperty("disabled")) {
                     workspace.disabled = false;
@@ -187,43 +297,8 @@ RED.workspaces = (function() {
                     disabledIcon: "fa-ban",
                     invertState: true
                 })
-
-
-                var row = $('<div class="form-row node-text-editor-row">'+
-                    '<label for="node-input-info" data-i18n="editor:workspace.info" style="width:300px;"></label>'+
-                    '<div style="min-height:250px;" class="node-text-editor" id="node-input-info"></div>'+
-                '</div>').appendTo(dialogForm);
-                tabflowEditor = RED.editor.createEditor({
-                    id: 'node-input-info',
-                    mode: 'ace/mode/markdown',
-                    value: ""
-                });
-
-                $('#node-info-input-info-expand').on("click", function(e) {
-                    e.preventDefault();
-                    var value = tabflowEditor.getValue();
-                    RED.editor.editMarkdown({
-                        value: value,
-                        width: "Infinity",
-                        cursor: tabflowEditor.getCursorPosition(),
-                        complete: function(v,cursor) {
-                            tabflowEditor.setValue(v, -1);
-                            tabflowEditor.gotoLine(cursor.row+1,cursor.column,false);
-                            setTimeout(function() {
-                                tabflowEditor.focus();
-                            },300);
-                        }
-                    })
-                });
-
-
-
-                $('<input type="text" style="display: none;" />').prependTo(dialogForm);
-                dialogForm.on("submit", function(e) { e.preventDefault();});
-                $("#node-input-name").val(workspace.label);
-                RED.text.bidi.prepareInput($("#node-input-name"));
-                tabflowEditor.getSession().setValue(workspace.info || "", -1);
-                dialogForm.i18n();
+                finishedBuilding = true;
+                RED.tray.resize();
             },
             close: function() {
                 if (RED.view.state() != RED.state.IMPORT_DRAGGING) {
diff --git a/packages/node_modules/@node-red/runtime/lib/flows/Flow.js b/packages/node_modules/@node-red/runtime/lib/flows/Flow.js
index 9294121e7..3ef75b4c6 100644
--- a/packages/node_modules/@node-red/runtime/lib/flows/Flow.js
+++ b/packages/node_modules/@node-red/runtime/lib/flows/Flow.js
@@ -396,6 +396,17 @@ class Flow {
         return undefined;
     }
 
+
+    /**
+     * Get a group node instance
+     * @param  {String} id
+     * @return {Node}   group node
+     */
+    getGroupNode(id) {
+        const groups = this.global.groups;
+        return groups[id];
+    }
+
     /**
      * Get all of the nodes instantiated within this flow
      * @return {[type]} [description]
@@ -404,6 +415,57 @@ class Flow {
         return this.activeNodes;
     }
 
+    /**
+     * Get a flow setting value deined in this flow. 
+     * @param  {String} key
+     * @return {Object} result containinig val property or null
+     */
+    getFlowSetting(name) {
+        const flow = this.flow; 
+        if (flow.env) {
+            if (!name.startsWith("$parent.")) {
+                if (!flow._env) {
+                    const envs = flow.env;
+                    const entries = envs.map((env) => [env.name, env]);
+                    flow._env = Object.fromEntries(entries);
+                }
+                const env = flow._env[name];
+                if (env) {
+                    let value = env.value;
+                    const type = env.type;
+                    if ((type !== "env") || (value !== name)) {
+                        if (type === "env") {
+                            value = value.replace(new RegExp("\\${"+name+"}","g"),"${$parent."+name+"}");
+                        }
+                        try {
+                            if (type === "bool") {
+                                const val = ((value === "true") ||
+                                             (value === true));
+                                return {
+                                    val: val
+                                };
+                            }
+                            if (type === "cred") {
+                                return {
+                                    val: value
+                                };
+                            }
+                            var val = redUtil.evaluateNodeProperty(value, type, null, null, null);
+                            return {
+                                val: val
+                            };
+                        }
+                        catch (e) {
+                            this.error(e);
+                            return null;
+                        }
+                    }
+                }
+            }
+        }
+        return null;
+    }
+
     /**
      * Get a flow setting value. This currently automatically defers to the parent
      * flow which, as defined in ./index.js returns `process.env[key]`.
@@ -412,6 +474,10 @@ class Flow {
      * @return {[type]}     [description]
      */
     getSetting(key) {
+        const result = this.getFlowSetting(key);
+        if (result) {
+            return result.val;
+        }
         return this.parent.getSetting(key);
     }
 
diff --git a/packages/node_modules/@node-red/runtime/lib/flows/Subflow.js b/packages/node_modules/@node-red/runtime/lib/flows/Subflow.js
index a0b682faa..b4e8cd99a 100644
--- a/packages/node_modules/@node-red/runtime/lib/flows/Subflow.js
+++ b/packages/node_modules/@node-red/runtime/lib/flows/Subflow.js
@@ -43,6 +43,54 @@ function evaluateInputValue(value, type, node) {
     return redUtil.evaluateNodeProperty(value, type, node, null, null);
 }
 
+/*!
+ * Get value of environment variable defined in group node.
+ * @param {String} group - group node
+ * @param {String} name - name of variable
+ * @return {Object} object containing the value in val property or null if not defined
+ */
+function getGroupSetting(node, group, flow, name) {
+    if (group) {
+        if (!name.startsWith("$parent.")) {
+            if (group.env) {
+                if (!group._env) {
+                    const envs = group.env;
+                    const entries = envs.map((env) => [env.name, env]);
+                    group._env = Object.fromEntries(entries);
+                }
+                const env = group._env[name];
+                if (env) {
+                    let value = env.value;
+                    const type = env.type;
+                    if ((type !== "env") || (value !== name)) {
+                        if (type === "env") {
+                            value = value.replace(new RegExp("\\${"+name+"}","g"),"${$parent."+name+"}");
+                        }
+                        try {
+                            const val = evaluateInputValue(value, type, node);
+                            return {
+                                val: val
+                            };
+                        }
+                        catch (e) {
+                            this.error(e);
+                            return null;
+                        }
+                    }
+                }
+            }
+        }
+        else {
+            name = name.substring(8);
+        }
+        if (group.g && flow) {
+            const parent = flow.getGroupNode(group.g);
+            return getGroupSetting(node, parent, flow, name);
+        }
+    }
+    return null;
+}
+
 /**
  * This class represents a subflow - which is handled as a special type of Flow
  */
@@ -370,6 +418,16 @@ class Subflow extends Flow {
             // name starts $parent. ... so delegate to parent automatically
             name = name.substring(8);
         }
+        const node = this.subflowInstance;
+        if (node.g) {
+            const group = this.getGroupNode(node.g);
+            const result = getGroupSetting(node, group, this, name);
+            if (result) {
+                return result.val;
+            }
+        }
+        
+
         var parent = this.parent;
         if (parent) {
             var val = parent.getSetting(name);
diff --git a/packages/node_modules/@node-red/runtime/lib/flows/index.js b/packages/node_modules/@node-red/runtime/lib/flows/index.js
index 92c3e5b1e..c6bdcea1c 100644
--- a/packages/node_modules/@node-red/runtime/lib/flows/index.js
+++ b/packages/node_modules/@node-red/runtime/lib/flows/index.js
@@ -539,6 +539,9 @@ async function addFlow(flow, user) {
     if (flow.hasOwnProperty('disabled')) {
         tabNode.disabled = flow.disabled;
     }
+    if (flow.hasOwnProperty('env')) {
+        tabNode.env = flow.env;
+    }
 
     var nodes = [tabNode];
 
@@ -599,6 +602,9 @@ function getFlow(id) {
     if (flow.hasOwnProperty('info')) {
         result.info = flow.info;
     }
+    if (flow.hasOwnProperty('env')) {
+        result.env = flow.env;
+    }
     if (id !== 'global') {
         result.nodes = [];
     }
@@ -694,6 +700,9 @@ async function updateFlow(id,newFlow, user) {
         if (newFlow.hasOwnProperty('disabled')) {
             tabNode.disabled = newFlow.disabled;
         }
+        if (newFlow.hasOwnProperty('env')) {
+            tabNode.env = newFlow.env;
+        }
 
         nodes = [tabNode].concat(newFlow.nodes||[]).concat(newFlow.configs||[]);
         nodes.forEach(function(n) {
diff --git a/packages/node_modules/@node-red/runtime/lib/flows/util.js b/packages/node_modules/@node-red/runtime/lib/flows/util.js
index 00b54bc32..f81b6cdce 100644
--- a/packages/node_modules/@node-red/runtime/lib/flows/util.js
+++ b/packages/node_modules/@node-red/runtime/lib/flows/util.js
@@ -44,24 +44,25 @@ function diffNodes(oldNode,newNode) {
 var EnvVarPropertyRE_old = /^\$\((\S+)\)$/;
 var EnvVarPropertyRE = /^\${(\S+)}$/;
 
-function mapEnvVarProperties(obj,prop,flow) {
+
+function mapEnvVarProperties(obj,prop,flow,config) {
     var v = obj[prop];
     if (Buffer.isBuffer(v)) {
         return;
     } else if (Array.isArray(v)) {
         for (var i=0;i<v.length;i++) {
-            mapEnvVarProperties(v,i,flow);
+            mapEnvVarProperties(v,i,flow,config);
         }
     } else if (typeof obj[prop] === 'string') {
         if (obj[prop][0] === "$" && (EnvVarPropertyRE_old.test(v) || EnvVarPropertyRE.test(v)) ) {
             var envVar = v.substring(2,v.length-1);
-            var r = flow.getSetting(envVar);
-            obj[prop] = r!==undefined?r:obj[prop];
+            var r = redUtil.getSetting(config, envVar, flow);
+            obj[prop] = r ? r : obj[prop];
         }
     } else {
         for (var p in v) {
             if (v.hasOwnProperty(p)) {
-                mapEnvVarProperties(v,p,flow);
+                mapEnvVarProperties(v,p,flow,config);
             }
         }
     }
@@ -78,7 +79,7 @@ function createNode(flow,config) {
             delete conf.credentials;
             for (var p in conf) {
                 if (conf.hasOwnProperty(p)) {
-                    mapEnvVarProperties(conf,p,flow);
+                    mapEnvVarProperties(conf,p,flow,conf);
                 }
             }
             try {
diff --git a/packages/node_modules/@node-red/runtime/lib/nodes/Node.js b/packages/node_modules/@node-red/runtime/lib/nodes/Node.js
index 8733348bf..e3a0e04cd 100644
--- a/packages/node_modules/@node-red/runtime/lib/nodes/Node.js
+++ b/packages/node_modules/@node-red/runtime/lib/nodes/Node.js
@@ -38,6 +38,7 @@ function Node(n) {
     this.id = n.id;
     this.type = n.type;
     this.z = n.z;
+    this.g = n.g;
     this._closeCallbacks = [];
     this._inputCallback = null;
     this._inputCallbacks = null;
diff --git a/packages/node_modules/@node-red/runtime/lib/nodes/index.js b/packages/node_modules/@node-red/runtime/lib/nodes/index.js
index 0ee041665..b2346176f 100644
--- a/packages/node_modules/@node-red/runtime/lib/nodes/index.js
+++ b/packages/node_modules/@node-red/runtime/lib/nodes/index.js
@@ -103,7 +103,7 @@ function createNode(node,def) {
         // allow $(foo) syntax to substitute env variables for credentials also...
         for (var p in creds) {
             if (creds.hasOwnProperty(p)) {
-                flowUtil.mapEnvVarProperties(creds,p,node._flow);
+                flowUtil.mapEnvVarProperties(creds,p,node._flow,node);
             }
         }
         node.credentials = creds;
diff --git a/packages/node_modules/@node-red/util/lib/util.js b/packages/node_modules/@node-red/util/lib/util.js
index 0a1ba5d5c..893870fd6 100644
--- a/packages/node_modules/@node-red/util/lib/util.js
+++ b/packages/node_modules/@node-red/util/lib/util.js
@@ -515,18 +515,83 @@ function setObjectProperty(msg,prop,value,createMissing) {
     return true;
 }
 
+/*!
+ * Get value of environment variable defined in group node.
+ * @param {String} group - group node
+ * @param {String} name - name of variable
+ * @return {Object} object containing the value in val property or null if not defined
+ */
+function getGroupSetting(node, group, flow, name) {
+    if (group) {
+        if (!name.startsWith("$parent.")) {
+            if (group.env) {
+                if (!group._env) {
+                    const envs = group.env;
+                    const entries = envs.map((env) => [env.name, env]);
+                    group._env = Object.fromEntries(entries);
+                }
+                const env = group._env[name];
+                if (env) {
+                    let value = env.value;
+                    const type = env.type;
+                    if ((type !== "env") || (value !== name)) {
+                        if (type === "env") {
+                            value = value.replace(new RegExp("\\${"+name+"}","g"),"${$parent."+name+"}");
+                        }
+                        try {
+                            if (type === "bool") {
+                                const val = ((value === "true") ||
+                                             (value === true));
+                                return {
+                                    val: val
+                                };
+                            }
+                            if (type === "cred") {
+                                return {
+                                    val: value
+                                };
+                            }
+                            var val = evaluateNodeProperty(value, type, node, null, null);
+                            return {
+                                val: val
+                            };
+                        }
+                        catch (e) {
+                            this.error(e);
+                            return null;
+                        }
+                    }
+                }
+            }
+        }
+        else {
+            name = name.substring(8);
+        }
+        if (group.g && flow) {
+            const parent = flow.getGroupNode(group.g);
+            return getGroupSetting(node, parent, flow, name);
+        }
+    }
+    return null;
+}
+
 /*!
  * Get value of environment variable.
  * @param {Node} node - accessing node
  * @param {String} name - name of variable
  * @return {String} value of env var
  */
-function getSetting(node, name) {
-    if (node && node._flow) {
-        var flow = node._flow;
-        if (flow) {
-            return flow.getSetting(name);
+function getSetting(node, name, flow_) {
+    var flow = (flow_ ? flow_ : (node ? node._flow : null));
+    if (flow) {
+        if (node && node.g) {
+            const group = flow.getGroupNode(node.g);
+            const result = getGroupSetting(node, group, flow, name);
+            if (result) {
+                return result.val;
+            }
         }
+        return flow.getSetting(name);
     }
     return process.env[name];
 }
@@ -544,18 +609,19 @@ function getSetting(node, name) {
  * @memberof @node-red/util_util
  */
 function evaluateEnvProperty(value, node) {
+    var flow = (node && node.hasOwnProperty("_flow")) ? node._flow : null;
     var result;
     if (/^\${[^}]+}$/.test(value)) {
         // ${ENV_VAR}
         var name = value.substring(2,value.length-1);
-        result = getSetting(node, name);
+        result = getSetting(node, name, flow);
     } else if (!/\${\S+}/.test(value)) {
         // ENV_VAR
-        result = getSetting(node, value);
+        result = getSetting(node, value, flow);
     } else {
         // FOO${ENV_VAR}BAR
         return value.replace(/\${([^}]+)}/g, function(match, name) {
-            var val = getSetting(node, name);
+            var val = getSetting(node, name, flow);
             return (val === undefined)?"":val;
         });
     }
@@ -668,7 +734,7 @@ function prepareJSONataExpression(value,node) {
         return node.context().global.get(val, store);
     });
     expr.assign('env', function(name) {
-        var val = getSetting(node, name);
+        var val = getSetting(node, name, node._flow);
         if (typeof val !== 'undefined') {
             return val;
         } else {
@@ -976,5 +1042,6 @@ module.exports = {
     normaliseNodeTypeName: normaliseNodeTypeName,
     prepareJSONataExpression: prepareJSONataExpression,
     evaluateJSONataExpression: evaluateJSONataExpression,
-    parseContextStore: parseContextStore
+    parseContextStore: parseContextStore,
+    getSetting: getSetting
 };
diff --git a/test/nodes/core/function/15-change_spec.js b/test/nodes/core/function/15-change_spec.js
index fc0c14600..06d1e3774 100644
--- a/test/nodes/core/function/15-change_spec.js
+++ b/test/nodes/core/function/15-change_spec.js
@@ -542,6 +542,77 @@ describe('change Node', function() {
                     changeNode1.receive({payload:"123",topic:"ABC"});
                 });
             });
+
+            it('sets the value using env property from tab', function(done) {
+                var flow = [
+                    {"id":"tab1","type":"tab","env":[
+                        {"name":"NR_TEST_A", "value":"bar", "type": "str"}
+                    ]},
+                    {"id":"changeNode1","type":"change","z":"tab1",rules:[{"t":"set","p":"payload","pt":"msg","to":"NR_TEST_A","tot":"env"}],"name":"changeNode","wires":[["helperNode1"]]},
+                    {id:"helperNode1", type:"helper", wires:[]}
+                ];
+                helper.load(changeNode, flow, function() {
+                    var changeNode1 = helper.getNode("changeNode1");
+                    var helperNode1 = helper.getNode("helperNode1");
+                    helperNode1.on("input", function(msg) {
+                        try {
+                            msg.payload.should.equal("bar");
+                            done();
+                        } catch(err) {
+                            done(err);
+                        }
+                    });
+                    changeNode1.receive({payload:"123",topic:"ABC"});
+                });
+            });
+
+            it('sets the value using env property from group', function(done) {
+                var flow = [
+                    {"id":"group1","type":"group","env":[
+                        {"name":"NR_TEST_A", "value":"bar", "type": "str"}
+                    ]},
+                    {"id":"changeNode1","type":"change","g":"group1",rules:[{"t":"set","p":"payload","pt":"msg","to":"NR_TEST_A","tot":"env"}],"name":"changeNode","wires":[["helperNode1"]]},
+                    {id:"helperNode1", type:"helper", wires:[]}
+                ];
+                helper.load(changeNode, flow, function() {
+                    var changeNode1 = helper.getNode("changeNode1");
+                    var helperNode1 = helper.getNode("helperNode1");
+                    helperNode1.on("input", function(msg) {
+                        try {
+                            msg.payload.should.equal("bar");
+                            done();
+                        } catch(err) {
+                            done(err);
+                        }
+                    });
+                    changeNode1.receive({payload:"123",topic:"ABC"});
+                });
+            });
+
+            it('sets the value using env property from nested group', function(done) {
+                var flow = [
+                    {"id":"group1","type":"group","env":[
+                        {"name":"NR_TEST_A", "value":"bar", "type": "str"}
+                    ]},
+                    {"id":"group2","type":"group","g":"group1","env":[]},
+                    {"id":"changeNode1","type":"change","g":"group2",rules:[{"t":"set","p":"payload","pt":"msg","to":"NR_TEST_A","tot":"env"}],"name":"changeNode","wires":[["helperNode1"]]},
+                    {id:"helperNode1", type:"helper", wires:[]}
+                ];
+                helper.load(changeNode, flow, function() {
+                    var changeNode1 = helper.getNode("changeNode1");
+                    var helperNode1 = helper.getNode("helperNode1");
+                    helperNode1.on("input", function(msg) {
+                        try {
+                            msg.payload.should.equal("bar");
+                            done();
+                        } catch(err) {
+                            done(err);
+                        }
+                    });
+                    changeNode1.receive({payload:"123",topic:"ABC"});
+                });
+            });
+
         });
 
 
diff --git a/test/nodes/subflow/subflow_spec.js b/test/nodes/subflow/subflow_spec.js
index b60328296..d5b8d78ae 100644
--- a/test/nodes/subflow/subflow_spec.js
+++ b/test/nodes/subflow/subflow_spec.js
@@ -447,4 +447,124 @@ describe('subflow', function() {
         });
     });
 
+    it('should access env var of tab', function(done) {
+        var flow = [
+            {id:"t0", type:"tab", label:"", disabled:false, info:"", env: [
+                {name: "K", type: "str", value: "V"}
+            ]},
+            {id:"n1", x:10, y:10, z:"t0", type:"subflow:s1", wires:[["n2"]]},
+            {id:"n2", x:10, y:10, z:"t0", type:"helper", wires:[]},
+            // Subflow
+            {id:"s1", type:"subflow", name:"Subflow", info:"", env: [],
+             in:[{
+                 x:10, y:10,
+                 wires:[ {id:"s1-n1"} ]
+             }],
+             out:[{
+                 x:10, y:10,
+                 wires:[ {id:"s1-n1", port:0} ]
+             }]
+            },
+            {id:"s1-n1", x:10, y:10, z:"s1", type:"function",
+             func:"msg.V = env.get('K'); return msg;",
+             wires:[]}
+        ];
+        helper.load(functionNode, flow, function() {
+            var n1 = helper.getNode("n1");
+            var n2 = helper.getNode("n2");
+            n2.on("input", function(msg) {
+                try {
+                    msg.should.have.property("V", "V");
+                    done();
+                }
+                catch (e) {
+                    console.log(e);
+                    done(e);
+                }
+            });
+            n1.receive({payload:"foo"});
+        });
+    });
+
+    it('should access env var of group', function(done) {
+        var flow = [
+            {id:"t0", type:"tab", label:"", disabled:false, info:""},
+            {id:"g1", z:"t0", type:"group", env:[
+                {name: "K", type: "str", value: "V"}
+            ]},
+            {id:"n1", x:10, y:10, z:"t0", g:"g1", type:"subflow:s1", wires:[["n2"]]},
+            {id:"n2", x:10, y:10, z:"t0", type:"helper", wires:[]},
+            // Subflow
+            {id:"s1", type:"subflow", name:"Subflow", info:"", env: [],
+             in:[{
+                 x:10, y:10,
+                 wires:[ {id:"s1-n1"} ]
+             }],
+             out:[{
+                 x:10, y:10,
+                 wires:[ {id:"s1-n1", port:0} ]
+             }]
+            },
+            {id:"s1-n1", x:10, y:10, z:"s1", type:"function",
+             func:"msg.V = env.get('K'); return msg;",
+             wires:[]}
+        ];
+        helper.load(functionNode, flow, function() {
+            var n1 = helper.getNode("n1");
+            var n2 = helper.getNode("n2");
+            n2.on("input", function(msg) {
+                try {
+                    msg.should.have.property("V", "V");
+                    done();
+                }
+                catch (e) {
+                    console.log(e);
+                    done(e);
+                }
+            });
+            n1.receive({payload:"foo"});
+        });
+    });
+
+    it('should access env var of nested group', function(done) {
+        var flow = [
+            {id:"t0", type:"tab", label:"", disabled:false, info:""},
+            {id:"g1", z:"t0", type:"group", env:[
+                {name: "K", type: "str", value: "V"}
+            ]},
+            {id:"g2", z:"t0", g:"g1", type:"group", env:[]},
+            {id:"n1", x:10, y:10, z:"t0", g:"g2", type:"subflow:s1", wires:[["n2"]]},
+            {id:"n2", x:10, y:10, z:"t0", type:"helper", wires:[]},
+            // Subflow
+            {id:"s1", type:"subflow", name:"Subflow", info:"", env: [],
+             in:[{
+                 x:10, y:10,
+                 wires:[ {id:"s1-n1"} ]
+             }],
+             out:[{
+                 x:10, y:10,
+                 wires:[ {id:"s1-n1", port:0} ]
+             }]
+            },
+            {id:"s1-n1", x:10, y:10, z:"s1", type:"function",
+             func:"msg.V = env.get('K'); return msg;",
+             wires:[]}
+        ];
+        helper.load(functionNode, flow, function() {
+            var n1 = helper.getNode("n1");
+            var n2 = helper.getNode("n2");
+            n2.on("input", function(msg) {
+                try {
+                    msg.should.have.property("V", "V");
+                    done();
+                }
+                catch (e) {
+                    console.log(e);
+                    done(e);
+                }
+            });
+            n1.receive({payload:"foo"});
+        });
+    });
+
 });
diff --git a/test/unit/@node-red/runtime/lib/flows/Flow_spec.js b/test/unit/@node-red/runtime/lib/flows/Flow_spec.js
index 8caa31349..95086c296 100644
--- a/test/unit/@node-red/runtime/lib/flows/Flow_spec.js
+++ b/test/unit/@node-red/runtime/lib/flows/Flow_spec.js
@@ -1228,4 +1228,54 @@ describe('Flow', function() {
         })
     })
 
+    describe("#env", function () {
+        it("can instantiate a node with environment variable property values of group and tab", function (done) {
+            try {
+                after(function() {
+                    delete process.env.V0;
+                    delete process.env.V1;
+                })
+                process.env.V0 = "gv0";
+                process.env.V1 = "gv1";
+                var config = flowUtils.parseConfig([
+                    {id:"t1",type:"tab",env:[
+                        {"name": "V0", value: "v0", type: "str"}
+                    ]},
+                    {id:"g1",type:"group",z:"t1",env:[
+                        {"name": "V0", value: "v1", type: "str"},
+                        {"name": "V1", value: "v2", type: "str"}
+                    ]},
+                    {id:"g2",type:"group",z:"t1",g:"g1",env:[
+                        {"name": "V1", value: "v3", type: "str"}
+                    ]},
+                    {id:"1",x:10,y:10,z:"t1",type:"test",foo:"$(V0)",wires:[]},
+                    {id:"2",x:10,y:10,z:"t1",g:"g1",type:"test",foo:"$(V0)",wires:[]},
+                    {id:"3",x:10,y:10,z:"t1",g:"g1",type:"test",foo:"$(V1)",wires:[]},
+                    {id:"4",x:10,y:10,z:"t1",g:"g2",type:"test",foo:"$(V1)",wires:[]},
+                    {id:"5",x:10,y:10,z:"t1",type:"test",foo:"$(V1)",wires:[]},
+                ]);
+                var flow = Flow.create({getSetting:v=>process.env[v]},config,config.flows["t1"]);
+                flow.start();
+
+                var activeNodes = flow.getActiveNodes();
+
+                activeNodes["1"].foo.should.equal("v0");
+                activeNodes["2"].foo.should.equal("v1");
+                activeNodes["3"].foo.should.equal("v2");
+                activeNodes["4"].foo.should.equal("v3");
+                activeNodes["5"].foo.should.equal("gv1");
+
+                flow.stop().then(function() {
+                    done();
+                });
+            }
+            catch (e) {
+                console.log(e.stack);
+                done(e);
+            }
+                
+        });
+
+    });
+
 });

From 630d2ca926bbd5fab3b4cea79e5030d010711129 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Mon, 23 Aug 2021 15:52:49 +0200
Subject: [PATCH 02/27] Give passport verfiy callback wrapper the same arity as
 the original callback passed in via options

---
 .../@node-red/editor-api/lib/auth/index.js    | 41 ++++++++++---------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-api/lib/auth/index.js b/packages/node_modules/@node-red/editor-api/lib/auth/index.js
index fb95ede7b..5552301d0 100644
--- a/packages/node_modules/@node-red/editor-api/lib/auth/index.js
+++ b/packages/node_modules/@node-red/editor-api/lib/auth/index.js
@@ -173,27 +173,30 @@ function genericStrategy(adminApp,strategy) {
     adminApp.use(passport.session());
 
     var options = strategy.options;
+    var verify = function() {
+        var originalDone = arguments[arguments.length-1];
+        if (options.verify) {
+            var args = Array.from(arguments);
+            args[args.length-1] = function(err,profile) {
+                if (err) {
+                    return originalDone(err);
+                } else {
+                    return completeVerify(profile,originalDone);
+                }
+            };
 
-    passport.use(new strategy.strategy(options,
-        function() {
-            var originalDone = arguments[arguments.length-1];
-            if (options.verify) {
-                var args = Array.from(arguments);
-                args[args.length-1] = function(err,profile) {
-                    if (err) {
-                        return originalDone(err);
-                    } else {
-                        return completeVerify(profile,originalDone);
-                    }
-                };
-                options.verify.apply(null,args);
-            } else {
-                var profile = arguments[arguments.length - 2];
-                return completeVerify(profile,originalDone);
-            }
-
+            options.verify.apply(null,args);
+        } else {
+            var profile = arguments[arguments.length - 2];
+            return completeVerify(profile,originalDone);
         }
-    ));
+    };
+    // Give our callback the same arity as the original one from options
+    if (options.verify) {
+        Object.defineProperty(verify, "length", { value: options.verify.length })
+    }
+
+    passport.use(new strategy.strategy(options, verify));
 
     adminApp.get('/auth/strategy',
         passport.authenticate(strategy.name, {session:false, failureRedirect: settings.httpAdminRoot }),

From e13133fd2b4ff1e0cfffbf8f153435f767430956 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Mon, 16 Aug 2021 21:21:19 +0100
Subject: [PATCH 03/27] Add align actions to editor

---
 .../editor-client/src/js/keymap.json          |   8 +-
 .../editor-client/src/js/ui/view-tools.js     | 109 ++++++++++++++++++
 2 files changed, 116 insertions(+), 1 deletion(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/keymap.json b/packages/node_modules/@node-red/editor-client/src/js/keymap.json
index c323b3e64..b9459e681 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/keymap.json
+++ b/packages/node_modules/@node-red/editor-client/src/js/keymap.json
@@ -77,6 +77,12 @@
         "right": "core:go-to-nearest-node-on-right",
         "left": "core:go-to-nearest-node-on-left",
         "up": "core:go-to-nearest-node-above",
-        "down": "core:go-to-nearest-node-below"
+        "down": "core:go-to-nearest-node-below",
+        "alt-a l": "core:align-nodes-to-left",
+        "alt-a r": "core:align-nodes-to-right",
+        "alt-a t": "core:align-nodes-to-top",
+        "alt-a b": "core:align-nodes-to-bottom",
+        "alt-a m": "core:align-nodes-to-middle",
+        "alt-a c": "core:align-nodes-to-center"
      }
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js
index 6c3889832..001155519 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js
@@ -427,8 +427,107 @@ RED.view.tools = (function() {
                 }
             }
         }
+    }
 
+    function alignSelectionToEdge(direction) {
+        var selection = RED.view.selection();
 
+        if (selection.nodes && selection.nodes.length > 1) {
+            var changedNodes = [];
+            var bounds = {
+                minX: Number.MAX_SAFE_INTEGER,
+                minY: Number.MAX_SAFE_INTEGER,
+                maxX: Number.MIN_SAFE_INTEGER,
+                maxY: Number.MIN_SAFE_INTEGER
+            }
+            selection.nodes.forEach(function(n) {
+                if (n.type === "group") {
+                    bounds.minX = Math.min(bounds.minX, n.x);
+                    bounds.minY = Math.min(bounds.minY, n.y);
+                    bounds.maxX = Math.max(bounds.maxX, n.x + n.w);
+                    bounds.maxY = Math.max(bounds.maxY, n.y + n.h);
+                } else {
+                    bounds.minX = Math.min(bounds.minX, n.x - n.w/2);
+                    bounds.minY = Math.min(bounds.minY, n.y - n.h/2);
+                    bounds.maxX = Math.max(bounds.maxX, n.x + n.w/2);
+                    bounds.maxY = Math.max(bounds.maxY, n.y + n.h/2);
+                }
+            });
+
+            bounds.midX = bounds.minX + (bounds.maxX - bounds.minX)/2;
+            bounds.midY = bounds.minY + (bounds.maxY - bounds.minY)/2;
+
+            selection.nodes.forEach(function(n) {
+                var targetX;
+                var targetY;
+                var isGroup = n.type==="group";
+                switch(direction) {
+                    case 'top':
+                        targetX = n.x;
+                        targetY = bounds.minY + (isGroup?0:(n.h/2));
+                        break;
+                    case 'bottom':
+                        targetX = n.x;
+                        targetY = bounds.maxY - (isGroup?n.h:(n.h/2));
+                        break;
+                    case 'left':
+                        targetX = bounds.minX + (isGroup?0:(n.w/2));
+                        targetY = n.y;
+                        break;
+                    case 'right':
+                        targetX = bounds.maxX - (isGroup?n.w:(n.w/2));
+                        targetY = n.y;
+                        break;
+                    case 'middle':
+                        targetX = n.x;
+                        targetY = bounds.midY - (isGroup?n.h/2:0)
+                        break;
+                    case 'center':
+                        targetX = bounds.midX - (isGroup?n.w/2:0)
+                        targetY = n.y;
+                        break;
+                }
+
+                if (n.x !== targetX || n.y !== targetY) {
+                    if (!isGroup) {
+                        changedNodes.push({
+                            n:n,
+                            ox: n.x,
+                            oy: n.y,
+                            moved: n.moved
+                        });
+                        n.x = targetX;
+                        n.y = targetY;
+                        n.dirty = true;
+                        n.moved = true;
+                    } else {
+                        var groupNodes = RED.group.getNodes(n, true);
+                        var deltaX = n.x - targetX;
+                        var deltaY = n.y - targetY;
+                        groupNodes.forEach(function(gn) {
+                            if (gn.type !== "group" ) {
+                                changedNodes.push({
+                                    n:gn,
+                                    ox: gn.x,
+                                    oy: gn.y,
+                                    moved: gn.moved
+                                });
+                                gn.x = gn.x - deltaX;
+                                gn.y = gn.y - deltaY;
+                                gn.dirty = true;
+                                gn.moved = true;
+                            }
+                        })
+
+                    }
+                }
+            });
+            if (changedNodes.length > 0) {
+                RED.history.push({t:"move",nodes:changedNodes,dirty:RED.nodes.dirty()});
+                RED.nodes.dirty(true);
+                RED.view.redraw(true);
+            }
+        }
     }
 
 
@@ -474,6 +573,16 @@ RED.view.tools = (function() {
             RED.actions.add("core:go-to-nearest-node-on-right", function() { gotoNearestNode('right')})
             RED.actions.add("core:go-to-nearest-node-above", function() { gotoNearestNode('up') })
             RED.actions.add("core:go-to-nearest-node-below", function() { gotoNearestNode('down') })
+
+            RED.actions.add("core:align-nodes-to-left", function() { alignSelectionToEdge('left') })
+            RED.actions.add("core:align-nodes-to-right", function() { alignSelectionToEdge('right') })
+            RED.actions.add("core:align-nodes-to-top", function() { alignSelectionToEdge('top') })
+            RED.actions.add("core:align-nodes-to-bottom", function() { alignSelectionToEdge('bottom') })
+            RED.actions.add("core:align-nodes-to-middle", function() { alignSelectionToEdge('middle') })
+            RED.actions.add("core:align-nodes-to-center", function() { alignSelectionToEdge('center') })
+
+
+
             // RED.actions.add("core:add-node", function() { addNode() })
         },
         /**

From 56121203bfdacf8f39f568b24b54b8105ca118c5 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Mon, 16 Aug 2021 21:34:30 +0100
Subject: [PATCH 04/27] Rename align actions to match existing
 align-selection-to-grid

---
 .../@node-red/editor-client/src/js/keymap.json    | 13 +++++++------
 .../editor-client/src/js/ui/view-tools.js         | 15 +++++++--------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/keymap.json b/packages/node_modules/@node-red/editor-client/src/js/keymap.json
index b9459e681..621fdaf41 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/keymap.json
+++ b/packages/node_modules/@node-red/editor-client/src/js/keymap.json
@@ -78,11 +78,12 @@
         "left": "core:go-to-nearest-node-on-left",
         "up": "core:go-to-nearest-node-above",
         "down": "core:go-to-nearest-node-below",
-        "alt-a l": "core:align-nodes-to-left",
-        "alt-a r": "core:align-nodes-to-right",
-        "alt-a t": "core:align-nodes-to-top",
-        "alt-a b": "core:align-nodes-to-bottom",
-        "alt-a m": "core:align-nodes-to-middle",
-        "alt-a c": "core:align-nodes-to-center"
+        "alt-a g": "core:align-selection-to-grid",
+        "alt-a l": "core:align-selection-to-left",
+        "alt-a r": "core:align-selection-to-right",
+        "alt-a t": "core:align-selection-to-top",
+        "alt-a b": "core:align-selection-to-bottom",
+        "alt-a m": "core:align-selection-to-middle",
+        "alt-a c": "core:align-selection-to-center"
      }
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js
index 001155519..367e173fd 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js
@@ -536,8 +536,6 @@ RED.view.tools = (function() {
             RED.actions.add("core:show-selected-node-labels", function() { setSelectedNodeLabelState(true); })
             RED.actions.add("core:hide-selected-node-labels", function() { setSelectedNodeLabelState(false); })
 
-            RED.actions.add("core:align-selection-to-grid", alignToGrid);
-
             RED.actions.add("core:scroll-view-up", function() { RED.view.scroll(0,-RED.view.gridSize());});
             RED.actions.add("core:scroll-view-right", function() { RED.view.scroll(RED.view.gridSize(),0);});
             RED.actions.add("core:scroll-view-down", function() { RED.view.scroll(0,RED.view.gridSize());});
@@ -574,12 +572,13 @@ RED.view.tools = (function() {
             RED.actions.add("core:go-to-nearest-node-above", function() { gotoNearestNode('up') })
             RED.actions.add("core:go-to-nearest-node-below", function() { gotoNearestNode('down') })
 
-            RED.actions.add("core:align-nodes-to-left", function() { alignSelectionToEdge('left') })
-            RED.actions.add("core:align-nodes-to-right", function() { alignSelectionToEdge('right') })
-            RED.actions.add("core:align-nodes-to-top", function() { alignSelectionToEdge('top') })
-            RED.actions.add("core:align-nodes-to-bottom", function() { alignSelectionToEdge('bottom') })
-            RED.actions.add("core:align-nodes-to-middle", function() { alignSelectionToEdge('middle') })
-            RED.actions.add("core:align-nodes-to-center", function() { alignSelectionToEdge('center') })
+            RED.actions.add("core:align-selection-to-grid", alignToGrid);
+            RED.actions.add("core:align-selection-to-left", function() { alignSelectionToEdge('left') })
+            RED.actions.add("core:align-selection-to-right", function() { alignSelectionToEdge('right') })
+            RED.actions.add("core:align-selection-to-top", function() { alignSelectionToEdge('top') })
+            RED.actions.add("core:align-selection-to-bottom", function() { alignSelectionToEdge('bottom') })
+            RED.actions.add("core:align-selection-to-middle", function() { alignSelectionToEdge('middle') })
+            RED.actions.add("core:align-selection-to-center", function() { alignSelectionToEdge('center') })
 
 
 

From d2cdc67ec7317e21042f952aa084f5ca4a31d8b5 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Mon, 23 Aug 2021 21:29:21 +0100
Subject: [PATCH 05/27] Add distribute-horizontally/vertically actions to
 editor

---
 .../editor-client/src/js/keymap.json          |   4 +-
 .../editor-client/src/js/ui/view-tools.js     | 161 ++++++++++++++++++
 2 files changed, 164 insertions(+), 1 deletion(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/keymap.json b/packages/node_modules/@node-red/editor-client/src/js/keymap.json
index 621fdaf41..c50508389 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/keymap.json
+++ b/packages/node_modules/@node-red/editor-client/src/js/keymap.json
@@ -84,6 +84,8 @@
         "alt-a t": "core:align-selection-to-top",
         "alt-a b": "core:align-selection-to-bottom",
         "alt-a m": "core:align-selection-to-middle",
-        "alt-a c": "core:align-selection-to-center"
+        "alt-a c": "core:align-selection-to-center",
+        "alt-a h": "core:distribute-selection-horizontally",
+        "alt-a v": "core:distribute-selection-vertically"
      }
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js
index 367e173fd..ede8d3442 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js
@@ -531,6 +531,165 @@ RED.view.tools = (function() {
     }
 
 
+    function distributeSelection(direction) {
+        var selection = RED.view.selection();
+
+        if (selection.nodes && selection.nodes.length > 2) {
+            var changedNodes = [];
+            var bounds = {
+                minX: Number.MAX_SAFE_INTEGER,
+                minY: Number.MAX_SAFE_INTEGER,
+                maxX: Number.MIN_SAFE_INTEGER,
+                maxY: Number.MIN_SAFE_INTEGER
+            }
+            var startAnchors = [];
+            var endAnchors = [];
+
+            selection.nodes.forEach(function(n) {
+                var nx,ny;
+                if (n.type === "group") {
+                    nx = n.x + n.w/2;
+                    ny = n.y + n.h/2;
+                } else {
+                    nx = n.x;
+                    ny = n.y;
+                }
+                if (direction === "h") {
+                    if (nx < bounds.minX) {
+                        startAnchors = [];
+                        bounds.minX = nx;
+                    }
+                    if (nx === bounds.minX) {
+                        startAnchors.push(n);
+                    }
+                    if (nx > bounds.maxX) {
+                        endAnchors = [];
+                        bounds.maxX = nx;
+                    }
+                    if (nx === bounds.maxX) {
+                        endAnchors.push(n);
+                    }
+                } else {
+                    if (ny < bounds.minY) {
+                        startAnchors = [];
+                        bounds.minY = ny;
+                    }
+                    if (ny === bounds.minY) {
+                        startAnchors.push(n);
+                    }
+                    if (ny > bounds.maxY) {
+                        endAnchors = [];
+                        bounds.maxY = ny;
+                    }
+                    if (ny === bounds.maxY) {
+                        endAnchors.push(n);
+                    }
+                }
+            });
+
+            var startAnchor = startAnchors[0];
+            var endAnchor = endAnchors[0];
+
+            var nodeSpace = 0;
+            var nodesToMove = selection.nodes.filter(function(n) {
+                if (n.id !== startAnchor.id && n.id !== endAnchor.id) {
+                    nodeSpace += direction === 'h'?n.w:n.h;
+                    return true;
+                }
+                return false;
+            }).sort(function(A,B) {
+                if (direction === 'h') {
+                    return A.x - B.x
+                } else {
+                    return A.y - B.y
+                }
+            })
+
+            var saX = startAnchor.x + startAnchor.w/2;
+            var saY = startAnchor.y + startAnchor.h/2;
+            if (startAnchor.type === "group") {
+                saX = startAnchor.x + startAnchor.w;
+                saY = startAnchor.y + startAnchor.h;
+            }
+            var eaX = endAnchor.x;
+            var eaY = endAnchor.y;
+            if (endAnchor.type !== "group") {
+                eaX -= endAnchor.w/2;
+                eaY -= endAnchor.h/2;
+            }
+            var spaceToFill = direction === 'h'?(eaX - saX - nodeSpace): (eaY - saY - nodeSpace);
+            var spaceBetweenNodes = spaceToFill / (nodesToMove.length + 1);
+
+            var tx = saX;
+            var ty = saY;
+            while(nodesToMove.length > 0) {
+                if (direction === 'h') {
+                    tx += spaceBetweenNodes;
+                } else {
+                    ty += spaceBetweenNodes;
+                }
+                var nextNode = nodesToMove.shift();
+                var isGroup = nextNode.type==="group";
+
+                var nx = nextNode.x;
+                var ny = nextNode.y;
+                if (!isGroup) {
+                    tx += nextNode.w/2;
+                    ty += nextNode.h/2;
+                }
+                if ((direction === 'h' && nx !== tx) || (direction === 'v' && ny !== ty)) {
+                    if (!isGroup) {
+                        changedNodes.push({
+                            n:nextNode,
+                            ox: nextNode.x,
+                            oy: nextNode.y,
+                            moved: nextNode.moved
+                        });
+                        if (direction === 'h') {
+                            nextNode.x = tx;
+                        } else {
+                            nextNode.y = ty;
+                        }
+                        nextNode.dirty = true;
+                        nextNode.moved = true;
+                    } else {
+                        var groupNodes = RED.group.getNodes(nextNode, true);
+                        var deltaX = direction === 'h'? nx - tx : 0;
+                        var deltaY = direction === 'v'? ny - ty : 0;
+                        groupNodes.forEach(function(gn) {
+                            if (gn.type !== "group" ) {
+                                changedNodes.push({
+                                    n:gn,
+                                    ox: gn.x,
+                                    oy: gn.y,
+                                    moved: gn.moved
+                                });
+                                gn.x = gn.x - deltaX;
+                                gn.y = gn.y - deltaY;
+                                gn.dirty = true;
+                                gn.moved = true;
+                            }
+                        })
+                    }
+                }
+                if (isGroup) {
+                    tx += nextNode.w;
+                    ty += nextNode.h;
+                } else {
+                    tx += nextNode.w/2;
+                    ty += nextNode.h/2;
+                }
+            }
+
+            if (changedNodes.length > 0) {
+                RED.history.push({t:"move",nodes:changedNodes,dirty:RED.nodes.dirty()});
+                RED.nodes.dirty(true);
+                RED.view.redraw(true);
+            }
+        }
+    }
+
+
     return {
         init: function() {
             RED.actions.add("core:show-selected-node-labels", function() { setSelectedNodeLabelState(true); })
@@ -580,6 +739,8 @@ RED.view.tools = (function() {
             RED.actions.add("core:align-selection-to-middle", function() { alignSelectionToEdge('middle') })
             RED.actions.add("core:align-selection-to-center", function() { alignSelectionToEdge('center') })
 
+            RED.actions.add("core:distribute-selection-horizontally", function() { distributeSelection('h') })
+            RED.actions.add("core:distribute-selection-vertically", function() { distributeSelection('v') })
 
 
             // RED.actions.add("core:add-node", function() { addNode() })

From 8e89b1bdf2db6365b6dca4d66fd3c65b455823db Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Fri, 27 Aug 2021 16:22:58 +0100
Subject: [PATCH 06/27] Fix typo in ko editor.json Fixes #3119

---
 .../node_modules/@node-red/editor-client/locales/ko/editor.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/node_modules/@node-red/editor-client/locales/ko/editor.json b/packages/node_modules/@node-red/editor-client/locales/ko/editor.json
index 3c12e116a..9e0c74ea8 100755
--- a/packages/node_modules/@node-red/editor-client/locales/ko/editor.json
+++ b/packages/node_modules/@node-red/editor-client/locales/ko/editor.json
@@ -56,7 +56,7 @@
       "displayConfig": "설정노드 보기",
       "import": "가져오기",
       "export": "내보내기",
-      "search": "플로우 겅색",
+      "search": "플로우 검색",
       "searchInput": "플로우 검색",
       "subflows": "보조 플로우",
       "createSubflow": "보조 플로우 생성",

From 26d83bb9eaa762165c14970eb8bfb1fbc04dab73 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Fri, 27 Aug 2021 16:32:43 +0100
Subject: [PATCH 07/27] Ensure treeList row has suitable min-height when no
 content Fixes #3109

---
 .../@node-red/editor-client/src/sass/ui/common/treeList.scss   | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss
index 54e37b57c..a89fe1b84 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss
@@ -101,6 +101,9 @@
 }
 .red-ui-treeList-label-text {
     margin-left: 4px;
+    &:empty {
+        min-height: 20px;
+    }
 }
 .red-ui-treeList-sublabel-text {
     top: 0;

From d78e5932f94f0be0af1667e4b47b076525241631 Mon Sep 17 00:00:00 2001
From: Hiroyasu Nishiyama <hiroyasu.nishiyama.uq@hitachi.com>
Date: Mon, 30 Aug 2021 08:00:58 +0900
Subject: [PATCH 08/27] update according to PR comments

---
 .../@node-red/editor-client/src/js/nodes.js   | 21 ++++-
 .../editor-client/src/js/ui/editor.js         |  4 +-
 .../editor-client/src/js/ui/workspaces.js     | 70 ++++++++++++---
 .../@node-red/runtime/lib/api/flows.js        |  4 +-
 .../@node-red/runtime/lib/flows/Flow.js       | 90 ++++++++++++++++++-
 .../@node-red/runtime/lib/flows/Subflow.js    | 50 +----------
 .../@node-red/runtime/lib/flows/index.js      |  3 +
 .../node_modules/@node-red/util/lib/util.js   | 62 +------------
 8 files changed, 176 insertions(+), 128 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/nodes.js b/packages/node_modules/@node-red/editor-client/src/js/nodes.js
index 3ba5e5961..e623b3b0f 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/nodes.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/nodes.js
@@ -691,6 +691,21 @@ RED.nodes = (function() {
                 node[d] = n[d];
             }
         }
+        var credentialSet = {};
+        if (n.credentials) {
+            for (var tabCred in n.credentials) {
+                if (n.credentials.hasOwnProperty(tabCred)) {
+                    if (!n.credentials._ ||
+                        n.credentials["has_"+tabCred] != n.credentials._["has_"+tabCred] ||
+                        (n.credentials["has_"+tabCred] && n.credentials[tabCred])) {
+                        credentialSet[tabCred] = n.credentials[tabCred];
+                    }
+                }
+            }
+            if (Object.keys(credentialSet).length > 0) {
+                node.credentials = credentialSet;
+            }
+        }
         return node;
     }
     /**
@@ -740,8 +755,10 @@ RED.nodes = (function() {
             }
             if (exportCreds) {
                 var credentialSet = {};
-                if (/^subflow:/.test(node.type) && n.credentials) {
-                    // A subflow instance node can have arbitrary creds
+                if ((/^subflow:/.test(node.type) ||
+                     (node.type === "group")) &&
+                    n.credentials) {
+                    // A subflow instance/group node can have arbitrary creds
                     for (var sfCred in n.credentials) {
                         if (n.credentials.hasOwnProperty(sfCred)) {
                             if (!n.credentials._ ||
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 0f24408ba..d1cc3ed80 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
@@ -507,7 +507,7 @@ RED.editor = (function() {
                 done();
             }
         }
-        if (definition.credentials || /^subflow:/.test(definition.type)) {
+        if (definition.credentials || /^subflow:/.test(definition.type) || (node.type === "group")) {
             if (node.credentials) {
                 populateCredentialsInputs(node, definition.credentials, node.credentials, prefix);
                 completePrepare();
@@ -1467,7 +1467,7 @@ var buildingEditDialog = false;
                                 changes.env = editing_node.env;
                                 changed = true;
                             }
-                         }
+                        }
 
                         if (changed) {
                             var wasChanged = editing_node.changed;
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
index 507447686..04c904c8b 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
@@ -120,6 +120,36 @@ RED.workspaces = (function() {
         dialogForm.i18n();
     }
 
+    function getNodeCredentials(type, id, done) {
+        var timeoutNotification;
+        var intialTimeout = setTimeout(function() {
+            timeoutNotification = RED.notify($('<p data-i18n="[prepend]editor.loadCredentials">  <img src="red/images/spin.svg"/></p>').i18n(),{fixed: true})
+        },800);
+
+        $.ajax({
+            url: "credentials/tab/" + id,
+            dataType: 'json',
+            success: function(data) {
+                if (timeoutNotification) {
+                    timeoutNotification.close();
+                    timeoutNotification = null;
+                }
+                clearTimeout(intialTimeout);
+                done(data);
+            },
+            error: function(jqXHR,status,error) {
+                if (timeoutNotification) {
+                    timeoutNotification.close();
+                    timeoutNotification = null;
+                }
+                clearTimeout(intialTimeout);
+                RED.notify(RED._("editor.errors.credentialLoadFailed"),"error")
+                done(null);
+            },
+            timeout: 30000,
+        });
+    }
+
     function showEditWorkspaceDialog(id) {
         var workspace = RED.nodes.workspace(id);
         if (!workspace) {
@@ -180,7 +210,6 @@ RED.workspaces = (function() {
 
                         var old_env = workspace.env;
                         var new_env = RED.subflow.exportSubflowInstanceEnv(workspace);
-                        console.log("; NE", new_env);
                         if (new_env && (new_env.length > 0)) {
                             new_env.forEach(function(prop) {
                                 if (prop.type === "cred") {
@@ -285,20 +314,37 @@ RED.workspaces = (function() {
                     }).appendTo(editorContent).hide(),
                     iconClass: "fa fa-list",
                 };
-                RED.subflow.buildPropertiesForm(workspace);
-                editorTabs.addTab(tabPropertiesTab);
 
-                if (!workspace.hasOwnProperty("disabled")) {
-                    workspace.disabled = false;
+                function cb() {
+                    RED.subflow.buildPropertiesForm(workspace);
+                    editorTabs.addTab(tabPropertiesTab);
+
+                    if (!workspace.hasOwnProperty("disabled")) {
+                        workspace.disabled = false;
+                    }
+
+                    $('<input id="node-input-disabled" type="checkbox">').prop("checked",workspace.disabled).appendTo(trayFooterLeft).toggleButton({
+                        enabledIcon: "fa-circle-thin",
+                        disabledIcon: "fa-ban",
+                        invertState: true
+                    })
+                    finishedBuilding = true;
+                    RED.tray.resize();
+                }
+
+                if (workspace.credentials) {
+                    cb();
+                }
+                else {
+                    getNodeCredentials("tab", workspace.id, function(data) {
+                        if (data) {
+                            workspace.credentials = data;
+                            workspace.credentials._ = $.extend(true,{},data);
+                        }
+                        cb();
+                    });
                 }
 
-                $('<input id="node-input-disabled" type="checkbox">').prop("checked",workspace.disabled).appendTo(trayFooterLeft).toggleButton({
-                    enabledIcon: "fa-circle-thin",
-                    disabledIcon: "fa-ban",
-                    invertState: true
-                })
-                finishedBuilding = true;
-                RED.tray.resize();
             },
             close: function() {
                 if (RED.view.state() != RED.state.IMPORT_DRAGGING) {
diff --git a/packages/node_modules/@node-red/runtime/lib/api/flows.js b/packages/node_modules/@node-red/runtime/lib/api/flows.js
index 811d7b5cb..d28a0479a 100644
--- a/packages/node_modules/@node-red/runtime/lib/api/flows.js
+++ b/packages/node_modules/@node-red/runtime/lib/api/flows.js
@@ -233,7 +233,9 @@ var api = module.exports = {
         }
         var sendCredentials = {};
         var cred;
-        if (/^subflow(:|$)/.test(opts.type)) {
+        if (/^subflow(:|$)/.test(opts.type) ||
+            (opts.type === "tab") ||
+            (opts.type === "group")) {
             for (cred in credentials) {
                 if (credentials.hasOwnProperty(cred)) {
                     sendCredentials['has_'+cred] = credentials[cred] != null && credentials[cred] !== '';
diff --git a/packages/node_modules/@node-red/runtime/lib/flows/Flow.js b/packages/node_modules/@node-red/runtime/lib/flows/Flow.js
index 3ef75b4c6..9cf9b1cbb 100644
--- a/packages/node_modules/@node-red/runtime/lib/flows/Flow.js
+++ b/packages/node_modules/@node-red/runtime/lib/flows/Flow.js
@@ -20,6 +20,7 @@ const events = require("@node-red/util").events;
 var flowUtil = require("./util");
 const context = require('../nodes/context');
 const hooks = require("@node-red/util").hooks;
+const credentials = require("../nodes/credentials");
 
 var Subflow;
 var Log;
@@ -422,11 +423,22 @@ class Flow {
      */
     getFlowSetting(name) {
         const flow = this.flow; 
+        if (flow.credentials === undefined) {
+            flow.credentials = credentials.get(flow.id) || {};
+        }
         if (flow.env) {
             if (!name.startsWith("$parent.")) {
                 if (!flow._env) {
                     const envs = flow.env;
-                    const entries = envs.map((env) => [env.name, env]);
+                    const entries = envs.map((env) => {
+                        if (env.type === "cred") {
+                            const cred = flow.credentials;
+                            if (cred.hasOwnProperty(env.name)) {
+                                env.value = cred[env.name];
+                            }
+                        }
+                        return [env.name, env]
+                    });
                     flow._env = Object.fromEntries(entries);
                 }
                 const env = flow._env[name];
@@ -466,6 +478,82 @@ class Flow {
         return null;
     }
 
+    /*!
+     * Get value of environment variable defined in group node.
+     * @param {String} group - group node
+     * @param {String} name - name of variable
+     * @return {Object} object containing the value in val property or null if not defined
+     */
+    getGroupEnvSetting(node, group, name) {
+        if (group) {
+            if (group.credentials === undefined) {
+                group.credentials = credentials.get(group.id) || {};
+            }
+            if (!name.startsWith("$parent.")) {
+                if (group.env) {
+                    if (!group._env) {
+                        const envs = group.env;
+                        const entries = envs.map((env) => {
+                            if (env.type === "cred") {
+                                const cred = group.credentials;
+                                if (cred.hasOwnProperty(env.name)) {
+                                    env.value = cred[env.name];
+                                }
+                            }
+                            return [env.name, env];
+                            
+                            return [env.name, env];
+                        });
+                        group._env = Object.fromEntries(entries);
+                    }
+                    const env = group._env[name];
+                    if (env) {
+                        let value = env.value;
+                        const type = env.type;
+                        if ((type !== "env") ||
+                            (value !== name)) {
+                            if (type === "env") {
+                                value = value.replace(new RegExp("\\${"+name+"}","g"),"${$parent."+name+"}");
+                            }
+                            if (type === "bool") {
+                                const val
+                                      = ((value === "true") ||
+                                         (value === true));
+                                return {
+                                    val: val
+                                };
+                            }
+                            if (type === "cred") {
+                                return {
+                                    val: value
+                                };
+                            }
+                            try {
+                                var val = redUtil.evaluateNodeProperty(value, type, node, null, null);
+                                return {
+                                    val: val
+                                };
+                            }
+                            catch (e) {
+                                this.error(e);
+                                return null;
+                            }
+                        }
+                    }
+                }
+            }
+            else {
+                name = name.substring(8);
+            }
+            if (group.g) {
+                const parent = this.getGroupNode(group.g);
+                return this.getGroupEnvSetting(node, parent, name);
+            }
+        }
+        return null;
+    }
+
+
     /**
      * Get a flow setting value. This currently automatically defers to the parent
      * flow which, as defined in ./index.js returns `process.env[key]`.
diff --git a/packages/node_modules/@node-red/runtime/lib/flows/Subflow.js b/packages/node_modules/@node-red/runtime/lib/flows/Subflow.js
index b4e8cd99a..0f3aefe26 100644
--- a/packages/node_modules/@node-red/runtime/lib/flows/Subflow.js
+++ b/packages/node_modules/@node-red/runtime/lib/flows/Subflow.js
@@ -43,54 +43,6 @@ function evaluateInputValue(value, type, node) {
     return redUtil.evaluateNodeProperty(value, type, node, null, null);
 }
 
-/*!
- * Get value of environment variable defined in group node.
- * @param {String} group - group node
- * @param {String} name - name of variable
- * @return {Object} object containing the value in val property or null if not defined
- */
-function getGroupSetting(node, group, flow, name) {
-    if (group) {
-        if (!name.startsWith("$parent.")) {
-            if (group.env) {
-                if (!group._env) {
-                    const envs = group.env;
-                    const entries = envs.map((env) => [env.name, env]);
-                    group._env = Object.fromEntries(entries);
-                }
-                const env = group._env[name];
-                if (env) {
-                    let value = env.value;
-                    const type = env.type;
-                    if ((type !== "env") || (value !== name)) {
-                        if (type === "env") {
-                            value = value.replace(new RegExp("\\${"+name+"}","g"),"${$parent."+name+"}");
-                        }
-                        try {
-                            const val = evaluateInputValue(value, type, node);
-                            return {
-                                val: val
-                            };
-                        }
-                        catch (e) {
-                            this.error(e);
-                            return null;
-                        }
-                    }
-                }
-            }
-        }
-        else {
-            name = name.substring(8);
-        }
-        if (group.g && flow) {
-            const parent = flow.getGroupNode(group.g);
-            return getGroupSetting(node, parent, flow, name);
-        }
-    }
-    return null;
-}
-
 /**
  * This class represents a subflow - which is handled as a special type of Flow
  */
@@ -421,7 +373,7 @@ class Subflow extends Flow {
         const node = this.subflowInstance;
         if (node.g) {
             const group = this.getGroupNode(node.g);
-            const result = getGroupSetting(node, group, this, name);
+            const result = this.getGroupEnvSetting(node, group, name);
             if (result) {
                 return result.val;
             }
diff --git a/packages/node_modules/@node-red/runtime/lib/flows/index.js b/packages/node_modules/@node-red/runtime/lib/flows/index.js
index c6bdcea1c..ae9131ec0 100644
--- a/packages/node_modules/@node-red/runtime/lib/flows/index.js
+++ b/packages/node_modules/@node-red/runtime/lib/flows/index.js
@@ -703,6 +703,9 @@ async function updateFlow(id,newFlow, user) {
         if (newFlow.hasOwnProperty('env')) {
             tabNode.env = newFlow.env;
         }
+        if (newFlow.hasOwnProperty('credentials')) {
+            tabNode.credentials = newFlow.credentials;
+        }
 
         nodes = [tabNode].concat(newFlow.nodes||[]).concat(newFlow.configs||[]);
         nodes.forEach(function(n) {
diff --git a/packages/node_modules/@node-red/util/lib/util.js b/packages/node_modules/@node-red/util/lib/util.js
index 893870fd6..8f123cf25 100644
--- a/packages/node_modules/@node-red/util/lib/util.js
+++ b/packages/node_modules/@node-red/util/lib/util.js
@@ -515,66 +515,6 @@ function setObjectProperty(msg,prop,value,createMissing) {
     return true;
 }
 
-/*!
- * Get value of environment variable defined in group node.
- * @param {String} group - group node
- * @param {String} name - name of variable
- * @return {Object} object containing the value in val property or null if not defined
- */
-function getGroupSetting(node, group, flow, name) {
-    if (group) {
-        if (!name.startsWith("$parent.")) {
-            if (group.env) {
-                if (!group._env) {
-                    const envs = group.env;
-                    const entries = envs.map((env) => [env.name, env]);
-                    group._env = Object.fromEntries(entries);
-                }
-                const env = group._env[name];
-                if (env) {
-                    let value = env.value;
-                    const type = env.type;
-                    if ((type !== "env") || (value !== name)) {
-                        if (type === "env") {
-                            value = value.replace(new RegExp("\\${"+name+"}","g"),"${$parent."+name+"}");
-                        }
-                        try {
-                            if (type === "bool") {
-                                const val = ((value === "true") ||
-                                             (value === true));
-                                return {
-                                    val: val
-                                };
-                            }
-                            if (type === "cred") {
-                                return {
-                                    val: value
-                                };
-                            }
-                            var val = evaluateNodeProperty(value, type, node, null, null);
-                            return {
-                                val: val
-                            };
-                        }
-                        catch (e) {
-                            this.error(e);
-                            return null;
-                        }
-                    }
-                }
-            }
-        }
-        else {
-            name = name.substring(8);
-        }
-        if (group.g && flow) {
-            const parent = flow.getGroupNode(group.g);
-            return getGroupSetting(node, parent, flow, name);
-        }
-    }
-    return null;
-}
-
 /*!
  * Get value of environment variable.
  * @param {Node} node - accessing node
@@ -586,7 +526,7 @@ function getSetting(node, name, flow_) {
     if (flow) {
         if (node && node.g) {
             const group = flow.getGroupNode(node.g);
-            const result = getGroupSetting(node, group, flow, name);
+            const result = flow.getGroupEnvSetting(node, group, name);
             if (result) {
                 return result.val;
             }

From 67404a327d64c5f307bfc483482d718c6967aa29 Mon Sep 17 00:00:00 2001
From: Hiroyasu Nishiyama <hiroyasu.nishiyama.uq@hitachi.com>
Date: Wed, 1 Sep 2021 22:26:31 +0900
Subject: [PATCH 09/27] merge getFlowSetting to getSetting

---
 .../@node-red/runtime/lib/flows/Flow.js       | 110 +++++++-----------
 1 file changed, 45 insertions(+), 65 deletions(-)

diff --git a/packages/node_modules/@node-red/runtime/lib/flows/Flow.js b/packages/node_modules/@node-red/runtime/lib/flows/Flow.js
index 9cf9b1cbb..23f41e0ed 100644
--- a/packages/node_modules/@node-red/runtime/lib/flows/Flow.js
+++ b/packages/node_modules/@node-red/runtime/lib/flows/Flow.js
@@ -416,68 +416,6 @@ class Flow {
         return this.activeNodes;
     }
 
-    /**
-     * Get a flow setting value deined in this flow. 
-     * @param  {String} key
-     * @return {Object} result containinig val property or null
-     */
-    getFlowSetting(name) {
-        const flow = this.flow; 
-        if (flow.credentials === undefined) {
-            flow.credentials = credentials.get(flow.id) || {};
-        }
-        if (flow.env) {
-            if (!name.startsWith("$parent.")) {
-                if (!flow._env) {
-                    const envs = flow.env;
-                    const entries = envs.map((env) => {
-                        if (env.type === "cred") {
-                            const cred = flow.credentials;
-                            if (cred.hasOwnProperty(env.name)) {
-                                env.value = cred[env.name];
-                            }
-                        }
-                        return [env.name, env]
-                    });
-                    flow._env = Object.fromEntries(entries);
-                }
-                const env = flow._env[name];
-                if (env) {
-                    let value = env.value;
-                    const type = env.type;
-                    if ((type !== "env") || (value !== name)) {
-                        if (type === "env") {
-                            value = value.replace(new RegExp("\\${"+name+"}","g"),"${$parent."+name+"}");
-                        }
-                        try {
-                            if (type === "bool") {
-                                const val = ((value === "true") ||
-                                             (value === true));
-                                return {
-                                    val: val
-                                };
-                            }
-                            if (type === "cred") {
-                                return {
-                                    val: value
-                                };
-                            }
-                            var val = redUtil.evaluateNodeProperty(value, type, null, null, null);
-                            return {
-                                val: val
-                            };
-                        }
-                        catch (e) {
-                            this.error(e);
-                            return null;
-                        }
-                    }
-                }
-            }
-        }
-        return null;
-    }
-
     /*!
      * Get value of environment variable defined in group node.
      * @param {String} group - group node
@@ -562,9 +500,51 @@ class Flow {
      * @return {[type]}     [description]
      */
     getSetting(key) {
-        const result = this.getFlowSetting(key);
-        if (result) {
-            return result.val;
+        const flow = this.flow; 
+        if (flow.credentials === undefined) {
+            flow.credentials = credentials.get(flow.id) || {};
+        }
+        if (flow.env) {
+            if (!key.startsWith("$parent.")) {
+                if (!flow._env) {
+                    const envs = flow.env;
+                    const entries = envs.map((env) => {
+                        if (env.type === "cred") {
+                            const cred = flow.credentials;
+                            if (cred.hasOwnProperty(env.name)) {
+                                env.value = cred[env.name];
+                            }
+                        }
+                        return [env.name, env]
+                    });
+                    flow._env = Object.fromEntries(entries);
+                }
+                const env = flow._env[key];
+                if (env) {
+                    let value = env.value;
+                    const type = env.type;
+                    if ((type !== "env") || (value !== key)) {
+                        if (type === "env") {
+                            value = value.replace(new RegExp("\\${"+key+"}","g"),"${$parent."+key+"}");
+                        }
+                        try {
+                            if (type === "bool") {
+                                const val = ((value === "true") ||
+                                             (value === true));
+                                return val;
+                            }
+                            if (type === "cred") {
+                                return value;
+                            }
+                            var val = redUtil.evaluateNodeProperty(value, type, null, null, null);
+                            return val;
+                        }
+                        catch (e) {
+                            this.error(e);
+                        }
+                    }
+                }
+            }
         }
         return this.parent.getSetting(key);
     }

From 78899378c2f9e13b37c5f555ed7b5b97bc5d1e9b Mon Sep 17 00:00:00 2001
From: Amit Kumar Swami <amitiitm2009@gmail.com>
Date: Thu, 2 Sep 2021 13:19:40 +0800
Subject: [PATCH 10/27] Update tar to 6.1.9 to resolve vulnerability issue

---
 package.json                                          | 2 +-
 packages/node_modules/@node-red/registry/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 2296ad220..33dd27ca7 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
         "passport-oauth2-client-password": "0.1.2",
         "raw-body": "2.4.1",
         "semver": "7.3.5",
-        "tar": "6.1.2",
+        "tar": "6.1.9",
         "tough-cookie": "4.0.0",
         "uglify-js": "3.13.10",
         "uuid": "8.3.2",
diff --git a/packages/node_modules/@node-red/registry/package.json b/packages/node_modules/@node-red/registry/package.json
index 999352647..2513b8f33 100644
--- a/packages/node_modules/@node-red/registry/package.json
+++ b/packages/node_modules/@node-red/registry/package.json
@@ -20,7 +20,7 @@
         "clone": "2.1.2",
         "fs-extra": "10.0.0",
         "semver": "7.3.5",
-        "tar": "6.1.2",
+        "tar": "6.1.9",
         "uglify-js": "3.13.10"
     }
 }

From ee15e9acc54d7ebef65dc4d20a17d35c328cff43 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 2 Sep 2021 08:21:10 +0100
Subject: [PATCH 11/27] Update tar to latest

---
 package.json                                          | 2 +-
 packages/node_modules/@node-red/registry/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 33dd27ca7..b133d1f06 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
         "passport-oauth2-client-password": "0.1.2",
         "raw-body": "2.4.1",
         "semver": "7.3.5",
-        "tar": "6.1.9",
+        "tar": "6.1.11",
         "tough-cookie": "4.0.0",
         "uglify-js": "3.13.10",
         "uuid": "8.3.2",
diff --git a/packages/node_modules/@node-red/registry/package.json b/packages/node_modules/@node-red/registry/package.json
index 2513b8f33..6e3162b65 100644
--- a/packages/node_modules/@node-red/registry/package.json
+++ b/packages/node_modules/@node-red/registry/package.json
@@ -20,7 +20,7 @@
         "clone": "2.1.2",
         "fs-extra": "10.0.0",
         "semver": "7.3.5",
-        "tar": "6.1.9",
+        "tar": "6.1.11",
         "uglify-js": "3.13.10"
     }
 }

From 3b460fb8faedbacb588efb9b312c6c7bcffe708e Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 2 Sep 2021 09:00:54 +0100
Subject: [PATCH 12/27] Bump for 2.0.6

---
 CHANGELOG.md                                  | 14 +++++++++++
 package.json                                  | 24 +++++++++----------
 .../@node-red/editor-api/package.json         |  8 +++----
 .../@node-red/editor-client/package.json      |  2 +-
 .../node_modules/@node-red/nodes/package.json |  6 ++---
 .../@node-red/registry/package.json           |  6 ++---
 .../@node-red/runtime/package.json            |  8 +++----
 .../node_modules/@node-red/util/package.json  |  4 ++--
 packages/node_modules/node-red/package.json   | 10 ++++----
 9 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 54e98ba74..d442405b4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,17 @@
+#### 2.0.6: Maintenance Release
+
+Editor
+
+ - Fix typo in ko editor.json Fixes #3119
+ - Change fade color when hovering an inactive tab (#3106) @bonanitech
+ - Ensure treeList row has suitable min-height when no content Fixes #3109
+
+Runtime
+
+ - Update tar to latest (#3128) @aksswami
+ - Give passport verify callback the same arity as the original callback (#3117) @dschmidt
+ - Handle HTTPS Key and certificate as string or buffer (#3115) @bartbutenaers
+
 #### 2.0.5: Maintenance Release
 
 Editor
diff --git a/package.json b/package.json
index b133d1f06..d52055bc4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "node-red",
-    "version": "2.0.5",
+    "version": "2.0.6",
     "description": "Low-code programming for event-driven applications",
     "homepage": "http://nodered.org",
     "license": "Apache-2.0",
@@ -28,8 +28,8 @@
     "dependencies": {
         "acorn": "8.4.1",
         "acorn-walk": "8.1.1",
-        "ajv": "8.6.0",
-        "async-mutex": "0.3.1",
+        "ajv": "8.6.2",
+        "async-mutex": "0.3.2",
         "basic-auth": "2.0.1",
         "bcryptjs": "2.4.3",
         "body-parser": "1.19.0",
@@ -55,14 +55,14 @@
         "is-utf8": "0.2.1",
         "js-yaml": "3.14.1",
         "json-stringify-safe": "5.0.1",
-        "jsonata": "1.8.4",
+        "jsonata": "1.8.5",
         "lodash.clonedeep": "^4.5.0",
         "media-typer": "1.1.0",
         "memorystore": "1.6.6",
         "mime": "2.5.2",
         "moment-timezone": "0.5.33",
         "mqtt": "4.2.8",
-        "multer": "1.4.2",
+        "multer": "1.4.3",
         "mustache": "4.2.0",
         "node-red-admin": "^2.2.0",
         "nopt": "5.0.0",
@@ -75,7 +75,7 @@
         "semver": "7.3.5",
         "tar": "6.1.11",
         "tough-cookie": "4.0.0",
-        "uglify-js": "3.13.10",
+        "uglify-js": "3.14.1",
         "uuid": "8.3.2",
         "ws": "7.5.1",
         "xml2js": "0.4.23"
@@ -84,7 +84,7 @@
         "bcrypt": "5.0.1"
     },
     "devDependencies": {
-        "dompurify": "2.2.9",
+        "dompurify": "2.3.1",
         "grunt": "1.4.1",
         "grunt-chmod": "~1.1.1",
         "grunt-cli": "~1.4.3",
@@ -109,15 +109,15 @@
         "jsdoc-nr-template": "github:node-red/jsdoc-nr-template",
         "marked": "2.1.3",
         "minami": "1.2.3",
-        "mocha": "9.0.1",
+        "mocha": "9.1.1",
         "node-red-node-test-helper": "^0.2.7",
-        "nodemon": "2.0.8",
+        "nodemon": "2.0.12",
         "proxy": "^1.0.2",
-        "sass": "1.35.1",
+        "sass": "1.39.0",
         "should": "13.2.3",
-        "sinon": "11.1.1",
+        "sinon": "11.1.2",
         "stoppable": "^1.1.0",
-        "supertest": "6.1.3"
+        "supertest": "6.1.6"
     },
     "engines": {
         "node": ">=12"
diff --git a/packages/node_modules/@node-red/editor-api/package.json b/packages/node_modules/@node-red/editor-api/package.json
index d3c342cba..73f512538 100644
--- a/packages/node_modules/@node-red/editor-api/package.json
+++ b/packages/node_modules/@node-red/editor-api/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@node-red/editor-api",
-    "version": "2.0.5",
+    "version": "2.0.6",
     "license": "Apache-2.0",
     "main": "./lib/index.js",
     "repository": {
@@ -16,8 +16,8 @@
         }
     ],
     "dependencies": {
-        "@node-red/util": "2.0.5",
-        "@node-red/editor-client": "2.0.5",
+        "@node-red/util": "2.0.6",
+        "@node-red/editor-client": "2.0.6",
         "bcryptjs": "2.4.3",
         "body-parser": "1.19.0",
         "clone": "2.1.2",
@@ -26,7 +26,7 @@
         "express": "4.17.1",
         "memorystore": "1.6.6",
         "mime": "2.5.2",
-        "multer": "1.4.2",
+        "multer": "1.4.3",
         "mustache": "4.2.0",
         "oauth2orize": "1.11.0",
         "passport-http-bearer": "1.0.1",
diff --git a/packages/node_modules/@node-red/editor-client/package.json b/packages/node_modules/@node-red/editor-client/package.json
index ee3f1d8ad..fc315b61d 100644
--- a/packages/node_modules/@node-red/editor-client/package.json
+++ b/packages/node_modules/@node-red/editor-client/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@node-red/editor-client",
-    "version": "2.0.5",
+    "version": "2.0.6",
     "license": "Apache-2.0",
     "repository": {
         "type": "git",
diff --git a/packages/node_modules/@node-red/nodes/package.json b/packages/node_modules/@node-red/nodes/package.json
index 540c97734..e082f3c73 100644
--- a/packages/node_modules/@node-red/nodes/package.json
+++ b/packages/node_modules/@node-red/nodes/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@node-red/nodes",
-    "version": "2.0.5",
+    "version": "2.0.6",
     "license": "Apache-2.0",
     "repository": {
         "type": "git",
@@ -17,7 +17,7 @@
     "dependencies": {
         "acorn": "8.4.1",
         "acorn-walk": "8.1.1",
-        "ajv": "8.6.0",
+        "ajv": "8.6.2",
         "body-parser": "1.19.0",
         "cheerio": "1.0.0-rc.10",
         "content-type": "1.0.4",
@@ -37,7 +37,7 @@
         "js-yaml": "3.14.1",
         "media-typer": "1.1.0",
         "mqtt": "4.2.8",
-        "multer": "1.4.2",
+        "multer": "1.4.3",
         "mustache": "4.2.0",
         "on-headers": "1.0.2",
         "raw-body": "2.4.1",
diff --git a/packages/node_modules/@node-red/registry/package.json b/packages/node_modules/@node-red/registry/package.json
index 6e3162b65..d42cfd4ae 100644
--- a/packages/node_modules/@node-red/registry/package.json
+++ b/packages/node_modules/@node-red/registry/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@node-red/registry",
-    "version": "2.0.5",
+    "version": "2.0.6",
     "license": "Apache-2.0",
     "main": "./lib/index.js",
     "repository": {
@@ -16,11 +16,11 @@
         }
     ],
     "dependencies": {
-        "@node-red/util": "2.0.5",
+        "@node-red/util": "2.0.6",
         "clone": "2.1.2",
         "fs-extra": "10.0.0",
         "semver": "7.3.5",
         "tar": "6.1.11",
-        "uglify-js": "3.13.10"
+        "uglify-js": "3.14.1"
     }
 }
diff --git a/packages/node_modules/@node-red/runtime/package.json b/packages/node_modules/@node-red/runtime/package.json
index 4925ebb8a..e2a288862 100644
--- a/packages/node_modules/@node-red/runtime/package.json
+++ b/packages/node_modules/@node-red/runtime/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@node-red/runtime",
-    "version": "2.0.5",
+    "version": "2.0.6",
     "license": "Apache-2.0",
     "main": "./lib/index.js",
     "repository": {
@@ -16,9 +16,9 @@
         }
     ],
     "dependencies": {
-        "@node-red/registry": "2.0.5",
-        "@node-red/util": "2.0.5",
-        "async-mutex": "0.3.1",
+        "@node-red/registry": "2.0.6",
+        "@node-red/util": "2.0.6",
+        "async-mutex": "0.3.2",
         "clone": "2.1.2",
         "express": "4.17.1",
         "fs-extra": "10.0.0",
diff --git a/packages/node_modules/@node-red/util/package.json b/packages/node_modules/@node-red/util/package.json
index 8a569238c..d76c9f450 100644
--- a/packages/node_modules/@node-red/util/package.json
+++ b/packages/node_modules/@node-red/util/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@node-red/util",
-    "version": "2.0.5",
+    "version": "2.0.6",
     "license": "Apache-2.0",
     "repository": {
         "type": "git",
@@ -18,7 +18,7 @@
         "fs-extra": "10.0.0",
         "i18next": "20.3.2",
         "json-stringify-safe": "5.0.1",
-        "jsonata": "1.8.4",
+        "jsonata": "1.8.5",
         "lodash.clonedeep": "^4.5.0",
         "moment-timezone": "0.5.33"
     }
diff --git a/packages/node_modules/node-red/package.json b/packages/node_modules/node-red/package.json
index c70c08451..2543d896f 100644
--- a/packages/node_modules/node-red/package.json
+++ b/packages/node_modules/node-red/package.json
@@ -1,6 +1,6 @@
 {
     "name": "node-red",
-    "version": "2.0.5",
+    "version": "2.0.6",
     "description": "Low-code programming for event-driven applications",
     "homepage": "http://nodered.org",
     "license": "Apache-2.0",
@@ -31,10 +31,10 @@
         "flow"
     ],
     "dependencies": {
-        "@node-red/editor-api": "2.0.5",
-        "@node-red/runtime": "2.0.5",
-        "@node-red/util": "2.0.5",
-        "@node-red/nodes": "2.0.5",
+        "@node-red/editor-api": "2.0.6",
+        "@node-red/runtime": "2.0.6",
+        "@node-red/util": "2.0.6",
+        "@node-red/nodes": "2.0.6",
         "basic-auth": "2.0.1",
         "bcryptjs": "2.4.3",
         "express": "4.17.1",

From 4f4d78bfab0fbd70b4e87d1f5b486a8ca478fa1e Mon Sep 17 00:00:00 2001
From: bartbutenaers <bart.butenaers@gmail.com>
Date: Sat, 21 Aug 2021 22:21:58 +0200
Subject: [PATCH 13/27] Key and certificate as string or buffer

---
 packages/node_modules/node-red/red.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/node_modules/node-red/red.js b/packages/node_modules/node-red/red.js
index 2b934fb56..5c40d7794 100755
--- a/packages/node_modules/node-red/red.js
+++ b/packages/node_modules/node-red/red.js
@@ -234,8 +234,13 @@ httpsPromise.then(function(startupHttps) {
                             // Get the result of the function, because createServer doesn't accept functions as input
                             Promise.resolve(settings.https()).then(function(refreshedHttps) {
                                 if (refreshedHttps) {
+                                    // The key/cert needs to be updated in the NodeJs http(s) server, when no key/cert is yet available or when the key/cert has changed. 
+                                    // Note that the refreshed key/cert can be supplied as a string or a buffer.
+                                    var updateKey = (server.key == undefined || (Buffer.isBuffer(server.key) && !server.key.equals(refreshedHttps.key)) || (typeof server.key == "string" && server.key != refreshedHttps.key));
+                                    var updateCert = (server.cert == undefined || (Buffer.isBuffer(server.cert) && !server.cert.equals(refreshedHttps.cert)) || (typeof server.cert == "string" && server.cert != refreshedHttps.cert));
+                                    
                                     // Only update the credentials in the server when key or cert has changed
-                                    if(!server.key || !server.cert || !server.key.equals(refreshedHttps.key) || !server.cert.equals(refreshedHttps.cert)) {
+                                    if(updateKey || updateCert) {
                                         server.setSecureContext(refreshedHttps);
                                         RED.log.info(RED.log._("server.https.settings-refreshed"));
                                     }

From f2a9887a12c9e8dff9ba3b1d125cd557a07d99e2 Mon Sep 17 00:00:00 2001
From: Mauricio Bonani <bonanitech@gmail.com>
Date: Tue, 10 Aug 2021 14:21:54 -0400
Subject: [PATCH 14/27] Place close tab link in front of fade

---
 .../@node-red/editor-client/src/js/ui/common/tabs.js          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js
index 0dfb72ffd..41c6e704c 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js
@@ -664,6 +664,8 @@ RED.tabs = (function() {
                 link.on("dblclick", function(evt) { evt.stopPropagation(); evt.preventDefault(); })
 
 
+                $('<span class="red-ui-tabs-fade"></span>').appendTo(li);
+
                 if (tab.closeable) {
                     li.addClass("red-ui-tabs-closeable")
                     var closeLink = $("<a/>",{href:"#",class:"red-ui-tab-close"}).appendTo(li);
@@ -674,8 +676,6 @@ RED.tabs = (function() {
                     });
                 }
 
-                $('<span class="red-ui-tabs-fade"></span>').appendTo(li);
-
                 var badges = $('<span class="red-ui-tabs-badges"></span>').appendTo(li);
                 if (options.onselect) {
                     $('<i class="red-ui-tabs-badge-changed fa fa-circle"></i>').appendTo(badges);

From bdf54f6cffa8720fd6caface1bc5020bf897fa21 Mon Sep 17 00:00:00 2001
From: Mauricio Bonani <bonanitech@gmail.com>
Date: Tue, 10 Aug 2021 14:26:41 -0400
Subject: [PATCH 15/27] Change fade color when hovering an inactive tab

---
 .../node_modules/@node-red/editor-client/src/sass/tabs.scss    | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss b/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss
index 662aaa6ae..0b038932a 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss
@@ -131,6 +131,9 @@
             &:not(.active) a:hover {
                 color: $workspace-button-color-hover;
                 background: $tab-background-hover;
+                &+.red-ui-tabs-fade {
+                    background-image: linear-gradient(to right, change-color($tab-background-hover, $alpha: 0.001), $tab-background-hover);
+                }
             }
         }
     }

From 9b83afae4272c63075f48e57355e706009251ae0 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Fri, 27 Aug 2021 16:22:58 +0100
Subject: [PATCH 16/27] Fix typo in ko editor.json Fixes #3119

---
 .../node_modules/@node-red/editor-client/locales/ko/editor.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/node_modules/@node-red/editor-client/locales/ko/editor.json b/packages/node_modules/@node-red/editor-client/locales/ko/editor.json
index 3c12e116a..9e0c74ea8 100755
--- a/packages/node_modules/@node-red/editor-client/locales/ko/editor.json
+++ b/packages/node_modules/@node-red/editor-client/locales/ko/editor.json
@@ -56,7 +56,7 @@
       "displayConfig": "설정노드 보기",
       "import": "가져오기",
       "export": "내보내기",
-      "search": "플로우 겅색",
+      "search": "플로우 검색",
       "searchInput": "플로우 검색",
       "subflows": "보조 플로우",
       "createSubflow": "보조 플로우 생성",

From 39aafc5007383c6ff4cdf3ba18e6c241f915c00e Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Fri, 27 Aug 2021 16:32:43 +0100
Subject: [PATCH 17/27] Ensure treeList row has suitable min-height when no
 content Fixes #3109

---
 .../@node-red/editor-client/src/sass/ui/common/treeList.scss   | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss
index 54e37b57c..a89fe1b84 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss
@@ -101,6 +101,9 @@
 }
 .red-ui-treeList-label-text {
     margin-left: 4px;
+    &:empty {
+        min-height: 20px;
+    }
 }
 .red-ui-treeList-sublabel-text {
     top: 0;

From e910f3915daeef9ef33cb378d72ed0563682457e Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 2 Sep 2021 10:33:43 +0100
Subject: [PATCH 18/27] Initial refactor of edit dialogs to separate panes

---
 Gruntfile.js                                  |    2 +-
 .../@node-red/editor-client/src/js/nodes.js   |   19 +-
 .../editor-client/src/js/ui/editor.js         | 1852 ++++-------------
 .../js/ui/{common => editors}/colorPicker.js  |    2 +-
 .../src/js/ui/editors/iconPicker.js           |   99 +
 .../src/js/ui/editors/panes/appearance.js     |  515 +++++
 .../src/js/ui/editors/panes/description.js    |   71 +
 .../src/js/ui/editors/panes/properties.js     |  190 ++
 .../src/js/ui/editors/panes/subflowModule.js  |  181 ++
 .../js/ui/editors/panes/subflowProperties.js  |   68 +
 .../editor-client/src/js/ui/group.js          |    6 +-
 .../editor-client/src/js/ui/library.js        |    2 +-
 .../editor-client/src/js/ui/subflow.js        |  191 +-
 13 files changed, 1519 insertions(+), 1679 deletions(-)
 rename packages/node_modules/@node-red/editor-client/src/js/ui/{common => editors}/colorPicker.js (99%)
 create mode 100644 packages/node_modules/@node-red/editor-client/src/js/ui/editors/iconPicker.js
 create mode 100644 packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js
 create mode 100644 packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/description.js
 create mode 100644 packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js
 create mode 100644 packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowModule.js
 create mode 100644 packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js

diff --git a/Gruntfile.js b/Gruntfile.js
index df9939a8c..261f0c72b 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -162,7 +162,6 @@ module.exports = function(grunt) {
                     "packages/node_modules/@node-red/editor-client/src/js/ui/common/stack.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/common/toggleButton.js",
-                    "packages/node_modules/@node-red/editor-client/src/js/ui/common/colorPicker.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/actions.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/diff.js",
@@ -182,6 +181,7 @@ module.exports = function(grunt) {
                     "packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/editor.js",
+                    "packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/*.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/editors/*.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editors/*.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/event-log.js",
diff --git a/packages/node_modules/@node-red/editor-client/src/js/nodes.js b/packages/node_modules/@node-red/editor-client/src/js/nodes.js
index e623b3b0f..2d442eea9 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/nodes.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/nodes.js
@@ -592,18 +592,17 @@ RED.nodes = (function() {
             inputLabels: function(i) { return sf.inputLabels?sf.inputLabels[i]:null },
             outputLabels: function(i) { return sf.outputLabels?sf.outputLabels[i]:null },
             oneditprepare: function() {
-                RED.subflow.buildEditForm("subflow",this);
-                RED.subflow.buildPropertiesForm(this);
+                if (this.type !== 'subflow') {
+                    // Whilst this definition is used for both template and instance
+                    // nodes, the work to build the edit form for the template nodes
+                    // is handled elsewhere.
+                    RED.subflow.buildEditForm("subflow",this);
+                }
             },
             oneditresize: function(size) {
-                // var rows = $(".dialog-form>div:not(.node-input-env-container-row)");
-                var height = size.height;
-                // for (var i=0; i<rows.size(); i++) {
-                //     height -= $(rows[i]).outerHeight(true);
-                // }
-                // var editorRow = $("#dialog-form>div.node-input-env-container-row");
-                // height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
-                $("ol.red-ui-editor-subflow-env-list").editableList('height',height);
+                if (this.type === 'subflow') {
+                    $("#node-input-env-container").editableList('height',size.height - 80);
+                }
             },
             set:{
                 module: "node-red"
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 d1cc3ed80..a2841cdde 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
@@ -20,19 +20,16 @@
 RED.editor = (function() {
 
     var editStack = [];
+    var buildingEditDialog = false;
     var editing_node = null;
     var editing_config_node = null;
-    var subflowEditor;
 
     var customEditTypes = {};
+    var editPanes = {};
+    var filteredEditPanes = [];
 
     var editTrayWidthCache = {};
 
-    function getCredentialsURL(nodeType, nodeID) {
-        var dashedType = nodeType.replace(/\s+/g, '-');
-        return  'credentials/' + dashedType + "/" + nodeID;
-    }
-
     /**
      * Validate a node
      * @param node - the node being validated
@@ -160,7 +157,6 @@ RED.editor = (function() {
         return valid;
     }
 
-
     function validateNodeEditor(node,prefix) {
         for (var prop in node._def.defaults) {
             if (node._def.defaults.hasOwnProperty(prop)) {
@@ -398,74 +394,95 @@ RED.editor = (function() {
         }
     }
 
-    /**
-     * Update the node credentials from the edit form
-     * @param node - the node containing the credentials
-     * @param credDefinition - definition of the credentials
-     * @param prefix - prefix of the input fields
-     * @return {boolean} whether anything has changed
-     */
-    function updateNodeCredentials(node, credDefinition, prefix) {
-        var changed = false;
-        if (!node.credentials) {
-            node.credentials = {_:{}};
-        } else if (!node.credentials._) {
-            node.credentials._ = {};
-        }
-
-        for (var cred in credDefinition) {
-            if (credDefinition.hasOwnProperty(cred)) {
-                var input = $("#" + prefix + '-' + cred);
-                if (input.length > 0) {
-                    var value = input.val();
-                    if (credDefinition[cred].type == 'password') {
-                        node.credentials['has_' + cred] = (value !== "");
-                        if (value == '__PWRD__') {
-                            continue;
-                        }
-                        changed = true;
-
-                    }
-                    node.credentials[cred] = value;
-                    if (value != node.credentials._[cred]) {
-                        changed = true;
-                    }
-                }
-            }
-        }
-        return changed;
-    }
-
     /**
      * Prepare all of the editor dialog fields
+     * @param trayBody - the tray body to populate
+     * @param nodeEditPanes - array of edit pane ids to add to the dialog
      * @param node - the node being edited
      * @param definition - the node definition
      * @param prefix - the prefix to use in the input element ids (node-input|node-config-input)
+     * @param default - the id of the tab to show by default
      */
-    function prepareEditDialog(node,definition,prefix,done) {
-        for (var d in definition.defaults) {
-            if (definition.defaults.hasOwnProperty(d)) {
-                if (definition.defaults[d].type) {
-                    if (!definition.defaults[d]._type.array) {
-                        var configTypeDef = RED.nodes.getType(definition.defaults[d].type);
-                        if (configTypeDef && configTypeDef.category === 'config') {
-                            if (configTypeDef.exclusive) {
-                                prepareConfigNodeButton(node,d,definition.defaults[d].type,prefix);
-                            } else {
-                                prepareConfigNodeSelect(node,d,definition.defaults[d].type,prefix);
-                            }
-                        } else {
-                            console.log("Unknown type:", definition.defaults[d].type);
-                            preparePropertyEditor(node,d,prefix,definition.defaults);
-                        }
-                    }
-                } else {
-                    preparePropertyEditor(node,d,prefix,definition.defaults);
-                }
-                attachPropertyChangeHandler(node,definition.defaults,d,prefix);
-            }
-        }
+    function prepareEditDialog(trayBody, nodeEditPanes, node, definition, prefix, defaultTab, done) {
+        var finishedBuilding = false;
         var completePrepare = function() {
+
+            var editorTabEl = $('<ul></ul>').appendTo(trayBody);
+            var editorContent = $('<div></div>').appendTo(trayBody);
+
+            var editorTabs = RED.tabs.create({
+                element:editorTabEl,
+                onchange:function(tab) {
+                    editorContent.children().hide();
+                    if (tab.onchange) {
+                        tab.onchange.call(tab);
+                    }
+                    tab.content.show();
+                    if (finishedBuilding) {
+                        RED.tray.resize();
+                    }
+                },
+                collapsible: true,
+                menu: false
+            });
+
+            var activeEditPanes = [];
+            nodeEditPanes.forEach(function(id) {
+                try {
+                    var editPaneDefinition = editPanes[id];
+                    if (editPaneDefinition) {
+                        if (typeof editPaneDefinition === 'function') {
+                            editPaneDefinition = editPaneDefinition.call(editPaneDefinition);
+                        }
+                        var editTab = {
+                            id: id,
+                            label: editPaneDefinition.label,
+                            name: editPaneDefinition.name,
+                            iconClass: editPaneDefinition.iconClass,
+                            content: editPaneDefinition.create.call(editPaneDefinition,editorContent,node).hide(),
+                            onchange: function() {
+                                if (editPaneDefinition.onchange) {
+                                    editPaneDefinition.onchange.call(editPaneDefinition,node)
+                                }
+                            }
+                        }
+                        editorTabs.addTab(editTab);
+                        activeEditPanes.push(editPaneDefinition);
+                    } else {
+                        console.warn("Unregisted edit pane:",id)
+                    }
+                } catch(err) {
+                    console.log(id,err);
+                }
+            });
+
+            for (var d in definition.defaults) {
+                if (definition.defaults.hasOwnProperty(d)) {
+                    if (definition.defaults[d].type) {
+                        if (!definition.defaults[d]._type.array) {
+                            var configTypeDef = RED.nodes.getType(definition.defaults[d].type);
+                            if (configTypeDef && configTypeDef.category === 'config') {
+                                if (configTypeDef.exclusive) {
+                                    prepareConfigNodeButton(node,d,definition.defaults[d].type,prefix);
+                                } else {
+                                    prepareConfigNodeSelect(node,d,definition.defaults[d].type,prefix);
+                                }
+                            } else {
+                                console.log("Unknown type:", definition.defaults[d].type);
+                                preparePropertyEditor(node,d,prefix,definition.defaults);
+                            }
+                        }
+                    } else {
+                        preparePropertyEditor(node,d,prefix,definition.defaults);
+                    }
+                    attachPropertyChangeHandler(node,definition.defaults,d,prefix);
+                }
+            }
+
+            if (!/^subflow:/.test(definition.type)) {
+                populateCredentialsInputs(node, definition.credentials, node.credentials, prefix);
+            }
+
             if (definition.oneditprepare) {
                 try {
                     definition.oneditprepare.call(node);
@@ -474,6 +491,7 @@ RED.editor = (function() {
                     console.log(err.stack);
                 }
             }
+
             // Now invoke any change handlers added to the fields - passing true
             // to prevent full node validation from being triggered each time
             for (var d in definition.defaults) {
@@ -503,8 +521,12 @@ RED.editor = (function() {
                 }
             }
             validateNodeEditor(node,prefix);
+            finishedBuilding = true;
+            if (defaultTab) {
+                editorTabs.activateTab(defaultTab);
+            }
             if (done) {
-                done();
+                done(activeEditPanes);
             }
         }
         if (definition.credentials || /^subflow:/.test(definition.type) || (node.type === "group")) {
@@ -512,13 +534,14 @@ RED.editor = (function() {
                 populateCredentialsInputs(node, definition.credentials, node.credentials, prefix);
                 completePrepare();
             } else {
-                getNodeCredentials(node.type, node.id, function(data) {
+                var nodeType = node.type;
+                if  (/^subflow:/.test(nodeType)) {
+                    nodeType = "subflow"
+                }
+                getNodeCredentials(nodeType, node.id, function(data) {
                     if (data) {
                         node.credentials = data;
                         node.credentials._ = $.extend(true,{},data);
-                        if (!/^subflow:/.test(definition.type)) {
-                            populateCredentialsInputs(node, definition.credentials, node.credentials, prefix);
-                        }
                     }
                     completePrepare();
                 });
@@ -598,13 +621,6 @@ RED.editor = (function() {
             $(this).attr("data-i18n",keys.join(";"));
         });
 
-        if (type === "subflow-template") {
-            // This is the 'edit properties' dialog for a subflow template
-            // TODO: this needs to happen later in the dialog open sequence
-            //       so that credentials can be loaded prior to building the form
-            RED.subflow.buildEditForm(type,node);
-        }
-
         // Add dummy fields to prevent 'Enter' submitting the form in some
         // cases, and also prevent browser auto-fill of password
         //  - the elements cannot be hidden otherwise Chrome will ignore them.
@@ -617,506 +633,147 @@ RED.editor = (function() {
         return dialogForm;
     }
 
-    function refreshLabelForm(container,node) {
-
-        var inputPlaceholder = node._def.inputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
-        var outputPlaceholder = node._def.outputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
-
-        var inputsDiv = $("#red-ui-editor-node-label-form-inputs");
-        var outputsDiv = $("#red-ui-editor-node-label-form-outputs");
-
-        var inputCount;
-        var formInputs = $("#node-input-inputs").val();
-        if (formInputs === undefined) {
-            if (node.type === 'subflow') {
-                inputCount = node.in.length;
-            } else {
-                inputCount = node.inputs || node._def.inputs || 0;
-            }
-        } else {
-            inputCount = Math.min(1,Math.max(0,parseInt(formInputs)));
-            if (isNaN(inputCount)) {
-                inputCount = 0;
-            }
-        }
-
-        var children = inputsDiv.children();
-        var childCount = children.length;
-        if (childCount === 1 && $(children[0]).hasClass('red-ui-editor-node-label-form-none')) {
-            childCount--;
-        }
-
-        if (childCount < inputCount) {
-            if (childCount === 0) {
-                // remove the 'none' placeholder
-                $(children[0]).remove();
-            }
-            for (i = childCount;i<inputCount;i++) {
-                buildLabelRow("input",i,"",inputPlaceholder).appendTo(inputsDiv);
-            }
-        } else if (childCount > inputCount) {
-            for (i=inputCount;i<childCount;i++) {
-                $(children[i]).remove();
-            }
-            if (inputCount === 0) {
-                buildLabelRow().appendTo(inputsDiv);
-            }
-        }
-
-        var outputCount;
-        var i;
-        var formOutputs = $("#node-input-outputs").val();
-
-        if (formOutputs === undefined) {
-            if (node.type === 'subflow') {
-                outputCount = node.out.length;
-            } else {
-                inputCount = node.outputs || node._def.outputs || 0;
-            }
-        } else if (isNaN(formOutputs)) {
-            var outputMap = JSON.parse(formOutputs);
-            var keys = Object.keys(outputMap);
-            children = outputsDiv.children();
-            childCount = children.length;
-            if (childCount === 1 && $(children[0]).hasClass('red-ui-editor-node-label-form-none')) {
-                childCount--;
-            }
-
-            outputCount = 0;
-            var rows = [];
-            keys.forEach(function(p) {
-                var row = $("#red-ui-editor-node-label-form-output-"+p).parent();
-                if (row.length === 0 && outputMap[p] !== -1) {
-                    if (childCount === 0) {
-                        $(children[0]).remove();
-                        childCount = -1;
+    function handleEditSave(editing_node, editState) {
+        var d;
+        if (editing_node._def.oneditsave) {
+            var oldValues = {};
+            for (d in editing_node._def.defaults) {
+                if (editing_node._def.defaults.hasOwnProperty(d)) {
+                    if (typeof editing_node[d] === "string" || typeof editing_node[d] === "number") {
+                        oldValues[d] = editing_node[d];
+                    } else {
+                        oldValues[d] = $.extend(true,{},{v:editing_node[d]}).v;
                     }
-                    row = buildLabelRow("output",p,"",outputPlaceholder);
+                }
+            }
+
+            try {
+                var rc = editing_node._def.oneditsave.call(editing_node);
+                if (rc === true) {
+                    editState.changed = true;
+                }
+            } catch(err) {
+                console.warn("oneditsave",editing_node.id,editing_node.type,err.toString());
+            }
+
+            for (d in editing_node._def.defaults) {
+                if (editing_node._def.defaults.hasOwnProperty(d)) {
+                    if (oldValues[d] === null || typeof oldValues[d] === "string" || typeof oldValues[d] === "number") {
+                        if (oldValues[d] !== editing_node[d]) {
+                            editState.changes[d] = oldValues[d];
+                            editState.changed = true;
+                        }
+                    } else if (editing_node.type !== 'group' || d !== "nodes") {
+                        if (JSON.stringify(oldValues[d]) !== JSON.stringify(editing_node[d])) {
+                            editState.changes[d] = oldValues[d];
+                            editState.changed = true;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    function defaultConfigNodeSort(A,B) {
+        if (A.__label__ < B.__label__) {
+            return -1;
+        } else if (A.__label__ > B.__label__) {
+            return 1;
+        }
+        return 0;
+    }
+
+    function updateConfigNodeSelect(name,type,value,prefix) {
+        // if prefix is null, there is no config select to update
+        if (prefix) {
+            var button = $("#"+prefix+"-edit-"+name);
+            if (button.length) {
+                if (value) {
+                    button.text(RED._("editor.configEdit"));
                 } else {
-                    row.detach();
+                    button.text(RED._("editor.configAdd"));
                 }
-                if (outputMap[p] !== -1) {
-                    outputCount++;
-                    rows.push({i:parseInt(outputMap[p]),r:row});
-                }
-            });
-            rows.sort(function(A,B) {
-                return A.i-B.i;
-            })
-            rows.forEach(function(r,i) {
-                r.r.find("label").text((i+1)+".");
-                r.r.appendTo(outputsDiv);
-            })
-            if (rows.length === 0) {
-                buildLabelRow("output",i,"").appendTo(outputsDiv);
+                $("#"+prefix+"-"+name).val(value);
             } else {
 
-            }
-        } else {
-            outputCount = Math.max(0,parseInt(formOutputs));
-        }
-        children = outputsDiv.children();
-        childCount = children.length;
-        if (childCount === 1 && $(children[0]).hasClass('red-ui-editor-node-label-form-none')) {
-            childCount--;
-        }
-        if (childCount < outputCount) {
-            if (childCount === 0) {
-                // remove the 'none' placeholder
-                $(children[0]).remove();
-            }
-            for (i = childCount;i<outputCount;i++) {
-                buildLabelRow("output",i,"").appendTo(outputsDiv);
-            }
-        } else if (childCount > outputCount) {
-            for (i=outputCount;i<childCount;i++) {
-                $(children[i]).remove();
-            }
-            if (outputCount === 0) {
-                buildLabelRow().appendTo(outputsDiv);
-            }
-        }
-    }
-    function buildLabelRow(type, index, value, placeHolder) {
-        var result = $('<div>',{class:"red-ui-editor-node-label-form-row"});
-        if (type === undefined) {
-            $('<span>').text(RED._("editor.noDefaultLabel")).appendTo(result);
-            result.addClass("red-ui-editor-node-label-form-none");
-        } else {
-            result.addClass("");
-            var id = "red-ui-editor-node-label-form-"+type+"-"+index;
-            $('<label>',{for:id}).text((index+1)+".").appendTo(result);
-            var input = $('<input>',{type:"text",id:id, placeholder: placeHolder}).val(value).appendTo(result);
-            var clear = $('<button type="button" class="red-ui-button red-ui-button-small"><i class="fa fa-times"></i></button>').appendTo(result);
-            clear.on("click", function(evt) {
-                evt.preventDefault();
-                input.val("");
-            })
-        }
-        return result;
-    }
-    function showIconPicker(container, backgroundColor, iconPath, faOnly, done) {
-        var picker = $('<div class="red-ui-icon-picker">');
-        var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(picker);
-        searchInput = $('<input type="text">').attr("placeholder",RED._("editor.searchIcons")).appendTo(searchDiv).searchBox({
-            delay: 50,
-            change: function() {
-                var searchTerm = $(this).val().trim();
-                if (searchTerm === "") {
-                    iconList.find(".red-ui-icon-list-module").show();
-                    iconList.find(".red-ui-icon-list-icon").show();
-                } else {
-                    iconList.find(".red-ui-icon-list-module").hide();
-                    iconList.find(".red-ui-icon-list-icon").each(function(i,n) {
-                        if ($(n).data('icon').indexOf(searchTerm) === -1) {
-                            $(n).hide();
-                        } else {
-                            $(n).show();
-                        }
-                    });
+                var select = $("#"+prefix+"-"+name);
+                var node_def = RED.nodes.getType(type);
+                select.children().remove();
+
+                var activeWorkspace = RED.nodes.workspace(RED.workspaces.active());
+                if (!activeWorkspace) {
+                    activeWorkspace = RED.nodes.subflow(RED.workspaces.active());
                 }
-            }
-        });
 
-        var row = $('<div>').appendTo(picker);
-        var iconList = $('<div class="red-ui-icon-list">').appendTo(picker);
-        var metaRow = $('<div class="red-ui-icon-meta"></div>').appendTo(picker);
-        var summary = $('<span>').appendTo(metaRow);
-        var resetButton = $('<button type="button" class="red-ui-button red-ui-button-small">'+RED._("editor.useDefault")+'</button>').appendTo(metaRow).on("click", function(e) {
-            e.preventDefault();
-            iconPanel.hide();
-            done(null);
-        });
-        if (!backgroundColor && faOnly) {
-            iconList.addClass("red-ui-icon-list-dark");
-        }
-        setTimeout(function() {
-            var iconSets = RED.nodes.getIconSets();
-            Object.keys(iconSets).forEach(function(moduleName) {
-                if (faOnly && (moduleName !== "font-awesome")) {
-                    return;
-                }
-                var icons = iconSets[moduleName];
-                if (icons.length > 0) {
-                    // selectIconModule.append($("<option></option>").val(moduleName).text(moduleName));
-                    var header = $('<div class="red-ui-icon-list-module"></div>').text(moduleName).appendTo(iconList);
-                    $('<i class="fa fa-cube"></i>').prependTo(header);
-                    icons.forEach(function(icon) {
-                        var iconDiv = $('<div>',{class:"red-ui-icon-list-icon"}).appendTo(iconList);
-                        var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconDiv);
-                        var icon_url = RED.settings.apiRootUrl+"icons/"+moduleName+"/"+icon;
-                        iconDiv.data('icon',icon_url);
-                        if (backgroundColor) {
-                            nodeDiv.css({
-                                'backgroundColor': backgroundColor
-                            });
-                            var borderColor = RED.utils.getDarkerColor(backgroundColor);
-                            if (borderColor !== backgroundColor) {
-                                nodeDiv.css('border-color',borderColor)
-                            }
+                var configNodes = [];
 
-                        }
-                        var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
-                        RED.utils.createIconElement(icon_url, iconContainer, true);
-
-                        if (iconPath.module === moduleName && iconPath.file === icon) {
-                            iconDiv.addClass("selected");
-                        }
-                        iconDiv.on("mouseover", function() {
-                            summary.text(icon);
-                        })
-                        iconDiv.on("mouseout", function() {
-                            summary.html("&nbsp;");
-                        })
-                        iconDiv.on("click", function() {
-                            iconPanel.hide();
-                            done(moduleName+"/"+icon);
-                        })
-                    })
-                }
-            });
-            setTimeout(function() {
-                spinner.remove();
-            },50);
-        },300);
-        var spinner = RED.utils.addSpinnerOverlay(iconList,true);
-        var iconPanel = RED.popover.panel(picker);
-        iconPanel.show({
-            target: container
-        })
-
-
-        picker.slideDown(100);
-        searchInput.trigger("focus");
-    }
-
-    function buildAppearanceForm(container,node) {
-        var dialogForm = $('<form class="dialog-form form-horizontal" autocomplete="off"></form>').appendTo(container);
-
-        var i,row;
-
-        if (node.type === "subflow") {
-            var categoryRow = $("<div/>", {
-                class: "form-row"
-            }).appendTo(dialogForm);
-            $("<label/>", {
-                for: "subflow-appearance-input-category",
-                "data-i18n": "editor:subflow.category"
-            }).appendTo(categoryRow);
-            var categorySelector = $("<select/>", {
-                id: "subflow-appearance-input-category"
-            }).css({
-                width: "250px"
-            }).appendTo(categoryRow);
-            $("<input/>", {
-                type: "text",
-                id: "subflow-appearance-input-custom-category"
-            }).css({
-                display: "none",
-                "margin-left": "10px",
-                width: "calc(100% - 250px)"
-            }).appendTo(categoryRow);
-
-            var categories = RED.palette.getCategories();
-            categories.sort(function(A,B) {
-                return A.label.localeCompare(B.label);
-            })
-            categories.forEach(function(cat) {
-                categorySelector.append($("<option/>").val(cat.id).text(cat.label));
-            })
-            categorySelector.append($("<option/>").attr('disabled',true).text("---"));
-            categorySelector.append($("<option/>").val("_custom_").text(RED._("palette.addCategory")));
-
-            $("#subflow-appearance-input-category").on("change", function() {
-                var val = $(this).val();
-                if (val === "_custom_") {
-                    $("#subflow-appearance-input-category").width(120);
-                    $("#subflow-appearance-input-custom-category").show();
-                } else {
-                    $("#subflow-appearance-input-category").width(250);
-                    $("#subflow-appearance-input-custom-category").hide();
-                }
-            })
-
-            $("#subflow-appearance-input-category").val(node.category||"subflows");
-            var userCount = 0;
-            var subflowType = "subflow:"+node.id;
-
-            // RED.nodes.eachNode(function(n) {
-            //     if (n.type === subflowType) {
-            //         userCount++;
-            //     }
-            // });
-            $("#red-ui-editor-subflow-user-count")
-                .text(RED._("subflow.subflowInstances", {count:node.instances.length})).show();
-        }
-
-        $('<div class="form-row">'+
-            '<label for="node-input-show-label-btn" data-i18n="editor.label"></label>'+
-            '<span style="margin-right: 2px;"/>'+
-            '<input type="checkbox" id="node-input-show-label"/>'+
-        '</div>').appendTo(dialogForm);
-
-        $("#node-input-show-label").toggleButton({
-            enabledLabel: RED._("editor.show"),
-            disabledLabel: RED._("editor.hide")
-        })
-
-        if (!node.hasOwnProperty("l")) {
-            // Show label if type not link
-            node.l = !/^link (in|out)$/.test(node._def.type);
-        }
-        $("#node-input-show-label").prop("checked",node.l).trigger("change");
-
-        if (node.type === "subflow") {
-            // subflow template can select its color
-            var color = node.color ? node.color : "#DDAA99";
-            var colorRow = $("<div/>", {
-                class: "form-row"
-            }).appendTo(dialogForm);
-            $("<label/>").text(RED._("editor.color")).appendTo(colorRow);
-
-            var recommendedColors = [
-                "#DDAA99",
-                "#3FADB5", "#87A980", "#A6BBCF",
-                "#AAAA66", "#C0C0C0", "#C0DEED",
-                "#C7E9C0", "#D7D7A0", "#D8BFD8",
-                "#DAC4B4", "#DEB887", "#DEBD5C",
-                "#E2D96E", "#E6E0F8", "#E7E7AE",
-                "#E9967A", "#F3B567", "#FDD0A2",
-                "#FDF0C2", "#FFAAAA", "#FFCC66",
-                "#FFF0F0", "#FFFFFF"
-            ]
-
-            RED.colorPicker.create({
-                id: "red-ui-editor-node-color",
-                value: color,
-                palette: recommendedColors,
-                sortPalette: function (a, b) {return a.l - b.l;}
-            }).appendTo(colorRow);
-
-            $("#red-ui-editor-node-color").on('change', function(ev) {
-                // Horribly out of scope...
-                var colour = $(this).val();
-                nodeDiv.css('backgroundColor',colour);
-                var borderColor = RED.utils.getDarkerColor(colour);
-                if (borderColor !== colour) {
-                    nodeDiv.css('border-color',borderColor)
-                }
-            })
-        }
-
-
-        // If a node has icon property in defaults, the icon of the node cannot be modified. (e.g, ui_button node in dashboard)
-        if ((!node._def.defaults || !node._def.defaults.hasOwnProperty("icon"))) {
-            var iconRow = $('<div class="form-row"></div>').appendTo(dialogForm);
-            $('<label data-i18n="editor.settingIcon">').appendTo(iconRow);
-
-            var iconButton = $('<button type="button" class="red-ui-button red-ui-editor-node-appearance-button">').appendTo(iconRow);
-            $('<i class="fa fa-caret-down"></i>').appendTo(iconButton);
-            var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconButton);
-            var colour = RED.utils.getNodeColor(node.type, node._def);
-            var icon_url = RED.utils.getNodeIcon(node._def,node);
-            nodeDiv.css('backgroundColor',colour);
-            var borderColor = RED.utils.getDarkerColor(colour);
-            if (borderColor !== colour) {
-                nodeDiv.css('border-color',borderColor)
-            }
-
-            var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
-            RED.utils.createIconElement(icon_url, iconContainer, true);
-
-            iconButton.on("click", function(e) {
-                e.preventDefault();
-                var iconPath;
-                var icon = $("#red-ui-editor-node-icon").val()||"";
-                if (icon) {
-                    iconPath = RED.utils.separateIconPath(icon);
-                } else {
-                    iconPath = RED.utils.getDefaultNodeIcon(node._def, node);
-                }
-                var backgroundColor = RED.utils.getNodeColor(node.type, node._def);
-                if (node.type === "subflow") {
-                    backgroundColor = $("#red-ui-editor-node-color").val();
-                }
-                showIconPicker(iconButton,backgroundColor,iconPath,false,function(newIcon) {
-                    $("#red-ui-editor-node-icon").val(newIcon||"");
-                    var icon_url = RED.utils.getNodeIcon(node._def,{type:node.type,icon:newIcon});
-                    RED.utils.createIconElement(icon_url, iconContainer, true);
+                RED.nodes.eachConfig(function(config) {
+                    if (config.type == type && (!config.z || config.z === activeWorkspace.id)) {
+                        var label = RED.utils.getNodeLabel(config,config.id);
+                        config.__label__ = label+(config.d?" ["+RED._("workspace.disabled")+"]":"");
+                        configNodes.push(config);
+                    }
                 });
-            });
-
-            RED.popover.tooltip(iconButton, function() {
-                return $("#red-ui-editor-node-icon").val() || RED._("editor.default");
-            })
-            $('<input type="hidden" id="red-ui-editor-node-icon">').val(node.icon).appendTo(iconRow);
-        }
-
-
-        $('<div class="form-row"><span data-i18n="editor.portLabels"></span></div>').appendTo(dialogForm);
-
-        var inputCount = node.inputs || node._def.inputs || 0;
-        var outputCount = node.outputs || node._def.outputs || 0;
-        if (node.type === 'subflow') {
-            inputCount = node.in.length;
-            outputCount = node.out.length;
-        }
-
-        var inputLabels = node.inputLabels || [];
-        var outputLabels = node.outputLabels || [];
-
-        var inputPlaceholder = node._def.inputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
-        var outputPlaceholder = node._def.outputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
-
-        $('<div class="form-row"><span style="margin-left: 50px;" data-i18n="editor.labelInputs"></span><div id="red-ui-editor-node-label-form-inputs"></div></div>').appendTo(dialogForm);
-        var inputsDiv = $("#red-ui-editor-node-label-form-inputs");
-        if (inputCount > 0) {
-            for (i=0;i<inputCount;i++) {
-                buildLabelRow("input",i,inputLabels[i],inputPlaceholder).appendTo(inputsDiv);
-            }
-        } else {
-            buildLabelRow().appendTo(inputsDiv);
-        }
-        $('<div class="form-row"><span style="margin-left: 50px;" data-i18n="editor.labelOutputs"></span><div id="red-ui-editor-node-label-form-outputs"></div></div>').appendTo(dialogForm);
-        var outputsDiv = $("#red-ui-editor-node-label-form-outputs");
-        if (outputCount > 0) {
-            for (i=0;i<outputCount;i++) {
-                buildLabelRow("output",i,outputLabels[i],outputPlaceholder).appendTo(outputsDiv);
-            }
-        } else {
-            buildLabelRow().appendTo(outputsDiv);
-        }
-    }
-
-
-    function updateLabels(editing_node, changes, outputMap) {
-        var inputLabels = $("#red-ui-editor-node-label-form-inputs").children().find("input");
-        var outputLabels = $("#red-ui-editor-node-label-form-outputs").children().find("input");
-
-        var hasNonBlankLabel = false;
-        var changed = false;
-        var newValue = inputLabels.map(function() {
-            var v = $(this).val();
-            hasNonBlankLabel = hasNonBlankLabel || v!== "";
-            return v;
-        }).toArray().slice(0,editing_node.inputs);
-        if ((editing_node.inputLabels === undefined && hasNonBlankLabel) ||
-            (editing_node.inputLabels !== undefined && JSON.stringify(newValue) !== JSON.stringify(editing_node.inputLabels))) {
-            changes.inputLabels = editing_node.inputLabels;
-            editing_node.inputLabels = newValue;
-            changed = true;
-        }
-        hasNonBlankLabel = false;
-        newValue = new Array(editing_node.outputs);
-        outputLabels.each(function() {
-            var index = $(this).attr('id').substring("red-ui-editor-node-label-form-output-".length);
-            if (outputMap && outputMap.hasOwnProperty(index)) {
-                index = parseInt(outputMap[index]);
-                if (index === -1) {
-                    return;
+                var configSortFn = defaultConfigNodeSort;
+                if (typeof node_def.sort == "function") {
+                    configSortFn = node_def.sort;
                 }
+                try {
+                    configNodes.sort(configSortFn);
+                } catch(err) {
+                    console.log("Definition error: "+node_def.type+".sort",err);
+                }
+
+                configNodes.forEach(function(cn) {
+                    $('<option value="'+cn.id+'"'+(value==cn.id?" selected":"")+'></option>').text(RED.text.bidi.enforceTextDirectionWithUCC(cn.__label__)).appendTo(select);
+                    delete cn.__label__;
+                });
+
+                select.append('<option value="_ADD_"'+(value===""?" selected":"")+'>'+RED._("editor.addNewType", {type:type})+'</option>');
+                window.setTimeout(function() { select.trigger("change");},50);
             }
-            var v = $(this).val();
-            hasNonBlankLabel = hasNonBlankLabel || v!== "";
-            newValue[index] = v;
-        });
-
-        if ((editing_node.outputLabels === undefined && hasNonBlankLabel) ||
-            (editing_node.outputLabels !== undefined && JSON.stringify(newValue) !== JSON.stringify(editing_node.outputLabels))) {
-            changes.outputLabels = editing_node.outputLabels;
-            editing_node.outputLabels = newValue;
-            changed = true;
         }
-        return changed;
     }
 
-    function buildDescriptionForm(container,node) {
-        var dialogForm = $('<form class="dialog-form form-horizontal" autocomplete="off"></form>').appendTo(container);
-        var toolbarRow = $('<div></div>').appendTo(dialogForm);
-        var row = $('<div class="form-row node-text-editor-row" style="position:relative; padding-top: 4px; height: 100%"></div>').appendTo(dialogForm);
-        $('<div style="height: 100%" class="node-text-editor" id="node-info-input-info-editor" ></div>').appendTo(row);
-        var nodeInfoEditor = RED.editor.createEditor({
-            id: "node-info-input-info-editor",
-            mode: 'ace/mode/markdown',
-            value: ""
+    function getNodeCredentials(type, id, done) {
+        var timeoutNotification;
+        var intialTimeout = setTimeout(function() {
+            timeoutNotification = RED.notify($('<p data-i18n="[prepend]editor.loadCredentials">  <img src="red/images/spin.svg"/></p>').i18n(),{fixed: true})
+        },800);
+
+        var dashedType = type.replace(/\s+/g, '-');
+        var credentialsUrl = 'credentials/' + dashedType + "/" + id;
+
+        $.ajax({
+            url: credentialsUrl,
+            dataType: 'json',
+            success: function(data) {
+                if (timeoutNotification) {
+                    timeoutNotification.close();
+                    timeoutNotification = null;
+                }
+                clearTimeout(intialTimeout);
+                done(data);
+            },
+            error: function(jqXHR,status,error) {
+                if (timeoutNotification) {
+                    timeoutNotification.close();
+                    timeoutNotification = null;
+                }
+                clearTimeout(intialTimeout);
+                RED.notify(RED._("editor.errors.credentialLoadFailed"),"error")
+                done(null);
+            },
+            timeout: 30000,
         });
-        if (node.info) {
-            nodeInfoEditor.getSession().setValue(node.info, -1);
-        }
-        node.infoEditor = nodeInfoEditor;
-        return nodeInfoEditor;
     }
-var buildingEditDialog = false;
 
     function showEditDialog(node, defaultTab) {
         if (buildingEditDialog) { return }
         buildingEditDialog = true;
         var editing_node = node;
-        var isDefaultIcon;
-        var defaultIcon;
-        var nodeInfoEditor;
-        var finishedBuilding = false;
         var skipInfoRefreshOnClose = false;
+        var activeEditPanes = [];
 
         editStack.push(node);
         RED.view.state(RED.state.EDITING);
@@ -1124,6 +781,7 @@ var buildingEditDialog = false;
         if (node.type.substring(0,8) == "subflow:") {
             type = "subflow";
         }
+
         var trayOptions = {
             title: getEditStackTitle(),
             buttons: [
@@ -1195,281 +853,40 @@ var buildingEditDialog = false;
                     text: RED._("common.label.done"),
                     class: "primary",
                     click: function() {
-                        var changes = {};
-                        var changed = false;
+                        var editState = {
+                            changes: {},
+                            changed: false,
+                            outputMap: null
+                        }
                         var wasDirty = RED.nodes.dirty();
-                        var d;
-                        var outputMap;
 
-                        if (editing_node._def.oneditsave) {
-                            var oldValues = {};
-                            for (d in editing_node._def.defaults) {
-                                if (editing_node._def.defaults.hasOwnProperty(d)) {
-                                    if (typeof editing_node[d] === "string" || typeof editing_node[d] === "number") {
-                                        oldValues[d] = editing_node[d];
-                                    } else {
-                                        oldValues[d] = $.extend(true,{},{v:editing_node[d]}).v;
-                                    }
-                                }
-                            }
-                            try {
-                                var rc = editing_node._def.oneditsave.call(editing_node);
-                                if (rc === true) {
-                                    changed = true;
-                                }
-                            } catch(err) {
-                                console.warn("oneditsave",editing_node.id,editing_node.type,err.toString());
-                            }
+                        handleEditSave(editing_node,editState)
 
-                            for (d in editing_node._def.defaults) {
-                                if (editing_node._def.defaults.hasOwnProperty(d)) {
-                                    if (oldValues[d] === null || typeof oldValues[d] === "string" || typeof oldValues[d] === "number") {
-                                        if (oldValues[d] !== editing_node[d]) {
-                                            changes[d] = oldValues[d];
-                                            changed = true;
-                                        }
-                                    } else {
-                                        if (JSON.stringify(oldValues[d]) !== JSON.stringify(editing_node[d])) {
-                                            changes[d] = oldValues[d];
-                                            changed = true;
-                                        }
-                                    }
-                                }
+                        activeEditPanes.forEach(function(pane) {
+                            if (pane.apply) {
+                                pane.apply.call(pane, editing_node, editState);
                             }
-                        }
+                        })
 
-                        var newValue;
-                        if (editing_node._def.defaults) {
-                            for (d in editing_node._def.defaults) {
-                                if (editing_node._def.defaults.hasOwnProperty(d)) {
-                                    var input = $("#node-input-"+d);
-                                    if (input.attr('type') === "checkbox") {
-                                        newValue = input.prop('checked');
-                                    } else if (input.prop("nodeName") === "select" && input.attr("multiple") === "multiple") {
-                                        // An empty select-multiple box returns null.
-                                        // Need to treat that as an empty array.
-                                        newValue = input.val();
-                                        if (newValue == null) {
-                                            newValue = [];
-                                        }
-                                    } else if ("format" in editing_node._def.defaults[d] && editing_node._def.defaults[d].format !== "" && input[0].nodeName === "DIV") {
-                                        newValue = input.text();
-                                    } else {
-                                        newValue = input.val();
-                                    }
-                                    if (newValue != null) {
-                                        if (d === "outputs") {
-                                            if  (newValue.trim() === "") {
-                                                continue;
-                                            }
-                                            if (isNaN(newValue)) {
-                                                outputMap = JSON.parse(newValue);
-                                                var outputCount = 0;
-                                                var outputsChanged = false;
-                                                var keys = Object.keys(outputMap);
-                                                keys.forEach(function(p) {
-                                                    if (isNaN(p)) {
-                                                        // New output;
-                                                        outputCount ++;
-                                                        delete outputMap[p];
-                                                    } else {
-                                                        outputMap[p] = outputMap[p]+"";
-                                                        if (outputMap[p] !== "-1") {
-                                                            outputCount++;
-                                                            if (outputMap[p] !== p) {
-                                                                // Output moved
-                                                                outputsChanged = true;
-                                                            } else {
-                                                                delete outputMap[p];
-                                                            }
-                                                        } else {
-                                                            // Output removed
-                                                            outputsChanged = true;
-                                                        }
-                                                    }
-                                                });
+                        var removedLinks = updateNodeProperties(editing_node, editState.outputMap);
 
-                                                newValue = outputCount;
-                                                if (outputsChanged) {
-                                                    changed = true;
-                                                }
-                                            } else {
-                                                newValue = parseInt(newValue);
-                                            }
-                                        }
-                                        if (editing_node._def.defaults[d].type) {
-                                            if (newValue == "_ADD_") {
-                                                newValue = "";
-                                            }
-                                        }
-                                        if (editing_node[d] != newValue) {
-                                            if (editing_node._def.defaults[d].type) {
-                                                // Change to a related config node
-                                                var configNode = RED.nodes.node(editing_node[d]);
-                                                if (configNode) {
-                                                    var users = configNode.users;
-                                                    users.splice(users.indexOf(editing_node),1);
-                                                    RED.events.emit("nodes:change",configNode);
-                                                }
-                                                configNode = RED.nodes.node(newValue);
-                                                if (configNode) {
-                                                    configNode.users.push(editing_node);
-                                                    RED.events.emit("nodes:change",configNode);
-                                                }
-                                            }
-                                            changes[d] = editing_node[d];
-                                            editing_node[d] = newValue;
-                                            changed = true;
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                        if (editing_node._def.credentials) {
-                            var prefix = 'node-input';
-                            var credDefinition = editing_node._def.credentials;
-                            var credsChanged = updateNodeCredentials(editing_node,credDefinition,prefix);
-                            changed = changed || credsChanged;
-                        }
-                        // if (editing_node.hasOwnProperty("_outputs")) {
-                        //     outputMap = editing_node._outputs;
-                        //     delete editing_node._outputs;
-                        //     if (Object.keys(outputMap).length > 0) {
-                        //         changed = true;
-                        //     }
-                        // }
-                        var removedLinks = updateNodeProperties(editing_node,outputMap);
-
-                        if (updateLabels(editing_node, changes, outputMap)) {
-                            changed = true;
-                        }
-
-                        if (!editing_node._def.defaults || !editing_node._def.defaults.hasOwnProperty("icon")) {
-                            var icon = $("#red-ui-editor-node-icon").val()||""
-                            if (!isDefaultIcon) {
-                                if (icon !== editing_node.icon) {
-                                    changes.icon = editing_node.icon;
-                                    editing_node.icon = icon;
-                                    changed = true;
-                                }
-                            } else {
-                                if (icon !== "" && icon !== defaultIcon) {
-                                    changes.icon = editing_node.icon;
-                                    editing_node.icon = icon;
-                                    changed = true;
-                                } else {
-                                    var iconPath = RED.utils.getDefaultNodeIcon(editing_node._def, editing_node);
-                                    var currentDefaultIcon = iconPath.module+"/"+iconPath.file;
-                                    if (defaultIcon !== currentDefaultIcon) {
-                                        changes.icon = editing_node.icon;
-                                        editing_node.icon = currentDefaultIcon;
-                                        changed = true;
-                                    }
-                                }
-                            }
-                        }
-
-                        if (!$("#node-input-show-label").prop('checked')) {
-                            // Not checked - hide label
-                            if (!/^link (in|out)$/.test(node.type)) {
-                                // Not a link node - default state is true
-                                if (node.l !== false) {
-                                    changes.l = node.l
-                                    changed = true;
-                                }
-                                node.l = false;
-                            } else {
-                                // A link node - default state is false
-                                if (node.hasOwnProperty('l') && node.l) {
-                                    changes.l = node.l
-                                    changed = true;
-                                }
-                                delete node.l;
-                            }
-                        } else {
-                            // Checked - show label
-                            if (!/^link (in|out)$/.test(node.type)) {
-                                // Not a link node - default state is true
-                                if (node.hasOwnProperty('l') && !node.l) {
-                                    changes.l = node.l
-                                    changed = true;
-                                }
-                                delete node.l;
-                            } else {
-                                if (!node.l) {
-                                    changes.l = node.l
-                                    changed = true;
-                                }
-                                node.l = true;
-                            }
-                        }
                         if ($("#node-input-node-disabled").prop('checked')) {
                             if (node.d !== true) {
-                                changes.d = node.d;
-                                changed = true;
+                                editState.changes.d = node.d;
+                                editState.changed = true;
                                 node.d = true;
                             }
                         } else {
                             if (node.d === true) {
-                                changes.d = node.d;
-                                changed = true;
+                                editState.changes.d = node.d;
+                                editState.changed = true;
                                 delete node.d;
                             }
                         }
 
                         node.resize = true;
 
-                        var oldInfo = node.info;
-                        if (nodeInfoEditor) {
-                            var newInfo = nodeInfoEditor.getValue();
-                            if (!!oldInfo) {
-                                // Has existing info property
-                                if (newInfo.trim() === "") {
-                                    // New value is blank - remove the property
-                                    changed = true;
-                                    changes.info = oldInfo;
-                                    delete node.info;
-                                } else if (newInfo !== oldInfo) {
-                                    // New value is different
-                                    changed = true;
-                                    changes.info = oldInfo;
-                                    node.info = newInfo;
-                                }
-                            } else {
-                                // No existing info
-                                if (newInfo.trim() !== "") {
-                                    // New value is not blank
-                                    changed = true;
-                                    changes.info = undefined;
-                                    node.info = newInfo;
-                                }
-                            }
-                        }
-
-                        if (type === "subflow") {
-                            var old_env = editing_node.env;
-                            var new_env = RED.subflow.exportSubflowInstanceEnv(editing_node);
-                            if (new_env && new_env.length > 0) {
-                                new_env.forEach(function(prop) {
-                                    if (prop.type === "cred") {
-                                        editing_node.credentials = editing_node.credentials || {_:{}};
-                                        editing_node.credentials[prop.name] = prop.value;
-                                        editing_node.credentials['has_'+prop.name] = (prop.value !== "");
-                                        if (prop.value !== '__PWRD__') {
-                                            changed = true;
-                                        }
-                                        delete prop.value;
-                                    }
-                                });
-                            }
-                            if (!isSameObj(old_env, new_env)) {
-                                editing_node.env = new_env;
-                                changes.env = editing_node.env;
-                                changed = true;
-                            }
-                        }
-
-                        if (changed) {
+                        if (editState.changed) {
                             var wasChanged = editing_node.changed;
                             editing_node.changed = true;
                             RED.nodes.dirty(true);
@@ -1493,13 +910,13 @@ var buildingEditDialog = false;
                             var historyEvent = {
                                 t:'edit',
                                 node:editing_node,
-                                changes:changes,
+                                changes:editState.changes,
                                 links:removedLinks,
                                 dirty:wasDirty,
                                 changed:wasChanged
                             };
-                            if (outputMap) {
-                                historyEvent.outputMap = outputMap;
+                            if (editState.outputMap) {
+                                historyEvent.outputMap = editState.outputMap;
                             }
                             if (subflowInstances) {
                                 historyEvent.subflow = {
@@ -1520,14 +937,12 @@ var buildingEditDialog = false;
                 editTrayWidthCache[type] = dimensions.width;
                 $(".red-ui-tray-content").height(dimensions.height - 50);
                 var form = $(".red-ui-tray-content form").height(dimensions.height - 50 - 40);
-                if (editing_node && editing_node._def.oneditresize) {
-                    try {
-                        editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()});
-                    } catch(err) {
-                        console.log("oneditresize",editing_node.id,editing_node.type,err.toString());
+                var size = {width:form.width(),height:form.height()};
+                activeEditPanes.forEach(function(pane) {
+                    if (pane.resize) {
+                        pane.resize.call(pane,editing_node, size);
                     }
-                }
-                if (nodeInfoEditor) {nodeInfoEditor.resize();} //markdown editor doesnt size up without this - idkw!?
+                })
             },
             open: function(tray, done) {
                 if (editing_node.hasOwnProperty('outputs')) {
@@ -1546,96 +961,19 @@ var buildingEditDialog = false;
                     invertState: true
                 })
 
-                var editorTabEl = $('<ul></ul>').appendTo(trayBody);
-                var editorContent = $('<div></div>').appendTo(trayBody);
-
-                var editorTabs = RED.tabs.create({
-                    element:editorTabEl,
-                    onchange:function(tab) {
-                        editorContent.children().hide();
-                        if (tab.onchange) {
-                            tab.onchange.call(tab);
-                        }
-                        tab.content.show();
-                        if (finishedBuilding) {
-                            RED.tray.resize();
-                        }
-                    },
-                    collapsible: true,
-                    menu: false
-                });
-                var ns;
-                if (node._def.set.module === "node-red") {
-                    ns = "node-red";
-                } else {
-                    ns = node._def.set.id;
-                }
-                var iconPath = RED.utils.getDefaultNodeIcon(node._def,node);
-                defaultIcon = iconPath.module+"/"+iconPath.file;
-                if (node.icon && node.icon !== defaultIcon) {
-                    isDefaultIcon = false;
-                } else {
-                    isDefaultIcon = true;
-                }
-
-                var nodePropertiesTab = {
-                    id: "editor-tab-properties",
-                    label: RED._("editor-tab.properties"),
-                    name: RED._("editor-tab.properties"),
-                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                    iconClass: "fa fa-cog"
-                };
-                buildEditForm(nodePropertiesTab.content,"dialog-form",type,ns,node);
-                editorTabs.addTab(nodePropertiesTab);
-
+                var nodeEditPanes = ['editor-tab-properties'];
                 if (/^subflow:/.test(node.type)) {
-                    var subflowPropertiesTab = {
-                        id: "editor-subflow-envProperties",
-                        label: RED._("editor-tab.envProperties"),
-                        name: RED._("editor-tab.envProperties"),
-                        content: $('<div>', {id:"editor-subflow-envProperties-content",class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                        iconClass: "fa fa-list"
-                    };
-                    editorTabs.addTab(subflowPropertiesTab);
-                    // This tab is populated by the oneditprepare function of this
-                    // subflow. That ensures it is done *after* any credentials
-                    // have been loaded for the instance.
+                    nodeEditPanes.push("editor-tab-envProperties");
                 }
-
                 if (!node._def.defaults || !node._def.defaults.hasOwnProperty('info'))  {
-                    var descriptionTab = {
-                        id: "editor-tab-description",
-                        label: RED._("editor-tab.description"),
-                        name: RED._("editor-tab.description"),
-                        content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                        iconClass: "fa fa-file-text-o",
-                        onchange: function() {
-                            nodeInfoEditor.focus();
-                        }
-                    };
-                    editorTabs.addTab(descriptionTab);
-                    nodeInfoEditor = buildDescriptionForm(descriptionTab.content,node);
+                    nodeEditPanes.push('editor-tab-description');
                 }
+                nodeEditPanes.push("editor-tab-appearance");
 
-                var appearanceTab = {
-                    id: "editor-tab-appearance",
-                    label: RED._("editor-tab.appearance"),
-                    name: RED._("editor-tab.appearance"),
-                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                    iconClass: "fa fa-object-group",
-                    onchange: function() {
-                        refreshLabelForm(this.content,node);
-                    }
-                };
-                buildAppearanceForm(appearanceTab.content,node);
-                editorTabs.addTab(appearanceTab);
-
-                prepareEditDialog(node,node._def,"node-input", function() {
+                prepareEditDialog(trayBody, nodeEditPanes,node,node._def,"node-input", defaultTab, function(_activeEditPanes) {
+                    activeEditPanes = _activeEditPanes;
                     trayBody.i18n();
-                    finishedBuilding = true;
-                    if (defaultTab) {
-                        editorTabs.activateTab(defaultTab);
-                    }
+                    trayFooter.i18n();
                     buildingEditDialog = false;
                     done();
                 });
@@ -1648,10 +986,13 @@ var buildingEditDialog = false;
                     RED.sidebar.info.refresh(editing_node);
                 }
                 RED.workspaces.refresh();
-                if (nodeInfoEditor) {
-                    nodeInfoEditor.destroy();
-                    nodeInfoEditor = null;
-                }
+
+                activeEditPanes.forEach(function(pane) {
+                    if (pane.close) {
+                        pane.close.call(pane,editing_node);
+                    }
+                })
+
                 RED.view.redraw(true);
                 editStack.pop();
             },
@@ -1693,15 +1034,8 @@ var buildingEditDialog = false;
         var adding = (id == "_ADD_");
         var node_def = RED.nodes.getType(type);
         var editing_config_node = RED.nodes.node(id);
-        var nodeInfoEditor;
-        var finishedBuilding = false;
+        var activeEditPanes = [];
 
-        var ns;
-        if (node_def.set.module === "node-red") {
-            ns = "node-red";
-        } else {
-            ns = node_def.set.id;
-        }
         var configNodeScope = ""; // default to global
         var activeSubflow = RED.nodes.subflow(RED.workspaces.active());
         if (activeSubflow) {
@@ -1729,14 +1063,13 @@ var buildingEditDialog = false;
             title: getEditStackTitle(), //(adding?RED._("editor.addNewConfig", {type:type}):RED._("editor.editConfig", {type:type})),
             resize: function(dimensions) {
                 $(".red-ui-tray-content").height(dimensions.height - 50);
-                if (editing_config_node && editing_config_node._def.oneditresize) {
-                    var form = $("#node-config-dialog-edit-form");
-                    try {
-                        editing_config_node._def.oneditresize.call(editing_config_node,{width:form.width(),height:form.height()});
-                    } catch(err) {
-                        console.log("oneditresize",editing_config_node.id,editing_config_node.type,err.toString());
+                var form = $("#node-config-dialog-edit-form");
+                var size = {width:form.width(),height:form.height()};
+                activeEditPanes.forEach(function(pane) {
+                    if (pane.resize) {
+                        pane.resize.call(pane, editing_config_node, size);
                     }
-                }
+                })
             },
             open: function(tray, done) {
                 var trayHeader = tray.find(".red-ui-tray-header");
@@ -1756,52 +1089,14 @@ var buildingEditDialog = false;
                 }
                 trayFooter.append('<span class="red-ui-tray-footer-right"><span id="red-ui-editor-config-scope-warning" data-i18n="[title]editor.errors.scopeChange"><i class="fa fa-warning"></i></span><select id="red-ui-editor-config-scope"></select></span>');
 
-                var editorTabEl = $('<ul></ul>').appendTo(trayBody);
-                var editorContent = $('<div></div>').appendTo(trayBody);
 
-                var editorTabs = RED.tabs.create({
-                    element:editorTabEl,
-                    onchange:function(tab) {
-                        editorContent.children().hide();
-                        if (tab.onchange) {
-                            tab.onchange.call(tab);
-                        }
-                        tab.content.show();
-                        if (finishedBuilding) {
-                            RED.tray.resize();
-                        }
-                    },
-                    collapsible: true,
-                    menu: false
-                });
-
-                var nodePropertiesTab = {
-                    id: "editor-tab-cproperties",
-                    label: RED._("editor-tab.properties"),
-                    name: RED._("editor-tab.properties"),
-                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                    iconClass: "fa fa-cog"
-                };
-                editorTabs.addTab(nodePropertiesTab);
-                buildEditForm(nodePropertiesTab.content,"node-config-dialog-edit-form",type,ns);
-
-                if (!node_def.defaults || !node_def.defaults.hasOwnProperty('info'))  {
-                    var descriptionTab = {
-                        id: "editor-tab-description",
-                        label: RED._("editor-tab.description"),
-                        name: RED._("editor-tab.description"),
-                        content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                        iconClass: "fa fa-file-text-o",
-                        onchange: function() {
-                            nodeInfoEditor.focus();
-                        }
-                    };
-                    editorTabs.addTab(descriptionTab);
-                    nodeInfoEditor = buildDescriptionForm(descriptionTab.content,editing_config_node);
+                var nodeEditPanes = [ 'editor-tab-properties' ];
+                if (!editing_config_node._def.defaults || !editing_config_node._def.defaults.hasOwnProperty('info'))  {
+                    nodeEditPanes.push('editor-tab-description');
                 }
 
-
-                prepareEditDialog(editing_config_node,node_def,"node-config-input", function() {
+                prepareEditDialog(trayBody, nodeEditPanes, editing_config_node, node_def, "node-config-input", null, function(_activeEditPanes) {
+                    activeEditPanes = _activeEditPanes;
                     if (editing_config_node._def.exclusive) {
                         $("#red-ui-editor-config-scope").hide();
                     } else {
@@ -1852,17 +1147,19 @@ var buildingEditDialog = false;
                     }
                     trayBody.i18n();
                     trayFooter.i18n();
-                    finishedBuilding = true;
                     buildingEditDialog = false;
                     done();
                 });
             },
             close: function() {
                 RED.workspaces.refresh();
-                if (nodeInfoEditor) {
-                    nodeInfoEditor.destroy();
-                    nodeInfoEditor = null;
-                }
+
+                activeEditPanes.forEach(function(pane) {
+                    if (pane.close) {
+                        pane.close.call(pane,editing_config_node);
+                    }
+                })
+
                 editStack.pop();
             },
             show: function() {
@@ -1908,6 +1205,11 @@ var buildingEditDialog = false;
                 text: adding?RED._("editor.configAdd"):RED._("editor.configUpdate"),
                 class: "primary",
                 click: function() {
+                    var editState = {
+                        changes: {},
+                        changed: false,
+                        outputMap: null
+                    };
                     var configProperty = name;
                     var configId = editing_config_node.id;
                     var configType = type;
@@ -1915,7 +1217,6 @@ var buildingEditDialog = false;
                     var configTypeDef = RED.nodes.getType(configType);
                     var d;
                     var input;
-                    var scope = $("#red-ui-editor-config-scope").val();
 
                     if (configTypeDef.oneditsave) {
                         try {
@@ -1959,31 +1260,15 @@ var buildingEditDialog = false;
                         }
                     }
 
-                    if (nodeInfoEditor) {
-                        editing_config_node.info = nodeInfoEditor.getValue();
-
-                        var oldInfo = editing_config_node.info;
-                        if (nodeInfoEditor) {
-                            var newInfo = nodeInfoEditor.getValue();
-                            if (!!oldInfo) {
-                                // Has existing info property
-                                if (newInfo.trim() === "") {
-                                    // New value is blank - remove the property
-                                    delete editing_config_node.info;
-                                } else if (newInfo !== oldInfo) {
-                                    // New value is different
-                                    editing_config_node.info = newInfo;
-                                }
-                            } else {
-                                // No existing info
-                                if (newInfo.trim() !== "") {
-                                    // New value is not blank
-                                    editing_config_node.info = newInfo;
-                                }
-                            }
+                    activeEditPanes.forEach(function(pane) {
+                        if (pane.apply) {
+                            pane.apply.call(pane, editing_config_node, editState);
                         }
-                    }
+                    })
+
                     editing_config_node.label = configTypeDef.label;
+
+                    var scope = $("#red-ui-editor-config-scope").val();
                     editing_config_node.z = scope;
 
                     if ($("#node-config-input-node-disabled").prop('checked')) {
@@ -2024,9 +1309,6 @@ var buildingEditDialog = false;
                         RED.nodes.add(editing_config_node);
                     }
 
-                    if (configTypeDef.credentials) {
-                        updateNodeCredentials(editing_config_node,configTypeDef.credentials,"node-config-input");
-                    }
                     validateNode(editing_config_node);
                     var validatedNodes = {};
                     validatedNodes[editing_config_node.id] = true;
@@ -2115,75 +1397,13 @@ var buildingEditDialog = false;
         RED.tray.show(trayOptions);
     }
 
-    function defaultConfigNodeSort(A,B) {
-        if (A.__label__ < B.__label__) {
-            return -1;
-        } else if (A.__label__ > B.__label__) {
-            return 1;
-        }
-        return 0;
-    }
-
-    function updateConfigNodeSelect(name,type,value,prefix) {
-        // if prefix is null, there is no config select to update
-        if (prefix) {
-            var button = $("#"+prefix+"-edit-"+name);
-            if (button.length) {
-                if (value) {
-                    button.text(RED._("editor.configEdit"));
-                } else {
-                    button.text(RED._("editor.configAdd"));
-                }
-                $("#"+prefix+"-"+name).val(value);
-            } else {
-
-                var select = $("#"+prefix+"-"+name);
-                var node_def = RED.nodes.getType(type);
-                select.children().remove();
-
-                var activeWorkspace = RED.nodes.workspace(RED.workspaces.active());
-                if (!activeWorkspace) {
-                    activeWorkspace = RED.nodes.subflow(RED.workspaces.active());
-                }
-
-                var configNodes = [];
-
-                RED.nodes.eachConfig(function(config) {
-                    if (config.type == type && (!config.z || config.z === activeWorkspace.id)) {
-                        var label = RED.utils.getNodeLabel(config,config.id);
-                        config.__label__ = label+(config.d?" ["+RED._("workspace.disabled")+"]":"");
-                        configNodes.push(config);
-                    }
-                });
-                var configSortFn = defaultConfigNodeSort;
-                if (typeof node_def.sort == "function") {
-                    configSortFn = node_def.sort;
-                }
-                try {
-                    configNodes.sort(configSortFn);
-                } catch(err) {
-                    console.log("Definition error: "+node_def.type+".sort",err);
-                }
-
-                configNodes.forEach(function(cn) {
-                    $('<option value="'+cn.id+'"'+(value==cn.id?" selected":"")+'></option>').text(RED.text.bidi.enforceTextDirectionWithUCC(cn.__label__)).appendTo(select);
-                    delete cn.__label__;
-                });
-
-                select.append('<option value="_ADD_"'+(value===""?" selected":"")+'>'+RED._("editor.addNewType", {type:type})+'</option>');
-                window.setTimeout(function() { select.trigger("change");},50);
-            }
-        }
-    }
-
     function showEditSubflowDialog(subflow) {
         if (buildingEditDialog) { return }
         buildingEditDialog = true;
         var editing_node = subflow;
+        var activeEditPanes = [];
         editStack.push(subflow);
         RED.view.state(RED.state.EDITING);
-        var subflowEditor;
-        var finishedBuilding = false;
         var trayOptions = {
             title: getEditStackTitle(),
             buttons: [
@@ -2200,65 +1420,27 @@ var buildingEditDialog = false;
                     text: RED._("common.label.done"),
                     click: function() {
                         var i;
-                        var changes = {};
-                        var changed = false;
+                        var editState = {
+                            changes: {},
+                            changed: false,
+                            outputMap: null
+                        }
                         var wasDirty = RED.nodes.dirty();
 
+                        activeEditPanes.forEach(function(pane) {
+                            if (pane.apply) {
+                                pane.apply.call(pane, editing_node, editState);
+                            }
+                        })
+
                         var newName = $("#subflow-input-name").val();
 
                         if (newName != editing_node.name) {
-                            changes['name'] = editing_node.name;
+                            editState.changes['name'] = editing_node.name;
                             editing_node.name = newName;
-                            changed = true;
+                            editState.changed = true;
                         }
 
-                        var newDescription = subflowEditor.getValue();
-
-                        if (newDescription != editing_node.info) {
-                            changes['info'] = editing_node.info;
-                            editing_node.info = newDescription;
-                            changed = true;
-                        }
-                        if (updateLabels(editing_node, changes, null)) {
-                            changed = true;
-                        }
-                        var icon = $("#red-ui-editor-node-icon").val()||"";
-                        if ((editing_node.icon === undefined && icon !== "node-red/subflow.svg") ||
-                            (editing_node.icon !== undefined && editing_node.icon !== icon)) {
-                            changes.icon = editing_node.icon;
-                            editing_node.icon = icon;
-                            changed = true;
-                        }
-                        var newCategory = $("#subflow-appearance-input-category").val().trim();
-                        if (newCategory === "_custom_") {
-                            newCategory = $("#subflow-appearance-input-custom-category").val().trim();
-                            if (newCategory === "") {
-                                newCategory = editing_node.category;
-                            }
-                        }
-                        if (newCategory === 'subflows') {
-                            newCategory = '';
-                        }
-                        if (newCategory != editing_node.category) {
-                            changes['category'] = editing_node.category;
-                            editing_node.category = newCategory;
-                            changed = true;
-                        }
-
-                        var oldColor = editing_node.color;
-                        var newColor =  $("#red-ui-editor-node-color").val();
-                        if (oldColor !== newColor) {
-                            editing_node.color = newColor;
-                            changes.color = newColor;
-                            changed = true;
-                            RED.utils.clearNodeColorCache();
-                            if (editing_node.type === "subflow") {
-                                var nodeDefinition = RED.nodes.getType(
-                                    "subflow:" + editing_node.id
-                                );
-                                nodeDefinition["color"] = newColor;
-                            }
-                        }
 
                         var old_env = editing_node.env;
                         var new_env = RED.subflow.exportSubflowTemplateEnv($("#node-input-env-container").editableList("items"));
@@ -2270,7 +1452,7 @@ var buildingEditDialog = false;
                                     editing_node.credentials[prop.name] = prop.value;
                                     editing_node.credentials['has_'+prop.name] = (prop.value !== "");
                                     if (prop.value !== '__PWRD__') {
-                                        changed = true;
+                                        editState.changed = true;
                                     }
                                     delete prop.value;
                                 }
@@ -2279,19 +1461,13 @@ var buildingEditDialog = false;
 
                         if (!isSameObj(old_env, new_env)) {
                             editing_node.env = new_env;
-                            changes.env = editing_node.env;
-                            changed = true;
+                            editState.changes.env = editing_node.env;
+                            editState.changed = true;
                         }
 
-                        var newMeta = RED.subflow.exportSubflowModuleProperties(editing_node);
 
-                        if (!isSameObj(editing_node.meta,newMeta)) {
-                            changes.meta = editing_node.meta;
-                            editing_node.meta = newMeta;
-                            changed = true;
-                        }
 
-                        if (changed) {
+                        if (editState.changed) {
                             var wasChanged = editing_node.changed;
                             editing_node.changed = true;
                             validateNode(editing_node);
@@ -2314,7 +1490,7 @@ var buildingEditDialog = false;
                             var historyEvent = {
                                 t:'edit',
                                 node:editing_node,
-                                changes:changes,
+                                changes:editState.changes,
                                 dirty:wasDirty,
                                 changed:wasChanged,
                                 subflow: {
@@ -2329,20 +1505,16 @@ var buildingEditDialog = false;
                     }
                 }
             ],
-            resize: function(size) {
-                $(".red-ui-tray-content").height(size.height - 50);
-                var envContainer = $("#node-input-env-container");
-                if (envContainer.length) {
-                    // var form = $(".red-ui-tray-content form").height(size.height - 50 - 40);
-                    var rows = $("#dialog-form>div:not(#subflow-env-tabs-content)");
-                    var height = size.height;
-                    for (var i=0; i<rows.size(); i++) {
-                        height -= $(rows[i]).outerHeight(true);
+            resize: function(dimensions) {
+                $(".red-ui-tray-content").height(dimensions.height - 50);
+
+                var form = $(".red-ui-tray-content form").height(dimensions.height - 50 - 40);
+                var size = {width:form.width(),height:form.height()};
+                activeEditPanes.forEach(function(pane) {
+                    if (pane.resize) {
+                        pane.resize.call(pane,editing_node, size);
                     }
-                    // var editorRow = $("#dialog-form>div.node-input-env-container-row");
-                    // height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
-                    $("#node-input-env-container").editableList('height',height-95);
-                }
+                })
             },
             open: function(tray, done) {
                 var trayFooter = tray.find(".red-ui-tray-footer");
@@ -2352,100 +1524,26 @@ var buildingEditDialog = false;
                 var trayBody = tray.find('.red-ui-tray-body');
                 trayBody.parent().css('overflow','hidden');
 
-                if (editing_node.type === "subflow") {
-                    var span = $("<span/>").css({
-                        "margin-left": "10px"
-                    }).appendTo(trayFooterLeft);
-                    $("<i/>", {
-                        class: "fa fa-info-circle"
-                    }).appendTo(span);
-                    $("<span/>").text(" ").appendTo(span);
-                    $("<i/>", {
-                        id: "red-ui-editor-subflow-user-count"
-                    }).appendTo(span);
-                }
+                $('<span style="margin-left: 10px"><i class="fa fa-info-circle"></i> <i id="red-ui-editor-subflow-user-count"></i></span>').appendTo(trayFooterLeft);
 
                 if (editing_node) {
                     RED.sidebar.info.refresh(editing_node);
                 }
 
-                var editorTabEl = $('<ul></ul>').appendTo(trayBody);
-                var editorContent = $('<div></div>').appendTo(trayBody);
+                var nodeEditPanes = [
+                    'editor-tab-properties',
+                    'editor-tab-subflow-module',
+                    'editor-tab-description',
+                    'editor-tab-appearance'
+                ];
 
-                var editorTabs = RED.tabs.create({
-                    element:editorTabEl,
-                    onchange:function(tab) {
-                        editorContent.children().hide();
-                        if (tab.onchange) {
-                            tab.onchange.call(tab);
-                        }
-                        tab.content.show();
-                        if (finishedBuilding) {
-                            RED.tray.resize();
-                        }
-                    },
-                    collapsible: true,
-                    menu: false
-                });
-
-                var nodePropertiesTab = {
-                    id: "editor-tab-properties",
-                    label: RED._("editor-tab.properties"),
-                    name: RED._("editor-tab.properties"),
-                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                    iconClass: "fa fa-cog"
-                };
-                editorTabs.addTab(nodePropertiesTab);
-
-                var moduleTab = {
-                    id: "editor-tab-module",
-                    label: RED._("editor-tab.module"),
-                    name: RED._("editor-tab.module"),
-                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                    iconClass: "fa fa-cube",
-                };
-                editorTabs.addTab(moduleTab);
-                RED.subflow.buildModuleForm(moduleTab.content, editing_node);
-
-                var descriptionTab = {
-                    id: "editor-tab-description",
-                    label: RED._("editor-tab.description"),
-                    name: RED._("editor-tab.description"),
-                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                    iconClass: "fa fa-file-text-o",
-                    onchange: function() {
-                        subflowEditor.focus();
-                    }
-                };
-                editorTabs.addTab(descriptionTab);
-                subflowEditor = buildDescriptionForm(descriptionTab.content,editing_node);
-
-                var appearanceTab = {
-                    id: "editor-tab-appearance",
-                    label: RED._("editor-tab.appearance"),
-                    name: RED._("editor-tab.appearance"),
-                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                    iconClass: "fa fa-object-group",
-                    onchange: function() {
-                        refreshLabelForm(this.content,editing_node);
-                    }
-                };
-                buildAppearanceForm(appearanceTab.content,editing_node);
-                editorTabs.addTab(appearanceTab);
-
-                buildEditForm(nodePropertiesTab.content,"dialog-form","subflow-template", undefined, editing_node);
-                trayBody.i18n();
-                getNodeCredentials("subflow", subflow.id, function(data) {
-                    if (data) {
-                        subflow.credentials = data;
-                        subflow.credentials._ = $.extend(true,{},data);
-                    }
+                prepareEditDialog(trayBody, nodeEditPanes, subflow, subflow._def, "node-input", null, function(_activeEditPanes) {
+                    activeEditPanes = _activeEditPanes;
                     $("#subflow-input-name").val(subflow.name);
                     RED.text.bidi.prepareInput($("#subflow-input-name"));
-
-                    finishedBuilding = true;
+                    trayBody.i18n();
+                    trayFooter.i18n();
                     buildingEditDialog = false;
-
                     done();
                 });
             },
@@ -2455,8 +1553,11 @@ var buildingEditDialog = false;
                 }
                 RED.sidebar.info.refresh(editing_node);
                 RED.workspaces.refresh();
-                subflowEditor.destroy();
-                subflowEditor = null;
+                activeEditPanes.forEach(function(pane) {
+                    if (pane.close) {
+                        pane.close.call(pane,editing_node);
+                    }
+                })
                 editStack.pop();
                 editing_node = null;
             },
@@ -2466,44 +1567,14 @@ var buildingEditDialog = false;
         RED.tray.show(trayOptions);
     }
 
-    function getNodeCredentials(type, id, done) {
-        var timeoutNotification;
-        var intialTimeout = setTimeout(function() {
-            timeoutNotification = RED.notify($('<p data-i18n="[prepend]editor.loadCredentials">  <img src="red/images/spin.svg"/></p>').i18n(),{fixed: true})
-        },800);
-
-        $.ajax({
-            url: getCredentialsURL(type,id),
-            dataType: 'json',
-            success: function(data) {
-                if (timeoutNotification) {
-                    timeoutNotification.close();
-                    timeoutNotification = null;
-                }
-                clearTimeout(intialTimeout);
-                done(data);
-            },
-            error: function(jqXHR,status,error) {
-                if (timeoutNotification) {
-                    timeoutNotification.close();
-                    timeoutNotification = null;
-                }
-                clearTimeout(intialTimeout);
-                RED.notify(RED._("editor.errors.credentialLoadFailed"),"error")
-                done(null);
-            },
-            timeout: 30000,
-        });
-    }
-
     function showEditGroupDialog(group) {
         if (buildingEditDialog) { return }
         buildingEditDialog = true;
         var editing_node = group;
         editStack.push(group);
         RED.view.state(RED.state.EDITING);
-        var nodeInfoEditor;
-        var finishedBuilding = false;
+        var activeEditPanes = [];
+
         var trayOptions = {
             title: getEditStackTitle(),
             buttons: [
@@ -2519,154 +1590,29 @@ var buildingEditDialog = false;
                     class: "primary",
                     text: RED._("common.label.done"),
                     click: function() {
-                        var changes = {};
-                        var changed = false;
+                        var editState = {
+                            changes: {},
+                            changed: false,
+                            outputMap: null
+                        }
                         var wasDirty = RED.nodes.dirty();
-                        var d;
-                        var outputMap;
 
-                        if (editing_node._def.oneditsave) {
-                            var oldValues = {};
-                            for (d in editing_node._def.defaults) {
-                                if (editing_node._def.defaults.hasOwnProperty(d)) {
-                                    if (typeof editing_node[d] === "string" || typeof editing_node[d] === "number") {
-                                        oldValues[d] = editing_node[d];
-                                    } else {
-                                        oldValues[d] = $.extend(true,{},{v:editing_node[d]}).v;
-                                    }
-                                }
-                            }
-                            try {
-                                var rc = editing_node._def.oneditsave.call(editing_node);
-                                if (rc === true) {
-                                    changed = true;
-                                }
-                            } catch(err) {
-                                console.warn("oneditsave",editing_node.id,editing_node.type,err.toString());
-                            }
+                        handleEditSave(editing_node,editState);
 
-                            for (d in editing_node._def.defaults) {
-                                if (editing_node._def.defaults.hasOwnProperty(d)) {
-                                    if (oldValues[d] === null || typeof oldValues[d] === "string" || typeof oldValues[d] === "number") {
-                                        if (oldValues[d] !== editing_node[d]) {
-                                            changes[d] = oldValues[d];
-                                            changed = true;
-                                        }
-                                    } else if (d !== "nodes") {
-                                        if (JSON.stringify(oldValues[d]) !== JSON.stringify(editing_node[d])) {
-                                            changes[d] = oldValues[d];
-                                            changed = true;
-                                        }
-                                    }
-                                }
+                        activeEditPanes.forEach(function(pane) {
+                            if (pane.apply) {
+                                pane.apply.call(pane, editing_node, editState);
                             }
-                        }
+                        })
 
-                        var newValue;
-                        if (editing_node._def.defaults) {
-                            for (d in editing_node._def.defaults) {
-                                if (editing_node._def.defaults.hasOwnProperty(d)) {
-                                    var input = $("#node-input-"+d);
-                                    if (input.attr('type') === "checkbox") {
-                                        newValue = input.prop('checked');
-                                    } else if (input.prop("nodeName") === "select" && input.attr("multiple") === "multiple") {
-                                        // An empty select-multiple box returns null.
-                                        // Need to treat that as an empty array.
-                                        newValue = input.val();
-                                        if (newValue == null) {
-                                            newValue = [];
-                                        }
-                                    } else if ("format" in editing_node._def.defaults[d] && editing_node._def.defaults[d].format !== "" && input[0].nodeName === "DIV") {
-                                        newValue = input.text();
-                                    } else {
-                                        newValue = input.val();
-                                    }
-                                    if (newValue != null) {
-                                        if (editing_node._def.defaults[d].type) {
-                                            if (newValue == "_ADD_") {
-                                                newValue = "";
-                                            }
-                                        }
-                                        if (editing_node[d] != newValue) {
-                                            if (editing_node._def.defaults[d].type) {
-                                                // Change to a related config node
-                                                var configNode = RED.nodes.node(editing_node[d]);
-                                                if (configNode) {
-                                                    var users = configNode.users;
-                                                    users.splice(users.indexOf(editing_node),1);
-                                                    RED.events.emit("nodes:change",configNode);
-                                                }
-                                                configNode = RED.nodes.node(newValue);
-                                                if (configNode) {
-                                                    configNode.users.push(editing_node);
-                                                    RED.events.emit("nodes:change",configNode);
-                                                }
-                                            }
-                                            changes[d] = editing_node[d];
-                                            editing_node[d] = newValue;
-                                            changed = true;
-                                        }
-                                    }
-                                }
-                            }
-                        }
-
-                        var oldInfo = editing_node.info;
-                        if (nodeInfoEditor) {
-                            var newInfo = nodeInfoEditor.getValue();
-                            if (!!oldInfo) {
-                                // Has existing info property
-                                if (newInfo.trim() === "") {
-                                    // New value is blank - remove the property
-                                    changed = true;
-                                    changes.info = oldInfo;
-                                    delete editing_node.info;
-                                } else if (newInfo !== oldInfo) {
-                                    // New value is different
-                                    changed = true;
-                                    changes.info = oldInfo;
-                                    editing_node.info = newInfo;
-                                }
-                            } else {
-                                // No existing info
-                                if (newInfo.trim() !== "") {
-                                    // New value is not blank
-                                    changed = true;
-                                    changes.info = undefined;
-                                    editing_node.info = newInfo;
-                                }
-                            }
-                        }
-                        {
-                            var old_env = editing_node.env;
-                            var new_env = RED.subflow.exportSubflowInstanceEnv(editing_node);
-                            if (new_env && new_env.length > 0) {
-                                new_env.forEach(function(prop) {
-                                    if (prop.type === "cred") {
-                                        editing_node.credentials = editing_node.credentials || {_:{}};
-                                        editing_node.credentials[prop.name] = prop.value;
-                                        editing_node.credentials['has_'+prop.name] = (prop.value !== "");
-                                        if (prop.value !== '__PWRD__') {
-                                            changed = true;
-                                        }
-                                        delete prop.value;
-                                    }
-                                });
-                            }
-                            if (!isSameObj(old_env, new_env)) {
-                                editing_node.env = new_env;
-                                changes.env = editing_node.env;
-                                changed = true;
-                            }
-                        }
-                        if (changed) {
+                        if (editState.changed) {
                             var wasChanged = editing_node.changed;
                             editing_node.changed = true;
                             RED.nodes.dirty(true);
                             var historyEvent = {
                                 t:'edit',
                                 node:editing_node,
-                                changes:changes,
+                                changes:editState.changes,
                                 dirty:wasDirty,
                                 changed:wasChanged
                             };
@@ -2679,27 +1625,16 @@ var buildingEditDialog = false;
                     }
                 }
             ],
-            resize: function(size) {
-                editTrayWidthCache['group'] = size.width;
-                $(".red-ui-tray-content").height(size.height - 50);
-                // var form = $(".red-ui-tray-content form").height(dimensions.height - 50 - 40);
-                // if (editing_node && editing_node._def.oneditresize) {
-                //     try {
-                //         editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()});
-                //     } catch(err) {
-                //         console.log("oneditresize",editing_node.id,editing_node.type,err.toString());
-                //     }
-                // }
-                var envContainer = $("#red-ui-editor-group-env-list");
-                if (envContainer.length) {
-                    var rows = $("#dialog-form>div:not(#group-env-tabs-content)");
-                    var height = size.height;
-                    for (var i=0; i<rows.size(); i++) {
-                        height -= $(rows[i]).outerHeight(true);
+            resize: function(dimensions) {
+                editTrayWidthCache['group'] = dimensions.width;
+                $(".red-ui-tray-content").height(dimensions.height - 50);
+                var form = $(".red-ui-tray-content form").height(dimensions.height - 50 - 40);
+                var size = {width:form.width(),height:form.height()};
+                activeEditPanes.forEach(function(pane) {
+                    if (pane.resize) {
+                        pane.resize.call(pane,editing_node, size);
                     }
-                    $("#red-ui-editor-group-env-list").editableList('height',height-30);
-                }
-
+                })
             },
             open: function(tray, done) {
                 var trayFooter = tray.find(".red-ui-tray-footer");
@@ -2709,63 +1644,13 @@ var buildingEditDialog = false;
                 var trayBody = tray.find('.red-ui-tray-body');
                 trayBody.parent().css('overflow','hidden');
 
-                var editorTabEl = $('<ul></ul>').appendTo(trayBody);
-                var editorContent = $('<div></div>').appendTo(trayBody);
-
-                var editorTabs = RED.tabs.create({
-                    element:editorTabEl,
-                    onchange:function(tab) {
-                        editorContent.children().hide();
-                        if (tab.onchange) {
-                            tab.onchange.call(tab);
-                        }
-                        tab.content.show();
-                        if (finishedBuilding) {
-                            RED.tray.resize();
-                        }
-                    },
-                    collapsible: true,
-                    menu: false
-                });
-
-                var nodePropertiesTab = {
-                    id: "editor-tab-properties",
-                    label: RED._("editor-tab.properties"),
-                    name: RED._("editor-tab.properties"),
-                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                    iconClass: "fa fa-cog"
-                };
-                buildEditForm(nodePropertiesTab.content,"dialog-form","group","node-red",group);
-
-                editorTabs.addTab(nodePropertiesTab);
-
-                var groupPropertiesTab = {
-                    id: "editor-group-envProperties",
-                    label: RED._("editor-tab.envProperties"),
-                    name: RED._("editor-tab.envProperties"),
-                    content: $('<div>', {
-                        id: "editor-group-envProperties-content",
-                        class: "red-ui-tray-content"
-                    }).appendTo(editorContent).hide(),
-                    iconClass: "fa fa-list",
-                };
-                editorTabs.addTab(groupPropertiesTab);
-
-                var descriptionTab = {
-                    id: "editor-tab-description",
-                    label: RED._("editor-tab.description"),
-                    name: RED._("editor-tab.description"),
-                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                    iconClass: "fa fa-file-text-o",
-                    onchange: function() {
-                        nodeInfoEditor.focus();
-                    }
-                };
-                editorTabs.addTab(descriptionTab);
-                nodeInfoEditor = buildDescriptionForm(descriptionTab.content,editing_node);
-                prepareEditDialog(group,group._def,"node-input", function() {
+                var nodeEditPanes = [
+                    'editor-tab-properties',
+                    'editor-tab-description'
+                ];
+                prepareEditDialog(trayBody, nodeEditPanes, group,group._def,"node-input", null, function(_activeEditPanes) {
+                    activeEditPanes = _activeEditPanes;
                     trayBody.i18n();
-                    finishedBuilding = true;
                     buildingEditDialog = false;
                     done();
                 });
@@ -2776,8 +1661,11 @@ var buildingEditDialog = false;
                     RED.view.state(RED.state.DEFAULT);
                 }
                 RED.sidebar.info.refresh(editing_node);
-                nodeInfoEditor.destroy();
-                nodeInfoEditor = null;
+                activeEditPanes.forEach(function(pane) {
+                    if (pane.close) {
+                        pane.close.call(pane,editing_node);
+                    }
+                })
                 editStack.pop();
                 editing_node = null;
             },
@@ -2807,8 +1695,6 @@ var buildingEditDialog = false;
         }
     }
 
-
-
     return {
         init: function() {
             if(window.ace) { window.ace.config.set('basePath', 'vendor/ace'); }
@@ -2843,9 +1729,9 @@ var buildingEditDialog = false;
         editBuffer: function(options) { showTypeEditor("_buffer", options) },
         buildEditForm: buildEditForm,
         validateNode: validateNode,
-        updateNodeProperties: updateNodeProperties, // TODO: only exposed for edit-undo
+        updateNodeProperties: updateNodeProperties,
 
-        showIconPicker:showIconPicker,
+        showIconPicker: function() { RED.editor.iconPicker.show.apply(null,arguments); },
 
         /**
          * Show a type editor.
@@ -2878,6 +1764,14 @@ var buildingEditDialog = false;
         },
         get customEditTypes() {
             return customEditTypes;
+        },
+
+        registerEditorPane: function(type, definition, filter) {
+            if (filter) {
+                filteredEditPanes.push({type, definition, filter})
+            } else {
+                editPanes[type] = definition;
+            }
         }
     }
 })();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/colorPicker.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/colorPicker.js
similarity index 99%
rename from packages/node_modules/@node-red/editor-client/src/js/ui/common/colorPicker.js
rename to packages/node_modules/@node-red/editor-client/src/js/ui/editors/colorPicker.js
index 3616bade4..4b2e19e5c 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/colorPicker.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/colorPicker.js
@@ -1,4 +1,4 @@
-RED.colorPicker = (function() {
+RED.editor.colorPicker = RED.colorPicker = (function() {
 
     function create(options) {
         var color = options.value;
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/iconPicker.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/iconPicker.js
new file mode 100644
index 000000000..d6879d4d8
--- /dev/null
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/iconPicker.js
@@ -0,0 +1,99 @@
+RED.editor.iconPicker = (function() {
+    function showIconPicker(container, backgroundColor, iconPath, faOnly, done) {
+        var picker = $('<div class="red-ui-icon-picker">');
+        var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(picker);
+        searchInput = $('<input type="text">').attr("placeholder",RED._("editor.searchIcons")).appendTo(searchDiv).searchBox({
+            delay: 50,
+            change: function() {
+                var searchTerm = $(this).val().trim();
+                if (searchTerm === "") {
+                    iconList.find(".red-ui-icon-list-module").show();
+                    iconList.find(".red-ui-icon-list-icon").show();
+                } else {
+                    iconList.find(".red-ui-icon-list-module").hide();
+                    iconList.find(".red-ui-icon-list-icon").each(function(i,n) {
+                        if ($(n).data('icon').indexOf(searchTerm) === -1) {
+                            $(n).hide();
+                        } else {
+                            $(n).show();
+                        }
+                    });
+                }
+            }
+        });
+
+        var row = $('<div>').appendTo(picker);
+        var iconList = $('<div class="red-ui-icon-list">').appendTo(picker);
+        var metaRow = $('<div class="red-ui-icon-meta"></div>').appendTo(picker);
+        var summary = $('<span>').appendTo(metaRow);
+        var resetButton = $('<button type="button" class="red-ui-button red-ui-button-small">'+RED._("editor.useDefault")+'</button>').appendTo(metaRow).on("click", function(e) {
+            e.preventDefault();
+            iconPanel.hide();
+            done(null);
+        });
+        if (!backgroundColor && faOnly) {
+            iconList.addClass("red-ui-icon-list-dark");
+        }
+        setTimeout(function() {
+            var iconSets = RED.nodes.getIconSets();
+            Object.keys(iconSets).forEach(function(moduleName) {
+                if (faOnly && (moduleName !== "font-awesome")) {
+                    return;
+                }
+                var icons = iconSets[moduleName];
+                if (icons.length > 0) {
+                    // selectIconModule.append($("<option></option>").val(moduleName).text(moduleName));
+                    var header = $('<div class="red-ui-icon-list-module"></div>').text(moduleName).appendTo(iconList);
+                    $('<i class="fa fa-cube"></i>').prependTo(header);
+                    icons.forEach(function(icon) {
+                        var iconDiv = $('<div>',{class:"red-ui-icon-list-icon"}).appendTo(iconList);
+                        var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconDiv);
+                        var icon_url = RED.settings.apiRootUrl+"icons/"+moduleName+"/"+icon;
+                        iconDiv.data('icon',icon_url);
+                        if (backgroundColor) {
+                            nodeDiv.css({
+                                'backgroundColor': backgroundColor
+                            });
+                            var borderColor = RED.utils.getDarkerColor(backgroundColor);
+                            if (borderColor !== backgroundColor) {
+                                nodeDiv.css('border-color',borderColor)
+                            }
+
+                        }
+                        var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
+                        RED.utils.createIconElement(icon_url, iconContainer, true);
+
+                        if (iconPath.module === moduleName && iconPath.file === icon) {
+                            iconDiv.addClass("selected");
+                        }
+                        iconDiv.on("mouseover", function() {
+                            summary.text(icon);
+                        })
+                        iconDiv.on("mouseout", function() {
+                            summary.html("&nbsp;");
+                        })
+                        iconDiv.on("click", function() {
+                            iconPanel.hide();
+                            done(moduleName+"/"+icon);
+                        })
+                    })
+                }
+            });
+            setTimeout(function() {
+                spinner.remove();
+            },50);
+        },300);
+        var spinner = RED.utils.addSpinnerOverlay(iconList,true);
+        var iconPanel = RED.popover.panel(picker);
+        iconPanel.show({
+            target: container
+        })
+
+
+        picker.slideDown(100);
+        searchInput.trigger("focus");
+    }
+    return {
+        show: showIconPicker
+    }
+})();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js
new file mode 100644
index 000000000..2d8c3ca00
--- /dev/null
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js
@@ -0,0 +1,515 @@
+;(function() {
+
+    RED.editor.registerEditorPane("editor-tab-appearance", function() {
+        return {
+            label: RED._("editor-tab.appearance"),
+            name: RED._("editor-tab.appearance"),
+            iconClass: "fa fa-object-group",
+            create: function(container, node) {
+                this.content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
+                buildAppearanceForm(this.content,node);
+
+                if (node.type === 'subflow') {
+                    this.defaultIcon = "node-red/subflow.svg";
+                } else {
+                    var iconPath = RED.utils.getDefaultNodeIcon(node._def,node);
+                    this.defaultIcon = iconPath.module+"/"+iconPath.file;
+                    if (node.icon && node.icon !== this.defaultIcon) {
+                        this.isDefaultIcon = false;
+                    } else {
+                        this.isDefaultIcon = true;
+                    }
+                }
+                return this.content;
+            },
+            resize: function(node, size) {
+
+            },
+            close: function(node) {
+
+            },
+            show: function(node) {
+                refreshLabelForm(this.content, node);
+            },
+            apply: function(node, editState) {
+                if (updateLabels(node, editState.changes, editState.outputMap)) {
+                    editState.changed = true;
+                }
+                if (!node._def.defaults || !node._def.defaults.hasOwnProperty("icon")) {
+                    var icon = $("#red-ui-editor-node-icon").val()||""
+                    if (!this.isDefaultIcon) {
+                        if (icon !== node.icon) {
+                            editState.changes.icon = node.icon;
+                            node.icon = icon;
+                            editState.changed = true;
+                        }
+                    } else {
+                        if (icon !== "" && icon !== this.defaultIcon) {
+                            editState.changes.icon = node.icon;
+                            node.icon = icon;
+                            editState.changed = true;
+                        } else {
+                            var iconPath = RED.utils.getDefaultNodeIcon(node._def, node);
+                            var currentDefaultIcon = iconPath.module+"/"+iconPath.file;
+                            if (this.defaultIcon !== currentDefaultIcon) {
+                                editState.changes.icon = node.icon;
+                                node.icon = currentDefaultIcon;
+                                editState.changed = true;
+                            }
+                        }
+                    }
+                }
+                if (node.type === "subflow") {
+                    var newCategory = $("#subflow-appearance-input-category").val().trim();
+                    if (newCategory === "_custom_") {
+                        newCategory = $("#subflow-appearance-input-custom-category").val().trim();
+                        if (newCategory === "") {
+                            newCategory = node.category;
+                        }
+                    }
+                    if (newCategory === 'subflows') {
+                        newCategory = '';
+                    }
+                    if (newCategory != node.category) {
+                        editState.changes['category'] = node.category;
+                        node.category = newCategory;
+                        editState.changed = true;
+                    }
+
+                    var oldColor = node.color;
+                    var newColor =  $("#red-ui-editor-node-color").val();
+                    if (oldColor !== newColor) {
+                        editState.changes.color = node.color;
+                        node.color = newColor;
+                        editState.changed = true;
+                        RED.utils.clearNodeColorCache();
+                        if (node.type === "subflow") {
+                            var nodeDefinition = RED.nodes.getType(
+                                "subflow:" + node.id
+                            );
+                            nodeDefinition["color"] = newColor;
+                        }
+                    }
+
+
+
+                }
+                if (!$("#node-input-show-label").prop('checked')) {
+                    // Not checked - hide label
+                    if (!/^link (in|out)$/.test(node.type)) {
+                        // Not a link node - default state is true
+                        if (node.l !== false) {
+                            editState.changes.l = node.l
+                            editState.changed = true;
+                        }
+                        node.l = false;
+                    } else {
+                        // A link node - default state is false
+                        if (node.hasOwnProperty('l') && node.l) {
+                            editState.changes.l = node.l
+                            editState.changed = true;
+                        }
+                        delete node.l;
+                    }
+                } else {
+                    // Checked - show label
+                    if (!/^link (in|out)$/.test(node.type)) {
+                        // Not a link node - default state is true
+                        if (node.hasOwnProperty('l') && !node.l) {
+                            editState.changes.l = node.l
+                            editState.changed = true;
+                        }
+                        delete node.l;
+                    } else {
+                        if (!node.l) {
+                            editState.changes.l = node.l
+                            editState.changed = true;
+                        }
+                        node.l = true;
+                    }
+                }
+            }
+        }
+    });
+
+    function buildAppearanceForm(container,node) {
+        var dialogForm = $('<form class="dialog-form form-horizontal" autocomplete="off"></form>').appendTo(container);
+
+        var i,row;
+
+        if (node.type === "subflow") {
+            var categoryRow = $("<div/>", {
+                class: "form-row"
+            }).appendTo(dialogForm);
+            $("<label/>", {
+                for: "subflow-appearance-input-category",
+                "data-i18n": "editor:subflow.category"
+            }).appendTo(categoryRow);
+            var categorySelector = $("<select/>", {
+                id: "subflow-appearance-input-category"
+            }).css({
+                width: "250px"
+            }).appendTo(categoryRow);
+            $("<input/>", {
+                type: "text",
+                id: "subflow-appearance-input-custom-category"
+            }).css({
+                display: "none",
+                "margin-left": "10px",
+                width: "calc(100% - 250px)"
+            }).appendTo(categoryRow);
+
+            var categories = RED.palette.getCategories();
+            categories.sort(function(A,B) {
+                return A.label.localeCompare(B.label);
+            })
+            categories.forEach(function(cat) {
+                categorySelector.append($("<option/>").val(cat.id).text(cat.label));
+            })
+            categorySelector.append($("<option/>").attr('disabled',true).text("---"));
+            categorySelector.append($("<option/>").val("_custom_").text(RED._("palette.addCategory")));
+
+            $("#subflow-appearance-input-category").on("change", function() {
+                var val = $(this).val();
+                if (val === "_custom_") {
+                    $("#subflow-appearance-input-category").width(120);
+                    $("#subflow-appearance-input-custom-category").show();
+                } else {
+                    $("#subflow-appearance-input-category").width(250);
+                    $("#subflow-appearance-input-custom-category").hide();
+                }
+            })
+
+            $("#subflow-appearance-input-category").val(node.category||"subflows");
+            var userCount = 0;
+            var subflowType = "subflow:"+node.id;
+
+            // RED.nodes.eachNode(function(n) {
+            //     if (n.type === subflowType) {
+            //         userCount++;
+            //     }
+            // });
+            $("#red-ui-editor-subflow-user-count")
+                .text(RED._("subflow.subflowInstances", {count:node.instances.length})).show();
+        }
+
+        $('<div class="form-row">'+
+            '<label for="node-input-show-label-btn" data-i18n="editor.label"></label>'+
+            '<span style="margin-right: 2px;"/>'+
+            '<input type="checkbox" id="node-input-show-label"/>'+
+        '</div>').appendTo(dialogForm);
+
+        $("#node-input-show-label").toggleButton({
+            enabledLabel: RED._("editor.show"),
+            disabledLabel: RED._("editor.hide")
+        })
+
+        if (!node.hasOwnProperty("l")) {
+            // Show label if type not link
+            node.l = !/^link (in|out)$/.test(node._def.type);
+        }
+        $("#node-input-show-label").prop("checked",node.l).trigger("change");
+
+        if (node.type === "subflow") {
+            // subflow template can select its color
+            var color = node.color ? node.color : "#DDAA99";
+            var colorRow = $("<div/>", {
+                class: "form-row"
+            }).appendTo(dialogForm);
+            $("<label/>").text(RED._("editor.color")).appendTo(colorRow);
+
+            var recommendedColors = [
+                "#DDAA99",
+                "#3FADB5", "#87A980", "#A6BBCF",
+                "#AAAA66", "#C0C0C0", "#C0DEED",
+                "#C7E9C0", "#D7D7A0", "#D8BFD8",
+                "#DAC4B4", "#DEB887", "#DEBD5C",
+                "#E2D96E", "#E6E0F8", "#E7E7AE",
+                "#E9967A", "#F3B567", "#FDD0A2",
+                "#FDF0C2", "#FFAAAA", "#FFCC66",
+                "#FFF0F0", "#FFFFFF"
+            ]
+
+            RED.editor.colorPicker.create({
+                id: "red-ui-editor-node-color",
+                value: color,
+                palette: recommendedColors,
+                sortPalette: function (a, b) {return a.l - b.l;}
+            }).appendTo(colorRow);
+
+            $("#red-ui-editor-node-color").on('change', function(ev) {
+                // Horribly out of scope...
+                var colour = $(this).val();
+                nodeDiv.css('backgroundColor',colour);
+                var borderColor = RED.utils.getDarkerColor(colour);
+                if (borderColor !== colour) {
+                    nodeDiv.css('border-color',borderColor)
+                }
+            })
+        }
+
+
+        // If a node has icon property in defaults, the icon of the node cannot be modified. (e.g, ui_button node in dashboard)
+        if ((!node._def.defaults || !node._def.defaults.hasOwnProperty("icon"))) {
+            var iconRow = $('<div class="form-row"></div>').appendTo(dialogForm);
+            $('<label data-i18n="editor.settingIcon">').appendTo(iconRow);
+
+            var iconButton = $('<button type="button" class="red-ui-button red-ui-editor-node-appearance-button">').appendTo(iconRow);
+            $('<i class="fa fa-caret-down"></i>').appendTo(iconButton);
+            var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconButton);
+            var colour = RED.utils.getNodeColor(node.type, node._def);
+            var icon_url = RED.utils.getNodeIcon(node._def,node);
+            nodeDiv.css('backgroundColor',colour);
+            var borderColor = RED.utils.getDarkerColor(colour);
+            if (borderColor !== colour) {
+                nodeDiv.css('border-color',borderColor)
+            }
+
+            var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
+            RED.utils.createIconElement(icon_url, iconContainer, true);
+
+            iconButton.on("click", function(e) {
+                e.preventDefault();
+                var iconPath;
+                var icon = $("#red-ui-editor-node-icon").val()||"";
+                if (icon) {
+                    iconPath = RED.utils.separateIconPath(icon);
+                } else {
+                    iconPath = RED.utils.getDefaultNodeIcon(node._def, node);
+                }
+                var backgroundColor = RED.utils.getNodeColor(node.type, node._def);
+                if (node.type === "subflow") {
+                    backgroundColor = $("#red-ui-editor-node-color").val();
+                }
+                RED.editor.iconPicker.show(iconButton,backgroundColor,iconPath,false,function(newIcon) {
+                    $("#red-ui-editor-node-icon").val(newIcon||"");
+                    var icon_url = RED.utils.getNodeIcon(node._def,{type:node.type,icon:newIcon});
+                    RED.utils.createIconElement(icon_url, iconContainer, true);
+                });
+            });
+
+            RED.popover.tooltip(iconButton, function() {
+                return $("#red-ui-editor-node-icon").val() || RED._("editor.default");
+            })
+            $('<input type="hidden" id="red-ui-editor-node-icon">').val(node.icon).appendTo(iconRow);
+        }
+
+
+        $('<div class="form-row"><span data-i18n="editor.portLabels"></span></div>').appendTo(dialogForm);
+
+        var inputCount = node.inputs || node._def.inputs || 0;
+        var outputCount = node.outputs || node._def.outputs || 0;
+        if (node.type === 'subflow') {
+            inputCount = node.in.length;
+            outputCount = node.out.length;
+        }
+
+        var inputLabels = node.inputLabels || [];
+        var outputLabels = node.outputLabels || [];
+
+        var inputPlaceholder = node._def.inputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
+        var outputPlaceholder = node._def.outputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
+
+        $('<div class="form-row"><span style="margin-left: 50px;" data-i18n="editor.labelInputs"></span><div id="red-ui-editor-node-label-form-inputs"></div></div>').appendTo(dialogForm);
+        var inputsDiv = $("#red-ui-editor-node-label-form-inputs");
+        if (inputCount > 0) {
+            for (i=0;i<inputCount;i++) {
+                buildLabelRow("input",i,inputLabels[i],inputPlaceholder).appendTo(inputsDiv);
+            }
+        } else {
+            buildLabelRow().appendTo(inputsDiv);
+        }
+        $('<div class="form-row"><span style="margin-left: 50px;" data-i18n="editor.labelOutputs"></span><div id="red-ui-editor-node-label-form-outputs"></div></div>').appendTo(dialogForm);
+        var outputsDiv = $("#red-ui-editor-node-label-form-outputs");
+        if (outputCount > 0) {
+            for (i=0;i<outputCount;i++) {
+                buildLabelRow("output",i,outputLabels[i],outputPlaceholder).appendTo(outputsDiv);
+            }
+        } else {
+            buildLabelRow().appendTo(outputsDiv);
+        }
+    }
+
+    function refreshLabelForm(container,node) {
+
+        var inputPlaceholder = node._def.inputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
+        var outputPlaceholder = node._def.outputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
+
+        var inputsDiv = $("#red-ui-editor-node-label-form-inputs");
+        var outputsDiv = $("#red-ui-editor-node-label-form-outputs");
+
+        var inputCount;
+        var formInputs = $("#node-input-inputs").val();
+        if (formInputs === undefined) {
+            if (node.type === 'subflow') {
+                inputCount = node.in.length;
+            } else {
+                inputCount = node.inputs || node._def.inputs || 0;
+            }
+        } else {
+            inputCount = Math.min(1,Math.max(0,parseInt(formInputs)));
+            if (isNaN(inputCount)) {
+                inputCount = 0;
+            }
+        }
+
+        var children = inputsDiv.children();
+        var childCount = children.length;
+        if (childCount === 1 && $(children[0]).hasClass('red-ui-editor-node-label-form-none')) {
+            childCount--;
+        }
+
+        if (childCount < inputCount) {
+            if (childCount === 0) {
+                // remove the 'none' placeholder
+                $(children[0]).remove();
+            }
+            for (i = childCount;i<inputCount;i++) {
+                buildLabelRow("input",i,"",inputPlaceholder).appendTo(inputsDiv);
+            }
+        } else if (childCount > inputCount) {
+            for (i=inputCount;i<childCount;i++) {
+                $(children[i]).remove();
+            }
+            if (inputCount === 0) {
+                buildLabelRow().appendTo(inputsDiv);
+            }
+        }
+
+        var outputCount;
+        var i;
+        var formOutputs = $("#node-input-outputs").val();
+
+        if (formOutputs === undefined) {
+            if (node.type === 'subflow') {
+                outputCount = node.out.length;
+            } else {
+                inputCount = node.outputs || node._def.outputs || 0;
+            }
+        } else if (isNaN(formOutputs)) {
+            var outputMap = JSON.parse(formOutputs);
+            var keys = Object.keys(outputMap);
+            children = outputsDiv.children();
+            childCount = children.length;
+            if (childCount === 1 && $(children[0]).hasClass('red-ui-editor-node-label-form-none')) {
+                childCount--;
+            }
+
+            outputCount = 0;
+            var rows = [];
+            keys.forEach(function(p) {
+                var row = $("#red-ui-editor-node-label-form-output-"+p).parent();
+                if (row.length === 0 && outputMap[p] !== -1) {
+                    if (childCount === 0) {
+                        $(children[0]).remove();
+                        childCount = -1;
+                    }
+                    row = buildLabelRow("output",p,"",outputPlaceholder);
+                } else {
+                    row.detach();
+                }
+                if (outputMap[p] !== -1) {
+                    outputCount++;
+                    rows.push({i:parseInt(outputMap[p]),r:row});
+                }
+            });
+            rows.sort(function(A,B) {
+                return A.i-B.i;
+            })
+            rows.forEach(function(r,i) {
+                r.r.find("label").text((i+1)+".");
+                r.r.appendTo(outputsDiv);
+            })
+            if (rows.length === 0) {
+                buildLabelRow("output",i,"").appendTo(outputsDiv);
+            } else {
+
+            }
+        } else {
+            outputCount = Math.max(0,parseInt(formOutputs));
+        }
+        children = outputsDiv.children();
+        childCount = children.length;
+        if (childCount === 1 && $(children[0]).hasClass('red-ui-editor-node-label-form-none')) {
+            childCount--;
+        }
+        if (childCount < outputCount) {
+            if (childCount === 0) {
+                // remove the 'none' placeholder
+                $(children[0]).remove();
+            }
+            for (i = childCount;i<outputCount;i++) {
+                buildLabelRow("output",i,"").appendTo(outputsDiv);
+            }
+        } else if (childCount > outputCount) {
+            for (i=outputCount;i<childCount;i++) {
+                $(children[i]).remove();
+            }
+            if (outputCount === 0) {
+                buildLabelRow().appendTo(outputsDiv);
+            }
+        }
+    }
+
+    function buildLabelRow(type, index, value, placeHolder) {
+        var result = $('<div>',{class:"red-ui-editor-node-label-form-row"});
+        if (type === undefined) {
+            $('<span>').text(RED._("editor.noDefaultLabel")).appendTo(result);
+            result.addClass("red-ui-editor-node-label-form-none");
+        } else {
+            result.addClass("");
+            var id = "red-ui-editor-node-label-form-"+type+"-"+index;
+            $('<label>',{for:id}).text((index+1)+".").appendTo(result);
+            var input = $('<input>',{type:"text",id:id, placeholder: placeHolder}).val(value).appendTo(result);
+            var clear = $('<button type="button" class="red-ui-button red-ui-button-small"><i class="fa fa-times"></i></button>').appendTo(result);
+            clear.on("click", function(evt) {
+                evt.preventDefault();
+                input.val("");
+            })
+        }
+        return result;
+    }
+
+    function updateLabels(node, changes, outputMap) {
+        var inputLabels = $("#red-ui-editor-node-label-form-inputs").children().find("input");
+        var outputLabels = $("#red-ui-editor-node-label-form-outputs").children().find("input");
+
+        var hasNonBlankLabel = false;
+        var changed = false;
+        var newValue = inputLabels.map(function() {
+            var v = $(this).val();
+            hasNonBlankLabel = hasNonBlankLabel || v!== "";
+            return v;
+        }).toArray().slice(0,node.inputs);
+        if ((node.inputLabels === undefined && hasNonBlankLabel) ||
+            (node.inputLabels !== undefined && JSON.stringify(newValue) !== JSON.stringify(node.inputLabels))) {
+            changes.inputLabels = node.inputLabels;
+            node.inputLabels = newValue;
+            changed = true;
+        }
+        hasNonBlankLabel = false;
+        newValue = new Array(node.outputs);
+        outputLabels.each(function() {
+            var index = $(this).attr('id').substring("red-ui-editor-node-label-form-output-".length);
+            if (outputMap && outputMap.hasOwnProperty(index)) {
+                index = parseInt(outputMap[index]);
+                if (index === -1) {
+                    return;
+                }
+            }
+            var v = $(this).val();
+            hasNonBlankLabel = hasNonBlankLabel || v!== "";
+            newValue[index] = v;
+        });
+
+        if ((node.outputLabels === undefined && hasNonBlankLabel) ||
+            (node.outputLabels !== undefined && JSON.stringify(newValue) !== JSON.stringify(node.outputLabels))) {
+            changes.outputLabels = node.outputLabels;
+            node.outputLabels = newValue;
+            changed = true;
+        }
+        return changed;
+    }
+
+
+})();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/description.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/description.js
new file mode 100644
index 000000000..e7402e5ab
--- /dev/null
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/description.js
@@ -0,0 +1,71 @@
+;(function() {
+
+    RED.editor.registerEditorPane("editor-tab-description", function() {
+        return {
+            label: RED._("editor-tab.description"),
+            name: RED._("editor-tab.description"),
+            iconClass: "fa fa-file-text-o",
+
+            create: function(container, node) {
+                var content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
+                this.editor = buildDescriptionForm(content,node);
+                return content;
+            },
+            resize: function(node, size) {
+                this.editor.resize();
+            },
+            close: function(node) {
+                this.editor.destroy();
+                this.editor = null;
+            },
+            show: function() {
+                this.editor.focus();
+            },
+            apply: function(node, editState) {
+                var oldInfo = node.info;
+                var newInfo = this.editor.getValue();
+                if (!!oldInfo) {
+                    // Has existing info property
+                    if (newInfo.trim() === "") {
+                        // New value is blank - remove the property
+                        editState.changed = true;
+                        editState.changes.info = oldInfo;
+                        delete node.info;
+                    } else if (newInfo !== oldInfo) {
+                        // New value is different
+                        editState.changed = true;
+                        editState.changes.info = oldInfo;
+                        node.info = newInfo;
+                    }
+                } else {
+                    // No existing info
+                    if (newInfo.trim() !== "") {
+                        // New value is not blank
+                        editState.changed = true;
+                        editState.changes.info = undefined;
+                        node.info = newInfo;
+                    }
+                }
+            }
+        }
+    });
+
+    function buildDescriptionForm(container,node) {
+        var dialogForm = $('<form class="dialog-form form-horizontal" autocomplete="off"></form>').appendTo(container);
+        var toolbarRow = $('<div></div>').appendTo(dialogForm);
+        var row = $('<div class="form-row node-text-editor-row" style="position:relative; padding-top: 4px; height: 100%"></div>').appendTo(dialogForm);
+        var editorId = "node-info-input-info-editor-"+Math.floor(1000*Math.random());
+        $('<div style="height: 100%" class="node-text-editor" id="'+editorId+'" ></div>').appendTo(row);
+        var nodeInfoEditor = RED.editor.createEditor({
+            id: editorId,
+            mode: 'ace/mode/markdown',
+            value: ""
+        });
+        if (node.info) {
+            nodeInfoEditor.getSession().setValue(node.info, -1);
+        }
+        node.infoEditor = nodeInfoEditor;
+        return nodeInfoEditor;
+    }
+
+})();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js
new file mode 100644
index 000000000..4c568649d
--- /dev/null
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js
@@ -0,0 +1,190 @@
+;(function() {
+
+    RED.editor.registerEditorPane("editor-tab-properties", function() {
+        return {
+            label: RED._("editor-tab.properties"),
+            name: RED._("editor-tab.properties"),
+            iconClass: "fa fa-cog",
+            create: function(container, node) {
+                var content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
+
+                var nodeType = node.type;
+                if (node.type === "subflow") {
+                    nodeType = "subflow-template";
+                } else if (node.type.substring(0,8) == "subflow:") {
+                    nodeType = "subflow";
+                }
+
+                var i18nNamespace;
+                if (node._def.set.module === "node-red") {
+                    i18nNamespace = "node-red";
+                } else {
+                    i18nNamespace = node._def.set.id;
+                }
+
+                var formStyle = "dialog-form";
+                this.inputClass = "node-input";
+                if (node._def.category === "config" && nodeType !== "group") {
+                    this.inputClass = "node-config-input";
+                    formStyle = "node-config-dialog-edit-form";
+                }
+                RED.editor.buildEditForm(content,formStyle,nodeType,i18nNamespace,node);
+
+                if (nodeType === "subflow-template") {
+                    // This is the 'edit properties' dialog for a subflow template
+                    // TODO: this needs to happen later in the dialog open sequence
+                    //       so that credentials can be loaded prior to building the form
+                    RED.subflow.buildEditForm("subflow-template", node);
+                }
+
+                return content;
+            },
+            resize: function(node, size) {
+                if (node && node._def.oneditresize) {
+                    try {
+                        node._def.oneditresize.call(node,size);
+                    } catch(err) {
+                        console.log("oneditresize",node.id,node.type,err.toString());
+                    }
+                }
+            },
+            close: function(node) {
+
+            },
+            apply: function(editing_node, editState) {
+                var newValue;
+                if (editing_node._def.defaults) {
+                    for (d in editing_node._def.defaults) {
+                        if (editing_node._def.defaults.hasOwnProperty(d)) {
+                            var input = $("#"+this.inputClass+"-"+d);
+                            if (input.attr('type') === "checkbox") {
+                                newValue = input.prop('checked');
+                            } else if (input.prop("nodeName") === "select" && input.attr("multiple") === "multiple") {
+                                // An empty select-multiple box returns null.
+                                // Need to treat that as an empty array.
+                                newValue = input.val();
+                                if (newValue == null) {
+                                    newValue = [];
+                                }
+                            } else if ("format" in editing_node._def.defaults[d] && editing_node._def.defaults[d].format !== "" && input[0].nodeName === "DIV") {
+                                newValue = input.text();
+                            } else {
+                                newValue = input.val();
+                            }
+                            if (newValue != null) {
+                                if (d === "outputs") {
+                                    if  (newValue.trim() === "") {
+                                        continue;
+                                    }
+                                    if (isNaN(newValue)) {
+                                        editState.outputMap = JSON.parse(newValue);
+                                        var outputCount = 0;
+                                        var outputsChanged = false;
+                                        var keys = Object.keys(editState.outputMap);
+                                        keys.forEach(function(p) {
+                                            if (isNaN(p)) {
+                                                // New output;
+                                                outputCount ++;
+                                                delete editState.outputMap[p];
+                                            } else {
+                                                editState.outputMap[p] = editState.outputMap[p]+"";
+                                                if (editState.outputMap[p] !== "-1") {
+                                                    outputCount++;
+                                                    if (editState.outputMap[p] !== p) {
+                                                        // Output moved
+                                                        outputsChanged = true;
+                                                    } else {
+                                                        delete editState.outputMap[p];
+                                                    }
+                                                } else {
+                                                    // Output removed
+                                                    outputsChanged = true;
+                                                }
+                                            }
+                                        });
+
+                                        newValue = outputCount;
+                                        if (outputsChanged) {
+                                            editState.changed = true;
+                                        }
+                                    } else {
+                                        newValue = parseInt(newValue);
+                                    }
+                                }
+                                if (editing_node._def.defaults[d].type) {
+                                    if (newValue == "_ADD_") {
+                                        newValue = "";
+                                    }
+                                }
+                                if (editing_node[d] != newValue) {
+                                    if (editing_node._def.defaults[d].type) {
+                                        // Change to a related config node
+                                        var configNode = RED.nodes.node(editing_node[d]);
+                                        if (configNode) {
+                                            var users = configNode.users;
+                                            users.splice(users.indexOf(editing_node),1);
+                                            RED.events.emit("nodes:change",configNode);
+                                        }
+                                        configNode = RED.nodes.node(newValue);
+                                        if (configNode) {
+                                            configNode.users.push(editing_node);
+                                            RED.events.emit("nodes:change",configNode);
+                                        }
+                                    }
+                                    editState.changes[d] = editing_node[d];
+                                    editing_node[d] = newValue;
+                                    editState.changed = true;
+                                }
+                            }
+                        }
+                    }
+                }
+                if (editing_node._def.credentials) {
+                    var credDefinition = editing_node._def.credentials;
+                    var credsChanged = updateNodeCredentials(editing_node,credDefinition,this.inputClass);
+                    editState.changed = editState.changed || credsChanged;
+                }
+            }
+        }
+    });
+
+    /**
+     * Update the node credentials from the edit form
+     * @param node - the node containing the credentials
+     * @param credDefinition - definition of the credentials
+     * @param prefix - prefix of the input fields
+     * @return {boolean} whether anything has changed
+     */
+    function updateNodeCredentials(node, credDefinition, prefix) {
+        var changed = false;
+        if (!node.credentials) {
+            node.credentials = {_:{}};
+        } else if (!node.credentials._) {
+            node.credentials._ = {};
+        }
+
+        for (var cred in credDefinition) {
+            if (credDefinition.hasOwnProperty(cred)) {
+                var input = $("#" + prefix + '-' + cred);
+                if (input.length > 0) {
+                    var value = input.val();
+                    if (credDefinition[cred].type == 'password') {
+                        node.credentials['has_' + cred] = (value !== "");
+                        if (value == '__PWRD__') {
+                            continue;
+                        }
+                        changed = true;
+
+                    }
+                    node.credentials[cred] = value;
+                    if (value != node.credentials._[cred]) {
+                        changed = true;
+                    }
+                }
+            }
+        }
+        return changed;
+    }
+
+
+})();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowModule.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowModule.js
new file mode 100644
index 000000000..4636862f6
--- /dev/null
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowModule.js
@@ -0,0 +1,181 @@
+(function() {
+    var _subflowModulePaneTemplate = '<form class="dialog-form form-horizontal" autocomplete="off">'+
+        '<div class="form-row">'+
+            '<label for="subflow-input-module-module" data-i18n="[append]editor:subflow.module"><i class="fa fa-cube"></i> </label>'+
+            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-module" data-i18n="[placeholder]common.label.name">'+
+        '</div>'+
+        '<div class="form-row">'+
+            '<label for="subflow-input-module-type" data-i18n="[append]editor:subflow.type"> </label>'+
+            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-type">'+
+        '</div>'+
+        '<div class="form-row">'+
+            '<label for="subflow-input-module-version" data-i18n="[append]editor:subflow.version"></label>'+
+            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-version" data-i18n="[placeholder]editor:subflow.versionPlaceholder">'+
+        '</div>'+
+        '<div class="form-row">'+
+            '<label for="subflow-input-module-desc" data-i18n="[append]editor:subflow.desc"></label>'+
+            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-desc">'+
+        '</div>'+
+        '<div class="form-row">'+
+            '<label for="subflow-input-module-license" data-i18n="[append]editor:subflow.license"></label>'+
+            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-license">'+
+        '</div>'+
+        '<div class="form-row">'+
+            '<label for="subflow-input-module-author" data-i18n="[append]editor:subflow.author"></label>'+
+            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-author" data-i18n="[placeholder]editor:subflow.authorPlaceholder">'+
+        '</div>'+
+        '<div class="form-row">'+
+            '<label for="subflow-input-module-keywords" data-i18n="[append]editor:subflow.keys"></label>'+
+            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-keywords" data-i18n="[placeholder]editor:subflow.keysPlaceholder">'+
+        '</div>'+
+    '</form>';
+
+    RED.editor.registerEditorPane("editor-tab-subflow-module", function() {
+        return {
+            label: RED._("editor-tab.module"),
+            name: RED._("editor-tab.module"),
+            iconClass: "fa fa-cube",
+            create: function(container, node) {
+                var content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
+                buildModuleForm(content, node);
+                return content;
+            },
+            resize: function(node, size) {
+            },
+            close: function(node) {
+
+            },
+            apply: function(node, editState) {
+                var newMeta = exportSubflowModuleProperties(node);
+                if (!isSameObj(node.meta,newMeta)) {
+                    editState.changes.meta = node.meta;
+                    node.meta = newMeta;
+                    editState.changed = true;
+                }
+            }
+        }
+    });
+
+    function isSameObj(env0, env1) {
+        return (JSON.stringify(env0) === JSON.stringify(env1));
+    }
+
+    function setupInputValidation(input,validator) {
+        var errorTip;
+        var validateTimeout;
+
+        var validateFunction = function() {
+            if (validateTimeout) {
+                return;
+            }
+            validateTimeout = setTimeout(function() {
+                var error = validator(input.val());
+                // if (!error && errorTip) {
+                //     errorTip.close();
+                //     errorTip = null;
+                // } else if (error && !errorTip) {
+                //     errorTip = RED.popover.create({
+                //         tooltip: true,
+                //         target:input,
+                //         size: "small",
+                //         direction: "bottom",
+                //         content: error,
+                //     }).open();
+                // }
+                input.toggleClass("input-error",!!error);
+                validateTimeout = null;
+            })
+        }
+        input.on("change keyup paste", validateFunction);
+    }
+
+    function buildModuleForm(container, node) {
+        $(_subflowModulePaneTemplate).appendTo(container);
+        var moduleProps = node.meta || {};
+        [
+            'module',
+            'type',
+            'version',
+            'author',
+            'desc',
+            'keywords',
+            'license'
+        ].forEach(function(property) {
+            $("#subflow-input-module-"+property).val(moduleProps[property]||"")
+        })
+        $("#subflow-input-module-type").attr("placeholder",node.id);
+
+        setupInputValidation($("#subflow-input-module-module"), function(newValue) {
+            newValue = newValue.trim();
+            var isValid = newValue.length < 215;
+            isValid = isValid && !/^[._]/.test(newValue);
+            isValid = isValid && !/[A-Z]/.test(newValue);
+            if (newValue !== encodeURIComponent(newValue)) {
+                var m = /^@([^\/]+)\/([^\/]+)$/.exec(newValue);
+                if (m) {
+                    isValid = isValid && (m[1] === encodeURIComponent(m[1]) && m[2] === encodeURIComponent(m[2]))
+                } else {
+                    isValid = false;
+                }
+            }
+            return isValid?"":"Invalid module name"
+        })
+        setupInputValidation($("#subflow-input-module-version"), function(newValue) {
+            newValue = newValue.trim();
+            var isValid = newValue === "" ||
+                          /^(\d|[1-9]\d*)\.(\d|[1-9]\d*)\.(\d|[1-9]\d*)(-(0|[1-9A-Za-z-][0-9A-Za-z-]*|[0-9]*[A-Za-z-][0-9A-Za-z-]*)(\.(0|[1-9A-Za-z-][0-9A-Za-z-]*|[0-9]*[A-Za-z-][0-9A-Za-z-]*))*)?(\+[0-9A-Za-z-]+(\.[0-9A-Za-z-]+)*)?$/.test(newValue);
+            return isValid?"":"Invalid version number"
+        })
+
+        var licenses = ["none", "Apache-2.0", "BSD-3-Clause", "BSD-2-Clause", "GPL-2.0", "GPL-3.0", "MIT", "MPL-2.0", "CDDL-1.0", "EPL-2.0"];
+        var typedLicenses = {
+            types: licenses.map(function(l) {
+                return {
+                    value: l,
+                    label: l === "none" ? RED._("editor:subflow.licenseNone") : l,
+                    hasValue: false
+                };
+            })
+        }
+        typedLicenses.types.push({
+            value:"_custom_", label:RED._("editor:subflow.licenseOther"), icon:"red/images/typedInput/az.svg"
+        })
+        if (!moduleProps.license) {
+            typedLicenses.default = "none";
+        } else if (licenses.indexOf(moduleProps.license) > -1) {
+            typedLicenses.default = moduleProps.license;
+        } else {
+            typedLicenses.default = "_custom_";
+        }
+        $("#subflow-input-module-license").typedInput(typedLicenses)
+    }
+    function exportSubflowModuleProperties(node) {
+        var value;
+        var moduleProps = {};
+        [
+            'module',
+            'type',
+            'version',
+            'author',
+            'desc',
+            'keywords'
+        ].forEach(function(property) {
+            value = $("#subflow-input-module-"+property).val().trim();
+            if (value) {
+                moduleProps[property] = value;
+            }
+        })
+        var selectedLicenseType = $("#subflow-input-module-license").typedInput("type");
+
+        if (selectedLicenseType === '_custom_') {
+            value = $("#subflow-input-module-license").val();
+            if (value) {
+                moduleProps.license = value;
+            }
+        } else if (selectedLicenseType !== "none") {
+            moduleProps.license = selectedLicenseType;
+        }
+        return moduleProps;
+    }
+
+})();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js
new file mode 100644
index 000000000..f9071fac8
--- /dev/null
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js
@@ -0,0 +1,68 @@
+;(function() {
+
+    RED.editor.registerEditorPane("editor-tab-envProperties", function() {
+        return {
+            label: RED._("editor-tab.envProperties"),
+            name: RED._("editor-tab.envProperties"),
+            iconClass: "fa fa-list",
+            create: function(container, node) {
+                var content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
+                var form = $('<form class="dialog-form form-horizontal"></form>').appendTo(content);
+                var listContainer = $('<div class="form-row node-input-env-container-row"></div>').appendTo(form);
+                this.list = $('<ol></ol>').appendTo(listContainer);
+                RED.subflow.buildPropertiesList(this.list, node);
+                return content;
+            },
+            resize: function(node, size) {
+                this.list.editableList('height',size.height);
+            },
+            close: function(node) {
+
+            },
+            apply: function(node, editState) {
+                var old_env = node.env;
+                var new_env = RED.subflow.exportSubflowInstanceEnv(node);
+
+                // Get the values from the Properties table tab
+                var items = this.list.editableList('items');
+                items.each(function (i,el) {
+                    var data = el.data('data');
+                    var item;
+                    if (data.nameField && data.valueField) {
+                        item = {
+                            name: data.nameField.val(),
+                            value: data.valueField.typedInput("value"),
+                            type: data.valueField.typedInput("type")
+                        }
+                        if (item.name.trim() !== "") {
+                            new_env.push(item);
+                        }
+                    }
+                });
+
+
+                if (new_env && new_env.length > 0) {
+                    new_env.forEach(function(prop) {
+                        if (prop.type === "cred") {
+                            node.credentials = node.credentials || {_:{}};
+                            node.credentials[prop.name] = prop.value;
+                            node.credentials['has_'+prop.name] = (prop.value !== "");
+                            if (prop.value !== '__PWRD__') {
+                                editState.changed = true;
+                            }
+                            delete prop.value;
+                        }
+                    });
+                }
+                if (!isSameObj(old_env, new_env)) {
+                    node.env = new_env;
+                    editState.changes.env = node.env;
+                    editState.changed = true;
+                }
+            }
+        }
+    });
+    function isSameObj(env0, env1) {
+        return (JSON.stringify(env0) === JSON.stringify(env1));
+    }
+})();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/group.js b/packages/node_modules/@node-red/editor-client/src/js/ui/group.js
index 7a56de563..114bb7207 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/group.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/group.js
@@ -100,7 +100,7 @@ RED.group = (function() {
             RED.subflow.buildPropertiesForm(this);
 
             var style = this.style || {};
-            RED.colorPicker.create({
+            RED.editor.colorPicker.create({
                 id:"node-input-style-stroke",
                 value: style.stroke || defaultGroupStyle.stroke || "#a4a4a4",
                 palette: colorPalette,
@@ -111,7 +111,7 @@ RED.group = (function() {
                 none: true,
                 opacity: style.hasOwnProperty('stroke-opacity')?style['stroke-opacity']:(defaultGroupStyle.hasOwnProperty('stroke-opacity')?defaultGroupStyle['stroke-opacity']:1.0)
             }).appendTo("#node-input-row-style-stroke");
-            RED.colorPicker.create({
+            RED.editor.colorPicker.create({
                 id:"node-input-style-fill",
                 value: style.fill || defaultGroupStyle.fill ||"none",
                 palette: colorPalette,
@@ -128,7 +128,7 @@ RED.group = (function() {
                 value:style["label-position"] || "nw"
             }).appendTo("#node-input-row-style-label-position");
 
-            RED.colorPicker.create({
+            RED.editor.colorPicker.create({
                 id:"node-input-style-color",
                 value: style.color || defaultGroupStyle.color ||"#a4a4a4",
                 palette: colorPalette,
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/library.js b/packages/node_modules/@node-red/editor-client/src/js/ui/library.js
index 8e77ae0f5..ee176dee2 100755
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/library.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/library.js
@@ -536,7 +536,7 @@ RED.library = (function() {
     //             evt.preventDefault();
     //             var icon = libraryFields['icon'].input.val() || "";
     //             var iconPath = (icon ? RED.utils.separateIconPath(icon) : {});
-    //             RED.editor.showIconPicker(iconButton, null, iconPath, true, function (newIcon) {
+    //             RED.editor.iconPicker.show(iconButton, null, iconPath, true, function (newIcon) {
     //                 iconButton.empty();
     //                 var path = newIcon || "";
     //                 var newPath = RED.utils.separateIconPath(path);
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js b/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js
index e2a982462..de40ea939 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js
@@ -37,7 +37,7 @@ RED.subflow = (function() {
         '<div id="subflow-env-tabs-content">'+
             '<div id="subflow-env-tab-edit">'+
                 '<div class="form-row node-input-env-container-row" id="subflow-input-edit-ui">'+
-                    '<ol class="red-ui-editor-subflow-env-list" id="node-input-env-container"></ol>'+
+                    '<ol id="node-input-env-container"></ol>'+
                     '<div class="node-input-env-locales-row"><i class="fa fa-language"></i> <select id="subflow-input-env-locale"></select></div>'+
                 '</div>'+
             '</div>'+
@@ -47,37 +47,6 @@ RED.subflow = (function() {
         '</div>'+
         '</script>';
 
-    var _subflowModulePaneTemplate = '<form class="dialog-form form-horizontal" autocomplete="off">'+
-        '<div class="form-row">'+
-            '<label for="subflow-input-module-module" data-i18n="[append]editor:subflow.module"><i class="fa fa-cube"></i> </label>'+
-            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-module" data-i18n="[placeholder]common.label.name">'+
-        '</div>'+
-        '<div class="form-row">'+
-            '<label for="subflow-input-module-type" data-i18n="[append]editor:subflow.type"> </label>'+
-            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-type">'+
-        '</div>'+
-        '<div class="form-row">'+
-            '<label for="subflow-input-module-version" data-i18n="[append]editor:subflow.version"></label>'+
-            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-version" data-i18n="[placeholder]editor:subflow.versionPlaceholder">'+
-        '</div>'+
-        '<div class="form-row">'+
-            '<label for="subflow-input-module-desc" data-i18n="[append]editor:subflow.desc"></label>'+
-            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-desc">'+
-        '</div>'+
-        '<div class="form-row">'+
-            '<label for="subflow-input-module-license" data-i18n="[append]editor:subflow.license"></label>'+
-            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-license">'+
-        '</div>'+
-        '<div class="form-row">'+
-            '<label for="subflow-input-module-author" data-i18n="[append]editor:subflow.author"></label>'+
-            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-author" data-i18n="[placeholder]editor:subflow.authorPlaceholder">'+
-        '</div>'+
-        '<div class="form-row">'+
-            '<label for="subflow-input-module-keywords" data-i18n="[append]editor:subflow.keys"></label>'+
-            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-keywords" data-i18n="[placeholder]editor:subflow.keysPlaceholder">'+
-        '</div>'+
-    '</form>';
-
     function findAvailableSubflowIOPosition(subflow,isInput) {
         var pos = {x:50,y:30};
         if (!isInput) {
@@ -909,7 +878,6 @@ RED.subflow = (function() {
      * Create interface for controlling env var UI definition
      */
     function buildEnvControl(envList,node) {
-
         var tabs = RED.tabs.create({
             id: "subflow-env-tabs",
             onchange: function(tab) {
@@ -1174,7 +1142,7 @@ RED.subflow = (function() {
              evt.preventDefault();
              var icon = ui.icon || "";
              var iconPath = (icon ? RED.utils.separateIconPath(icon) : {});
-             RED.editor.showIconPicker(iconButton, null, iconPath, true, function (newIcon) {
+             RED.editor.iconPicker.show(iconButton, null, iconPath, true, function (newIcon) {
                  iconButton.empty();
                  var path = newIcon || "";
                  var newPath = RED.utils.separateIconPath(path);
@@ -1898,25 +1866,11 @@ RED.subflow = (function() {
                         env.push(item);
                     }
                 }
-            })
-        }
-        // Second, get the values from the Properties table tab
-        var kind = isGroup ? "group" : (isTab ? "tab" : "subflow");
-        var items = $("#red-ui-editor-"+kind+"-env-list").editableList('items');
-        items.each(function (i,el) {
-            var data = el.data('data');
-            var item;
-            if (data.nameField && data.valueField) {
-                item = {
-                    name: data.nameField.val(),
-                    value: data.valueField.typedInput("value"),
-                    type: data.valueField.typedInput("type")
-                }
-                if (item.name.trim() !== "") {
+                if (ui.type === "cred" || item.type !== data.parent.type || item.value !== data.parent.value) {
                     env.push(item);
                 }
             }
-        });
+        })
         return env;
     }
 
@@ -1948,6 +1902,8 @@ RED.subflow = (function() {
 
     function buildEditForm(type,node) {
         if (type === "subflow-template") {
+            // This is called by the `properties` edit pane when
+            // editing a subflow template.
             buildPropertiesList($('#node-input-env-container'), node);
         } else  if (type === "subflow") {
             // This gets called by the subflow type `oneditprepare` function
@@ -1956,135 +1912,6 @@ RED.subflow = (function() {
         }
     }
 
-    function buildPropertiesForm(node) {
-        var kind = (node.type === "group") ? "group" : ((node.type === "tab") ? "tab": "subflow");
-        var container = $("#editor-"+kind+"-envProperties-content");
-        var form = $('<form class="dialog-form form-horizontal"></form>').appendTo(container);
-        var listContainer = $('<div class="form-row node-input-env-container-row"></div>').appendTo(form);
-        var list = $('<ol id="red-ui-editor-'+kind+'-env-list" class="red-ui-editor-subflow-env-list"></ol>').appendTo(listContainer);
-        buildPropertiesList(list, node);
-    }
-
-    function setupInputValidation(input,validator) {
-        var errorTip;
-        var validateTimeout;
-
-        var validateFunction = function() {
-            if (validateTimeout) {
-                return;
-            }
-            validateTimeout = setTimeout(function() {
-                var error = validator(input.val());
-                // if (!error && errorTip) {
-                //     errorTip.close();
-                //     errorTip = null;
-                // } else if (error && !errorTip) {
-                //     errorTip = RED.popover.create({
-                //         tooltip: true,
-                //         target:input,
-                //         size: "small",
-                //         direction: "bottom",
-                //         content: error,
-                //     }).open();
-                // }
-                input.toggleClass("input-error",!!error);
-                validateTimeout = null;
-            })
-        }
-        input.on("change keyup paste", validateFunction);
-    }
-
-    function buildModuleForm(container, node) {
-        $(_subflowModulePaneTemplate).appendTo(container);
-        var moduleProps = node.meta || {};
-        [
-            'module',
-            'type',
-            'version',
-            'author',
-            'desc',
-            'keywords',
-            'license'
-        ].forEach(function(property) {
-            $("#subflow-input-module-"+property).val(moduleProps[property]||"")
-        })
-        $("#subflow-input-module-type").attr("placeholder",node.id);
-
-        setupInputValidation($("#subflow-input-module-module"), function(newValue) {
-            newValue = newValue.trim();
-            var isValid = newValue.length < 215;
-            isValid = isValid && !/^[._]/.test(newValue);
-            isValid = isValid && !/[A-Z]/.test(newValue);
-            if (newValue !== encodeURIComponent(newValue)) {
-                var m = /^@([^\/]+)\/([^\/]+)$/.exec(newValue);
-                if (m) {
-                    isValid = isValid && (m[1] === encodeURIComponent(m[1]) && m[2] === encodeURIComponent(m[2]))
-                } else {
-                    isValid = false;
-                }
-            }
-            return isValid?"":"Invalid module name"
-        })
-        setupInputValidation($("#subflow-input-module-version"), function(newValue) {
-            newValue = newValue.trim();
-            var isValid = newValue === "" ||
-                          /^(\d|[1-9]\d*)\.(\d|[1-9]\d*)\.(\d|[1-9]\d*)(-(0|[1-9A-Za-z-][0-9A-Za-z-]*|[0-9]*[A-Za-z-][0-9A-Za-z-]*)(\.(0|[1-9A-Za-z-][0-9A-Za-z-]*|[0-9]*[A-Za-z-][0-9A-Za-z-]*))*)?(\+[0-9A-Za-z-]+(\.[0-9A-Za-z-]+)*)?$/.test(newValue);
-            return isValid?"":"Invalid version number"
-        })
-
-        var licenses = ["none", "Apache-2.0", "BSD-3-Clause", "BSD-2-Clause", "GPL-2.0", "GPL-3.0", "MIT", "MPL-2.0", "CDDL-1.0", "EPL-2.0"];
-        var typedLicenses = {
-            types: licenses.map(function(l) {
-                return {
-                    value: l,
-                    label: l === "none" ? RED._("editor:subflow.licenseNone") : l,
-                    hasValue: false
-                };
-            })
-        }
-        typedLicenses.types.push({
-            value:"_custom_", label:RED._("editor:subflow.licenseOther"), icon:"red/images/typedInput/az.svg"
-        })
-        if (!moduleProps.license) {
-            typedLicenses.default = "none";
-        } else if (licenses.indexOf(moduleProps.license) > -1) {
-            typedLicenses.default = moduleProps.license;
-        } else {
-            typedLicenses.default = "_custom_";
-        }
-        $("#subflow-input-module-license").typedInput(typedLicenses)
-    }
-
-    function exportSubflowModuleProperties(node) {
-        var value;
-        var moduleProps = {};
-        [
-            'module',
-            'type',
-            'version',
-            'author',
-            'desc',
-            'keywords'
-        ].forEach(function(property) {
-            value = $("#subflow-input-module-"+property).val().trim();
-            if (value) {
-                moduleProps[property] = value;
-            }
-        })
-        var selectedLicenseType = $("#subflow-input-module-license").typedInput("type");
-
-        if (selectedLicenseType === '_custom_') {
-            value = $("#subflow-input-module-license").val();
-            if (value) {
-                moduleProps.license = value;
-            }
-        } else if (selectedLicenseType !== "none") {
-            moduleProps.license = selectedLicenseType;
-        }
-        return moduleProps;
-    }
-
-
     return {
         init: init,
         createSubflow: createSubflow,
@@ -2095,14 +1922,10 @@ RED.subflow = (function() {
         removeOutput: removeSubflowOutput,
         removeStatus: removeSubflowStatus,
 
-
         buildEditForm: buildEditForm,
-        buildPropertiesForm: buildPropertiesForm,
-        buildModuleForm: buildModuleForm,
+        buildPropertiesList: buildPropertiesList,
 
         exportSubflowTemplateEnv: exportEnvList,
         exportSubflowInstanceEnv: exportSubflowInstanceEnv,
-        exportSubflowModuleProperties: exportSubflowModuleProperties
-
     }
 })();

From 741fe3dd90d773f4b7f38ce9320ad1e169795679 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 2 Sep 2021 14:29:58 +0100
Subject: [PATCH 19/27] Move tab edit dialog into editor and use new edit panes

---
 .../editor-client/src/js/ui/editor.js         | 135 ++++++++-
 ...bflowProperties.js => envVarProperties.js} |   5 +-
 .../src/js/ui/editors/panes/flowProperties.js |  63 ++++
 .../editor-client/src/js/ui/group.js          |   2 -
 .../editor-client/src/js/ui/subflow.js        |  49 ++-
 .../editor-client/src/js/ui/workspaces.js     | 281 +-----------------
 6 files changed, 225 insertions(+), 310 deletions(-)
 rename packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/{subflowProperties.js => envVarProperties.js} (94%)
 create mode 100644 packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/flowProperties.js

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 a2841cdde..3b61b861a 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
@@ -529,7 +529,7 @@ RED.editor = (function() {
                 done(activeEditPanes);
             }
         }
-        if (definition.credentials || /^subflow:/.test(definition.type) || (node.type === "group")) {
+        if (definition.credentials || /^subflow:/.test(definition.type) || node.type === "group" || node.type === "tab") {
             if (node.credentials) {
                 populateCredentialsInputs(node, definition.credentials, node.credentials, prefix);
                 completePrepare();
@@ -1646,6 +1646,7 @@ RED.editor = (function() {
 
                 var nodeEditPanes = [
                     'editor-tab-properties',
+                    'editor-tab-envProperties',
                     'editor-tab-description'
                 ];
                 prepareEditDialog(trayBody, nodeEditPanes, group,group._def,"node-input", null, function(_activeEditPanes) {
@@ -1679,6 +1680,137 @@ RED.editor = (function() {
         RED.tray.show(trayOptions);
     }
 
+    function showEditFlowDialog(workspace) {
+        if (buildingEditDialog) { return }
+        buildingEditDialog = true;
+        var activeEditPanes = [];
+        RED.view.state(RED.state.EDITING);
+        var trayOptions = {
+            title: RED._("workspace.editFlow",{name:RED.utils.sanitize(workspace.label)}),
+            buttons: [
+                {
+                    id: "node-dialog-delete",
+                    class: 'leftButton'+((RED.workspaces.count() === 1)?" disabled":""),
+                    text: RED._("common.label.delete"), //'<i class="fa fa-trash"></i>',
+                    click: function() {
+                        RED.workspaces.delete(workspace);
+                        RED.tray.close();
+                    }
+                },
+                {
+                    id: "node-dialog-cancel",
+                    text: RED._("common.label.cancel"),
+                    click: function() {
+                        RED.tray.close();
+                    }
+                },
+                {
+                    id: "node-dialog-ok",
+                    class: "primary",
+                    text: RED._("common.label.done"),
+                    click: function() {
+                        var editState = {
+                            changes: {},
+                            changed: false,
+                            outputMap: null
+                        }
+                        var wasDirty = RED.nodes.dirty();
+
+                        activeEditPanes.forEach(function(pane) {
+                            if (pane.apply) {
+                                pane.apply.call(pane, workspace, editState);
+                            }
+                        })
+
+                        var disabled = $("#node-input-disabled").prop("checked");
+                        if (workspace.disabled !== disabled) {
+                            editState.changes.disabled = workspace.disabled;
+                            editState.changed = true;
+                            workspace.disabled = disabled;
+                        }
+
+
+                        if (editState.changed) {
+                            var historyEvent = {
+                                t: "edit",
+                                changes: editState.changes,
+                                node: workspace,
+                                dirty: wasDirty
+                            }
+                            workspace.changed = true;
+                            RED.history.push(historyEvent);
+                            RED.nodes.dirty(true);
+                            if (editState.changes.hasOwnProperty('disabled')) {
+                                RED.nodes.eachNode(function(n) {
+                                    if (n.z === workspace.id) {
+                                        n.dirty = true;
+                                    }
+                                });
+                                RED.view.redraw();
+                            }
+                            RED.workspaces.refresh();
+                            RED.events.emit("flows:change",workspace);
+                        }
+                        RED.tray.close();
+                    }
+                }
+            ],
+            resize: function(dimensions) {
+                $(".red-ui-tray-content").height(dimensions.height - 50);
+                var form = $(".red-ui-tray-content form").height(dimensions.height - 50 - 40);
+                var size = {width:form.width(),height:form.height()};
+                activeEditPanes.forEach(function(pane) {
+                    if (pane.resize) {
+                        pane.resize.call(pane,editing_node, size);
+                    }
+                })
+            },
+            open: function(tray, done) {
+                var trayFooter = tray.find(".red-ui-tray-footer");
+                var trayBody = tray.find('.red-ui-tray-body');
+                trayBody.parent().css('overflow','hidden');
+                var trayFooterLeft = $('<div class="red-ui-tray-footer-left"></div>').appendTo(trayFooter)
+
+                var nodeEditPanes = [
+                    'editor-tab-flow-properties',
+                    'editor-tab-envProperties'
+                ];
+
+                if (!workspace.hasOwnProperty("disabled")) {
+                    workspace.disabled = false;
+                }
+                $('<input id="node-input-disabled" type="checkbox">').prop("checked",workspace.disabled).appendTo(trayFooterLeft).toggleButton({
+                    enabledIcon: "fa-circle-thin",
+                    disabledIcon: "fa-ban",
+                    invertState: true
+                })
+
+                prepareEditDialog(trayBody, nodeEditPanes, workspace, {}, "node-input", null, function(_activeEditPanes) {
+                    activeEditPanes = _activeEditPanes;
+                    trayBody.i18n();
+                    trayFooter.i18n();
+                    buildingEditDialog = false;
+                    done();
+                });
+            },
+            close: function() {
+                if (RED.view.state() != RED.state.IMPORT_DRAGGING) {
+                    RED.view.state(RED.state.DEFAULT);
+                }
+                activeEditPanes.forEach(function(pane) {
+                    if (pane.close) {
+                        pane.close.call(pane,editing_node);
+                    }
+                })
+                var selection = RED.view.selection();
+                if (!selection.nodes && !selection.links && workspace.id === RED.workspaces.active()) {
+                    RED.sidebar.info.refresh(workspace);
+                }
+            }
+        }
+        RED.tray.show(trayOptions);
+    }
+
     function showTypeEditor(type, options) {
         if (customEditTypes.hasOwnProperty(type)) {
             if (editStack.length > 0) {
@@ -1713,6 +1845,7 @@ RED.editor = (function() {
         },
         edit: showEditDialog,
         editConfig: showEditConfigNodeDialog,
+        editFlow: showEditFlowDialog,
         editSubflow: showEditSubflowDialog,
         editGroup: showEditGroupDialog,
         editJavaScript: function(options) { showTypeEditor("_js",options) },
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/envVarProperties.js
similarity index 94%
rename from packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js
rename to packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/envVarProperties.js
index f9071fac8..9d6fda1ea 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/envVarProperties.js
@@ -21,7 +21,10 @@
             },
             apply: function(node, editState) {
                 var old_env = node.env;
-                var new_env = RED.subflow.exportSubflowInstanceEnv(node);
+                var new_env = [];
+                if (/^subflow:/.test(node.type)) {
+                    new_env = RED.subflow.exportSubflowInstanceEnv(node);
+                }
 
                 // Get the values from the Properties table tab
                 var items = this.list.editableList('items');
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/flowProperties.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/flowProperties.js
new file mode 100644
index 000000000..c72eed7a6
--- /dev/null
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/flowProperties.js
@@ -0,0 +1,63 @@
+;(function() {
+
+    RED.editor.registerEditorPane("editor-tab-flow-properties", function() {
+        return {
+            label: RED._("editor-tab.properties"),
+            name: RED._("editor-tab.properties"),
+            iconClass: "fa fa-cog",
+            create: function(container, node) {
+                var content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
+
+                var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(content);
+                $('<div class="form-row">'+
+                  '<label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label>'+
+                  '<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">'+
+                  '</div>').appendTo(dialogForm);
+
+                var row = $('<div class="form-row node-text-editor-row">'+
+                            '<label for="node-input-info" data-i18n="editor:workspace.info" style="width:300px;"></label>'+
+                            '<div style="min-height:150px;" class="node-text-editor" id="node-input-info"></div>'+
+                            '</div>').appendTo(dialogForm);
+                this.tabflowEditor = RED.editor.createEditor({
+                    id: 'node-input-info',
+                    mode: 'ace/mode/markdown',
+                    value: ""
+                });
+
+                $('<input type="text" style="display: none;" />').prependTo(dialogForm);
+                dialogForm.on("submit", function(e) { e.preventDefault();});
+
+                $("#node-input-name").val(node.label);
+                RED.text.bidi.prepareInput($("#node-input-name"));
+                this.tabflowEditor.getSession().setValue(node.info || "", -1);
+                return content;
+            },
+            resize: function(node, size) {
+                $("#node-input-info").css("height", (size.height-70)+"px");
+                this.tabflowEditor.resize();
+            },
+            close: function(node) {
+                this.tabflowEditor.destroy();
+            },
+            apply: function(workspace, editState) {
+                var label = $( "#node-input-name" ).val();
+
+                if (workspace.label != label) {
+                    editState.changes.label = workspace.label;
+                    editState.changed = true;
+                    workspace.label = label;
+                }
+
+                var info = this.tabflowEditor.getValue();
+                if (workspace.info !== info) {
+                    editState.changes.info = workspace.info;
+                    editState.changed = true;
+                    workspace.info = info;
+                }
+                $("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('red-ui-workspace-disabled',!!workspace.disabled);
+                $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!workspace.disabled);
+
+            }
+        }
+    });
+})();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/group.js b/packages/node_modules/@node-red/editor-client/src/js/ui/group.js
index 114bb7207..27b5f9f5a 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/group.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/group.js
@@ -97,8 +97,6 @@ RED.group = (function() {
         },
         category: "config",
         oneditprepare: function() {
-            RED.subflow.buildPropertiesForm(this);
-
             var style = this.style || {};
             RED.editor.colorPicker.create({
                 id:"node-input-style-stroke",
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js b/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js
index de40ea939..c236e4f89 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js
@@ -948,9 +948,6 @@ RED.subflow = (function() {
     function buildPropertiesList(envContainer, node) {
 
         var isTemplateNode = (node.type === "subflow");
-        var isGroup = (node.type === "group");
-        var isTab = (node.type === "tab");
-        var kind = isGroup ? "group" : (isTab ? "tab" : "subflow");
 
         if (isTemplateNode) {
             buildEnvControl(envContainer, node);
@@ -1812,30 +1809,26 @@ RED.subflow = (function() {
 
     function exportSubflowInstanceEnv(node) {
         var env = [];
-        var isGroup = (node.type === "group");
-        var isTab = (node.type === "tab");
-
-        if (!isGroup && !isTab) {
-            // First, get the values for the SubflowTemplate defined properties
-            //  - these are the ones with custom UI elements
-            var parentEnv = getSubflowInstanceParentEnv(node);
-            parentEnv.forEach(function(data) {
-                var item;
-                var ui = data.ui || {};
-                if (!ui.type) {
-                    if (data.parent && data.parent.type === "cred") {
-                        ui.type = "cred";
-                    } else {
-                        ui.type = "input";
-                        ui.opts = {types:DEFAULT_ENV_TYPE_LIST}
-                    }
+        // First, get the values for the SubflowTemplate defined properties
+        //  - these are the ones with custom UI elements
+        var parentEnv = getSubflowInstanceParentEnv(node);
+        parentEnv.forEach(function(data) {
+            var item;
+            var ui = data.ui || {};
+            if (!ui.type) {
+                if (data.parent && data.parent.type === "cred") {
+                    ui.type = "cred";
                 } else {
-                    ui.opts = ui.opts || {};
+                    ui.type = "input";
+                    ui.opts = {types:DEFAULT_ENV_TYPE_LIST}
                 }
-                var input = $("#"+getSubflowEnvPropertyName(data.name));
-                if (input.length || ui.type === "cred") {
-                    item = { name: data.name };
-                    switch(ui.type) {
+            } else {
+                ui.opts = ui.opts || {};
+            }
+            var input = $("#"+getSubflowEnvPropertyName(data.name));
+            if (input.length || ui.type === "cred") {
+                item = { name: data.name };
+                switch(ui.type) {
                     case "input":
                         if (ui.opts.types && ui.opts.types.length > 0) {
                             item.value = input.typedInput('value');
@@ -1861,10 +1854,6 @@ RED.subflow = (function() {
                         item.type = 'bool';
                         item.value = ""+input.prop("checked");
                         break;
-                    }
-                    if (ui.type === "cred" || item.type !== data.parent.type || item.value !== data.parent.value) {
-                        env.push(item);
-                    }
                 }
                 if (ui.type === "cred" || item.type !== data.parent.type || item.value !== data.parent.value) {
                     env.push(item);
@@ -1926,6 +1915,6 @@ RED.subflow = (function() {
         buildPropertiesList: buildPropertiesList,
 
         exportSubflowTemplateEnv: exportEnvList,
-        exportSubflowInstanceEnv: exportSubflowInstanceEnv,
+        exportSubflowInstanceEnv: exportSubflowInstanceEnv
     }
 })();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
index 04c904c8b..3f151a851 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
@@ -75,81 +75,6 @@ RED.workspaces = (function() {
         RED.sidebar.config.refresh();
     }
 
-    var tabflowEditor;
-
-    function buildProperties(container, workspace) {
-        var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(container);
-        $('<div class="form-row">'+
-          '<label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label>'+
-          '<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">'+
-          '</div>').appendTo(dialogForm);
-
-        var row = $('<div class="form-row node-text-editor-row">'+
-                    '<label for="node-input-info" data-i18n="editor:workspace.info" style="width:300px;"></label>'+
-                    '<div style="min-height:250px;" class="node-text-editor" id="node-input-info"></div>'+
-                    '</div>').appendTo(dialogForm);
-        tabflowEditor = RED.editor.createEditor({
-            id: 'node-input-info',
-            mode: 'ace/mode/markdown',
-            value: ""
-        });
-
-        $('#node-info-input-info-expand').on("click", function(e) {
-            e.preventDefault();
-            var value = tabflowEditor.getValue();
-            RED.editor.editMarkdown({
-                value: value,
-                width: "Infinity",
-                cursor: tabflowEditor.getCursorPosition(),
-                complete: function(v,cursor) {
-                    tabflowEditor.setValue(v, -1);
-                    tabflowEditor.gotoLine(cursor.row+1,cursor.column,false);
-                    setTimeout(function() {
-                        tabflowEditor.focus();
-                    },300);
-                }
-            })
-        });
-
-        $('<input type="text" style="display: none;" />').prependTo(dialogForm);
-        dialogForm.on("submit", function(e) { e.preventDefault();});
-
-        $("#node-input-name").val(workspace.label);
-        RED.text.bidi.prepareInput($("#node-input-name"));
-        tabflowEditor.getSession().setValue(workspace.info || "", -1);
-        dialogForm.i18n();
-    }
-
-    function getNodeCredentials(type, id, done) {
-        var timeoutNotification;
-        var intialTimeout = setTimeout(function() {
-            timeoutNotification = RED.notify($('<p data-i18n="[prepend]editor.loadCredentials">  <img src="red/images/spin.svg"/></p>').i18n(),{fixed: true})
-        },800);
-
-        $.ajax({
-            url: "credentials/tab/" + id,
-            dataType: 'json',
-            success: function(data) {
-                if (timeoutNotification) {
-                    timeoutNotification.close();
-                    timeoutNotification = null;
-                }
-                clearTimeout(intialTimeout);
-                done(data);
-            },
-            error: function(jqXHR,status,error) {
-                if (timeoutNotification) {
-                    timeoutNotification.close();
-                    timeoutNotification = null;
-                }
-                clearTimeout(intialTimeout);
-                RED.notify(RED._("editor.errors.credentialLoadFailed"),"error")
-                done(null);
-            },
-            timeout: 30000,
-        });
-    }
-
     function showEditWorkspaceDialog(id) {
         var workspace = RED.nodes.workspace(id);
         if (!workspace) {
@@ -157,207 +82,9 @@ RED.workspaces = (function() {
             if (subflow) {
                 RED.editor.editSubflow(subflow);
             }
-            return;
+        } else {
+            RED.editor.editFlow(workspace);
         }
-        RED.view.state(RED.state.EDITING);
-        var trayOptions = {
-            title: RED._("workspace.editFlow",{name:RED.utils.sanitize(workspace.label)}),
-            buttons: [
-                {
-                    id: "node-dialog-delete",
-                    class: 'leftButton'+((workspaceTabCount === 1)?" disabled":""),
-                    text: RED._("common.label.delete"), //'<i class="fa fa-trash"></i>',
-                    click: function() {
-                        deleteWorkspace(workspace);
-                        RED.tray.close();
-                    }
-                },
-                {
-                    id: "node-dialog-cancel",
-                    text: RED._("common.label.cancel"),
-                    click: function() {
-                        RED.tray.close();
-                    }
-                },
-                {
-                    id: "node-dialog-ok",
-                    class: "primary",
-                    text: RED._("common.label.done"),
-                    click: function() {
-                        var label = $( "#node-input-name" ).val();
-                        var changed = false;
-                        var changes = {};
-                        if (workspace.label != label) {
-                            changes.label = workspace.label;
-                            changed = true;
-                            workspace.label = label;
-                            workspace_tabs.renameTab(workspace.id,label);
-                        }
-                        var disabled = $("#node-input-disabled").prop("checked");
-                        if (workspace.disabled !== disabled) {
-                            changes.disabled = workspace.disabled;
-                            changed = true;
-                            workspace.disabled = disabled;
-                        }
-                        var info = tabflowEditor.getValue();
-                        if (workspace.info !== info) {
-                            changes.info = workspace.info;
-                            changed = true;
-                            workspace.info = info;
-                        }
-                        $("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('red-ui-workspace-disabled',!!workspace.disabled);
-                        $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!workspace.disabled);
-
-                        var old_env = workspace.env;
-                        var new_env = RED.subflow.exportSubflowInstanceEnv(workspace);
-                        if (new_env && (new_env.length > 0)) {
-                            new_env.forEach(function(prop) {
-                                if (prop.type === "cred") {
-                                    workspace.credentials = workspace.credentials || {_:{}};
-                                    workspace.credentials[prop.name] = prop.value;
-                                    workspace.credentials['has_'+prop.name] = (prop.value !== "");
-                                    if (prop.value !== '__PWRD__') {
-                                        changed = true;
-                                    }
-                                    delete prop.value;
-                                }
-                            });
-                        }
-                        if (!isSameObj(old_env, new_env)) {
-                            workspace.env = new_env;
-                            changes.env = old_env;
-                            changed = true;
-                        }
-
-                        if (changed) {
-                            var historyEvent = {
-                                t: "edit",
-                                changes:changes,
-                                node: workspace,
-                                dirty: RED.nodes.dirty()
-                            }
-                            workspace.changed = true;
-                            RED.history.push(historyEvent);
-                            RED.nodes.dirty(true);
-                            RED.sidebar.config.refresh();
-                            if (changes.hasOwnProperty('disabled')) {
-                                RED.nodes.eachNode(function(n) {
-                                    if (n.z === workspace.id) {
-                                        n.dirty = true;
-                                    }
-                                });
-                                RED.view.redraw();
-                            }
-                            RED.events.emit("flows:change",workspace);
-                        }
-                        RED.tray.close();
-                    }
-                }
-            ],
-            resize: function(dimensions) {
-                var height = dimensions.height;
-
-                var rows = $("#dialog-form>div:not(.node-text-editor-row)");
-                var editorRow = $("#dialog-form>div.node-text-editor-row");
-                for (var i=0; i<rows.size(); i++) {
-                    height -= $(rows[i]).outerHeight(true);
-                }
-                var editorHeight = height -(parseInt($("#dialog-form").css("marginTop"))+parseInt($("#dialog-form").css("marginBottom"))) -100;
-                $(".node-text-editor").css("height", editorHeight+"px");
-                tabflowEditor.resize();
-
-                $("#red-ui-editor-tab-env-list").editableList("height", height -70);
-            },
-            open: function(tray) {
-                var trayFooter = tray.find(".red-ui-tray-footer");
-                var trayBody = tray.find('.red-ui-tray-body');
-                var trayFooterLeft = $('<div class="red-ui-tray-footer-left"></div>').appendTo(trayFooter)
-
-                var editorTabEl = $('<ul></ul>').appendTo(trayBody);
-                var editorContent = $('<div></div>').appendTo(trayBody);
-
-                var finishedBuilding = false;
-                
-                var editorTabs = RED.tabs.create({
-                    element:editorTabEl,
-                    onchange:function(tab) {
-                        editorContent.children().hide();
-                        if (tab.onchange) {
-                            tab.onchange.call(tab);
-                        }
-                        tab.content.show();
-                        if (finishedBuilding) {
-                            RED.tray.resize();
-                        }
-                    },
-                    collapsible: true,
-                    menu: false
-                });
-
-                var nodePropertiesTab = {
-                    id: "editor-tab-properties",
-                    label: RED._("editor-tab.properties"),
-                    name: RED._("editor-tab.properties"),
-                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                    iconClass: "fa fa-cog"
-                };
-                buildProperties(nodePropertiesTab.content, workspace);
-                editorTabs.addTab(nodePropertiesTab);
-
-                var tabPropertiesTab = {
-                    id: "editor-tab-envProperties",
-                    label: RED._("editor-tab.envProperties"),
-                    name: RED._("editor-tab.envProperties"),
-                    content: $('<div>', {
-                        id: "editor-tab-envProperties-content",
-                        class: "red-ui-tray-content"
-                    }).appendTo(editorContent).hide(),
-                    iconClass: "fa fa-list",
-                };
-
-                function cb() {
-                    RED.subflow.buildPropertiesForm(workspace);
-                    editorTabs.addTab(tabPropertiesTab);
-
-                    if (!workspace.hasOwnProperty("disabled")) {
-                        workspace.disabled = false;
-                    }
-
-                    $('<input id="node-input-disabled" type="checkbox">').prop("checked",workspace.disabled).appendTo(trayFooterLeft).toggleButton({
-                        enabledIcon: "fa-circle-thin",
-                        disabledIcon: "fa-ban",
-                        invertState: true
-                    })
-                    finishedBuilding = true;
-                    RED.tray.resize();
-                }
-
-                if (workspace.credentials) {
-                    cb();
-                }
-                else {
-                    getNodeCredentials("tab", workspace.id, function(data) {
-                        if (data) {
-                            workspace.credentials = data;
-                            workspace.credentials._ = $.extend(true,{},data);
-                        }
-                        cb();
-                    });
-                }
-
-            },
-            close: function() {
-                if (RED.view.state() != RED.state.IMPORT_DRAGGING) {
-                    RED.view.state(RED.state.DEFAULT);
-                }
-                var selection = RED.view.selection();
-                if (!selection.nodes && !selection.links && workspace.id === activeWorkspace) {
-                    RED.sidebar.info.refresh(workspace);
-                }
-                tabflowEditor.destroy();
-            }
-        }
-        RED.tray.show(trayOptions);
     }
 
 
@@ -566,7 +293,6 @@ RED.workspaces = (function() {
         }
     }
 
-
     function removeWorkspace(ws) {
         if (!ws) {
             deleteWorkspace(RED.nodes.workspace(activeWorkspace));
@@ -595,7 +321,10 @@ RED.workspaces = (function() {
     return {
         init: init,
         add: addWorkspace,
+        // remove: remove workspace without editor history etc
         remove: removeWorkspace,
+        // delete: remove workspace and update editor history
+        delete: deleteWorkspace,
         order: setWorkspaceOrder,
         edit: editWorkspace,
         contains: function(id) {

From 4463a7d4bae93f88351af53ae32d8b3a96c4b17b Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 2 Sep 2021 16:14:35 +0100
Subject: [PATCH 20/27] Move envVar list component to own file

---
 .../@node-red/editor-client/src/js/nodes.js   |  43 +-
 .../src/js/ui/editors/envVarList.js           | 616 +++++++++++++++++
 .../js/ui/editors/panes/envVarProperties.js   |   2 +-
 .../src/js/ui/editors/panes/properties.js     |   7 -
 .../js/ui/editors/panes/subflowProperties.js  |  63 ++
 .../editor-client/src/js/ui/subflow.js        | 634 +-----------------
 6 files changed, 721 insertions(+), 644 deletions(-)
 create mode 100644 packages/node_modules/@node-red/editor-client/src/js/ui/editors/envVarList.js
 create mode 100644 packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js

diff --git a/packages/node_modules/@node-red/editor-client/src/js/nodes.js b/packages/node_modules/@node-red/editor-client/src/js/nodes.js
index 2d442eea9..8afff55b2 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/nodes.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/nodes.js
@@ -593,10 +593,11 @@ RED.nodes = (function() {
             outputLabels: function(i) { return sf.outputLabels?sf.outputLabels[i]:null },
             oneditprepare: function() {
                 if (this.type !== 'subflow') {
-                    // Whilst this definition is used for both template and instance
-                    // nodes, the work to build the edit form for the template nodes
-                    // is handled elsewhere.
+                    // A subflow instance node
                     RED.subflow.buildEditForm("subflow",this);
+                } else {
+                    // A subflow template node
+                    RED.subflow.buildEditForm("subflow-template", this);
                 }
             },
             oneditresize: function(size) {
@@ -681,7 +682,13 @@ RED.nodes = (function() {
     }
 
 
-    function convertWorkspace(n) {
+    function convertWorkspace(n,opts) {
+        var exportCreds = true;
+        if (opts) {
+            if (opts.hasOwnProperty("credentials")) {
+                exportCreds = opts.credentials;
+            }
+        }
         var node = {};
         node.id = n.id;
         node.type = n.type;
@@ -690,19 +697,21 @@ RED.nodes = (function() {
                 node[d] = n[d];
             }
         }
-        var credentialSet = {};
-        if (n.credentials) {
-            for (var tabCred in n.credentials) {
-                if (n.credentials.hasOwnProperty(tabCred)) {
-                    if (!n.credentials._ ||
-                        n.credentials["has_"+tabCred] != n.credentials._["has_"+tabCred] ||
-                        (n.credentials["has_"+tabCred] && n.credentials[tabCred])) {
-                        credentialSet[tabCred] = n.credentials[tabCred];
+        if (exportCreds) {
+            var credentialSet = {};
+            if (n.credentials) {
+                for (var tabCred in n.credentials) {
+                    if (n.credentials.hasOwnProperty(tabCred)) {
+                        if (!n.credentials._ ||
+                            n.credentials["has_"+tabCred] != n.credentials._["has_"+tabCred] ||
+                            (n.credentials["has_"+tabCred] && n.credentials[tabCred])) {
+                            credentialSet[tabCred] = n.credentials[tabCred];
+                        }
                     }
                 }
-            }
-            if (Object.keys(credentialSet).length > 0) {
-                node.credentials = credentialSet;
+                if (Object.keys(credentialSet).length > 0) {
+                    node.credentials = credentialSet;
+                }
             }
         }
         return node;
@@ -725,7 +734,7 @@ RED.nodes = (function() {
         }
 
         if (n.type === 'tab') {
-            return convertWorkspace(n);
+            return convertWorkspace(n, { credentials: exportCreds });
         }
         var node = {};
         node.id = n.id;
@@ -1047,7 +1056,7 @@ RED.nodes = (function() {
         var i;
         for (i=0;i<workspacesOrder.length;i++) {
             if (workspaces[workspacesOrder[i]].type == "tab") {
-                nns.push(convertWorkspace(workspaces[workspacesOrder[i]]));
+                nns.push(convertWorkspace(workspaces[workspacesOrder[i]], opts));
             }
         }
         for (i in subflows) {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/envVarList.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/envVarList.js
new file mode 100644
index 000000000..c1e1a0217
--- /dev/null
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/envVarList.js
@@ -0,0 +1,616 @@
+RED.editor.envVarList = (function() {
+
+    var currentLocale = 'en-US';
+    var DEFAULT_ENV_TYPE_LIST = ['str','num','bool','json','bin','env'];
+    var DEFAULT_ENV_TYPE_LIST_INC_CRED = ['str','num','bool','json','bin','env','cred'];
+
+    /**
+     * Create env var edit interface
+     * @param container - container
+     * @param node - subflow node
+     */
+    function buildPropertiesList(envContainer, node) {
+
+        var isTemplateNode = (node.type === "subflow");
+
+        envContainer
+            .css({
+                'min-height':'150px',
+                'min-width':'450px'
+            })
+            .editableList({
+                header: isTemplateNode?$('<div><div><div></div><div data-i18n="common.label.name"></div><div data-i18n="editor-tab.defaultValue"></div><div></div></div></div>'):undefined,
+                addItem: function(container, i, opt) {
+                    // If this is an instance node, these are properties unique to
+                    // this instance - ie opt.parent will not be defined.
+
+                    if (isTemplateNode) {
+                        container.addClass("red-ui-editor-subflow-env-editable")
+                    }
+
+                    var envRow = $('<div/>').appendTo(container);
+                    var nameField = null;
+                    var valueField = null;
+
+                    nameField = $('<input/>', {
+                        class: "node-input-env-name",
+                        type: "text",
+                        placeholder: RED._("common.label.name")
+                    }).attr("autocomplete","disable").appendTo(envRow).val(opt.name);
+                    valueField = $('<input/>',{
+                        style: "width:100%",
+                        class: "node-input-env-value",
+                        type: "text",
+                    }).attr("autocomplete","disable").appendTo(envRow)
+                    valueField.typedInput({default:'str',types:isTemplateNode?DEFAULT_ENV_TYPE_LIST:DEFAULT_ENV_TYPE_LIST_INC_CRED});
+                    valueField.typedInput('type', opt.type);
+                    if (opt.type === "cred") {
+                        if (opt.value) {
+                            valueField.typedInput('value', opt.value);
+                        } else if (node.credentials && node.credentials[opt.name]) {
+                            valueField.typedInput('value', node.credentials[opt.name]);
+                        } else if (node.credentials && node.credentials['has_'+opt.name]) {
+                            valueField.typedInput('value', "__PWRD__");
+                        } else {
+                            valueField.typedInput('value', "");
+                        }
+                    } else {
+                        valueField.typedInput('value', opt.value);
+                    }
+
+
+                    opt.nameField = nameField;
+                    opt.valueField = valueField;
+
+                    var actionButton = $('<a/>',{href:"#",class:"red-ui-editableList-item-remove red-ui-button red-ui-button-small"}).appendTo(envRow);
+                    $('<i/>',{class:"fa "+(opt.parent?"fa-reply":"fa-remove")}).appendTo(actionButton);
+                    var removeTip = RED.popover.tooltip(actionButton,RED._("subflow.env.remove"));
+                    actionButton.on("click", function(evt) {
+                        evt.preventDefault();
+                        removeTip.close();
+                        container.parent().addClass("red-ui-editableList-item-deleting")
+                        container.fadeOut(300, function() {
+                            envContainer.editableList('removeItem',opt);
+                        });
+                    });
+
+                    if (isTemplateNode) {
+                        // Add the UI customisation row
+                        // if `opt.ui` does not exist, then apply defaults. If these
+                        // defaults do not change then they will get stripped off
+                        // before saving.
+                        if (opt.type === 'cred') {
+                            opt.ui = opt.ui || {
+                                icon: "",
+                                type: "cred"
+                            }
+                            opt.ui.type = "cred";
+                        } else {
+                            opt.ui = opt.ui || {
+                                icon: "",
+                                type: "input",
+                                opts: {types:DEFAULT_ENV_TYPE_LIST}
+                            }
+                        }
+                        opt.ui.label = opt.ui.label || {};
+                        opt.ui.type = opt.ui.type || "input";
+
+                        var uiRow = $('<div/>').appendTo(container).hide();
+                        // save current info for reverting on cancel
+                        // var copy = $.extend(true, {}, ui);
+
+                         $('<a href="#"><i class="fa fa-angle-right"></a>').prependTo(envRow).on("click", function (evt) {
+                            evt.preventDefault();
+                            if ($(this).hasClass('expanded')) {
+                                uiRow.slideUp();
+                                $(this).removeClass('expanded');
+                            } else {
+                                uiRow.slideDown();
+                                $(this).addClass('expanded');
+                            }
+                        });
+
+                        buildEnvEditRow(uiRow, opt.ui, nameField, valueField);
+                        nameField.trigger('change');
+                    }
+                },
+                sortable: ".red-ui-editableList-item-handle",
+                removable: false
+            });
+        var parentEnv = {};
+        var envList = [];
+        if (/^subflow:/.test(node.type)) {
+            var subflowDef = RED.nodes.subflow(node.type.substring(8));
+            if (subflowDef.env) {
+                subflowDef.env.forEach(function(env) {
+                    var item = {
+                        name:env.name,
+                        parent: {
+                            type: env.type,
+                            value: env.value,
+                            ui: env.ui
+                        }
+                    }
+                    envList.push(item);
+                    parentEnv[env.name] = item;
+                })
+            }
+        }
+
+        if (node.env) {
+            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,
+                        ui: env.ui
+                    });
+                }
+            }
+        }
+        envList.forEach(function(env) {
+            if (env.parent && env.parent.ui && env.parent.ui.type === 'hide') {
+                return;
+            }
+            if (!isTemplateNode && env.parent) {
+                return;
+            }
+            envContainer.editableList('addItem', JSON.parse(JSON.stringify(env)));
+        });
+    }
+
+
+    /**
+     * Create UI edit interface for environment variable
+     * @param container - container
+     * @param env - env var definition
+     * @param nameField - name field of env var
+     * @param valueField - value field of env var
+     */
+     function buildEnvEditRow(container, ui, nameField, valueField) {
+         container.addClass("red-ui-editor-subflow-env-ui-row")
+         var topRow = $('<div></div>').appendTo(container);
+         $('<div></div>').appendTo(topRow);
+         $('<div>').text(RED._("editor.icon")).appendTo(topRow);
+         $('<div>').text(RED._("editor.label")).appendTo(topRow);
+         $('<div>').text(RED._("editor.inputType")).appendTo(topRow);
+
+         var row = $('<div></div>').appendTo(container);
+         $('<div><i class="red-ui-editableList-item-handle fa fa-bars"></i></div>').appendTo(row);
+         var typeOptions = {
+             'input': {types:DEFAULT_ENV_TYPE_LIST},
+             'select': {opts:[]},
+             'spinner': {},
+             'cred': {}
+         };
+         if (ui.opts) {
+             typeOptions[ui.type] = ui.opts;
+         } else {
+             // Pick up the default values if not otherwise provided
+             ui.opts = typeOptions[ui.type];
+         }
+         var iconCell = $('<div></div>').appendTo(row);
+
+         var iconButton = $('<a href="#"></a>').appendTo(iconCell);
+         iconButton.on("click", function(evt) {
+             evt.preventDefault();
+             var icon = ui.icon || "";
+             var iconPath = (icon ? RED.utils.separateIconPath(icon) : {});
+             RED.editor.iconPicker.show(iconButton, null, iconPath, true, function (newIcon) {
+                 iconButton.empty();
+                 var path = newIcon || "";
+                 var newPath = RED.utils.separateIconPath(path);
+                 if (newPath) {
+                     $('<i class="fa"></i>').addClass(newPath.file).appendTo(iconButton);
+                 }
+                 ui.icon = path;
+             });
+         })
+
+         if (ui.icon) {
+             var newPath = RED.utils.separateIconPath(ui.icon);
+             $('<i class="fa '+newPath.file+'"></i>').appendTo(iconButton);
+         }
+
+         var labelCell = $('<div></div>').appendTo(row);
+
+         var label = ui.label && ui.label[currentLocale] || "";
+         var labelInput = $('<input type="text">').val(label).appendTo(labelCell);
+         ui.labelField = labelInput;
+         labelInput.on('change', function(evt) {
+             ui.label = ui.label || {};
+             var val = $(this).val().trim();
+             if (val === "") {
+                 delete ui.label[currentLocale];
+             } else {
+                 ui.label[currentLocale] = val;
+             }
+         })
+         var labelIcon = $('<span class="red-ui-editor-subflow-env-lang-icon"><i class="fa fa-language"></i></span>').appendTo(labelCell);
+         RED.popover.tooltip(labelIcon,function() {
+             var langs = Object.keys(ui.label);
+             var content = $("<div>");
+             if (langs.indexOf(currentLocale) === -1) {
+                 langs.push(currentLocale);
+                 langs.sort();
+             }
+             langs.forEach(function(l) {
+                 var row = $('<div>').appendTo(content);
+                 $('<span>').css({display:"inline-block",width:"120px"}).text(RED._("languages."+l)+(l===currentLocale?"*":"")).appendTo(row);
+                 $('<span>').text(ui.label[l]||"").appendTo(row);
+             });
+             return content;
+         })
+
+         nameField.on('change',function(evt) {
+            labelInput.attr("placeholder",$(this).val())
+        });
+
+        var inputCell = $('<div></div>').appendTo(row);
+        var inputCellInput = $('<input type="text">').css("width","100%").appendTo(inputCell);
+        if (ui.type === "input") {
+            inputCellInput.val(ui.opts.types.join(","));
+        }
+        var checkbox;
+        var selectBox;
+
+        inputCellInput.typedInput({
+            types: [
+                {
+                    value:"input",
+                    label:RED._("editor.inputs.input"), icon:"fa fa-i-cursor",showLabel:false,multiple:true,options:[
+                        {value:"str",label:RED._("editor.types.str"),icon:"red/images/typedInput/az.svg"},
+                        {value:"num",label:RED._("editor.types.num"),icon:"red/images/typedInput/09.svg"},
+                        {value:"bool",label:RED._("editor.types.bool"),icon:"red/images/typedInput/bool.svg"},
+                        {value:"json",label:RED._("editor.types.json"),icon:"red/images/typedInput/json.svg"},
+                        {value: "bin",label: RED._("editor.types.bin"),icon: "red/images/typedInput/bin.svg"},
+                        {value: "env",label: RED._("editor.types.env"),icon: "red/images/typedInput/env.svg"},
+                        {value: "cred",label: RED._("editor.types.cred"),icon: "fa fa-lock"}
+                    ],
+                    default: DEFAULT_ENV_TYPE_LIST,
+                    valueLabel: function(container,value) {
+                        container.css("padding",0);
+                        var innerContainer = $('<div class="red-ui-editor-subflow-env-input-type"></div>').appendTo(container);
+
+                        var input = $('<div class="placeholder-input">').appendTo(innerContainer);
+                        $('<span><i class="fa fa-i-cursor"></i></span>').appendTo(input);
+                        if (value.length) {
+                            value.forEach(function(v) {
+                                if (!/^fa /.test(v.icon)) {
+                                    $('<img>',{src:v.icon,style:"max-width:14px; padding: 0 3px; margin-top:-4px; margin-left: 1px"}).appendTo(input);
+                                } else {
+                                    var s = $('<span>',{style:"max-width:14px; padding: 0 3px; margin-top:-4px; margin-left: 1px"}).appendTo(input);
+                                    $("<i>",{class: v.icon}).appendTo(s);
+                                }
+                            })
+                        } else {
+                            $('<span class="red-ui-editor-subflow-env-input-type-placeholder"></span>').text(RED._("editor.selectType")).appendTo(input);
+                        }
+                    }
+                },
+                {
+                    value: "cred",
+                    label: RED._("typedInput.type.cred"), icon:"fa fa-lock", showLabel: false,
+                    valueLabel: function(container,value) {
+                        container.css("padding",0);
+                        var innerContainer = $('<div class="red-ui-editor-subflow-env-input-type">').css({
+                            "border-top-right-radius": "4px",
+                            "border-bottom-right-radius": "4px"
+                        }).appendTo(container);
+                        $('<div class="placeholder-input">').html("&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;").appendTo(innerContainer);
+                    }
+                },
+                {
+                    value:"select",
+                    label:RED._("editor.inputs.select"), icon:"fa fa-tasks",showLabel:false,
+                    valueLabel: function(container,value) {
+                        container.css("padding","0");
+
+                        selectBox = $('<select></select>').appendTo(container);
+                        if (ui.opts && Array.isArray(ui.opts.opts)) {
+                            ui.opts.opts.forEach(function(o) {
+                                var label = lookupLabel(o.l, o.l["en-US"]||o.v, currentLocale);
+                                // $('<option>').val((o.t||'str')+":"+o.v).text(label).appendTo(selectBox);
+                                $('<option>').val(o.v).text(label).appendTo(selectBox);
+                            })
+                        }
+                        selectBox.on('change', function(evt) {
+                            var v = selectBox.val();
+                            // var parts = v.split(":");
+                            // var t = parts.shift();
+                            // v = parts.join(":");
+                            //
+                            // valueField.typedInput("type",'str')
+                            valueField.typedInput("value",v)
+                        });
+                        selectBox.val(valueField.typedInput("value"));
+                        // selectBox.val(valueField.typedInput('type')+":"+valueField.typedInput("value"));
+                    },
+                    expand: {
+                        icon: "fa-caret-down",
+                        minWidth: 400,
+                        content: function(container) {
+                            var content = $('<div class="red-ui-editor-subflow-ui-edit-panel">').appendTo(container);
+                            var optList = $('<ol>').appendTo(content).editableList({
+                                header:$("<div><div>"+RED._("editor.select.label")+"</div><div>"+RED._("editor.select.value")+"</div></div>"),
+                                addItem: function(row,index,itemData) {
+                                    var labelDiv = $('<div>').appendTo(row);
+                                    var label = lookupLabel(itemData.l, "", currentLocale);
+                                    itemData.label = $('<input type="text">').val(label).appendTo(labelDiv);
+                                    itemData.label.on('keydown', function(evt) {
+                                        if (evt.keyCode === 13) {
+                                            itemData.input.focus();
+                                            evt.preventDefault();
+                                        }
+                                    });
+                                    var labelIcon = $('<span class="red-ui-editor-subflow-env-lang-icon"><i class="fa fa-language"></i></span>').appendTo(labelDiv);
+                                    RED.popover.tooltip(labelIcon,function() {
+                                        return currentLocale;
+                                    })
+                                    itemData.input = $('<input type="text">').val(itemData.v).appendTo(row);
+
+                                    // Problem using a TI here:
+                                    //  - this is in a popout panel
+                                    //  - clicking the expand button in the TI will close the parent edit tray
+                                    //    and open the type editor.
+                                    //  - but it leaves the popout panel over the top.
+                                    //  - there is no way to get back to the popout panel after closing the type editor
+                                    //.typedInput({default:itemData.t||'str', types:DEFAULT_ENV_TYPE_LIST});
+                                    itemData.input.on('keydown', function(evt) {
+                                        if (evt.keyCode === 13) {
+                                            // Enter or Tab
+                                            var index = optList.editableList('indexOf',itemData);
+                                            var length = optList.editableList('length');
+                                            if (index + 1 === length) {
+                                                var newItem = {};
+                                                optList.editableList('addItem',newItem);
+                                                setTimeout(function() {
+                                                    if (newItem.label) {
+                                                        newItem.label.focus();
+                                                    }
+                                                },100)
+                                            } else {
+                                                var nextItem = optList.editableList('getItemAt',index+1);
+                                                if (nextItem.label) {
+                                                    nextItem.label.focus()
+                                                }
+                                            }
+                                            evt.preventDefault();
+                                        }
+                                    });
+                                },
+                                sortable: true,
+                                removable: true,
+                                height: 160
+                            })
+                            if (ui.opts.opts.length > 0) {
+                                ui.opts.opts.forEach(function(o) {
+                                    optList.editableList('addItem',$.extend(true,{},o))
+                                })
+                            } else {
+                                optList.editableList('addItem',{})
+                            }
+                            return {
+                                onclose: function() {
+                                    var items = optList.editableList('items');
+                                    var vals = [];
+                                    items.each(function (i,el) {
+                                        var data = el.data('data');
+                                        var l = data.label.val().trim();
+                                        var v = data.input.val();
+                                        // var t = data.input.typedInput('type');
+                                        // var v = data.input.typedInput('value');
+                                        if (l.length > 0) {
+                                            data.l = data.l || {};
+                                            data.l[currentLocale] = l;
+                                        }
+                                        data.v = v;
+
+                                        if (l.length > 0 || v.length > 0) {
+                                            var val = {l:data.l,v:data.v};
+                                            // if (t !== 'str') {
+                                            //     val.t = t;
+                                            // }
+                                            vals.push(val);
+                                        }
+                                    });
+                                    ui.opts.opts = vals;
+                                    inputCellInput.typedInput('value',Date.now())
+                                }
+                            }
+                        }
+                    }
+                },
+                {
+                    value:"checkbox",
+                    label:RED._("editor.inputs.checkbox"), icon:"fa fa-check-square-o",showLabel:false,
+                    valueLabel: function(container,value) {
+                        container.css("padding",0);
+                        checkbox = $('<input type="checkbox">').appendTo(container);
+                        checkbox.on('change', function(evt) {
+                            valueField.typedInput('value',$(this).prop('checked')?"true":"false");
+                        })
+                        checkbox.prop('checked',valueField.typedInput('value')==="true");
+                    }
+                },
+                {
+                    value:"spinner",
+                    label:RED._("editor.inputs.spinner"), icon:"fa fa-sort-numeric-asc", showLabel:false,
+                    valueLabel: function(container,value) {
+                        container.css("padding",0);
+                        var innerContainer = $('<div class="red-ui-editor-subflow-env-input-type"></div>').appendTo(container);
+
+                        var input = $('<div class="placeholder-input">').appendTo(innerContainer);
+                        $('<span><i class="fa fa-sort-numeric-asc"></i></span>').appendTo(input);
+
+                        var min = ui.opts && ui.opts.min;
+                        var max = ui.opts && ui.opts.max;
+                        var label = "";
+                        if (min !== undefined && max !== undefined) {
+                            label = Math.min(min,max)+" - "+Math.max(min,max);
+                        } else if (min !== undefined) {
+                            label = "> "+min;
+                        } else if (max !== undefined) {
+                            label = "< "+max;
+                        }
+                        $('<span>').css("margin-left","15px").text(label).appendTo(input);
+                    },
+                    expand: {
+                        icon: "fa-caret-down",
+                        content: function(container) {
+                            var content = $('<div class="red-ui-editor-subflow-ui-edit-panel">').appendTo(container);
+                            content.css("padding","8px 5px")
+                            var min = ui.opts.min;
+                            var max = ui.opts.max;
+                            var minInput = $('<input type="number" style="margin-bottom:0; width:60px">');
+                            minInput.val(min);
+                            var maxInput = $('<input type="number" style="margin-bottom:0; width:60px">');
+                            maxInput.val(max);
+                            $('<div class="form-row" style="margin-bottom:3px"><label>'+RED._("editor.spinner.min")+'</label></div>').append(minInput).appendTo(content);
+                            $('<div class="form-row" style="margin-bottom:0"><label>'+RED._("editor.spinner.max")+'</label></div>').append(maxInput).appendTo(content);
+                            return {
+                                onclose: function() {
+                                    var min = minInput.val().trim();
+                                    var max = maxInput.val().trim();
+                                    if (min !== "") {
+                                        ui.opts.min = parseInt(min);
+                                    } else {
+                                        delete ui.opts.min;
+                                    }
+                                    if (max !== "") {
+                                        ui.opts.max = parseInt(max);
+                                    } else {
+                                        delete ui.opts.max;
+                                    }
+                                    inputCellInput.typedInput('value',Date.now())
+                                }
+                            }
+                        }
+                    }
+                },
+                {
+                    value:"none",
+                    label:RED._("editor.inputs.none"), icon:"fa fa-times",hasValue:false
+                },
+                {
+                    value:"hide",
+                    label:RED._("editor.inputs.hidden"), icon:"fa fa-ban",hasValue:false
+                }
+            ],
+            default: 'none'
+        }).on("typedinputtypechange", function(evt,type) {
+            ui.type = $(this).typedInput("type");
+            ui.opts = typeOptions[ui.type];
+            if (ui.type === 'input') {
+                // In the case of 'input' type, the typedInput uses the multiple-option
+                // mode. Its value needs to be set to a comma-separately list of the
+                // selected options.
+                inputCellInput.typedInput('value',ui.opts.types.join(","))
+            } else {
+                // No other type cares about `value`, but doing this will
+                // force a refresh of the label now that `ui.opts` has
+                // been updated.
+                inputCellInput.typedInput('value',Date.now())
+            }
+
+            switch (ui.type) {
+                case 'input':
+                    valueField.typedInput('types',ui.opts.types);
+                    break;
+                case 'select':
+                    valueField.typedInput('types',['str']);
+                    break;
+                case 'checkbox':
+                    valueField.typedInput('types',['bool']);
+                    break;
+                case 'spinner':
+                    valueField.typedInput('types',['num']);
+                    break;
+                case 'cred':
+                    valueField.typedInput('types',['cred']);
+                    break;
+                default:
+                    valueField.typedInput('types',DEFAULT_ENV_TYPE_LIST)
+            }
+            if (ui.type === 'checkbox') {
+                valueField.typedInput('type','bool');
+            } else if (ui.type === 'spinner') {
+                valueField.typedInput('type','num');
+            }
+            if (ui.type !== 'checkbox') {
+                checkbox = null;
+            }
+
+        }).on("change", function(evt,type) {
+            if (ui.type === 'input') {
+                var types = inputCellInput.typedInput('value');
+                ui.opts.types = (types === "") ? ["str"] : types.split(",");
+                valueField.typedInput('types',ui.opts.types);
+            }
+        });
+        valueField.on("change", function(evt) {
+            if (checkbox) {
+                checkbox.prop('checked',$(this).typedInput('value')==="true")
+            }
+        })
+        // Set the input to the right type. This will trigger the 'typedinputtypechange'
+        // event handler (just above ^^) to update the value if needed
+        inputCellInput.typedInput('type',ui.type)
+    }
+
+    function setLocale(l, list) {
+        currentLocale = l;
+        if (list) {
+            var items = list.editableList("items");
+            items.each(function (i, item) {
+                var entry = $(this).data('data');
+                var labelField = entry.ui.labelField;
+                labelField.val(lookupLabel(entry.ui.label, "", currentLocale));
+                if (labelField.timeout) {
+                    clearTimeout(labelField.timeout);
+                    delete labelField.timeout;
+                }
+                labelField.addClass("input-updated");
+                labelField.timeout = setTimeout(function() {
+                    delete labelField.timeout
+                    labelField.removeClass("input-updated");
+                },3000);
+            });
+        }
+    }
+
+    /**
+     * Lookup text for specific locale
+     * @param labels - dict of labels
+     * @param defaultLabel - fallback label if not found
+     * @param locale - target locale
+     * @returns {string} text for specified locale
+     */
+    function lookupLabel(labels, defaultLabel, locale) {
+        if (labels) {
+            if (labels[locale]) {
+                return labels[locale];
+            }
+            if (locale) {
+                var lang = locale.substring(0, 2);
+                if (labels[lang]) {
+                    return labels[lang];
+                }
+            }
+        }
+        return defaultLabel;
+    }
+
+    return {
+        create: buildPropertiesList,
+        setLocale: setLocale,
+        lookupLabel: lookupLabel,
+        DEFAULT_ENV_TYPE_LIST: DEFAULT_ENV_TYPE_LIST,
+        DEFAULT_ENV_TYPE_LIST_INC_CRED: DEFAULT_ENV_TYPE_LIST_INC_CRED
+    }
+})();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/envVarProperties.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/envVarProperties.js
index 9d6fda1ea..4e2240580 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/envVarProperties.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/envVarProperties.js
@@ -10,7 +10,7 @@
                 var form = $('<form class="dialog-form form-horizontal"></form>').appendTo(content);
                 var listContainer = $('<div class="form-row node-input-env-container-row"></div>').appendTo(form);
                 this.list = $('<ol></ol>').appendTo(listContainer);
-                RED.subflow.buildPropertiesList(this.list, node);
+                RED.editor.envVarList.create(this.list, node);
                 return content;
             },
             resize: function(node, size) {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js
index 4c568649d..a0a6ec08e 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js
@@ -30,13 +30,6 @@
                 }
                 RED.editor.buildEditForm(content,formStyle,nodeType,i18nNamespace,node);
 
-                if (nodeType === "subflow-template") {
-                    // This is the 'edit properties' dialog for a subflow template
-                    // TODO: this needs to happen later in the dialog open sequence
-                    //       so that credentials can be loaded prior to building the form
-                    RED.subflow.buildEditForm("subflow-template", node);
-                }
-
                 return content;
             },
             resize: function(node, size) {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js
new file mode 100644
index 000000000..eefa82730
--- /dev/null
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js
@@ -0,0 +1,63 @@
+;(function() {
+
+    RED.editor.registerEditorPane("editor-tab-subflow-properties", function() {
+        return {
+            label: RED._("editor-tab.properties"),
+            name: RED._("editor-tab.properties"),
+            iconClass: "fa fa-cog",
+            create: function(container, node) {
+                var content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
+
+                var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(content);
+                $('<div class="form-row">'+
+                  '<label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label>'+
+                  '<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">'+
+                  '</div>').appendTo(dialogForm);
+
+                var row = $('<div class="form-row node-text-editor-row">'+
+                            '<label for="node-input-info" data-i18n="editor:workspace.info" style="width:300px;"></label>'+
+                            '<div style="min-height:150px;" class="node-text-editor" id="node-input-info"></div>'+
+                            '</div>').appendTo(dialogForm);
+                this.tabflowEditor = RED.editor.createEditor({
+                    id: 'node-input-info',
+                    mode: 'ace/mode/markdown',
+                    value: ""
+                });
+
+                $('<input type="text" style="display: none;" />').prependTo(dialogForm);
+                dialogForm.on("submit", function(e) { e.preventDefault();});
+
+                $("#node-input-name").val(node.label);
+                RED.text.bidi.prepareInput($("#node-input-name"));
+                this.tabflowEditor.getSession().setValue(node.info || "", -1);
+                return content;
+            },
+            resize: function(node, size) {
+                $("#node-input-info").css("height", (size.height-70)+"px");
+                this.tabflowEditor.resize();
+            },
+            close: function(node) {
+                this.tabflowEditor.destroy();
+            },
+            apply: function(workspace, editState) {
+                var label = $( "#node-input-name" ).val();
+
+                if (workspace.label != label) {
+                    editState.changes.label = workspace.label;
+                    editState.changed = true;
+                    workspace.label = label;
+                }
+
+                var info = this.tabflowEditor.getValue();
+                if (workspace.info !== info) {
+                    editState.changes.info = workspace.info;
+                    editState.changed = true;
+                    workspace.info = info;
+                }
+                $("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('red-ui-workspace-disabled',!!workspace.disabled);
+                $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!workspace.disabled);
+
+            }
+        }
+    });
+})();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js b/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js
index c236e4f89..58fca2cb4 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js
@@ -16,8 +16,6 @@
 
 RED.subflow = (function() {
 
-    var currentLocale = "en-US";
-
     var _subflowEditTemplate = '<script type="text/x-red" data-template-name="subflow">'+
         '<div class="form-row">'+
             '<label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label>'+
@@ -918,588 +916,11 @@ RED.subflow = (function() {
         locales.val(locale);
 
         locales.on("change", function() {
-            currentLocale = $(this).val();
-            var items = $("#node-input-env-container").editableList("items");
-            items.each(function (i, item) {
-                var entry = $(this).data('data');
-                var labelField = entry.ui.labelField;
-                labelField.val(lookupLabel(entry.ui.label, "", currentLocale));
-                if (labelField.timeout) {
-                    clearTimeout(labelField.timeout);
-                    delete labelField.timeout;
-                }
-                labelField.addClass("input-updated");
-                labelField.timeout = setTimeout(function() {
-                    delete labelField.timeout
-                    labelField.removeClass("input-updated");
-                },3000);
-            });
+            RED.editor.envVarList.setLocale($(this).val(), $("#node-input-env-container"));
         });
+        RED.editor.envVarList.setLocale(locale);
     }
 
-    var DEFAULT_ENV_TYPE_LIST = ['str','num','bool','json','bin','env'];
-    var DEFAULT_ENV_TYPE_LIST_INC_CRED = ['str','num','bool','json','bin','env','cred'];
-
-    /**
-     * Create env var edit interface
-     * @param container - container
-     * @param node - subflow node
-     */
-    function buildPropertiesList(envContainer, node) {
-
-        var isTemplateNode = (node.type === "subflow");
-
-        if (isTemplateNode) {
-            buildEnvControl(envContainer, node);
-        }
-        envContainer
-            .css({
-                'min-height':'150px',
-                'min-width':'450px'
-            })
-            .editableList({
-                header: isTemplateNode?$('<div><div><div></div><div data-i18n="common.label.name"></div><div data-i18n="editor-tab.defaultValue"></div><div></div></div></div>'):undefined,
-                addItem: function(container, i, opt) {
-                    // If this is an instance node, these are properties unique to
-                    // this instance - ie opt.parent will not be defined.
-
-                    if (isTemplateNode) {
-                        container.addClass("red-ui-editor-subflow-env-editable")
-                    }
-
-                    var envRow = $('<div/>').appendTo(container);
-                    var nameField = null;
-                    var valueField = null;
-
-                    nameField = $('<input/>', {
-                        class: "node-input-env-name",
-                        type: "text",
-                        placeholder: RED._("common.label.name")
-                    }).attr("autocomplete","disable").appendTo(envRow).val(opt.name);
-                    valueField = $('<input/>',{
-                        style: "width:100%",
-                        class: "node-input-env-value",
-                        type: "text",
-                    }).attr("autocomplete","disable").appendTo(envRow)
-                    valueField.typedInput({default:'str',types:isTemplateNode?DEFAULT_ENV_TYPE_LIST:DEFAULT_ENV_TYPE_LIST_INC_CRED});
-                    valueField.typedInput('type', opt.type);
-                    if (opt.type === "cred") {
-                        if (opt.value) {
-                            valueField.typedInput('value', opt.value);
-                        } else if (node.credentials && node.credentials[opt.name]) {
-                            valueField.typedInput('value', node.credentials[opt.name]);
-                        } else if (node.credentials && node.credentials['has_'+opt.name]) {
-                            valueField.typedInput('value', "__PWRD__");
-                        } else {
-                            valueField.typedInput('value', "");
-                        }
-                    } else {
-                        valueField.typedInput('value', opt.value);
-                    }
-
-
-                    opt.nameField = nameField;
-                    opt.valueField = valueField;
-
-                    var actionButton = $('<a/>',{href:"#",class:"red-ui-editableList-item-remove red-ui-button red-ui-button-small"}).appendTo(envRow);
-                    $('<i/>',{class:"fa "+(opt.parent?"fa-reply":"fa-remove")}).appendTo(actionButton);
-                    var removeTip = RED.popover.tooltip(actionButton,RED._("subflow.env.remove"));
-                    actionButton.on("click", function(evt) {
-                        evt.preventDefault();
-                        removeTip.close();
-                        container.parent().addClass("red-ui-editableList-item-deleting")
-                        container.fadeOut(300, function() {
-                            envContainer.editableList('removeItem',opt);
-                        });
-                    });
-
-                    if (isTemplateNode) {
-                        // Add the UI customisation row
-                        // if `opt.ui` does not exist, then apply defaults. If these
-                        // defaults do not change then they will get stripped off
-                        // before saving.
-                        if (opt.type === 'cred') {
-                            opt.ui = opt.ui || {
-                                icon: "",
-                                type: "cred"
-                            }
-                            opt.ui.type = "cred";
-                        } else {
-                            opt.ui = opt.ui || {
-                                icon: "",
-                                type: "input",
-                                opts: {types:DEFAULT_ENV_TYPE_LIST}
-                            }
-                        }
-                        opt.ui.label = opt.ui.label || {};
-                        opt.ui.type = opt.ui.type || "input";
-
-                        var uiRow = $('<div/>').appendTo(container).hide();
-                        // save current info for reverting on cancel
-                        // var copy = $.extend(true, {}, ui);
-
-                         $('<a href="#"><i class="fa fa-angle-right"></a>').prependTo(envRow).on("click", function (evt) {
-                            evt.preventDefault();
-                            if ($(this).hasClass('expanded')) {
-                                uiRow.slideUp();
-                                $(this).removeClass('expanded');
-                            } else {
-                                uiRow.slideDown();
-                                $(this).addClass('expanded');
-                            }
-                        });
-
-                        buildEnvEditRow(uiRow, opt.ui, nameField, valueField);
-                        nameField.trigger('change');
-                    }
-                },
-                sortable: ".red-ui-editableList-item-handle",
-                removable: false
-            });
-        var parentEnv = {};
-        var envList = [];
-        if (/^subflow:/.test(node.type)) {
-            var subflowDef = RED.nodes.subflow(node.type.substring(8));
-            if (subflowDef.env) {
-                subflowDef.env.forEach(function(env) {
-                    var item = {
-                        name:env.name,
-                        parent: {
-                            type: env.type,
-                            value: env.value,
-                            ui: env.ui
-                        }
-                    }
-                    envList.push(item);
-                    parentEnv[env.name] = item;
-                })
-            }
-        }
-
-        if (node.env) {
-            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,
-                        ui: env.ui
-                    });
-                }
-            }
-        }
-        envList.forEach(function(env) {
-            if (env.parent && env.parent.ui && env.parent.ui.type === 'hide') {
-                return;
-            }
-            if (!isTemplateNode && env.parent) {
-                return;
-            }
-            envContainer.editableList('addItem', JSON.parse(JSON.stringify(env)));
-        });
-    }
-
-    /**
-     * Create UI edit interface for environment variable
-     * @param container - container
-     * @param env - env var definition
-     * @param nameField - name field of env var
-     * @param valueField - value field of env var
-     */
-     function buildEnvEditRow(container, ui, nameField, valueField) {
-         container.addClass("red-ui-editor-subflow-env-ui-row")
-         var topRow = $('<div></div>').appendTo(container);
-         $('<div></div>').appendTo(topRow);
-         $('<div>').text(RED._("editor.icon")).appendTo(topRow);
-         $('<div>').text(RED._("editor.label")).appendTo(topRow);
-         $('<div>').text(RED._("editor.inputType")).appendTo(topRow);
-
-         var row = $('<div></div>').appendTo(container);
-         $('<div><i class="red-ui-editableList-item-handle fa fa-bars"></i></div>').appendTo(row);
-         var typeOptions = {
-             'input': {types:DEFAULT_ENV_TYPE_LIST},
-             'select': {opts:[]},
-             'spinner': {},
-             'cred': {}
-         };
-         if (ui.opts) {
-             typeOptions[ui.type] = ui.opts;
-         } else {
-             // Pick up the default values if not otherwise provided
-             ui.opts = typeOptions[ui.type];
-         }
-         var iconCell = $('<div></div>').appendTo(row);
-
-         var iconButton = $('<a href="#"></a>').appendTo(iconCell);
-         iconButton.on("click", function(evt) {
-             evt.preventDefault();
-             var icon = ui.icon || "";
-             var iconPath = (icon ? RED.utils.separateIconPath(icon) : {});
-             RED.editor.iconPicker.show(iconButton, null, iconPath, true, function (newIcon) {
-                 iconButton.empty();
-                 var path = newIcon || "";
-                 var newPath = RED.utils.separateIconPath(path);
-                 if (newPath) {
-                     $('<i class="fa"></i>').addClass(newPath.file).appendTo(iconButton);
-                 }
-                 ui.icon = path;
-             });
-         })
-
-         if (ui.icon) {
-             var newPath = RED.utils.separateIconPath(ui.icon);
-             $('<i class="fa '+newPath.file+'"></i>').appendTo(iconButton);
-         }
-
-         var labelCell = $('<div></div>').appendTo(row);
-
-         var label = ui.label && ui.label[currentLocale] || "";
-         var labelInput = $('<input type="text">').val(label).appendTo(labelCell);
-         ui.labelField = labelInput;
-         labelInput.on('change', function(evt) {
-             ui.label = ui.label || {};
-             var val = $(this).val().trim();
-             if (val === "") {
-                 delete ui.label[currentLocale];
-             } else {
-                 ui.label[currentLocale] = val;
-             }
-         })
-         var labelIcon = $('<span class="red-ui-editor-subflow-env-lang-icon"><i class="fa fa-language"></i></span>').appendTo(labelCell);
-         RED.popover.tooltip(labelIcon,function() {
-             var langs = Object.keys(ui.label);
-             var content = $("<div>");
-             if (langs.indexOf(currentLocale) === -1) {
-                 langs.push(currentLocale);
-                 langs.sort();
-             }
-             langs.forEach(function(l) {
-                 var row = $('<div>').appendTo(content);
-                 $('<span>').css({display:"inline-block",width:"120px"}).text(RED._("languages."+l)+(l===currentLocale?"*":"")).appendTo(row);
-                 $('<span>').text(ui.label[l]||"").appendTo(row);
-             });
-             return content;
-         })
-
-         nameField.on('change',function(evt) {
-            labelInput.attr("placeholder",$(this).val())
-        });
-
-        var inputCell = $('<div></div>').appendTo(row);
-        var inputCellInput = $('<input type="text">').css("width","100%").appendTo(inputCell);
-        if (ui.type === "input") {
-            inputCellInput.val(ui.opts.types.join(","));
-        }
-        var checkbox;
-        var selectBox;
-
-        inputCellInput.typedInput({
-            types: [
-                {
-                    value:"input",
-                    label:RED._("editor.inputs.input"), icon:"fa fa-i-cursor",showLabel:false,multiple:true,options:[
-                        {value:"str",label:RED._("editor.types.str"),icon:"red/images/typedInput/az.svg"},
-                        {value:"num",label:RED._("editor.types.num"),icon:"red/images/typedInput/09.svg"},
-                        {value:"bool",label:RED._("editor.types.bool"),icon:"red/images/typedInput/bool.svg"},
-                        {value:"json",label:RED._("editor.types.json"),icon:"red/images/typedInput/json.svg"},
-                        {value: "bin",label: RED._("editor.types.bin"),icon: "red/images/typedInput/bin.svg"},
-                        {value: "env",label: RED._("editor.types.env"),icon: "red/images/typedInput/env.svg"},
-                        {value: "cred",label: RED._("editor.types.cred"),icon: "fa fa-lock"}
-                    ],
-                    default: DEFAULT_ENV_TYPE_LIST,
-                    valueLabel: function(container,value) {
-                        container.css("padding",0);
-                        var innerContainer = $('<div class="red-ui-editor-subflow-env-input-type"></div>').appendTo(container);
-
-                        var input = $('<div class="placeholder-input">').appendTo(innerContainer);
-                        $('<span><i class="fa fa-i-cursor"></i></span>').appendTo(input);
-                        if (value.length) {
-                            value.forEach(function(v) {
-                                if (!/^fa /.test(v.icon)) {
-                                    $('<img>',{src:v.icon,style:"max-width:14px; padding: 0 3px; margin-top:-4px; margin-left: 1px"}).appendTo(input);
-                                } else {
-                                    var s = $('<span>',{style:"max-width:14px; padding: 0 3px; margin-top:-4px; margin-left: 1px"}).appendTo(input);
-                                    $("<i>",{class: v.icon}).appendTo(s);
-                                }
-                            })
-                        } else {
-                            $('<span class="red-ui-editor-subflow-env-input-type-placeholder"></span>').text(RED._("editor.selectType")).appendTo(input);
-                        }
-                    }
-                },
-                {
-                    value: "cred",
-                    label: RED._("typedInput.type.cred"), icon:"fa fa-lock", showLabel: false,
-                    valueLabel: function(container,value) {
-                        container.css("padding",0);
-                        var innerContainer = $('<div class="red-ui-editor-subflow-env-input-type">').css({
-                            "border-top-right-radius": "4px",
-                            "border-bottom-right-radius": "4px"
-                        }).appendTo(container);
-                        $('<div class="placeholder-input">').html("&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;").appendTo(innerContainer);
-                    }
-                },
-                {
-                    value:"select",
-                    label:RED._("editor.inputs.select"), icon:"fa fa-tasks",showLabel:false,
-                    valueLabel: function(container,value) {
-                        container.css("padding","0");
-
-                        selectBox = $('<select></select>').appendTo(container);
-                        if (ui.opts && Array.isArray(ui.opts.opts)) {
-                            ui.opts.opts.forEach(function(o) {
-                                var label = lookupLabel(o.l, o.l["en-US"]||o.v, currentLocale);
-                                // $('<option>').val((o.t||'str')+":"+o.v).text(label).appendTo(selectBox);
-                                $('<option>').val(o.v).text(label).appendTo(selectBox);
-                            })
-                        }
-                        selectBox.on('change', function(evt) {
-                            var v = selectBox.val();
-                            // var parts = v.split(":");
-                            // var t = parts.shift();
-                            // v = parts.join(":");
-                            //
-                            // valueField.typedInput("type",'str')
-                            valueField.typedInput("value",v)
-                        });
-                        selectBox.val(valueField.typedInput("value"));
-                        // selectBox.val(valueField.typedInput('type')+":"+valueField.typedInput("value"));
-                    },
-                    expand: {
-                        icon: "fa-caret-down",
-                        minWidth: 400,
-                        content: function(container) {
-                            var content = $('<div class="red-ui-editor-subflow-ui-edit-panel">').appendTo(container);
-                            var optList = $('<ol>').appendTo(content).editableList({
-                                header:$("<div><div>"+RED._("editor.select.label")+"</div><div>"+RED._("editor.select.value")+"</div></div>"),
-                                addItem: function(row,index,itemData) {
-                                    var labelDiv = $('<div>').appendTo(row);
-                                    var label = lookupLabel(itemData.l, "", currentLocale);
-                                    itemData.label = $('<input type="text">').val(label).appendTo(labelDiv);
-                                    itemData.label.on('keydown', function(evt) {
-                                        if (evt.keyCode === 13) {
-                                            itemData.input.focus();
-                                            evt.preventDefault();
-                                        }
-                                    });
-                                    var labelIcon = $('<span class="red-ui-editor-subflow-env-lang-icon"><i class="fa fa-language"></i></span>').appendTo(labelDiv);
-                                    RED.popover.tooltip(labelIcon,function() {
-                                        return currentLocale;
-                                    })
-                                    itemData.input = $('<input type="text">').val(itemData.v).appendTo(row);
-
-                                    // Problem using a TI here:
-                                    //  - this is in a popout panel
-                                    //  - clicking the expand button in the TI will close the parent edit tray
-                                    //    and open the type editor.
-                                    //  - but it leaves the popout panel over the top.
-                                    //  - there is no way to get back to the popout panel after closing the type editor
-                                    //.typedInput({default:itemData.t||'str', types:DEFAULT_ENV_TYPE_LIST});
-                                    itemData.input.on('keydown', function(evt) {
-                                        if (evt.keyCode === 13) {
-                                            // Enter or Tab
-                                            var index = optList.editableList('indexOf',itemData);
-                                            var length = optList.editableList('length');
-                                            if (index + 1 === length) {
-                                                var newItem = {};
-                                                optList.editableList('addItem',newItem);
-                                                setTimeout(function() {
-                                                    if (newItem.label) {
-                                                        newItem.label.focus();
-                                                    }
-                                                },100)
-                                            } else {
-                                                var nextItem = optList.editableList('getItemAt',index+1);
-                                                if (nextItem.label) {
-                                                    nextItem.label.focus()
-                                                }
-                                            }
-                                            evt.preventDefault();
-                                        }
-                                    });
-                                },
-                                sortable: true,
-                                removable: true,
-                                height: 160
-                            })
-                            if (ui.opts.opts.length > 0) {
-                                ui.opts.opts.forEach(function(o) {
-                                    optList.editableList('addItem',$.extend(true,{},o))
-                                })
-                            } else {
-                                optList.editableList('addItem',{})
-                            }
-                            return {
-                                onclose: function() {
-                                    var items = optList.editableList('items');
-                                    var vals = [];
-                                    items.each(function (i,el) {
-                                        var data = el.data('data');
-                                        var l = data.label.val().trim();
-                                        var v = data.input.val();
-                                        // var t = data.input.typedInput('type');
-                                        // var v = data.input.typedInput('value');
-                                        if (l.length > 0) {
-                                            data.l = data.l || {};
-                                            data.l[currentLocale] = l;
-                                        }
-                                        data.v = v;
-
-                                        if (l.length > 0 || v.length > 0) {
-                                            var val = {l:data.l,v:data.v};
-                                            // if (t !== 'str') {
-                                            //     val.t = t;
-                                            // }
-                                            vals.push(val);
-                                        }
-                                    });
-                                    ui.opts.opts = vals;
-                                    inputCellInput.typedInput('value',Date.now())
-                                }
-                            }
-                        }
-                    }
-                },
-                {
-                    value:"checkbox",
-                    label:RED._("editor.inputs.checkbox"), icon:"fa fa-check-square-o",showLabel:false,
-                    valueLabel: function(container,value) {
-                        container.css("padding",0);
-                        checkbox = $('<input type="checkbox">').appendTo(container);
-                        checkbox.on('change', function(evt) {
-                            valueField.typedInput('value',$(this).prop('checked')?"true":"false");
-                        })
-                        checkbox.prop('checked',valueField.typedInput('value')==="true");
-                    }
-                },
-                {
-                    value:"spinner",
-                    label:RED._("editor.inputs.spinner"), icon:"fa fa-sort-numeric-asc", showLabel:false,
-                    valueLabel: function(container,value) {
-                        container.css("padding",0);
-                        var innerContainer = $('<div class="red-ui-editor-subflow-env-input-type"></div>').appendTo(container);
-
-                        var input = $('<div class="placeholder-input">').appendTo(innerContainer);
-                        $('<span><i class="fa fa-sort-numeric-asc"></i></span>').appendTo(input);
-
-                        var min = ui.opts && ui.opts.min;
-                        var max = ui.opts && ui.opts.max;
-                        var label = "";
-                        if (min !== undefined && max !== undefined) {
-                            label = Math.min(min,max)+" - "+Math.max(min,max);
-                        } else if (min !== undefined) {
-                            label = "> "+min;
-                        } else if (max !== undefined) {
-                            label = "< "+max;
-                        }
-                        $('<span>').css("margin-left","15px").text(label).appendTo(input);
-                    },
-                    expand: {
-                        icon: "fa-caret-down",
-                        content: function(container) {
-                            var content = $('<div class="red-ui-editor-subflow-ui-edit-panel">').appendTo(container);
-                            content.css("padding","8px 5px")
-                            var min = ui.opts.min;
-                            var max = ui.opts.max;
-                            var minInput = $('<input type="number" style="margin-bottom:0; width:60px">');
-                            minInput.val(min);
-                            var maxInput = $('<input type="number" style="margin-bottom:0; width:60px">');
-                            maxInput.val(max);
-                            $('<div class="form-row" style="margin-bottom:3px"><label>'+RED._("editor.spinner.min")+'</label></div>').append(minInput).appendTo(content);
-                            $('<div class="form-row" style="margin-bottom:0"><label>'+RED._("editor.spinner.max")+'</label></div>').append(maxInput).appendTo(content);
-                            return {
-                                onclose: function() {
-                                    var min = minInput.val().trim();
-                                    var max = maxInput.val().trim();
-                                    if (min !== "") {
-                                        ui.opts.min = parseInt(min);
-                                    } else {
-                                        delete ui.opts.min;
-                                    }
-                                    if (max !== "") {
-                                        ui.opts.max = parseInt(max);
-                                    } else {
-                                        delete ui.opts.max;
-                                    }
-                                    inputCellInput.typedInput('value',Date.now())
-                                }
-                            }
-                        }
-                    }
-                },
-                {
-                    value:"none",
-                    label:RED._("editor.inputs.none"), icon:"fa fa-times",hasValue:false
-                },
-                {
-                    value:"hide",
-                    label:RED._("editor.inputs.hidden"), icon:"fa fa-ban",hasValue:false
-                }
-            ],
-            default: 'none'
-        }).on("typedinputtypechange", function(evt,type) {
-            ui.type = $(this).typedInput("type");
-            ui.opts = typeOptions[ui.type];
-            if (ui.type === 'input') {
-                // In the case of 'input' type, the typedInput uses the multiple-option
-                // mode. Its value needs to be set to a comma-separately list of the
-                // selected options.
-                inputCellInput.typedInput('value',ui.opts.types.join(","))
-            } else {
-                // No other type cares about `value`, but doing this will
-                // force a refresh of the label now that `ui.opts` has
-                // been updated.
-                inputCellInput.typedInput('value',Date.now())
-            }
-
-            switch (ui.type) {
-                case 'input':
-                    valueField.typedInput('types',ui.opts.types);
-                    break;
-                case 'select':
-                    valueField.typedInput('types',['str']);
-                    break;
-                case 'checkbox':
-                    valueField.typedInput('types',['bool']);
-                    break;
-                case 'spinner':
-                    valueField.typedInput('types',['num']);
-                    break;
-                case 'cred':
-                    valueField.typedInput('types',['cred']);
-                    break;
-                default:
-                    valueField.typedInput('types',DEFAULT_ENV_TYPE_LIST)
-            }
-            if (ui.type === 'checkbox') {
-                valueField.typedInput('type','bool');
-            } else if (ui.type === 'spinner') {
-                valueField.typedInput('type','num');
-            }
-            if (ui.type !== 'checkbox') {
-                checkbox = null;
-            }
-
-        }).on("change", function(evt,type) {
-            if (ui.type === 'input') {
-                var types = inputCellInput.typedInput('value');
-                ui.opts.types = (types === "") ? ["str"] : types.split(",");
-                valueField.typedInput('types',ui.opts.types);
-            }
-        });
-        valueField.on("change", function(evt) {
-            if (checkbox) {
-                checkbox.prop('checked',$(this).typedInput('value')==="true")
-            }
-        })
-        // Set the input to the right type. This will trigger the 'typedinputtypechange'
-        // event handler (just above ^^) to update the value if needed
-        inputCellInput.typedInput('type',ui.type)
-    }
 
     function buildEnvUIRow(row, tenv, ui, node) {
         ui.label = ui.label||{};
@@ -1508,7 +929,7 @@ RED.subflow = (function() {
             ui.opts = {};
         } else if (!ui.type) {
             ui.type = "input";
-            ui.opts = {types:DEFAULT_ENV_TYPE_LIST}
+            ui.opts = { types: RED.editor.envVarList.DEFAULT_ENV_TYPE_LIST }
         } else {
             if (!ui.opts) {
                 ui.opts = (ui.type === "select") ? {opts:[]} : {};
@@ -1517,7 +938,7 @@ RED.subflow = (function() {
 
         var labels = ui.label || {};
         var locale = RED.i18n.lang();
-        var labelText = lookupLabel(labels, labels["en-US"]||tenv.name, locale);
+        var labelText = RED.editor.envVarList.lookupLabel(labels, labels["en-US"]||tenv.name, locale);
         var label = $('<label>').appendTo(row);
         $('<span>&nbsp;</span>').appendTo(row);
         var labelContainer = $('<span></span>').appendTo(label);
@@ -1570,7 +991,7 @@ RED.subflow = (function() {
                 input = $('<select>').css('width','70%').appendTo(row);
                 if (ui.opts.opts) {
                     ui.opts.opts.forEach(function(o) {
-                        $('<option>').val(o.v).text(lookupLabel(o.l, o.l['en-US']||o.v, locale)).appendTo(input);
+                        $('<option>').val(o.v).text(RED.editor.envVarList.lookupLabel(o.l, o.l['en-US']||o.v, locale)).appendTo(input);
                     })
                 }
                 input.val(val.value);
@@ -1636,9 +1057,8 @@ RED.subflow = (function() {
      * @param uiContainer - container for UI
      * @param envList - env var definitions of template
      */
-    function buildEnvUI(uiContainer, envList,node) {
+    function buildEnvUI(uiContainer, envList, node) {
         uiContainer.empty();
-        var elementID = 0;
         for (var i = 0; i < envList.length; i++) {
             var tenv = envList[i];
             if (tenv.ui && tenv.ui.type === 'hide') {
@@ -1646,8 +1066,6 @@ RED.subflow = (function() {
             }
             var row = $("<div/>", { class: "form-row" }).appendTo(uiContainer);
             buildEnvUIRow(row,tenv, tenv.ui || {}, node);
-
-            // console.log(ui);
         }
     }
     // buildEnvUI
@@ -1683,7 +1101,7 @@ RED.subflow = (function() {
                             //     icon: "",
                             //     label: {},
                             //     type: "input",
-                            //     opts: {types:DEFAULT_ENV_TYPE_LIST}
+                            //     opts: {types:RED.editor.envVarList.DEFAULT_ENV_TYPE_LIST}
                             // }
                             if (!ui.icon) {
                                 delete ui.icon;
@@ -1693,7 +1111,7 @@ RED.subflow = (function() {
                             }
                             switch (ui.type) {
                                 case "input":
-                                    if (JSON.stringify(ui.opts) === JSON.stringify({types:DEFAULT_ENV_TYPE_LIST})) {
+                                    if (JSON.stringify(ui.opts) === JSON.stringify({types:RED.editor.envVarList.DEFAULT_ENV_TYPE_LIST})) {
                                         // This is the default input config. Delete it as it will
                                         // be applied automatically
                                         delete ui.type;
@@ -1820,7 +1238,7 @@ RED.subflow = (function() {
                     ui.type = "cred";
                 } else {
                     ui.type = "input";
-                    ui.opts = {types:DEFAULT_ENV_TYPE_LIST}
+                    ui.opts = {types:RED.editor.envVarList.DEFAULT_ENV_TYPE_LIST}
                 }
             } else {
                 ui.opts = ui.opts || {};
@@ -1867,36 +1285,15 @@ RED.subflow = (function() {
         return 'node-input-subflow-env-'+name.replace(/[^a-z0-9-_]/ig,"_");
     }
 
-    /**
-     * Lookup text for specific locale
-     * @param labels - dict of labels
-     * @param defaultLabel - fallback label if not found
-     * @param locale - target locale
-     * @returns {string} text for specified locale
-     */
-    function lookupLabel(labels, defaultLabel, locale) {
-        if (labels) {
-            if (labels[locale]) {
-                return labels[locale];
-            }
-            if (locale) {
-                var lang = locale.substring(0, 2);
-                if (labels[lang]) {
-                    return labels[lang];
-                }
-            }
-        }
-        return defaultLabel;
-    }
-
+    // Called by subflow.oneditprepare for both instances and templates
     function buildEditForm(type,node) {
         if (type === "subflow-template") {
-            // This is called by the `properties` edit pane when
-            // editing a subflow template.
-            buildPropertiesList($('#node-input-env-container'), node);
+            // This is the tabbed UI that offers the env list - with UI options
+            // plus the preview tab
+            buildEnvControl($('#node-input-env-container'), node);
+            RED.editor.envVarList.create($('#node-input-env-container'), node);
         } else  if (type === "subflow") {
-            // This gets called by the subflow type `oneditprepare` function
-            // registered in nodes.js#addSubflow()
+            // This is the rendered version of the subflow env var list
             buildEnvUI($("#subflow-input-ui"), getSubflowInstanceParentEnv(node), node);
         }
     }
@@ -1912,7 +1309,6 @@ RED.subflow = (function() {
         removeStatus: removeSubflowStatus,
 
         buildEditForm: buildEditForm,
-        buildPropertiesList: buildPropertiesList,
 
         exportSubflowTemplateEnv: exportEnvList,
         exportSubflowInstanceEnv: exportSubflowInstanceEnv

From c3d0b1114fb570a95365b2550ce13f8d2ff54cad Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 2 Sep 2021 16:37:13 +0100
Subject: [PATCH 21/27] Fix jshint error

---
 .../editor-client/src/js/ui/editors/panes/properties.js          | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js
index a0a6ec08e..bd393c9df 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js
@@ -46,6 +46,7 @@
             },
             apply: function(editing_node, editState) {
                 var newValue;
+                var d;
                 if (editing_node._def.defaults) {
                     for (d in editing_node._def.defaults) {
                         if (editing_node._def.defaults.hasOwnProperty(d)) {

From 4e92492165c117e9d48adb74253c740b7d8483b9 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 2 Sep 2021 21:44:06 +0100
Subject: [PATCH 22/27] Edit panes should not need to create own tray content
 div

---
 .../editor-client/src/js/ui/editor.js         | 27 +++++++++++++------
 .../src/js/ui/editors/panes/appearance.js     |  3 +--
 .../src/js/ui/editors/panes/description.js    |  5 ++--
 .../js/ui/editors/panes/envVarProperties.js   |  4 +--
 .../src/js/ui/editors/panes/flowProperties.js |  5 +---
 .../src/js/ui/editors/panes/properties.js     |  5 +---
 .../src/js/ui/editors/panes/subflowModule.js  |  4 +--
 .../js/ui/editors/panes/subflowProperties.js  |  5 +---
 8 files changed, 27 insertions(+), 31 deletions(-)

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 3b61b861a..d03203e6d 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
@@ -26,7 +26,7 @@ RED.editor = (function() {
 
     var customEditTypes = {};
     var editPanes = {};
-    var filteredEditPanes = [];
+    var filteredEditPanes = {};
 
     var editTrayWidthCache = {};
 
@@ -414,10 +414,10 @@ RED.editor = (function() {
                 element:editorTabEl,
                 onchange:function(tab) {
                     editorContent.children().hide();
+                    tab.content.show();
                     if (tab.onchange) {
                         tab.onchange.call(tab);
                     }
-                    tab.content.show();
                     if (finishedBuilding) {
                         RED.tray.resize();
                     }
@@ -427,6 +427,16 @@ RED.editor = (function() {
             });
 
             var activeEditPanes = [];
+
+            nodeEditPanes = nodeEditPanes.slice();
+            for (var i in filteredEditPanes) {
+                if (filteredEditPanes.hasOwnProperty(i)) {
+                    if (filteredEditPanes[i](node)) {
+                        nodeEditPanes.push(i);
+                    }
+                }
+            }
+
             nodeEditPanes.forEach(function(id) {
                 try {
                     var editPaneDefinition = editPanes[id];
@@ -434,15 +444,17 @@ RED.editor = (function() {
                         if (typeof editPaneDefinition === 'function') {
                             editPaneDefinition = editPaneDefinition.call(editPaneDefinition);
                         }
+                        var editPaneContent = $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide();
+                        editPaneDefinition.create.call(editPaneDefinition,editPaneContent,node);
                         var editTab = {
                             id: id,
                             label: editPaneDefinition.label,
                             name: editPaneDefinition.name,
                             iconClass: editPaneDefinition.iconClass,
-                            content: editPaneDefinition.create.call(editPaneDefinition,editorContent,node).hide(),
+                            content: editPaneContent,
                             onchange: function() {
-                                if (editPaneDefinition.onchange) {
-                                    editPaneDefinition.onchange.call(editPaneDefinition,node)
+                                if (editPaneDefinition.show) {
+                                    editPaneDefinition.show.call(editPaneDefinition,node)
                                 }
                             }
                         }
@@ -1901,10 +1913,9 @@ RED.editor = (function() {
 
         registerEditorPane: function(type, definition, filter) {
             if (filter) {
-                filteredEditPanes.push({type, definition, filter})
-            } else {
-                editPanes[type] = definition;
+                filteredEditPanes[type] = filter
             }
+            editPanes[type] = definition;
         }
     }
 })();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js
index 2d8c3ca00..faca319e2 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js
@@ -6,7 +6,7 @@
             name: RED._("editor-tab.appearance"),
             iconClass: "fa fa-object-group",
             create: function(container, node) {
-                this.content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
+                this.content = container;
                 buildAppearanceForm(this.content,node);
 
                 if (node.type === 'subflow') {
@@ -20,7 +20,6 @@
                         this.isDefaultIcon = true;
                     }
                 }
-                return this.content;
             },
             resize: function(node, size) {
 
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/description.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/description.js
index e7402e5ab..3163ff23d 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/description.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/description.js
@@ -7,9 +7,8 @@
             iconClass: "fa fa-file-text-o",
 
             create: function(container, node) {
-                var content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
-                this.editor = buildDescriptionForm(content,node);
-                return content;
+                this.editor = buildDescriptionForm(container,node);
+                RED.e = this.editor;
             },
             resize: function(node, size) {
                 this.editor.resize();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/envVarProperties.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/envVarProperties.js
index 4e2240580..77a00365a 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/envVarProperties.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/envVarProperties.js
@@ -6,12 +6,10 @@
             name: RED._("editor-tab.envProperties"),
             iconClass: "fa fa-list",
             create: function(container, node) {
-                var content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
-                var form = $('<form class="dialog-form form-horizontal"></form>').appendTo(content);
+                var form = $('<form class="dialog-form form-horizontal"></form>').appendTo(container);
                 var listContainer = $('<div class="form-row node-input-env-container-row"></div>').appendTo(form);
                 this.list = $('<ol></ol>').appendTo(listContainer);
                 RED.editor.envVarList.create(this.list, node);
-                return content;
             },
             resize: function(node, size) {
                 this.list.editableList('height',size.height);
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/flowProperties.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/flowProperties.js
index c72eed7a6..cd0d2250d 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/flowProperties.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/flowProperties.js
@@ -6,9 +6,7 @@
             name: RED._("editor-tab.properties"),
             iconClass: "fa fa-cog",
             create: function(container, node) {
-                var content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
-
-                var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(content);
+                var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(container);
                 $('<div class="form-row">'+
                   '<label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label>'+
                   '<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">'+
@@ -30,7 +28,6 @@
                 $("#node-input-name").val(node.label);
                 RED.text.bidi.prepareInput($("#node-input-name"));
                 this.tabflowEditor.getSession().setValue(node.info || "", -1);
-                return content;
             },
             resize: function(node, size) {
                 $("#node-input-info").css("height", (size.height-70)+"px");
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js
index bd393c9df..ab3efbd65 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js
@@ -6,7 +6,6 @@
             name: RED._("editor-tab.properties"),
             iconClass: "fa fa-cog",
             create: function(container, node) {
-                var content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
 
                 var nodeType = node.type;
                 if (node.type === "subflow") {
@@ -28,9 +27,7 @@
                     this.inputClass = "node-config-input";
                     formStyle = "node-config-dialog-edit-form";
                 }
-                RED.editor.buildEditForm(content,formStyle,nodeType,i18nNamespace,node);
-
-                return content;
+                RED.editor.buildEditForm(container,formStyle,nodeType,i18nNamespace,node);
             },
             resize: function(node, size) {
                 if (node && node._def.oneditresize) {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowModule.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowModule.js
index 4636862f6..dba482625 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowModule.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowModule.js
@@ -36,9 +36,7 @@
             name: RED._("editor-tab.module"),
             iconClass: "fa fa-cube",
             create: function(container, node) {
-                var content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
-                buildModuleForm(content, node);
-                return content;
+                buildModuleForm(container, node);
             },
             resize: function(node, size) {
             },
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js
index eefa82730..33d7c43ff 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js
@@ -6,9 +6,7 @@
             name: RED._("editor-tab.properties"),
             iconClass: "fa fa-cog",
             create: function(container, node) {
-                var content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
-
-                var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(content);
+                var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(container);
                 $('<div class="form-row">'+
                   '<label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label>'+
                   '<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">'+
@@ -30,7 +28,6 @@
                 $("#node-input-name").val(node.label);
                 RED.text.bidi.prepareInput($("#node-input-name"));
                 this.tabflowEditor.getSession().setValue(node.info || "", -1);
-                return content;
             },
             resize: function(node, size) {
                 $("#node-input-info").css("height", (size.height-70)+"px");

From 87ac831c8ae0d8e0bff1ec37a606aa047ee34a9d Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 2 Sep 2021 21:59:30 +0100
Subject: [PATCH 23/27] Simplify edit pane api

---
 .../editor-client/src/js/ui/editor.js         | 36 +++++------
 .../src/js/ui/editors/panes/appearance.js     | 12 ++--
 .../src/js/ui/editors/panes/description.js    | 10 ++--
 .../js/ui/editors/panes/envVarProperties.js   | 10 ++--
 .../src/js/ui/editors/panes/flowProperties.js | 26 ++++----
 .../src/js/ui/editors/panes/properties.js     | 40 ++++++-------
 .../src/js/ui/editors/panes/subflowModule.js  | 10 ++--
 .../js/ui/editors/panes/subflowProperties.js  | 60 -------------------
 8 files changed, 72 insertions(+), 132 deletions(-)
 delete mode 100644 packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js

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 d03203e6d..4799de739 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
@@ -442,10 +442,10 @@ RED.editor = (function() {
                     var editPaneDefinition = editPanes[id];
                     if (editPaneDefinition) {
                         if (typeof editPaneDefinition === 'function') {
-                            editPaneDefinition = editPaneDefinition.call(editPaneDefinition);
+                            editPaneDefinition = editPaneDefinition.call(editPaneDefinition, node);
                         }
                         var editPaneContent = $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide();
-                        editPaneDefinition.create.call(editPaneDefinition,editPaneContent,node);
+                        editPaneDefinition.create.call(editPaneDefinition,editPaneContent);
                         var editTab = {
                             id: id,
                             label: editPaneDefinition.label,
@@ -454,7 +454,7 @@ RED.editor = (function() {
                             content: editPaneContent,
                             onchange: function() {
                                 if (editPaneDefinition.show) {
-                                    editPaneDefinition.show.call(editPaneDefinition,node)
+                                    editPaneDefinition.show.call(editPaneDefinition)
                                 }
                             }
                         }
@@ -876,7 +876,7 @@ RED.editor = (function() {
 
                         activeEditPanes.forEach(function(pane) {
                             if (pane.apply) {
-                                pane.apply.call(pane, editing_node, editState);
+                                pane.apply.call(pane, editState);
                             }
                         })
 
@@ -952,7 +952,7 @@ RED.editor = (function() {
                 var size = {width:form.width(),height:form.height()};
                 activeEditPanes.forEach(function(pane) {
                     if (pane.resize) {
-                        pane.resize.call(pane,editing_node, size);
+                        pane.resize.call(pane, size);
                     }
                 })
             },
@@ -1001,7 +1001,7 @@ RED.editor = (function() {
 
                 activeEditPanes.forEach(function(pane) {
                     if (pane.close) {
-                        pane.close.call(pane,editing_node);
+                        pane.close.call(pane);
                     }
                 })
 
@@ -1079,7 +1079,7 @@ RED.editor = (function() {
                 var size = {width:form.width(),height:form.height()};
                 activeEditPanes.forEach(function(pane) {
                     if (pane.resize) {
-                        pane.resize.call(pane, editing_config_node, size);
+                        pane.resize.call(pane, size);
                     }
                 })
             },
@@ -1168,7 +1168,7 @@ RED.editor = (function() {
 
                 activeEditPanes.forEach(function(pane) {
                     if (pane.close) {
-                        pane.close.call(pane,editing_config_node);
+                        pane.close.call(pane);
                     }
                 })
 
@@ -1274,7 +1274,7 @@ RED.editor = (function() {
 
                     activeEditPanes.forEach(function(pane) {
                         if (pane.apply) {
-                            pane.apply.call(pane, editing_config_node, editState);
+                            pane.apply.call(pane, editState);
                         }
                     })
 
@@ -1441,7 +1441,7 @@ RED.editor = (function() {
 
                         activeEditPanes.forEach(function(pane) {
                             if (pane.apply) {
-                                pane.apply.call(pane, editing_node, editState);
+                                pane.apply.call(pane, editState);
                             }
                         })
 
@@ -1524,7 +1524,7 @@ RED.editor = (function() {
                 var size = {width:form.width(),height:form.height()};
                 activeEditPanes.forEach(function(pane) {
                     if (pane.resize) {
-                        pane.resize.call(pane,editing_node, size);
+                        pane.resize.call(pane, size);
                     }
                 })
             },
@@ -1567,7 +1567,7 @@ RED.editor = (function() {
                 RED.workspaces.refresh();
                 activeEditPanes.forEach(function(pane) {
                     if (pane.close) {
-                        pane.close.call(pane,editing_node);
+                        pane.close.call(pane);
                     }
                 })
                 editStack.pop();
@@ -1613,7 +1613,7 @@ RED.editor = (function() {
 
                         activeEditPanes.forEach(function(pane) {
                             if (pane.apply) {
-                                pane.apply.call(pane, editing_node, editState);
+                                pane.apply.call(pane, editState);
                             }
                         })
 
@@ -1644,7 +1644,7 @@ RED.editor = (function() {
                 var size = {width:form.width(),height:form.height()};
                 activeEditPanes.forEach(function(pane) {
                     if (pane.resize) {
-                        pane.resize.call(pane,editing_node, size);
+                        pane.resize.call(pane, size);
                     }
                 })
             },
@@ -1676,7 +1676,7 @@ RED.editor = (function() {
                 RED.sidebar.info.refresh(editing_node);
                 activeEditPanes.forEach(function(pane) {
                     if (pane.close) {
-                        pane.close.call(pane,editing_node);
+                        pane.close.call(pane);
                     }
                 })
                 editStack.pop();
@@ -1730,7 +1730,7 @@ RED.editor = (function() {
 
                         activeEditPanes.forEach(function(pane) {
                             if (pane.apply) {
-                                pane.apply.call(pane, workspace, editState);
+                                pane.apply.call(pane, editState);
                             }
                         })
 
@@ -1773,7 +1773,7 @@ RED.editor = (function() {
                 var size = {width:form.width(),height:form.height()};
                 activeEditPanes.forEach(function(pane) {
                     if (pane.resize) {
-                        pane.resize.call(pane,editing_node, size);
+                        pane.resize.call(pane, size);
                     }
                 })
             },
@@ -1811,7 +1811,7 @@ RED.editor = (function() {
                 }
                 activeEditPanes.forEach(function(pane) {
                     if (pane.close) {
-                        pane.close.call(pane,editing_node);
+                        pane.close.call(pane);
                     }
                 })
                 var selection = RED.view.selection();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js
index faca319e2..8d32aa7ab 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js
@@ -1,11 +1,11 @@
 ;(function() {
 
-    RED.editor.registerEditorPane("editor-tab-appearance", function() {
+    RED.editor.registerEditorPane("editor-tab-appearance", function(node) {
         return {
             label: RED._("editor-tab.appearance"),
             name: RED._("editor-tab.appearance"),
             iconClass: "fa fa-object-group",
-            create: function(container, node) {
+            create: function(container) {
                 this.content = container;
                 buildAppearanceForm(this.content,node);
 
@@ -21,16 +21,16 @@
                     }
                 }
             },
-            resize: function(node, size) {
+            resize: function(size) {
 
             },
-            close: function(node) {
+            close: function() {
 
             },
-            show: function(node) {
+            show: function() {
                 refreshLabelForm(this.content, node);
             },
-            apply: function(node, editState) {
+            apply: function(editState) {
                 if (updateLabels(node, editState.changes, editState.outputMap)) {
                     editState.changed = true;
                 }
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/description.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/description.js
index 3163ff23d..cc126dde0 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/description.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/description.js
@@ -1,26 +1,26 @@
 ;(function() {
 
-    RED.editor.registerEditorPane("editor-tab-description", function() {
+    RED.editor.registerEditorPane("editor-tab-description", function(node) {
         return {
             label: RED._("editor-tab.description"),
             name: RED._("editor-tab.description"),
             iconClass: "fa fa-file-text-o",
 
-            create: function(container, node) {
+            create: function(container) {
                 this.editor = buildDescriptionForm(container,node);
                 RED.e = this.editor;
             },
-            resize: function(node, size) {
+            resize: function(size) {
                 this.editor.resize();
             },
-            close: function(node) {
+            close: function() {
                 this.editor.destroy();
                 this.editor = null;
             },
             show: function() {
                 this.editor.focus();
             },
-            apply: function(node, editState) {
+            apply: function(editState) {
                 var oldInfo = node.info;
                 var newInfo = this.editor.getValue();
                 if (!!oldInfo) {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/envVarProperties.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/envVarProperties.js
index 77a00365a..19d7415ce 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/envVarProperties.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/envVarProperties.js
@@ -1,23 +1,23 @@
 ;(function() {
 
-    RED.editor.registerEditorPane("editor-tab-envProperties", function() {
+    RED.editor.registerEditorPane("editor-tab-envProperties", function(node) {
         return {
             label: RED._("editor-tab.envProperties"),
             name: RED._("editor-tab.envProperties"),
             iconClass: "fa fa-list",
-            create: function(container, node) {
+            create: function(container) {
                 var form = $('<form class="dialog-form form-horizontal"></form>').appendTo(container);
                 var listContainer = $('<div class="form-row node-input-env-container-row"></div>').appendTo(form);
                 this.list = $('<ol></ol>').appendTo(listContainer);
                 RED.editor.envVarList.create(this.list, node);
             },
-            resize: function(node, size) {
+            resize: function(size) {
                 this.list.editableList('height',size.height);
             },
-            close: function(node) {
+            close: function() {
 
             },
-            apply: function(node, editState) {
+            apply: function(editState) {
                 var old_env = node.env;
                 var new_env = [];
                 if (/^subflow:/.test(node.type)) {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/flowProperties.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/flowProperties.js
index cd0d2250d..69a4c209c 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/flowProperties.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/flowProperties.js
@@ -1,11 +1,11 @@
 ;(function() {
 
-    RED.editor.registerEditorPane("editor-tab-flow-properties", function() {
+    RED.editor.registerEditorPane("editor-tab-flow-properties", function(node) {
         return {
             label: RED._("editor-tab.properties"),
             name: RED._("editor-tab.properties"),
             iconClass: "fa fa-cog",
-            create: function(container, node) {
+            create: function(container) {
                 var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(container);
                 $('<div class="form-row">'+
                   '<label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label>'+
@@ -29,30 +29,30 @@
                 RED.text.bidi.prepareInput($("#node-input-name"));
                 this.tabflowEditor.getSession().setValue(node.info || "", -1);
             },
-            resize: function(node, size) {
+            resize: function(size) {
                 $("#node-input-info").css("height", (size.height-70)+"px");
                 this.tabflowEditor.resize();
             },
-            close: function(node) {
+            close: function() {
                 this.tabflowEditor.destroy();
             },
-            apply: function(workspace, editState) {
+            apply: function(editState) {
                 var label = $( "#node-input-name" ).val();
 
-                if (workspace.label != label) {
-                    editState.changes.label = workspace.label;
+                if (node.label != label) {
+                    editState.changes.label = node.label;
                     editState.changed = true;
-                    workspace.label = label;
+                    node.label = label;
                 }
 
                 var info = this.tabflowEditor.getValue();
-                if (workspace.info !== info) {
-                    editState.changes.info = workspace.info;
+                if (node.info !== info) {
+                    editState.changes.info = node.info;
                     editState.changed = true;
-                    workspace.info = info;
+                    node.info = info;
                 }
-                $("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('red-ui-workspace-disabled',!!workspace.disabled);
-                $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!workspace.disabled);
+                $("#red-ui-tab-"+(node.id.replace(".","-"))).toggleClass('red-ui-workspace-disabled',!!node.disabled);
+                $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!node.disabled);
 
             }
         }
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js
index ab3efbd65..230c711ee 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js
@@ -1,11 +1,11 @@
 ;(function() {
 
-    RED.editor.registerEditorPane("editor-tab-properties", function() {
+    RED.editor.registerEditorPane("editor-tab-properties", function(node) {
         return {
             label: RED._("editor-tab.properties"),
             name: RED._("editor-tab.properties"),
             iconClass: "fa fa-cog",
-            create: function(container, node) {
+            create: function(container) {
 
                 var nodeType = node.type;
                 if (node.type === "subflow") {
@@ -29,7 +29,7 @@
                 }
                 RED.editor.buildEditForm(container,formStyle,nodeType,i18nNamespace,node);
             },
-            resize: function(node, size) {
+            resize: function(size) {
                 if (node && node._def.oneditresize) {
                     try {
                         node._def.oneditresize.call(node,size);
@@ -38,15 +38,15 @@
                     }
                 }
             },
-            close: function(node) {
+            close: function() {
 
             },
-            apply: function(editing_node, editState) {
+            apply: function(editState) {
                 var newValue;
                 var d;
-                if (editing_node._def.defaults) {
-                    for (d in editing_node._def.defaults) {
-                        if (editing_node._def.defaults.hasOwnProperty(d)) {
+                if (node._def.defaults) {
+                    for (d in node._def.defaults) {
+                        if (node._def.defaults.hasOwnProperty(d)) {
                             var input = $("#"+this.inputClass+"-"+d);
                             if (input.attr('type') === "checkbox") {
                                 newValue = input.prop('checked');
@@ -57,7 +57,7 @@
                                 if (newValue == null) {
                                     newValue = [];
                                 }
-                            } else if ("format" in editing_node._def.defaults[d] && editing_node._def.defaults[d].format !== "" && input[0].nodeName === "DIV") {
+                            } else if ("format" in node._def.defaults[d] && node._def.defaults[d].format !== "" && input[0].nodeName === "DIV") {
                                 newValue = input.text();
                             } else {
                                 newValue = input.val();
@@ -102,37 +102,37 @@
                                         newValue = parseInt(newValue);
                                     }
                                 }
-                                if (editing_node._def.defaults[d].type) {
+                                if (node._def.defaults[d].type) {
                                     if (newValue == "_ADD_") {
                                         newValue = "";
                                     }
                                 }
-                                if (editing_node[d] != newValue) {
-                                    if (editing_node._def.defaults[d].type) {
+                                if (node[d] != newValue) {
+                                    if (node._def.defaults[d].type) {
                                         // Change to a related config node
-                                        var configNode = RED.nodes.node(editing_node[d]);
+                                        var configNode = RED.nodes.node(node[d]);
                                         if (configNode) {
                                             var users = configNode.users;
-                                            users.splice(users.indexOf(editing_node),1);
+                                            users.splice(users.indexOf(node),1);
                                             RED.events.emit("nodes:change",configNode);
                                         }
                                         configNode = RED.nodes.node(newValue);
                                         if (configNode) {
-                                            configNode.users.push(editing_node);
+                                            configNode.users.push(node);
                                             RED.events.emit("nodes:change",configNode);
                                         }
                                     }
-                                    editState.changes[d] = editing_node[d];
-                                    editing_node[d] = newValue;
+                                    editState.changes[d] = node[d];
+                                    node[d] = newValue;
                                     editState.changed = true;
                                 }
                             }
                         }
                     }
                 }
-                if (editing_node._def.credentials) {
-                    var credDefinition = editing_node._def.credentials;
-                    var credsChanged = updateNodeCredentials(editing_node,credDefinition,this.inputClass);
+                if (node._def.credentials) {
+                    var credDefinition = node._def.credentials;
+                    var credsChanged = updateNodeCredentials(node,credDefinition,this.inputClass);
                     editState.changed = editState.changed || credsChanged;
                 }
             }
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowModule.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowModule.js
index dba482625..8d83807af 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowModule.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowModule.js
@@ -30,20 +30,20 @@
         '</div>'+
     '</form>';
 
-    RED.editor.registerEditorPane("editor-tab-subflow-module", function() {
+    RED.editor.registerEditorPane("editor-tab-subflow-module", function(node) {
         return {
             label: RED._("editor-tab.module"),
             name: RED._("editor-tab.module"),
             iconClass: "fa fa-cube",
-            create: function(container, node) {
+            create: function(container) {
                 buildModuleForm(container, node);
             },
-            resize: function(node, size) {
+            resize: function(size) {
             },
-            close: function(node) {
+            close: function() {
 
             },
-            apply: function(node, editState) {
+            apply: function(editState) {
                 var newMeta = exportSubflowModuleProperties(node);
                 if (!isSameObj(node.meta,newMeta)) {
                     editState.changes.meta = node.meta;
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js
deleted file mode 100644
index 33d7c43ff..000000000
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js
+++ /dev/null
@@ -1,60 +0,0 @@
-;(function() {
-
-    RED.editor.registerEditorPane("editor-tab-subflow-properties", function() {
-        return {
-            label: RED._("editor-tab.properties"),
-            name: RED._("editor-tab.properties"),
-            iconClass: "fa fa-cog",
-            create: function(container, node) {
-                var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(container);
-                $('<div class="form-row">'+
-                  '<label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label>'+
-                  '<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">'+
-                  '</div>').appendTo(dialogForm);
-
-                var row = $('<div class="form-row node-text-editor-row">'+
-                            '<label for="node-input-info" data-i18n="editor:workspace.info" style="width:300px;"></label>'+
-                            '<div style="min-height:150px;" class="node-text-editor" id="node-input-info"></div>'+
-                            '</div>').appendTo(dialogForm);
-                this.tabflowEditor = RED.editor.createEditor({
-                    id: 'node-input-info',
-                    mode: 'ace/mode/markdown',
-                    value: ""
-                });
-
-                $('<input type="text" style="display: none;" />').prependTo(dialogForm);
-                dialogForm.on("submit", function(e) { e.preventDefault();});
-
-                $("#node-input-name").val(node.label);
-                RED.text.bidi.prepareInput($("#node-input-name"));
-                this.tabflowEditor.getSession().setValue(node.info || "", -1);
-            },
-            resize: function(node, size) {
-                $("#node-input-info").css("height", (size.height-70)+"px");
-                this.tabflowEditor.resize();
-            },
-            close: function(node) {
-                this.tabflowEditor.destroy();
-            },
-            apply: function(workspace, editState) {
-                var label = $( "#node-input-name" ).val();
-
-                if (workspace.label != label) {
-                    editState.changes.label = workspace.label;
-                    editState.changed = true;
-                    workspace.label = label;
-                }
-
-                var info = this.tabflowEditor.getValue();
-                if (workspace.info !== info) {
-                    editState.changes.info = workspace.info;
-                    editState.changed = true;
-                    workspace.info = info;
-                }
-                $("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('red-ui-workspace-disabled',!!workspace.disabled);
-                $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!workspace.disabled);
-
-            }
-        }
-    });
-})();

From 234e77fd063d138e2ab829dc9596a5337c406504 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 2 Sep 2021 22:12:32 +0100
Subject: [PATCH 24/27] Rename registerEditPane function

---
 .../node_modules/@node-red/editor-client/src/js/ui/editor.js    | 2 +-
 .../editor-client/src/js/ui/editors/panes/appearance.js         | 2 +-
 .../editor-client/src/js/ui/editors/panes/description.js        | 2 +-
 .../editor-client/src/js/ui/editors/panes/envVarProperties.js   | 2 +-
 .../editor-client/src/js/ui/editors/panes/flowProperties.js     | 2 +-
 .../editor-client/src/js/ui/editors/panes/properties.js         | 2 +-
 .../editor-client/src/js/ui/editors/panes/subflowModule.js      | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

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 4799de739..27be8db63 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
@@ -1911,7 +1911,7 @@ RED.editor = (function() {
             return customEditTypes;
         },
 
-        registerEditorPane: function(type, definition, filter) {
+        registerEditPane: function(type, definition, filter) {
             if (filter) {
                 filteredEditPanes[type] = filter
             }
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js
index 8d32aa7ab..e910ede04 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js
@@ -1,6 +1,6 @@
 ;(function() {
 
-    RED.editor.registerEditorPane("editor-tab-appearance", function(node) {
+    RED.editor.registerEditPane("editor-tab-appearance", function(node) {
         return {
             label: RED._("editor-tab.appearance"),
             name: RED._("editor-tab.appearance"),
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/description.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/description.js
index cc126dde0..b7be32596 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/description.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/description.js
@@ -1,6 +1,6 @@
 ;(function() {
 
-    RED.editor.registerEditorPane("editor-tab-description", function(node) {
+    RED.editor.registerEditPane("editor-tab-description", function(node) {
         return {
             label: RED._("editor-tab.description"),
             name: RED._("editor-tab.description"),
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/envVarProperties.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/envVarProperties.js
index 19d7415ce..10425f18a 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/envVarProperties.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/envVarProperties.js
@@ -1,6 +1,6 @@
 ;(function() {
 
-    RED.editor.registerEditorPane("editor-tab-envProperties", function(node) {
+    RED.editor.registerEditPane("editor-tab-envProperties", function(node) {
         return {
             label: RED._("editor-tab.envProperties"),
             name: RED._("editor-tab.envProperties"),
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/flowProperties.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/flowProperties.js
index 69a4c209c..2db4d0c85 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/flowProperties.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/flowProperties.js
@@ -1,6 +1,6 @@
 ;(function() {
 
-    RED.editor.registerEditorPane("editor-tab-flow-properties", function(node) {
+    RED.editor.registerEditPane("editor-tab-flow-properties", function(node) {
         return {
             label: RED._("editor-tab.properties"),
             name: RED._("editor-tab.properties"),
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js
index 230c711ee..f3a5960e0 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js
@@ -1,6 +1,6 @@
 ;(function() {
 
-    RED.editor.registerEditorPane("editor-tab-properties", function(node) {
+    RED.editor.registerEditPane("editor-tab-properties", function(node) {
         return {
             label: RED._("editor-tab.properties"),
             name: RED._("editor-tab.properties"),
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowModule.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowModule.js
index 8d83807af..051032f91 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowModule.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowModule.js
@@ -30,7 +30,7 @@
         '</div>'+
     '</form>';
 
-    RED.editor.registerEditorPane("editor-tab-subflow-module", function(node) {
+    RED.editor.registerEditPane("editor-tab-subflow-module", function(node) {
         return {
             label: RED._("editor-tab.module"),
             name: RED._("editor-tab.module"),

From 192b542fe4223f0fd0d7ecf3eb558bcc3084827c Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Tue, 7 Sep 2021 11:47:04 +0100
Subject: [PATCH 25/27] Add menu options for align tools and show shortcuts on
 menu

---
 .../editor-client/locales/en-US/editor.json   | 21 +++++++++---
 .../@node-red/editor-client/src/js/history.js |  8 +++++
 .../@node-red/editor-client/src/js/red.js     | 33 +++++++++++++++++--
 .../editor-client/src/js/ui/common/menu.js    | 26 ++++++++++++++-
 .../editor-client/src/js/ui/group.js          |  5 +++
 .../editor-client/src/js/ui/keyboard.js       |  6 +++-
 .../@node-red/editor-client/src/js/ui/view.js |  9 +++++
 .../editor-client/src/sass/dropdownMenu.scss  | 14 +++++++-
 .../editor-client/src/sass/header.scss        |  7 ++--
 9 files changed, 118 insertions(+), 11 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 3f1e32588..adeae0c2d 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
@@ -116,7 +116,16 @@
             "groupSelection": "Group selection",
             "ungroupSelection": "Ungroup selection",
             "groupMergeSelection": "Merge selection",
-            "groupRemoveSelection": "Remove from group"
+            "groupRemoveSelection": "Remove from group",
+            "arrange":"Arrange",
+            "alignLeft":"Align to left",
+            "alignCenter":"Align to center",
+            "alignRight":"Align to right",
+            "alignTop":"Align to top",
+            "alignMiddle":"Align to middle",
+            "alignBottom":"Align to bottom",
+            "distributeHorizontally":"Distribute horizontally",
+            "distributeVertically":"Distribute vertically"
         }
     },
     "actions": {
@@ -450,8 +459,9 @@
         "unassigned": "Unassigned",
         "global": "global",
         "workspace": "workspace",
-        "selectAll": "Select all nodes",
-        "selectAllConnected": "Select all connected nodes",
+        "selectAll": "Select all",
+        "selectNone": "Select none",
+        "selectAllConnected": "Select connected",
         "addRemoveNode": "Add/remove node from selection",
         "editSelected": "Edit selected node",
         "deleteSelected": "Delete selected nodes or link",
@@ -464,7 +474,10 @@
         "copyNode": "Copy selected nodes",
         "cutNode": "Cut selected nodes",
         "pasteNode": "Paste nodes",
-        "undoChange": "Undo the last change performed",
+        "copyGroupStyle": "Copy group style",
+        "pasteGroupStyle": "Paste group style",
+        "undoChange": "Undo",
+        "redoChange": "Redo",
         "searchBox": "Open search box",
         "managePalette": "Manage palette",
         "actionList":"Action list"
diff --git a/packages/node_modules/@node-red/editor-client/src/js/history.js b/packages/node_modules/@node-red/editor-client/src/js/history.js
index 338d955e1..21823ae26 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/history.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/history.js
@@ -658,6 +658,8 @@ RED.history = (function() {
         push: function(ev) {
             undoHistory.push(ev);
             redoHistory = [];
+            RED.menu.setDisabled("menu-item-edit-undo", false);
+            RED.menu.setDisabled("menu-item-edit-redo", true);
         },
         pop: function() {
             var ev = undoHistory.pop();
@@ -665,6 +667,8 @@ RED.history = (function() {
             if (rev) {
                 redoHistory.push(rev);
             }
+            RED.menu.setDisabled("menu-item-edit-undo", undoHistory.length === 0);
+            RED.menu.setDisabled("menu-item-edit-redo", redoHistory.length === 0);
         },
         peek: function() {
             return undoHistory[undoHistory.length-1];
@@ -672,6 +676,8 @@ RED.history = (function() {
         clear: function() {
             undoHistory = [];
             redoHistory = [];
+            RED.menu.setDisabled("menu-item-edit-undo", true);
+            RED.menu.setDisabled("menu-item-edit-redo", true);
         },
         redo: function() {
             var ev = redoHistory.pop();
@@ -681,6 +687,8 @@ RED.history = (function() {
                     undoHistory.push(uev);
                 }
             }
+            RED.menu.setDisabled("menu-item-edit-undo", undoHistory.length === 0);
+            RED.menu.setDisabled("menu-item-edit-redo", redoHistory.length === 0);
         }
     }
 
diff --git a/packages/node_modules/@node-red/editor-client/src/js/red.js b/packages/node_modules/@node-red/editor-client/src/js/red.js
index 1a7d9b08f..171e3124b 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/red.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/red.js
@@ -559,6 +559,22 @@ var RED = (function() {
                 {id:"menu-item-projects-settings",label:RED._("menu.label.projects-settings"),disabled:false,onselect:"core:show-project-settings"}
             ]});
         }
+        menuOptions.push({id:"menu-item-edit-menu", label:"Edit", options: [
+            {id: "menu-item-edit-undo", label:RED._("keyboard.undoChange"), disabled: true, onselect: "core:undo"},
+            {id: "menu-item-edit-redo", label:RED._("keyboard.redoChange"), disabled: true, onselect: "core:redo"},
+            null,
+            {id: "menu-item-edit-cut", label:RED._("keyboard.cutNode"), onselect: "core:cut-selection-to-internal-clipboard"},
+            {id: "menu-item-edit-copy", label:RED._("keyboard.copyNode"), onselect: "core:copy-selection-to-internal-clipboard"},
+            {id: "menu-item-edit-paste", label:RED._("keyboard.pasteNode"), disabled: true, onselect: "core:paste-from-internal-clipboard"},
+            null,
+            {id: "menu-item-edit-copy-group-style", label:RED._("keyboard.copyGroupStyle"), onselect: "core:copy-group-style"},
+            {id: "menu-item-edit-paste-group-style", label:RED._("keyboard.pasteGroupStyle"), disabled: true, onselect: "core:paste-group-style"},
+            null,
+            {id: "menu-item-edit-select-all", label:RED._("keyboard.selectAll"), onselect: "core:select-all-nodes"},
+            {id: "menu-item-edit-select-connected", label:RED._("keyboard.selectAllConnected"), onselect: "core:select-connected-nodes"},
+            {id: "menu-item-edit-select-none", label:RED._("keyboard.selectNone"), onselect: "core:select-none"}
+        ]});
+
         menuOptions.push({id:"menu-item-view-menu",label:RED._("menu.label.view.view"),options:[
             {id:"menu-item-palette",label:RED._("menu.label.palette.show"),toggle:true,onselect:"core:toggle-palette", selected: true},
             {id:"menu-item-sidebar",label:RED._("menu.label.sidebar.show"),toggle:true,onselect:"core:toggle-sidebar", selected: true},
@@ -566,6 +582,20 @@ var RED = (function() {
             {id:"menu-item-action-list",label:RED._("keyboard.actionList"),onselect:"core:show-action-list"},
             null
         ]});
+
+        menuOptions.push({id:"menu-item-arrange-menu", label:RED._("menu.label.arrange"), options: [
+            {id: "menu-item-view-tools-align-left", label:RED._("menu.label.alignLeft"), onselect: "core:align-selection-to-left"},
+            {id: "menu-item-view-tools-align-center", label:RED._("menu.label.alignCenter"), onselect: "core:align-selection-to-center"},
+            {id: "menu-item-view-tools-align-right", label:RED._("menu.label.alignRight"), onselect: "core:align-selection-to-right"},
+            null,
+            {id: "menu-item-view-tools-align-top", label:RED._("menu.label.alignTop"), onselect: "core:align-selection-to-top"},
+            {id: "menu-item-view-tools-align-middle", label:RED._("menu.label.alignMiddle"), onselect: "core:align-selection-to-middle"},
+            {id: "menu-item-view-tools-align-bottom", label:RED._("menu.label.alignBottom"), onselect: "core:align-selection-to-bottom"},
+            null,
+            {id: "menu-item-view-tools-distribute-horizontally", label:RED._("menu.label.distributeHorizontally"), onselect: "core:distribute-selection-horizontally"},
+            {id: "menu-item-view-tools-distribute-veritcally", label:RED._("menu.label.distributeVertically"), onselect: "core:distribute-selection-vertically"}
+        ]});
+
         menuOptions.push(null);
         if (RED.settings.theme("menu.menu-item-import-library", true)) {
             menuOptions.push({id: "menu-item-import", label: RED._("menu.label.import"), onselect: "core:show-import-dialog"});
@@ -626,7 +656,6 @@ var RED = (function() {
         RED.user.init();
         RED.notifications.init();
         RED.library.init();
-        RED.keyboard.init();
         RED.palette.init();
         RED.eventLog.init();
 
@@ -655,7 +684,7 @@ var RED = (function() {
 
         RED.deploy.init(RED.settings.theme("deployButton",null));
 
-        buildMainMenu();
+        RED.keyboard.init(buildMainMenu);
 
         RED.nodes.init();
         RED.comms.connect();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js
index 7ebe659c9..e8c678333 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js
@@ -88,6 +88,13 @@ RED.menu = (function() {
             linkContent += '</a>';
 
             var link = $(linkContent).appendTo(item);
+            opt.link = link;
+            if (typeof opt.onselect === 'string') {
+                var shortcut = RED.keyboard.getShortcut(opt.onselect);
+                if (shortcut && shortcut.key) {
+                    opt.shortcutSpan = $('<span class="red-ui-popover-key">'+RED.keyboard.formatKey(shortcut.key, true)+'</span>').appendTo(link);
+                }
+            }
 
             menuItems[opt.id] = opt;
 
@@ -276,6 +283,22 @@ RED.menu = (function() {
         }
     }
 
+    function refreshShortcuts() {
+        for (var id in menuItems) {
+            if (menuItems.hasOwnProperty(id)) {
+                var opt = menuItems[id];
+                if (typeof opt.onselect === "string" && opt.shortcutSpan) {
+                    opt.shortcutSpan.remove();
+                    delete opt.shortcutSpan;
+                    var shortcut = RED.keyboard.getShortcut(opt.onselect);
+                    if (shortcut && shortcut.key) {
+                        opt.shortcutSpan = $('<span class="red-ui-popover-key">'+RED.keyboard.formatKey(shortcut.key, true)+'</span>').appendTo(opt.link);
+                    }
+                }
+            }
+        }
+    }
+
     return {
         init: createMenu,
         setSelected: setSelected,
@@ -284,6 +307,7 @@ RED.menu = (function() {
         setDisabled: setDisabled,
         addItem: addItem,
         removeItem: removeItem,
-        setAction: setAction
+        setAction: setAction,
+        refreshShortcuts: refreshShortcuts
     }
 })();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/group.js b/packages/node_modules/@node-red/editor-client/src/js/ui/group.js
index 1c86eb631..6e4ff98f5 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/group.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/group.js
@@ -183,7 +183,9 @@ RED.group = (function() {
             var activateUngroup = false;
             var activateMerge = false;
             var activateRemove = false;
+            var singleGroupSelected = false;
             if (activateGroup) {
+                singleGroupSelected = selection.nodes.length === 1 && selection.nodes[0].type === 'group';
                 selection.nodes.forEach(function (n) {
                     if (n.type === "group") {
                         activateUngroup = true;
@@ -200,6 +202,8 @@ RED.group = (function() {
             RED.menu.setDisabled("menu-item-group-ungroup", !activateUngroup);
             RED.menu.setDisabled("menu-item-group-merge", !activateMerge);
             RED.menu.setDisabled("menu-item-group-remove", !activateRemove);
+            RED.menu.setDisabled("menu-item-edit-copy-group-style", !singleGroupSelected);
+            RED.menu.setDisabled("menu-item-edit-paste-group-style", !activateUngroup);
         });
 
         RED.actions.add("core:group-selection", function() { groupSelection() })
@@ -252,6 +256,7 @@ RED.group = (function() {
         if (selection.nodes && selection.nodes.length === 1 && selection.nodes[0].type === 'group') {
             groupStyleClipboard = JSON.parse(JSON.stringify(selection.nodes[0].style));
             RED.notify(RED._("clipboard.groupStyleCopied"),{id:"clipboard"})
+            RED.menu.setDisabled("menu-item-edit-paste-group-style", false)
         }
     }
     function pasteGroupStyle() {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js b/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js
index 9e976e4fc..7a38a290d 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js
@@ -131,7 +131,7 @@ RED.keyboard = (function() {
         return mergedKeymap;
     }
 
-    function init() {
+    function init(done) {
         // Migrate from pre-0.18
         migrateOldKeymap();
 
@@ -164,6 +164,7 @@ RED.keyboard = (function() {
                     }
                 }
             }
+            done();
         });
 
         RED.userSettings.add({
@@ -174,6 +175,9 @@ RED.keyboard = (function() {
                 setTimeout(function() {
                     $("#red-ui-settings-tab-keyboard-filter").trigger("focus");
                 },200);
+            },
+            close: function() {
+                RED.menu.refreshShortcuts();
             }
         })
     }
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 afbf5f5f7..51f4428f6 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
@@ -501,6 +501,14 @@ RED.view = (function() {
         RED.actions.add("core:copy-selection-to-internal-clipboard",copySelection);
         RED.actions.add("core:cut-selection-to-internal-clipboard",function(){copySelection();deleteSelection();});
         RED.actions.add("core:paste-from-internal-clipboard",function(){importNodes(clipboard,{generateIds: true});});
+
+        RED.events.on("view:selection-changed", function(selection) {
+            var hasSelection = (selection.nodes && selection.nodes.length > 0);
+            RED.menu.setDisabled("menu-item-edit-cut",!hasSelection);
+            RED.menu.setDisabled("menu-item-edit-copy",!hasSelection);
+            RED.menu.setDisabled("menu-item-edit-select-connected",!hasSelection);
+        })
+
         RED.actions.add("core:delete-selection",deleteSelection);
         RED.actions.add("core:edit-selected-node",editSelection);
         RED.actions.add("core:go-to-selection",function() {
@@ -2332,6 +2340,7 @@ RED.view = (function() {
                 }
             }
             clipboard = JSON.stringify(nns);
+            RED.menu.setDisabled("menu-item-edit-paste", false);
             if (nodeCount > 0) {
                 RED.notify(RED._("clipboard.nodeCopied",{count:nodeCount}),{id:"clipboard"});
             } else if (groupCount > 0) {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss b/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
index bb91846bb..ca19afc73 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
@@ -68,6 +68,10 @@
     & > .disabled > a:hover,
     & > .disabled > a:focus {
         color: $menuDisabledColor;
+        .red-ui-popover-key {
+            color: $menuDisabledColor;
+            border-color: $menuDisabledColor;
+        }
     }
 
     & > .disabled > a:hover,
@@ -102,6 +106,14 @@
                 display: none;
             }
         }
+        .red-ui-popover-key {
+            border: none;
+            padding: 0;
+            font-size: 13px;
+            float: right;
+            color: $menuColor;
+            border-color: $menuColor;
+        }
     }
 
 }
@@ -209,4 +221,4 @@ ul.red-ui-menu:not(.red-ui-menu-dropdown) {
         }
     }
 
-}
\ No newline at end of file
+}
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/header.scss b/packages/node_modules/@node-red/editor-client/src/sass/header.scss
index 4093e9bca..02528a446 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/header.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/header.scss
@@ -191,14 +191,17 @@
         margin-top: 0;
         li a {
             color: $header-menu-color;
-            padding: 3px 40px;
+            padding: 3px 10px 3px 40px;
             img {
                 max-width: 100%;
                 margin-right: 10px;
                 padding: 4px;
                 border: 3px solid transparent;
             }
-
+            .red-ui-popover-key {
+                color: $header-menu-color-disabled !important;
+                border-color: $header-menu-color-disabled !important;
+            }
             &.active img {
                 border: 3px solid $header-menu-item-border-active;
             }

From 4132fb79a661aaed78560001415959c285bc4d3c Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 26 Aug 2021 21:16:40 +0100
Subject: [PATCH 26/27] Allow nodes to be raised/lowered in the workspace

---
 .../@node-red/editor-client/src/js/history.js |  17 +-
 .../@node-red/editor-client/src/js/nodes.js   | 456 +++++++++++++-----
 .../src/js/ui/tab-info-outliner.js            |  16 +
 .../editor-client/src/js/ui/view-tools.js     |  42 ++
 .../@node-red/editor-client/src/js/ui/view.js |  28 +-
 .../editor-client/src/js/ui/workspaces.js     |   9 +-
 6 files changed, 450 insertions(+), 118 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/history.js b/packages/node_modules/@node-red/editor-client/src/js/history.js
index 21823ae26..256500200 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/history.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/history.js
@@ -558,11 +558,22 @@ RED.history = (function() {
             } else if (ev.t == "reorder") {
                 inverseEv = {
                     t: 'reorder',
-                    order: RED.nodes.getWorkspaceOrder(),
                     dirty: RED.nodes.dirty()
                 };
-                if (ev.order) {
-                    RED.workspaces.order(ev.order);
+                if (ev.workspaces) {
+                    inverseEv.workspaces = {
+                        from: ev.workspaces.to,
+                        to: ev.workspaces.from
+                    }
+                    RED.workspaces.order(ev.workspaces.from);
+                }
+                if (ev.nodes) {
+                    inverseEv.nodes = {
+                        z: ev.nodes.z,
+                        from: ev.nodes.to,
+                        to: ev.nodes.from
+                    }
+                    RED.nodes.setNodeOrder(ev.nodes.z,ev.nodes.from);
                 }
             } else if (ev.t == "createGroup") {
                 inverseEv = {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/nodes.js b/packages/node_modules/@node-red/editor-client/src/js/nodes.js
index ee3542eee..df95c6392 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/nodes.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/nodes.js
@@ -16,8 +16,6 @@
 RED.nodes = (function() {
 
     var node_defs = {};
-    var nodes = {};
-    var nodeTabMap = {};
     var linkTabMap = {};
 
     var configNodes = {};
@@ -41,6 +39,7 @@ RED.nodes = (function() {
         RED.events.emit("workspace:dirty",{dirty:dirty});
     }
 
+    // The registry holds information about all node types.
     var registry = (function() {
         var moduleList = {};
         var nodeList = [];
@@ -209,6 +208,279 @@ RED.nodes = (function() {
         return exports;
     })();
 
+    // allNodes holds information about the Flow nodes.
+    var allNodes = (function() {
+        var nodes = {};
+        var tabMap = {};
+        var api = {
+            addTab: function(id) {
+                tabMap[id] = [];
+            },
+            hasTab: function(z) {
+                return tabMap.hasOwnProperty(z)
+            },
+            removeTab: function(id) {
+                delete tabMap[id];
+            },
+            addNode: function(n) {
+                nodes[n.id] = n;
+                if (tabMap.hasOwnProperty(n.z)) {
+                    tabMap[n.z].push(n);
+                } else {
+                    console.warn("Node added to unknown tab/subflow:",n);
+                    tabMap["_"] = tabMap["_"] || [];
+                    tabMap["_"].push(n);
+                }
+            },
+            removeNode: function(n) {
+                delete nodes[n.id]
+                if (tabMap.hasOwnProperty(n.z)) {
+                    var i = tabMap[n.z].indexOf(n);
+                    if (i > -1) {
+                        tabMap[n.z].splice(i,1);
+                    }
+                }
+            },
+            hasNode: function(id) {
+                return nodes.hasOwnProperty(id);
+            },
+            getNode: function(id) {
+                return nodes[id]
+            },
+            moveNode: function(n, newZ) {
+                api.removeNode(n);
+                tabMap[newZ] = tabMap[newZ] || [];
+                tabMap[newZ].push(n);
+            },
+            moveNodesForwards: function(nodes) {
+                var result = [];
+                if (!Array.isArray(nodes)) {
+                    nodes = [nodes]
+                }
+                // Can only do this for nodes on the same tab.
+                // Use nodes[0] to get the z
+                var tabNodes = tabMap[nodes[0].z];
+                var toMove = new Set(nodes.filter(function(n) { return n.type !== "group" && n.type !== "subflow" }));
+                var moved = new Set();
+                for (var i = tabNodes.length-1; i >= 0; i--) {
+                    if (toMove.size === 0) {
+                        break;
+                    }
+                    var n = tabNodes[i];
+                    if (toMove.has(n)) {
+                        // This is a node to move.
+                        if (i < tabNodes.length-1 && !moved.has(tabNodes[i+1])) {
+                            // Remove from current position
+                            tabNodes.splice(i,1);
+                            // Add it back one position higher
+                            tabNodes.splice(i+1,0,n);
+                            n._reordered = true;
+                            result.push(n);
+                        }
+                        toMove.delete(n);
+                        moved.add(n);
+                    }
+                }
+                if (result.length > 0) {
+                    RED.events.emit('nodes:reorder',{
+                        z: nodes[0].z,
+                        nodes: result
+                    });
+                }
+                return result;
+            },
+            moveNodesBackwards: function(nodes) {
+                var result = [];
+                if (!Array.isArray(nodes)) {
+                    nodes = [nodes]
+                }
+                // Can only do this for nodes on the same tab.
+                // Use nodes[0] to get the z
+                var tabNodes = tabMap[nodes[0].z];
+                var toMove = new Set(nodes.filter(function(n) { return n.type !== "group" && n.type !== "subflow" }));
+                var moved = new Set();
+                for (var i = 0; i < tabNodes.length; i++) {
+                    if (toMove.size === 0) {
+                        break;
+                    }
+                    var n = tabNodes[i];
+                    if (toMove.has(n)) {
+                        // This is a node to move.
+                        if (i > 0 && !moved.has(tabNodes[i-1])) {
+                            // Remove from current position
+                            tabNodes.splice(i,1);
+                            // Add it back one position lower
+                            tabNodes.splice(i-1,0,n);
+                            n._reordered = true;
+                            result.push(n);
+                        }
+                        toMove.delete(n);
+                        moved.add(n);
+                    }
+                }
+                if (result.length > 0) {
+                    RED.events.emit('nodes:reorder',{
+                        z: nodes[0].z,
+                        nodes: result
+                    });
+                }
+                return result;
+            },
+            moveNodesToFront: function(nodes) {
+                var result = [];
+                if (!Array.isArray(nodes)) {
+                    nodes = [nodes]
+                }
+                // Can only do this for nodes on the same tab.
+                // Use nodes[0] to get the z
+                var tabNodes = tabMap[nodes[0].z];
+                var toMove = new Set(nodes.filter(function(n) { return n.type !== "group" && n.type !== "subflow" }));
+                var target = tabNodes.length-1;
+                for (var i = tabNodes.length-1; i >= 0; i--) {
+                    if (toMove.size === 0) {
+                        break;
+                    }
+                    var n = tabNodes[i];
+                    if (toMove.has(n)) {
+                        // This is a node to move.
+                        if (i < target) {
+                            // Remove from current position
+                            tabNodes.splice(i,1);
+                            tabNodes.splice(target,0,n);
+                            n._reordered = true;
+                            result.push(n);
+                        }
+                        target--;
+                        toMove.delete(n);
+                    }
+                }
+                if (result.length > 0) {
+                    RED.events.emit('nodes:reorder',{
+                        z: nodes[0].z,
+                        nodes: result
+                    });
+                }
+                return result;
+            },
+            moveNodesToBack: function(nodes) {
+                var result = [];
+                if (!Array.isArray(nodes)) {
+                    nodes = [nodes]
+                }
+                // Can only do this for nodes on the same tab.
+                // Use nodes[0] to get the z
+                var tabNodes = tabMap[nodes[0].z];
+                var toMove = new Set(nodes.filter(function(n) { return n.type !== "group" && n.type !== "subflow" }));
+                var target = 0;
+                for (var i = 0; i < tabNodes.length; i++) {
+                    if (toMove.size === 0) {
+                        break;
+                    }
+                    var n = tabNodes[i];
+                    if (toMove.has(n)) {
+                        // This is a node to move.
+                        if (i > target) {
+                            // Remove from current position
+                            tabNodes.splice(i,1);
+                            // Add it back one position lower
+                            tabNodes.splice(target,0,n);
+                            n._reordered = true;
+                            result.push(n);
+                        }
+                        target++;
+                        toMove.delete(n);
+                    }
+                }
+                if (result.length > 0) {
+                    RED.events.emit('nodes:reorder',{
+                        z: nodes[0].z,
+                        nodes: result
+                    });
+                }
+                return result;
+            },
+            getNodes: function(z) {
+                return tabMap[z];
+            },
+            clear: function() {
+                nodes = {};
+                tabMap = {};
+            },
+            eachNode: function(cb) {
+                var nodeList,i,j;
+                for (i in subflows) {
+                    if (subflows.hasOwnProperty(i)) {
+                        nodeList = tabMap[i];
+                        for (j = 0; j < nodeList.length; j++) {
+                            if (cb(nodeList[j]) === false) {
+                                return;
+                            }
+                        }
+                    }
+                }
+                for (i = 0; i < workspacesOrder.length; i++) {
+                    nodeList = tabMap[workspacesOrder[i]];
+                    for (j = 0; j < nodeList.length; j++) {
+                        if (cb(nodeList[j]) === false) {
+                            return;
+                        }
+                    }
+                }
+                // Flow nodes that do not have a valid tab/subflow
+                if (tabMap["_"]) {
+                    nodeList = tabMap["_"];
+                    for (j = 0; j < nodeList.length; j++) {
+                        if (cb(nodeList[j]) === false) {
+                            return;
+                        }
+                    }
+                }
+            },
+            filterNodes: function(filter) {
+                var result = [];
+                var searchSet = null;
+                var doZFilter = false;
+                if (filter.hasOwnProperty("z")) {
+                    if (tabMap.hasOwnProperty(filter.z)) {
+                        searchSet = tabMap[filter.z];
+                    } else {
+                        doZFilter = true;
+                    }
+                }
+                if (searchSet === null) {
+                    searchSet = nodes;
+                }
+
+                for (var n=0;n<searchSet.length;n++) {
+                    var node = searchSet[n];
+                    if (filter.hasOwnProperty("type") && node.type !== filter.type) {
+                        continue;
+                    }
+                    if (doZFilter && node.z !== filter.z) {
+                        continue;
+                    }
+                    result.push(node);
+                }
+                return result;
+            },
+            getNodeOrder: function(z) {
+                return tabMap[z].map(function(n) { return n.id })
+            },
+            setNodeOrder: function(z, order) {
+                var orderMap = {};
+                order.forEach(function(id,i) {
+                    orderMap[id] = i;
+                })
+                tabMap[z].sort(function(A,B) {
+                    A._reordered = true;
+                    B._reordered = true;
+                    return orderMap[A.id] - orderMap[B.id];
+                })
+            }
+        }
+        return api;
+    })()
+
     function getID() {
         var bytes = [];
         for (var i=0;i<8;i++) {
@@ -294,15 +566,10 @@ RED.nodes = (function() {
                 });
                 n.i = nextId+1;
             }
-            nodes[n.id] = n;
+            allNodes.addNode(n);
             if (!nodeLinks[n.id]) {
                 nodeLinks[n.id] = {in:[],out:[]};
             }
-            if (nodeTabMap[n.z]) {
-                nodeTabMap[n.z][n.id] = n;
-            } else {
-                console.warn("Node added to unknown tab/subflow:",n);
-            }
         }
         RED.events.emit('nodes:add',n);
     }
@@ -330,10 +597,8 @@ RED.nodes = (function() {
     function getNode(id) {
         if (id in configNodes) {
             return configNodes[id];
-        } else if (id in nodes) {
-            return nodes[id];
         }
-        return null;
+        return allNodes.getNode(id);
     }
 
     function removeNode(id) {
@@ -345,13 +610,10 @@ RED.nodes = (function() {
             delete configNodes[id];
             RED.events.emit('nodes:remove',node);
             RED.workspaces.refresh();
-        } else if (id in nodes) {
-            node = nodes[id];
-            delete nodes[id]
+        } else if (allNodes.hasNode(id)) {
+            node = allNodes.getNode(id);
+            allNodes.removeNode(node);
             delete nodeLinks[id];
-            if (nodeTabMap[node.z]) {
-                delete nodeTabMap[node.z][node.id];
-            }
             removedLinks = links.filter(function(l) { return (l.source === node) || (l.target === node); });
             removedLinks.forEach(removeLink);
             var updatedConfigNode = false;
@@ -409,18 +671,32 @@ RED.nodes = (function() {
         return {links:removedLinks,nodes:removedNodes};
     }
 
+    function moveNodesForwards(nodes) {
+        return allNodes.moveNodesForwards(nodes);
+    }
+    function moveNodesBackwards(nodes) {
+        return allNodes.moveNodesBackwards(nodes);
+    }
+    function moveNodesToFront(nodes) {
+        return allNodes.moveNodesToFront(nodes);
+    }
+    function moveNodesToBack(nodes) {
+        return allNodes.moveNodesToBack(nodes);
+    }
+
+    function getNodeOrder(z) {
+        return allNodes.getNodeOrder(z);
+    }
+    function setNodeOrder(z, order) {
+        allNodes.setNodeOrder(z,order);
+    }
+
     function moveNodeToTab(node, z) {
         if (node.type === "group") {
             moveGroupToTab(node,z);
             return;
         }
-        if (nodeTabMap[node.z]) {
-            delete nodeTabMap[node.z][node.id];
-        }
-        if (!nodeTabMap[z]) {
-            nodeTabMap[z] = {};
-        }
-        nodeTabMap[z][node.id] = node;
+        allNodes.moveNode(node,z);
         var nl = nodeLinks[node.id];
         if (nl) {
             nl.in.forEach(function(l) {
@@ -482,7 +758,7 @@ RED.nodes = (function() {
 
     function addWorkspace(ws,targetIndex) {
         workspaces[ws.id] = ws;
-        nodeTabMap[ws.id] = {};
+        allNodes.addTab(ws.id);
         linkTabMap[ws.id] = [];
 
         ws._def = RED.nodes.getType('tab');
@@ -506,21 +782,16 @@ RED.nodes = (function() {
         var removedGroups = [];
         if (ws) {
             delete workspaces[id];
-            delete nodeTabMap[id];
+            allNodes.removeTab(id);
             delete linkTabMap[id];
             workspacesOrder.splice(workspacesOrder.indexOf(id),1);
             var i;
             var node;
-            // TODO: this should use nodeTabMap
-            for (i in nodes) {
-                if (nodes.hasOwnProperty(i)) {
-                    node = nodes[i];
-                    if (node.z == id) {
-                        removedNodes.push(node);
-                    }
-                }
+
+            if (allNodes.hasTab(id)) {
+                removedNodes = allNodes.getNodes(id).slice()
             }
-            for(i in configNodes) {
+            for (i in configNodes) {
                 if (configNodes.hasOwnProperty(i)) {
                     node = configNodes[i];
                     if (node.z == id) {
@@ -572,7 +843,7 @@ RED.nodes = (function() {
             sf.name = subflowName;
         }
         subflows[sf.id] = sf;
-        nodeTabMap[sf.id] = {};
+        allNodes.addTab(sf.id);
         linkTabMap[sf.id] = [];
 
         RED.nodes.registerType("subflow:"+sf.id, {
@@ -618,27 +889,24 @@ RED.nodes = (function() {
     function removeSubflow(sf) {
         if (subflows[sf.id]) {
             delete subflows[sf.id];
-            delete nodeTabMap[sf.id];
+            allNodes.removeTab(sf.id);
             registry.removeNodeType("subflow:"+sf.id);
             RED.events.emit("subflows:remove",sf);
         }
     }
 
     function subflowContains(sfid,nodeid) {
-        for (var i in nodes) {
-            if (nodes.hasOwnProperty(i)) {
-                var node = nodes[i];
-                if (node.z === sfid) {
-                    var m = /^subflow:(.+)$/.exec(node.type);
-                    if (m) {
-                        if (m[1] === nodeid) {
-                            return true;
-                        } else {
-                            var result = subflowContains(m[1],nodeid);
-                            if (result) {
-                                return true;
-                            }
-                        }
+        var sfNodes = allNodes.getNodes(sfid);
+        for (var i = 0; i<sfNodes.length; i++) {
+            var node = sfNodes[i];
+            var m = /^subflow:(.+)$/.exec(node.type);
+            if (m) {
+                if (m[1] === nodeid) {
+                    return true;
+                } else {
+                    var result = subflowContains(m[1],nodeid);
+                    if (result) {
+                        return true;
                     }
                 }
             }
@@ -934,11 +1202,15 @@ RED.nodes = (function() {
 
     function createExportableSubflow(id) {
         var sf = getSubflow(id);
-        var nodeSet = [sf];
-        var sfNodeIds = Object.keys(nodeTabMap[sf.id]||{});
-        for (var i=0, l=sfNodeIds.length; i<l; i++) {
-            nodeSet.push(nodeTabMap[sf.id][sfNodeIds[i]]);
+        var nodeSet;
+        var sfNodes = allNodes.getNodes(sf.id);
+        if (sfNodes) {
+            nodeSet = sfNodes.slice();
+            nodeSet.unshift(sf);
+        } else {
+            nodeSet = [sf];
         }
+        console.log(nodeSet);
         return createExportableNodeSet(nodeSet);
     }
     /**
@@ -965,12 +1237,9 @@ RED.nodes = (function() {
                 if (!exportedSubflows[subflowId]) {
                     exportedSubflows[subflowId] = true;
                     var subflow = getSubflow(subflowId);
-                    var subflowSet = [subflow];
-                    RED.nodes.eachNode(function(n) {
-                        if (n.z == subflowId) {
-                            subflowSet.push(n);
-                        }
-                    });
+                    var subflowSet = allNodes.getNodes(subflowId).slice();
+                    subflowSet.unshift(subflow);
+
                     RED.nodes.eachConfig(function(n) {
                         if (n.z == subflowId) {
                             subflowSet.push(n);
@@ -1048,11 +1317,9 @@ RED.nodes = (function() {
                 nns.push(convertNode(configNodes[i], opts));
             }
         }
-        for (i in nodes) {
-            if (nodes.hasOwnProperty(i)) {
-                nns.push(convertNode(nodes[i], opts));
-            }
-        }
+        RED.nodes.eachNode(function(n) {
+            nns.push(convertNode(n, opts));
+        })
         return nns;
     }
 
@@ -1149,7 +1416,7 @@ RED.nodes = (function() {
             var nodeZ = n.z || "__global__";
             imported.zMap[nodeZ] = imported.zMap[nodeZ] || [];
             imported.zMap[nodeZ].push(n)
-            if (nodes[n.id] || configNodes[n.id] || workspaces[n.id] || subflows[n.id] || groups[n.id]) {
+            if (allNodes.hasNode(n.id) || configNodes[n.id] || workspaces[n.id] || subflows[n.id] || groups[n.id]) {
                 imported.conflicted[n.id] = n;
             }
         })
@@ -1157,7 +1424,6 @@ RED.nodes = (function() {
 
     }
 
-
     /**
      * Replace the provided nodes.
      * This must contain complete Subflow defs or complete Flow Tabs.
@@ -1316,7 +1582,7 @@ RED.nodes = (function() {
             if (!options.generateIds) {
                 if (!options.importMap[id]) {
                     // No conflict resolution for this node
-                    var existing = nodes[id] || configNodes[id] || workspaces[id] || subflows[id] || groups[id];
+                    var existing = allNodes.getNode(id) || configNodes[id] || workspaces[id] || subflows[id] || groups[id];
                     if (existing) {
                         existingNodes.push({existing:existing, imported:n});
                     }
@@ -1979,32 +2245,9 @@ RED.nodes = (function() {
 
     // TODO: supports filter.z|type
     function filterNodes(filter) {
-        var result = [];
-        var searchSet = null;
-        var doZFilter = false;
-        if (filter.hasOwnProperty("z")) {
-            if (nodeTabMap.hasOwnProperty(filter.z)) {
-                searchSet = Object.keys(nodeTabMap[filter.z]);
-            } else {
-                doZFilter = true;
-            }
-        }
-        if (searchSet === null) {
-            searchSet = Object.keys(nodes);
-        }
-
-        for (var n=0;n<searchSet.length;n++) {
-            var node = nodes[searchSet[n]];
-            if (filter.hasOwnProperty("type") && node.type !== filter.type) {
-                continue;
-            }
-            if (doZFilter && node.z !== filter.z) {
-                continue;
-            }
-            result.push(node);
-        }
-        return result;
+        return allNodes.filterNodes(filter);
     }
+
     function filterLinks(filter) {
         var result = [];
         var candidateLinks = [];
@@ -2092,9 +2335,8 @@ RED.nodes = (function() {
     }
 
     function clear() {
-        nodes = {};
+        allNodes.clear();
         links = [];
-        nodeTabMap = {};
         linkTabMap = {};
         nodeLinks = {};
         configNodes = {};
@@ -2186,10 +2428,7 @@ RED.nodes = (function() {
                         if (configNodes.hasOwnProperty(n.id)) {
                             delete configNodes[n.id];
                         } else {
-                            delete nodes[n.id];
-                            if (nodeTabMap[n.z]) {
-                                delete nodeTabMap[n.z][n.id];
-                            }
+                            allNodes.removeNode(n);
                         }
                         reimportList.push(convertNode(n));
                         RED.events.emit('nodes:remove',n);
@@ -2246,6 +2485,13 @@ RED.nodes = (function() {
         remove: removeNode,
         clear: clear,
 
+        moveNodesForwards: moveNodesForwards,
+        moveNodesBackwards: moveNodesBackwards,
+        moveNodesToFront: moveNodesToFront,
+        moveNodesToBack: moveNodesToBack,
+        getNodeOrder: getNodeOrder,
+        setNodeOrder: setNodeOrder,
+
         moveNodeToTab: moveNodeToTab,
 
         addLink: addLink,
@@ -2265,16 +2511,10 @@ RED.nodes = (function() {
         addGroup: addGroup,
         removeGroup: removeGroup,
         group: function(id) { return groups[id] },
-        groups: function(z) { return groupsByZ[z]||[] },
+        groups: function(z) { return groupsByZ[z]?groupsByZ[z].slice():[] },
 
         eachNode: function(cb) {
-            for (var id in nodes) {
-                if (nodes.hasOwnProperty(id)) {
-                    if (cb(nodes[id]) === false) {
-                        break;
-                    }
-                }
-            }
+            allNodes.eachNode(cb);
         },
         eachLink: function(cb) {
             for (var l=0;l<links.length;l++) {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js
index a7e157282..f77b5f010 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js
@@ -311,6 +311,7 @@ RED.sidebar.info.outliner = (function() {
         RED.events.on("nodes:add",onNodeAdd);
         RED.events.on("nodes:remove",onObjectRemove);
         RED.events.on("nodes:change",onNodeChange);
+        // RED.events.on("nodes:reorder",onNodesReorder);
 
         RED.events.on("groups:add",onNodeAdd);
         RED.events.on("groups:remove",onObjectRemove);
@@ -369,6 +370,21 @@ RED.sidebar.info.outliner = (function() {
             return indexMap[A.id] - indexMap[B.id]
         })
     }
+    // function onNodesReorder(event) {
+    //     //
+    //     var nodes = RED.nodes.getNodeOrder(event.z);
+    //     var indexMap = {};
+    //     nodes.forEach(function(id,index) {
+    //         indexMap[id] = index;
+    //     })
+    //     var existingObject = objects[event.z];
+    //     existingObject.treeList.sortChildren(function(A,B) {
+    //         if (A.children && !B.children) { return -1 }
+    //         if (!A.children && B.children) { return 1 }
+    //         if (A.children && B.children) { return -1 }
+    //         return indexMap[A.id] - indexMap[B.id]
+    //     })
+    // }
     function onSubflowAdd(sf) {
         objects[sf.id] = {
             id: sf.id,
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js
index ede8d3442..2c59fc352 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js
@@ -689,6 +689,41 @@ RED.view.tools = (function() {
         }
     }
 
+    function reorderSelection(dir) {
+        var selection = RED.view.selection();
+        if (selection.nodes) {
+            var nodesToMove = [];
+            selection.nodes.forEach(function(n) {
+                if (n.type === "group") {
+                    nodesToMove = nodesToMove.concat(RED.group.getNodes(n, true).filter(function(n) {
+                        return n.type !== "group";
+                    }))
+                } else if (n.type !== "subflow"){
+                    nodesToMove.push(n);
+                }
+            })
+            if (nodesToMove.length > 0) {
+                var z = nodesToMove[0].z;
+                var existingOrder = RED.nodes.getNodeOrder(z);
+                var movedNodes;
+                if (dir === "forwards") {
+                    movedNodes = RED.nodes.moveNodesForwards(nodesToMove);
+                } else if (dir === "backwards") {
+                    movedNodes = RED.nodes.moveNodesBacks(nodesToMove);
+                } else if (dir === "front") {
+                    movedNodes = RED.nodes.moveNodesToFront(nodesToMove);
+                } else if (dir === "back") {
+                    movedNodes = RED.nodes.moveNodesToBack(nodesToMove);
+                }
+                if (movedNodes.length > 0) {
+                    var newOrder = RED.nodes.getNodeOrder(z);
+                    RED.history.push({t:"reorder",nodes:{z:z,from:existingOrder,to:newOrder},dirty:RED.nodes.dirty()});
+                    RED.nodes.dirty(true);
+                    RED.view.redraw(true);
+                }
+            }
+        }
+    }
 
     return {
         init: function() {
@@ -710,6 +745,12 @@ RED.view.tools = (function() {
             RED.actions.add("core:move-selection-down", function() { moveSelection(0,1);});
             RED.actions.add("core:move-selection-left", function() { moveSelection(-1,0);});
 
+            RED.actions.add("core:move-selection-forwards", function() { reorderSelection('forwards') })
+            RED.actions.add("core:move-selection-backwards", function() { reorderSelection('backwards') })
+            RED.actions.add("core:move-selection-to-front", function() { reorderSelection('front') })
+            RED.actions.add("core:move-selection-to-back", function() { reorderSelection('back') })
+
+
             RED.actions.add("core:step-selection-up", function() { moveSelection(0,-RED.view.gridSize());});
             RED.actions.add("core:step-selection-right", function() { moveSelection(RED.view.gridSize(),0);});
             RED.actions.add("core:step-selection-down", function() { moveSelection(0,RED.view.gridSize());});
@@ -743,6 +784,7 @@ RED.view.tools = (function() {
             RED.actions.add("core:distribute-selection-vertically", function() { distributeSelection('v') })
 
 
+
             // RED.actions.add("core:add-node", function() { addNode() })
         },
         /**
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 51f4428f6..40d8af2e7 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
@@ -663,14 +663,17 @@ RED.view = (function() {
         var activeWorkspace = RED.workspaces.active();
 
         activeNodes = RED.nodes.filterNodes({z:activeWorkspace});
-
+        activeNodes.forEach(function(n,i) {
+            n._index = i;
+        })
         activeLinks = RED.nodes.filterLinks({
             source:{z:activeWorkspace},
             target:{z:activeWorkspace}
         });
 
         activeGroups = RED.nodes.groups(activeWorkspace)||[];
-        activeGroups.forEach(function(g) {
+        activeGroups.forEach(function(g,i) {
+            g._index = i;
             if (g.g) {
                 g._root = g.g;
                 g._depth = 1;
@@ -703,7 +706,8 @@ RED.view = (function() {
             if (a._root === b._root) {
                 return a._depth - b._depth;
             } else {
-                return a._root.localeCompare(b._root);
+                // return a._root.localeCompare(b._root);
+                return a._index - b._index;
             }
         });
 
@@ -712,7 +716,8 @@ RED.view = (function() {
             if (a._root === b._root) {
                 return a._depth - b._depth;
             } else {
-                return a._root.localeCompare(b._root);
+                return a._index - b._index;
+                // return a._root.localeCompare(b._root);
             }
         })
     }
@@ -3816,7 +3821,6 @@ RED.view = (function() {
                 .attr("class", "red-ui-flow-node red-ui-flow-node-group")
                 .classed("red-ui-flow-subflow", activeSubflow != null);
 
-
             nodeEnter.each(function(d,i) {
                 this.__outputs__ = [];
                 this.__inputs__ = [];
@@ -3962,7 +3966,12 @@ RED.view = (function() {
                 RED.hooks.trigger("viewAddNode",{node:d,el:this})
             });
 
+            var nodesReordered = false;
             node.each(function(d,i) {
+                if (d._reordered) {
+                    nodesReordered = true;
+                    delete d._reordered;
+                }
                 if (d.dirty) {
                     var self = this;
                     var thisNode = d3.select(this);
@@ -4270,6 +4279,13 @@ RED.view = (function() {
 
                 RED.hooks.trigger("viewRedrawNode",{node:d,el:this})
             });
+
+            if (nodesReordered) {
+                node.sort(function(a,b) {
+                    return a._index - b._index;
+                })
+            }
+
             var link = linkLayer.selectAll(".red-ui-flow-link").data(
                 activeLinks,
                 function(d) {
@@ -4508,7 +4524,7 @@ RED.view = (function() {
                     if (a._root === b._root) {
                         return a._depth - b._depth;
                     } else {
-                        return a._root.localeCompare(b._root);
+                        return a._index - b._index;
                     }
                 })
             }
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
index a7a4e024f..336b243c5 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
@@ -293,7 +293,14 @@ RED.workspaces = (function() {
                 }
             },
             onreorder: function(oldOrder, newOrder) {
-                RED.history.push({t:'reorder',order:oldOrder,dirty:RED.nodes.dirty()});
+                RED.history.push({
+                    t:'reorder',
+                    workspaces: {
+                        from:oldOrder,
+                        to:newOrder
+                    },
+                    dirty:RED.nodes.dirty()
+                });
                 RED.nodes.dirty(true);
                 setWorkspaceOrder(newOrder);
             },

From 9dc5ae21c4a8da55cfa77b565a6d7eb18c868280 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Tue, 7 Sep 2021 12:04:58 +0100
Subject: [PATCH 27/27] Add menu options for raise/lower actions

---
 .../editor-client/locales/en-US/editor.json   |  6 +++++-
 .../@node-red/editor-client/src/js/red.js     | 21 ++++++++++++-------
 .../editor-client/src/js/ui/view-tools.js     |  2 +-
 .../@node-red/editor-client/src/js/ui/view.js | 14 +++++++++++++
 4 files changed, 33 insertions(+), 10 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 adeae0c2d..63ea0efe9 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
@@ -125,7 +125,11 @@
             "alignMiddle":"Align to middle",
             "alignBottom":"Align to bottom",
             "distributeHorizontally":"Distribute horizontally",
-            "distributeVertically":"Distribute vertically"
+            "distributeVertically":"Distribute vertically",
+            "moveToBack":"Move to back",
+            "moveToFront":"Move to front",
+            "moveBackwards":"Move backwards",
+            "moveForwards":"Move forwards"
         }
     },
     "actions": {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/red.js b/packages/node_modules/@node-red/editor-client/src/js/red.js
index 171e3124b..ad68ea612 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/red.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/red.js
@@ -584,16 +584,21 @@ var RED = (function() {
         ]});
 
         menuOptions.push({id:"menu-item-arrange-menu", label:RED._("menu.label.arrange"), options: [
-            {id: "menu-item-view-tools-align-left", label:RED._("menu.label.alignLeft"), onselect: "core:align-selection-to-left"},
-            {id: "menu-item-view-tools-align-center", label:RED._("menu.label.alignCenter"), onselect: "core:align-selection-to-center"},
-            {id: "menu-item-view-tools-align-right", label:RED._("menu.label.alignRight"), onselect: "core:align-selection-to-right"},
+            {id: "menu-item-view-tools-move-to-back", label:RED._("menu.label.moveToBack"), disabled: true, onselect: "core:move-selection-to-back"},
+            {id: "menu-item-view-tools-move-to-front", label:RED._("menu.label.moveToFront"), disabled: true, onselect: "core:move-selection-to-front"},
+            {id: "menu-item-view-tools-move-backwards", label:RED._("menu.label.moveBackwards"), disabled: true, onselect: "core:move-selection-backwards"},
+            {id: "menu-item-view-tools-move-forwards", label:RED._("menu.label.moveForwards"), disabled: true, onselect: "core:move-selection-forwards"},
             null,
-            {id: "menu-item-view-tools-align-top", label:RED._("menu.label.alignTop"), onselect: "core:align-selection-to-top"},
-            {id: "menu-item-view-tools-align-middle", label:RED._("menu.label.alignMiddle"), onselect: "core:align-selection-to-middle"},
-            {id: "menu-item-view-tools-align-bottom", label:RED._("menu.label.alignBottom"), onselect: "core:align-selection-to-bottom"},
+            {id: "menu-item-view-tools-align-left", label:RED._("menu.label.alignLeft"), disabled: true, onselect: "core:align-selection-to-left"},
+            {id: "menu-item-view-tools-align-center", label:RED._("menu.label.alignCenter"), disabled: true, onselect: "core:align-selection-to-center"},
+            {id: "menu-item-view-tools-align-right", label:RED._("menu.label.alignRight"), disabled: true, onselect: "core:align-selection-to-right"},
             null,
-            {id: "menu-item-view-tools-distribute-horizontally", label:RED._("menu.label.distributeHorizontally"), onselect: "core:distribute-selection-horizontally"},
-            {id: "menu-item-view-tools-distribute-veritcally", label:RED._("menu.label.distributeVertically"), onselect: "core:distribute-selection-vertically"}
+            {id: "menu-item-view-tools-align-top", label:RED._("menu.label.alignTop"), disabled: true, onselect: "core:align-selection-to-top"},
+            {id: "menu-item-view-tools-align-middle", label:RED._("menu.label.alignMiddle"), disabled: true, onselect: "core:align-selection-to-middle"},
+            {id: "menu-item-view-tools-align-bottom", label:RED._("menu.label.alignBottom"), disabled: true, onselect: "core:align-selection-to-bottom"},
+            null,
+            {id: "menu-item-view-tools-distribute-horizontally", label:RED._("menu.label.distributeHorizontally"), disabled: true, onselect: "core:distribute-selection-horizontally"},
+            {id: "menu-item-view-tools-distribute-veritcally", label:RED._("menu.label.distributeVertically"), disabled: true, onselect: "core:distribute-selection-vertically"}
         ]});
 
         menuOptions.push(null);
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js
index 2c59fc352..2fba37e88 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js
@@ -709,7 +709,7 @@ RED.view.tools = (function() {
                 if (dir === "forwards") {
                     movedNodes = RED.nodes.moveNodesForwards(nodesToMove);
                 } else if (dir === "backwards") {
-                    movedNodes = RED.nodes.moveNodesBacks(nodesToMove);
+                    movedNodes = RED.nodes.moveNodesBackwards(nodesToMove);
                 } else if (dir === "front") {
                     movedNodes = RED.nodes.moveNodesToFront(nodesToMove);
                 } else if (dir === "back") {
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 40d8af2e7..d154fe865 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
@@ -504,9 +504,23 @@ RED.view = (function() {
 
         RED.events.on("view:selection-changed", function(selection) {
             var hasSelection = (selection.nodes && selection.nodes.length > 0);
+            var hasMultipleSelection = hasSelection && selection.nodes.length > 1;
             RED.menu.setDisabled("menu-item-edit-cut",!hasSelection);
             RED.menu.setDisabled("menu-item-edit-copy",!hasSelection);
             RED.menu.setDisabled("menu-item-edit-select-connected",!hasSelection);
+            RED.menu.setDisabled("menu-item-view-tools-move-to-back",!hasSelection);
+            RED.menu.setDisabled("menu-item-view-tools-move-to-front",!hasSelection);
+            RED.menu.setDisabled("menu-item-view-tools-move-backwards",!hasSelection);
+            RED.menu.setDisabled("menu-item-view-tools-move-forwards",!hasSelection);
+
+            RED.menu.setDisabled("menu-item-view-tools-align-left",!hasMultipleSelection);
+            RED.menu.setDisabled("menu-item-view-tools-align-center",!hasMultipleSelection);
+            RED.menu.setDisabled("menu-item-view-tools-align-right",!hasMultipleSelection);
+            RED.menu.setDisabled("menu-item-view-tools-align-top",!hasMultipleSelection);
+            RED.menu.setDisabled("menu-item-view-tools-align-middle",!hasMultipleSelection);
+            RED.menu.setDisabled("menu-item-view-tools-align-bottom",!hasMultipleSelection);
+            RED.menu.setDisabled("menu-item-view-tools-distribute-horizontally",!hasMultipleSelection);
+            RED.menu.setDisabled("menu-item-view-tools-distribute-veritcally",!hasMultipleSelection);
         })
 
         RED.actions.add("core:delete-selection",deleteSelection);