Move tab edit dialog into editor and use new edit panes

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) },

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');

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);
+
+            }
+        }
+    });
+})();

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",

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");
+        // First, get the values for the SubflowTemplate defined properties
-        var isTab = (node.type === "tab");
+        //  - these are the ones with custom UI elements
-
+        var parentEnv = getSubflowInstanceParentEnv(node);
-        if (!isGroup && !isTab) {
+        parentEnv.forEach(function(data) {
-            // First, get the values for the SubflowTemplate defined properties
+            var item;
-            //  - these are the ones with custom UI elements
+            var ui = data.ui || {};
-            var parentEnv = getSubflowInstanceParentEnv(node);
+            if (!ui.type) {
-            parentEnv.forEach(function(data) {
+                if (data.parent && data.parent.type === "cred") {
-                var item;
+                    ui.type = "cred";
-                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.opts = ui.opts || {};
+                    ui.type = "input";
+                    ui.opts = {types:DEFAULT_ENV_TYPE_LIST}
                 }
-                var input = $("#"+getSubflowEnvPropertyName(data.name));
+            } else {
-                if (input.length || ui.type === "cred") {
+                ui.opts = ui.opts || {};
-                    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');
@@ -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
     }
 })();

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) {