Move config nodes under type-level hierarchy in outline

Also adds user-count label and button to open search

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

@@ -360,7 +360,7 @@
                 }
                 processChildren(item,newItem);
 
-                if (!item.deferBuild) {
+                if (!item.deferBuild && item.treeList.childList) {
                     item.treeList.childList.editableList('insertItemAt',newItem,position)
                     if (select) {
                         setTimeout(function() {

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

@@ -79,9 +79,21 @@ RED.search = (function() {
         return val;
     }
 
+    function extractValue(val, flagName, flags) {
+        // flagName:XYZ
+        var regEx = new RegExp("(?:^| )"+flagName+":([^ ]+)(?: |$)");
+        var m
+        while(m = regEx.exec(val)) {
+            val = val.replace(regEx," ").trim();
+            flags[flagName] = flags[flagName] || [];
+            flags[flagName].push(m[1]);
+        }
+        return val;
+    }
+
     function search(val) {
         var results = [];
-        var keys = Object.keys(index);
+        var keys = [];
         var typeFilter;
         var m = /(?:^| )type:([^ ]+)/.exec(val);
         if (m) {
@@ -93,6 +105,8 @@ RED.search = (function() {
         val = extractFlag(val,"unused",flags);
         val = extractFlag(val,"config",flags);
         val = extractFlag(val,"subflow",flags);
+        // uses:<node-id>
+        val = extractValue(val,"uses",flags);
 
         var hasFlags = Object.keys(flags).length > 0;
 
@@ -104,6 +118,11 @@ RED.search = (function() {
             var j;
             var list = [];
             var nodes = {};
+            if (flags.uses) {
+                keys = flags.uses;
+            } else {
+                keys = Object.keys(index);
+            }
             for (i=0;i<keys.length;i++) {
                 var key = keys[i];
                 var kpos = keys[i].indexOf(val);
@@ -112,6 +131,9 @@ RED.search = (function() {
                     for (j=0;j<ids.length;j++) {
                         var node = index[key][ids[j]];
                         var isConfigNode = node.node._def.category === "config" && node.node.type !== 'group';
+                        if (flags.uses && key === node.node.id) {
+                            continue;
+                        }
                         if (flags.hasOwnProperty("invalid")) {
                             var nodeIsValid = !node.node.hasOwnProperty("valid") || node.node.valid;
                             if (flags.invalid === nodeIsValid) {

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

@@ -11,6 +11,8 @@ RED.sidebar.info.outliner = (function() {
 
     var objects = {};
     var missingParents = {};
+    var configNodeTypes;
+
 
     function getFlowData() {
         var flowData = [
@@ -28,7 +30,9 @@ RED.sidebar.info.outliner = (function() {
             },
             {
                 id: "__global__",
+                flow: "__global__",
                 label: RED._("sidebar.info.globalConfig"),
+                types: {},
                 children: [
                     getEmptyItem("__global__")
                 ]
@@ -38,6 +42,7 @@ RED.sidebar.info.outliner = (function() {
         flowList = flowData[0];
         subflowList = flowData[1];
         globalConfigNodes = flowData[2];
+        configNodeTypes = { __global__: globalConfigNodes};
 
         return flowData;
     }
@@ -141,6 +146,16 @@ RED.sidebar.info.outliner = (function() {
 
     function addControls(n,div) {
         var controls = $('<div>',{class:"red-ui-info-outline-item-controls red-ui-info-outline-item-hover-controls"}).appendTo(div);
+
+        if (n._def.category === "config" && n.type !== "group") {
+            var userCountBadge = $('<button type="button" class="red-ui-info-outline-item-control-users red-ui-button red-ui-button-small"><i class="fa fa-toggle-right"></i></button>').text(n.users.length).appendTo(controls).on("click",function(evt) {
+                evt.preventDefault();
+                evt.stopPropagation();
+                RED.search.show("uses:"+n.id);
+            })
+            RED.popover.tooltip(userCountBadge,function() { return RED._('editor.nodesUse',{count:n.users.length})});
+        }
+
         if (n._def.button) {
             var triggerButton = $('<button type="button" class="red-ui-info-outline-item-control-action red-ui-button red-ui-button-small"><i class="fa fa-toggle-right"></i></button>').appendTo(controls).on("click",function(evt) {
                 evt.preventDefault();
@@ -394,19 +409,59 @@ RED.sidebar.info.outliner = (function() {
         } else {
             existingObject.element.find(".red-ui-info-outline-item-label").html("&nbsp;");
         }
-        if (parent !== existingObject.parent.id) {
+        if (parent !== existingObject.parent.parent.flow) {
+            var parentItem = existingObject.parent;
             existingObject.treeList.remove(true);
-            if (parent === "__global__") {
+            if (parentItem.children.length === 0) {
-                globalConfigNodes.treeList.addChild(existingObject);
+                if (parentItem.config) {
+                    // this is a config
+                    parentItem.treeList.remove();
+                    // console.log("Removing",n.type,"from",parentItem.parent.id||parentItem.parent.parent.id)
+
+                    delete configNodeTypes[parentItem.parent.id||parentItem.parent.parent.id].types[n.type];
+
+
+                    if (parentItem.parent.children.length === 0) {
+                        if (parentItem.parent.id === "__global__") {
+                            parentItem.parent.treeList.addChild(getEmptyItem(parentItem.parent.id));
                         } else {
-                if (empties[parent]) {
+                            delete configNodeTypes[parentItem.parent.parent.id];
-                    empties[parent].treeList.remove();
+                            parentItem.parent.treeList.remove();
-                    delete empties[parent];
                         }
-                objects[parent].treeList.addChild(existingObject)
                     }
+                } else {
+                    parentItem.treeList.addChild(getEmptyItem(parentItem.id));
+                }
+            }
+            // This must be a config node that has been rescoped
+            createFlowConfigNode(parent,n.type);
+            configNodeTypes[parent].types[n.type].treeList.addChild(objects[n.id]);
+
+            // if (parent === "__global__") {
+            //     // Global always exists here
+            //     if (!configNodeTypes[parent][n.type]) {
+            //         configNodeTypes[parent][n.type] = {
+            //             config: true,
+            //             label: n.type,
+            //             children: []
+            //         }
+            //         globalConfigNodes.treeList.addChild(configNodeTypes[parent][n.type])
+            //     }
+            //     configNodeTypes[parent][n.type].treeList.addChild(existingObject);
+            // } else {
+            //     if (empties[parent]) {
+            //         empties[parent].treeList.remove();
+            //         delete empties[parent];
+            //     }
+            //     objects[parent].treeList.addChild(existingObject)
+            // }
         }
         existingObject.element.toggleClass("red-ui-info-outline-item-disabled", !!n.d)
+
+        if (n._def.category === "config" && n.type !== 'group') {
+            existingObject.element.find(".red-ui-info-outline-item-control-users").text(n.users.length);
+        }
+
         updateSearch();
     }
     function onObjectRemove(n) {
@@ -418,12 +473,25 @@ RED.sidebar.info.outliner = (function() {
         if (empties[n.id]) {
             delete empties[n.id];
         }
-
         var parent = existingObject.parent;
         if (parent.children.length === 0) {
+            if (parent.config) {
+                // this is a config
+                parent.treeList.remove();
+                delete configNodeTypes[parent.parent.id||n.z].types[n.type];
+                if (parent.parent.children.length === 0) {
+                    if (parent.parent.id === "__global__") {
+                        parent.parent.treeList.addChild(getEmptyItem(parent.parent.id));
+                    } else {
+                        delete configNodeTypes[n.z];
+                        parent.parent.treeList.remove();
+                    }
+                }
+            } else {
                 parent.treeList.addChild(getEmptyItem(parent.id));
             }
         }
+    }
     function getGutter(n) {
         var span = $("<span>",{class:"red-ui-info-outline-gutter"});
         var revealButton = $('<button type="button" class="red-ui-info-outline-item-control-reveal red-ui-button red-ui-button-small"><i class="fa fa-search"></i></button>').appendTo(span).on("click",function(evt) {
@@ -434,6 +502,35 @@ RED.sidebar.info.outliner = (function() {
         RED.popover.tooltip(revealButton,RED._("sidebar.info.find"));
         return span;
     }
+
+    function createFlowConfigNode(parent,type) {
+        // console.log("createFlowConfig",parent,type,configNodeTypes[parent]);
+        if (empties[parent]) {
+            empties[parent].treeList.remove();
+            delete empties[parent];
+        }
+        if (!configNodeTypes[parent]) {
+            // There is no 'config nodes' item in the parent flow
+            configNodeTypes[parent] = {
+                config: true,
+                flow: parent,
+                types: {},
+                label: RED._("menu.label.displayConfig"),
+                children: []
+            }
+            objects[parent].treeList.insertChildAt(configNodeTypes[parent],0);
+            // console.log("CREATED", parent)
+        }
+        if (!configNodeTypes[parent].types[type]) {
+            configNodeTypes[parent].types[type] = {
+                config: true,
+                label: type,
+                children: []
+            }
+            configNodeTypes[parent].treeList.addChild(configNodeTypes[parent].types[type]);
+            // console.log("CREATED", parent,type)
+        }
+    }
     function onNodeAdd(n) {
         objects[n.id] = {
             id: n.id,
@@ -449,7 +546,8 @@ RED.sidebar.info.outliner = (function() {
             }
         }
         var parent = n.g||n.z||"__global__";
-        if (parent !== "__global__") {
+
+        if (n._def.category !== "config" || n.type === 'group') {
             if (objects[parent]) {
                 if (empties[parent]) {
                     empties[parent].treeList.remove();
@@ -465,12 +563,8 @@ RED.sidebar.info.outliner = (function() {
                 missingParents[parent].push(objects[n.id])
             }
         } else {
-            if (empties[parent]) {
+            createFlowConfigNode(parent,n.type);
-                empties[parent].treeList.remove();
+            configNodeTypes[parent].types[n.type].treeList.addChild(objects[n.id]);
-                delete empties[parent];
-            }
-            // No parent - add to Global flow list
-            globalConfigNodes.treeList.addChild(objects[n.id]);
         }
         objects[n.id].element.toggleClass("red-ui-info-outline-item-disabled", !!n.d)
         updateSearch();