Rework config sidebar and deploy warning

editor/js/history.js

@@ -271,6 +271,7 @@ RED.history = (function() {
                 RED.view.redraw(true);
                 RED.palette.refresh();
                 RED.workspaces.refresh();
+                RED.sidebar.config.refresh();
             }
         }
     }

editor/js/ui/deploy.js

@@ -208,13 +208,13 @@ RED.deploy = (function() {
                         .html("<li>"+invalidNodes.map(function(A) { return (A.tab?"["+A.tab+"] ":"")+A.label+" ("+A.type+")"}).join("</li><li>")+"</li>");
 
                 } else if (hasUnusedConfig && !ignoreDeployWarnings.unusedConfig) {
-                    showWarning = true;
+                    // showWarning = true;
-                    $( "#node-dialog-confirm-deploy-type" ).val("unusedConfig");
+                    // $( "#node-dialog-confirm-deploy-type" ).val("unusedConfig");
-                    $( "#node-dialog-confirm-deploy-unused" ).show();
+                    // $( "#node-dialog-confirm-deploy-unused" ).show();
-
+                    //
-                    unusedConfigNodes.sort(sortNodeInfo);
+                    // unusedConfigNodes.sort(sortNodeInfo);
-                    $( "#node-dialog-confirm-deploy-unused-list" )
+                    // $( "#node-dialog-confirm-deploy-unused-list" )
-                        .html("<li>"+unusedConfigNodes.map(function(A) { return (A.tab?"["+A.tab+"] ":"")+A.label+" ("+A.type+")"}).join("</li><li>")+"</li>");
+                    //     .html("<li>"+unusedConfigNodes.map(function(A) { return (A.tab?"["+A.tab+"] ":"")+A.label+" ("+A.type+")"}).join("</li><li>")+"</li>");
                 }
                 if (showWarning) {
                     $( "#node-dialog-confirm-deploy-hide" ).prop("checked",false);
@@ -241,7 +241,12 @@ RED.deploy = (function() {
                     "Node-RED-Deployment-Type":deploymentType
                 }
             }).done(function(data,textStatus,xhr) {
-                RED.notify(RED._("deploy.successfulDeploy"),"success");
+                if (hasUnusedConfig) {
+                    RED.notify(RED._("deploy.successfulDeploy")+
+                    '<p><br>You have some unused configuration nodes. <a href="#" onclick="RED.sidebar.config.show(); return false;" >Click here</a> to see them</p>',"success",false,6000);
+                } else {
+                    RED.notify(RED._("deploy.successfulDeploy"),"success");
+                }
                 RED.nodes.eachNode(function(node) {
                     if (node.changed) {
                         node.dirty = true;

editor/js/ui/palette.js

@@ -363,7 +363,7 @@ RED.palette = (function() {
         }
 
         var re = new RegExp(val,'i');
-        $(".palette_node").each(function(i,el) {
+        $("#palette-container .palette_node").each(function(i,el) {
             var currentLabel = $(el).find(".palette_label").text();
             if (val === "" || re.test(el.id) || re.test(currentLabel)) {
                 $(this).show();

editor/js/ui/sidebar.js

@@ -20,10 +20,14 @@ RED.sidebar = (function() {
         id:"sidebar-tabs",
         onchange:function(tab) {
             $("#sidebar-content").children().hide();
+            $("#sidebar-footer").children().hide();
             if (tab.onchange) {
                 tab.onchange.call(tab);
             }
             $(tab.content).show();
+            if (tab.toolbar) {
+                $(tab.toolbar).show();
+            }
         },
         onremove: function(tab) {
             $(tab.content).hide();
@@ -58,6 +62,11 @@ RED.sidebar = (function() {
 
         $("#sidebar-content").append(options.content);
         $(options.content).hide();
+        if (options.toolbar) {
+            $("#sidebar-footer").append(options.toolbar);
+            $(options.toolbar).hide();
+        }
+        $(options.content).hide();
         var id = options.id;
 
         RED.menu.addItem("menu-item-view-menu",{

editor/js/ui/tab-config.js

@@ -19,24 +19,101 @@ RED.sidebar.config = (function() {
     var content = document.createElement("div");
     content.className = "sidebar-node-config"
 
-    $('<div class="palette-category">'+
+    var toolbar = $('<div id="palette-footer">'+
-      '<div class="workspace-config-node-tray-header palette-header"><i class="fa fa-angle-down expanded"></i><span data-i18n="sidebar.config.local"></span></div>'+
+        //'<a class="sidebar-button text-button" id="workspace-config-node-filter-unused" href="#"><i class="fa fa-square-o"></i> <span data-i18n="sidebar.config.filterUnused"></span></a> '+
-    '<ul id="workspace-config-node-tray-locals" class="palette-content config-node-list"></ul>'+
+        '<a class="sidebar-button" id="workspace-config-node-collapse-all" href="#"><i class="fa fa-angle-double-up"></i></a> '+
-    '</div>'+
+        '<a class="sidebar-button" id="workspace-config-node-expand-all" href="#"><i class="fa fa-angle-double-down"></i></a>'+
-    '<div class="palette-category">'+
+        '</div>');
-        '<div class="workspace-config-node-tray-header palette-header"><i class="fa fa-angle-down expanded"></i><span data-i18n="sidebar.config.global"></span></div>'+
+
-        '<ul id="workspace-config-node-tray-globals" class="palette-content config-node-list"></ul>'+
+
-    '</div>').appendTo(content);
+    var flowCategories = $("<div>").appendTo(content);
+    var subflowCategories = $("<div>").appendTo(content);
+    var globalCategories = $("<div>").appendTo(content);
+
+    var showUnusedOnly = false;
+
+    // $('<div class="palette-category">'+
+    //   '<div class="workspace-config-node-tray-header palette-header"><i class="fa fa-angle-down expanded"></i><span data-i18n="sidebar.config.local"></span></div>'+
+    // '<ul id="workspace-config-node-tray-locals" class="palette-content config-node-list"></ul>'+
+    // '</div>'+
+    // '<div class="palette-category">'+
+    //     '<div class="workspace-config-node-tray-header palette-header"><i class="fa fa-angle-down expanded"></i><span data-i18n="sidebar.config.global"></span></div>'+
+    //     '<ul id="workspace-config-node-tray-globals" class="palette-content config-node-list"></ul>'+
+    // '</div>').appendTo(content);
+
+    var categories = {};
+
+    function getOrCreateCategory(name,parent,label) {
+        name = name.replace(/\./i,"-");
+        if (!categories[name]) {
+            var container = $('<div class="palette-category workspace-config-node-category" id="workspace-config-node-category-'+name+'"></div>').appendTo(parent);
+            var header = $('<div class="workspace-config-node-tray-header palette-header"><i class="fa fa-angle-down expanded"></i></div>').appendTo(container);
+            if (label) {
+                $('<span/>').text(label).appendTo(header);
+            } else {
+                $('<span data-i18n="sidebar.config.'+name+'">').appendTo(header);
+            }
+            category = $('<ul class="palette-content config-node-list"></ul>').appendTo(container);
+            container.i18n();
+            var icon = header.find("i");
+            var result = {
+                list: category,
+                size: function() {
+                    return result.list.find("li:not(.config_node_none)").length
+                },
+                open: function(snap) {
+                    if (!icon.hasClass("expanded")) {
+                        icon.addClass("expanded");
+                        if (snap) {
+                            result.list.show();
+                        } else {
+                            result.list.slideDown();
+                        }
+                    }
+                },
+                close: function(snap) {
+                    if (icon.hasClass("expanded")) {
+                        icon.removeClass("expanded");
+                        if (snap) {
+                            result.list.hide();
+                        } else {
+                            result.list.slideUp();
+                        }
+                    }
+                }
+            };
+
+            header.on('click', function(e) {
+                if (icon.hasClass("expanded")) {
+                    result.close();
+                } else {
+                    result.open();
+                }
+            });
+            categories[name] = result;
+        }
+        return categories[name];
+    }
+
+    function createConfigNodeList(id,nodes) {
+        var category = getOrCreateCategory(id.replace(/\./i,"-"))
+        var list = category.list;
 
-    function createConfigNodeList(nodes,list) {
         nodes.sort(function(A,B) {
             if (A.type < B.type) { return -1;}
             if (A.type > B.type) { return 1;}
             return 0;
         });
+        if (showUnusedOnly) {
+            nodes = nodes.filter(function(n) {
+                return n.users.length === 0;
+            })
+        }
+        // console.log(list);
         list.empty();
         if (nodes.length === 0) {
             $('<li class="config_node_none" data-i18n="sidebar.config.none">NONE</li>').i18n().appendTo(list);
+            category.close(true);
         } else {
             var currentType = "";
             nodes.forEach(function(node) {
@@ -86,23 +163,44 @@ RED.sidebar.config = (function() {
                     RED.view.redraw();
                 });
             });
+            category.open(true);
         }
     }
 
     function refreshConfigNodeList() {
+        var validList = {"global":true};
 
-        var localConfigNodes = [];
+        getOrCreateCategory("global",globalCategories);
+
+        RED.nodes.eachWorkspace(function(ws) {
+            validList[ws.id] = true;
+            getOrCreateCategory(ws.id,flowCategories,ws.label);
+        })
+        RED.nodes.eachSubflow(function(sf) {
+            validList[sf.id] = true;
+            getOrCreateCategory(sf.id,subflowCategories,sf.name);
+        })
+        // $(".workspace-config-node-category").each(function() {
+        //     if (!validList[$(this).attr('id').substring("workspace-config-node-category-".length)]) {
+        //         $(this).remove();
+        //     }
+        // })
         var globalConfigNodes = [];
-
+        var configList = {};
         RED.nodes.eachConfig(function(cn) {
-            if (cn.z == RED.workspaces.active()) {
+            if (cn.z) {//} == RED.workspaces.active()) {
-                localConfigNodes.push(cn);
+                configList[cn.z] = configList[cn.z]||[];
+                configList[cn.z].push(cn);
             } else if (!cn.z) {
                 globalConfigNodes.push(cn);
             }
         });
-        createConfigNodeList(localConfigNodes,$("#workspace-config-node-tray-locals"));
+        for (var id in validList) {
-        createConfigNodeList(globalConfigNodes,$("#workspace-config-node-tray-globals"));
+            if (validList.hasOwnProperty(id)) {
+                createConfigNodeList(id,configList[id]||[]);
+            }
+        }
+        createConfigNodeList('global',globalConfigNodes);
     }
 
     function init() {
@@ -111,6 +209,7 @@ RED.sidebar.config = (function() {
             label: RED._("sidebar.config.label"),
             name: RED._("sidebar.config.name"),
             content: content,
+            toolbar: toolbar,
             closeable: true,
             visible: false,
             onchange: function() { refreshConfigNodeList(); }
@@ -119,17 +218,36 @@ RED.sidebar.config = (function() {
         RED.menu.setAction('menu-item-config-nodes',function() {
             RED.sidebar.show('config');
         })
-        $(".workspace-config-node-tray-header").on('click', function(e) {
-            var icon = $(this).find("i");
-            if (icon.hasClass("expanded")) {
-                icon.removeClass("expanded");
-                $(this).next().slideUp();
-            } else {
-                icon.addClass("expanded");
-                $(this).next().slideDown();
-            }
 
+        $("#workspace-config-node-collapse-all").on("click", function(e) {
+            e.preventDefault();
+            for (var cat in categories) {
+                if (categories.hasOwnProperty(cat)) {
+                    categories[cat].close();
+                }
+            }
         });
+        $("#workspace-config-node-expand-all").on("click", function(e) {
+            e.preventDefault();
+            for (var cat in categories) {
+                if (categories.hasOwnProperty(cat)) {
+                    if (categories[cat].size() > 0) {
+                        categories[cat].open();
+                    }
+                }
+            }
+        });
+        $('#workspace-config-node-filter-unused').on("click",function(e) {
+            e.preventDefault();
+            if (showUnusedOnly) {
+                $(this).find("i").addClass('fa-square-o').removeClass('fa-check-square-o');
+            } else {
+                $(this).find("i").removeClass('fa-square-o').addClass('fa-check-square-o');
+            }
+            showUnusedOnly = !showUnusedOnly;
+            refreshConfigNodeList();
+        })
+
 
     }
     function show() {

editor/js/ui/workspaces.js

@@ -28,7 +28,6 @@ RED.workspaces = (function() {
             var tabId = RED.nodes.id();
             do {
                 workspaceIndex += 1;
-                //TODO: nls of Sheet
             } while($("#workspace-tabs a[title='"+RED._('workspace.defaultName',{number:workspaceIndex})+"']").size() !== 0);
 
             ws = {type:"tab",id:tabId,label:RED._('workspace.defaultName',{number:workspaceIndex})};

editor/sass/sidebar.scss

@@ -37,7 +37,6 @@
     right: 0;
     bottom: 25px;
     left: 0px;
-    padding-top: 3px;
     overflow-y: auto;
 }
 
@@ -66,3 +65,7 @@
 #sidebar-footer {
     @include component-footer;
 }
+
+.sidebar-button {
+    @include component-footer-button;
+}

editor/templates/index.mst

@@ -104,9 +104,6 @@
         <div id="node-dialog-confirm-deploy-unknown" style="text-align: left; padding-top: 10px;" data-i18n="[prepend]deploy.confirm.unknown;[append]deploy.confirm.confirm">
             <ul style="font-size: 0.9em; width: 400px; margin: 10px auto; text-align: left;" id="node-dialog-confirm-deploy-unknown-list"></ul>
         </div>
-        <div id="node-dialog-confirm-deploy-unused" style="text-align: left; padding-top: 10px;" data-i18n="[prepend]deploy.confirm.unusedConfig;[append]deploy.confirm.confirm">
-            <ul style="font-size: 0.9em; width: 400px; margin: 10px auto; text-align: left;" id="node-dialog-confirm-deploy-unused-list"></ul>
-        </div>
     </form>
 </div>
 

red/api/locales/en-US/editor.json

@@ -9,8 +9,8 @@
         }
     },
     "workspace": {
-        "defaultName": "Sheet __number__",
+        "defaultName": "Flow __number__",
-        "renameSheet": "Rename sheet",
+        "renameSheet": "Rename flow",
         "confirmDelete": "Confirm delete",
         "delete": "Are you sure you want to delete '__label__'?",
         "dropFlowHere": "Drop the flow here"
@@ -82,7 +82,8 @@
         "modifiedFlowsDesc": "Only deploys flows that contain changed nodes",
         "modifiedNodes": "Modified Nodes",
         "modifiedNodesDesc": "Only deploys nodes that have changed",
-        "successfulDeploy": "Successfully Deployed",
+        "successfulDeploy": "Successfully deployed",
+        
         "errors": {
             "noResponse": "no response from server"
         },
@@ -94,7 +95,6 @@
             "undeployedChanges": "You have undeployed changes.\n\nLeaving this page will lose these changes.",
             "improperlyConfigured": "The workspace contains some nodes that are not properly configured:",
             "unknown": "The workspace contains some unknown node types:",
-            "unusedConfig": "The workspace contains some unused configuration nodes:",
             "confirm": "Are you sure you want to deploy?"
         }
     },
@@ -201,11 +201,11 @@
         "config": {
             "name": "Configuration nodes",
             "label": "config",
-            "local": "on this flow",
+            "global": "Global Nodes",
-            "global": "on all flows",
             "none": "none",
             "subflows": "subflows",
-            "flows": "flows"
+            "flows": "flows",
+            "filterUnused":"show unused only"
         }
     },
     "typedInput": {