From 308c6ee4daceb84f03e06a92a714d0d160e78648 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 23 May 2019 16:39:34 +0100
Subject: [PATCH] Update catch/status nodes to use selectNodes api and treeList

---
 .../@node-red/nodes/core/core/25-catch.html   | 258 ++++++------------
 .../@node-red/nodes/core/core/25-status.html  | 253 ++++++-----------
 .../nodes/locales/en-US/messages.json         |  12 +-
 3 files changed, 177 insertions(+), 346 deletions(-)

diff --git a/packages/node_modules/@node-red/nodes/core/core/25-catch.html b/packages/node_modules/@node-red/nodes/core/core/25-catch.html
index c6ce40751..8e164caae 100644
--- a/packages/node_modules/@node-red/nodes/core/core/25-catch.html
+++ b/packages/node_modules/@node-red/nodes/core/core/25-catch.html
@@ -11,57 +11,18 @@
         <input type="checkbox" id="node-input-uncaught" style="display: inline-block; width: auto; vertical-align: top; margin-left: 30px; margin-right: 5px;">
         <label for="node-input-uncaught" style="width: auto" data-i18n="catch.label.uncaught"></label>
     </div>
-    <div class="form-row node-input-target-row" style="display: none;">
-        <div id="node-input-catch-target-container-div" style="min-height: 100px;position: relative;   box-sizing: border-box; border-radius: 2px; height: 180px;  border: 1px solid #ccc;overflow:hidden; ">
-            <div style="box-sizing: border-box; line-height: 20px; font-size: 0.8em; border-bottom: 1px solid #ddd; height: 20px;">
-              <input type="checkbox" data-i18n="[title]catch.label.selectAll" id="node-input-target-node-checkbox-all" style="width: 30px; margin: 0 2px 1px 2px;">
-              <div style="display: inline-block;"><a id="node-input-target-sort-label" href="#" data-i18n="[title]catch.label.sortByLabel"><span data-i18n="catch.label.node"></span> <i class="node-input-catch-sort-label-a fa fa-caret-down"></i><i class="node-input-catch-sort-label-d fa fa-caret-up"></i></a></div>
-              <div style="position: absolute; right: 10px; width: 50px; display: inline-block; text-align: right;"><a id="node-input-target-sort-type" href="#" data-i18n="[title]catch.label.sortByType"><i class="node-input-catch-sort-sublabel-a fa fa-caret-down"></i><i class="node-input-catch-sort-sublabel-d fa fa-caret-up"></i> <span data-i18n="catch.label.type"></span></a></div>
-            </div>
-            <div style="background: #fbfbfb; box-sizing: border-box; position:absolute; top:20px;bottom:0;left:0px;right:0px; overflow-y: scroll; overflow-x: hidden;">
-                <ul id="node-input-catch-target-container" style=" list-style-type:none; margin: 0;"></ul>
-            </div>
-        </div>
+    <div class="form-row node-input-target-row">
+        <button id="node-input-catch-target-select" class="red-ui-button" data-i18n="common.label.selectNodes"></button>
     </div>
+    <div class="form-row node-input-target-row node-input-target-list-row" style="min-height: 100px">
+        <div id="node-input-catch-target-container-div"></div>
+    </div>
+
     <div class="form-row">
         <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
         <input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
     </div>
 </script>
-
-<style>
-#node-input-catch-target-container {
-    position: relative;
-}
-#node-input-catch-target-container li {
-    padding: 2px 5px;
-    background: none;
-    font-size: 0.8em;
-    margin:0;
-    white-space: nowrap;
-}
-#node-input-catch-target-container li label {
-    margin-bottom: 0;
-    width: 100%;
-}
-#node-input-catch-target-container li label input {
-    vertical-align: top;
-    width:15px;
-    margin-right: 10px;
-}
-#node-input-catch-target-container li:hover,
-#node-input-catch-target-container li:hover .node-input-target-node-sublabel {
-    background: #f0f0f0;
-}
-.node-input-target-node-sublabel {
-    position:absolute;
-    right: 0px;
-    padding-right: 10px;
-    padding-left: 10px;
-    font-size: 0.8em;
-    background: #fbfbfb;
-}
-</style>
 <script type="text/javascript">
     RED.nodes.registerType('catch',{
         category: 'input',
@@ -87,146 +48,109 @@
             return this.name?"node_label_italic":"";
         },
         oneditprepare: function() {
-            var nodeList = $("#node-input-catch-target-container");
             var node = this;
-            this.resize = function() {
-                var rows = $("#dialog-form>div:not(.node-input-target-row)");
+            var scope = node.scope || [];
+
+            this._resize = function() {
+                var rows = $("#dialog-form>div:not(.node-input-target-list-row)");
                 var height = $("#dialog-form").height();
                 for (var i=0;i<rows.length;i++) {
                     height -= $(rows[i]).outerHeight(true);
                 }
-                var editorRow = $("#dialog-form>div.node-input-target-row");
-                height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
-                $("#node-input-catch-target-container-div").css("height",height+"px");
+                var editorRow = $("#dialog-form>div.node-input-target-list-row");
+                editorRow.css("height",height+"px");
             };
 
-            function createNodeList() {
-                var scope = node.scope || [];
-                nodeList.empty();
+            var dirList = $("#node-input-catch-target-container-div").css({width: "100%", height: "100%"})
+                .treeList({multi:true}).on("treelistitemmouseover", function(e, item) {
+                    item.node.highlighted = true;
+                    item.node.dirty = true;
+                    RED.view.redraw();
+                }).on("treelistitemmouseout", function(e, item) {
+                    item.node.highlighted = false;
+                    item.node.dirty = true;
+                    RED.view.redraw();
+                })
+            var candidateNodes = RED.nodes.filterNodes({z:node.z});
+            var allChecked = true;
+            var items = [];
+            var nodeItemMap = {};
 
-                var candidateNodes = RED.nodes.filterNodes({z:node.z});
-                var allChecked = true;
-
-                candidateNodes.forEach(function(n) {
-                    if (n.id === node.id) {
-                        return;
-                    }
-                    var isChecked = scope.indexOf(n.id) !== -1;
-
-                    allChecked = allChecked && isChecked;
-
-                    var container = $('<li/>',{class:"node-input-target-node"});
-                    var row = $('<label/>',{for:"node-input-target-node-"+n.id}).appendTo(container);
-                    $('<input>',{type:"checkbox",class:"node-input-target-node-checkbox",id:"node-input-target-node-"+n.id})
-                        .data('node-id',n.id)
-                        .prop('checked', isChecked)
-                        .appendTo(row);
-                    container.on('mouseover',function(e) {
-                        n.highlighted = true;
-                        n.dirty = true;
-                        RED.view.redraw();
-                    });
-                    container.on('mouseout',function(e) {
-                        n.highlighted = false;
-                        n.dirty = true;
-                        RED.view.redraw();
-                    });
-                    var labelSpan = $('<span>');
-                    var nodeDef = RED.nodes.getType(n.type);
-                    var label;
-                    var sublabel;
-                    if (nodeDef) {
-                        var l = nodeDef.label;
-                        label = (typeof l === "function" ? l.call(n) : l)||"";
-                        sublabel = n.type;
-                        if (sublabel.indexOf("subflow:") === 0) {
-                            var subflowId = sublabel.substring(8);
-                            var subflow = RED.nodes.subflow(subflowId);
-                            sublabel = "subflow : "+subflow.name;
-                        }
-                    }
-                    if (!nodeDef || !label) {
-                        label = n.type;
-                    }
-                    $('<span>',{class:"node-input-target-node-label",style:"white-space:nowrap"}).text(label).appendTo(row);
-                    if (sublabel) {
-                        $('<span>',{class:"node-input-target-node-sublabel"}).text(sublabel).appendTo(row);
-                    }
-
-                    container.appendTo(nodeList);
-                });
-
-                $(".node-input-target-node-checkbox").on("change", function() {
-                    if (!this.checked) {
-                        $("#node-input-target-node-checkbox-all").prop('checked',false);
-                    }
-                });
-
-                $("#node-input-target-node-checkbox-all").prop('checked',allChecked);
-
-                sortNodeList('label');
-            }
-
-            function sortNodeList(sortOn) {
-                var currentSort = nodeList.data('currentSort');
-                var currentSortOrder = nodeList.data('currentSortOrder');
-
-                if (!currentSort) {
-                    currentSort = sortOn;
-                    currentSortOrder = 'a';
-                } else {
-                    if (currentSort === sortOn) {
-                        currentSortOrder = (currentSortOrder === 'a'?'d':'a');
-                    } else {
-                        currentSortOrder = 'a';
-                    }
-                    currentSort = sortOn;
+            candidateNodes.forEach(function(n) {
+                if (n.id === node.id) {
+                    return;
                 }
-                nodeList.data('currentSort',currentSort);
-                nodeList.data('currentSortOrder',currentSortOrder);
+                var isChecked = scope.indexOf(n.id) !== -1;
 
-                $("#node-input-catch-target-container-div .fa").hide();
-                $(".node-input-catch-sort-"+currentSort+"-"+currentSortOrder).show();
+                allChecked = allChecked && isChecked;
 
+                var nodeDef = RED.nodes.getType(n.type);
+                var label;
+                var sublabel;
+                if (nodeDef) {
+                    var l = nodeDef.label;
+                    label = (typeof l === "function" ? l.call(n) : l)||"";
+                    sublabel = n.type;
+                    if (sublabel.indexOf("subflow:") === 0) {
+                        var subflowId = sublabel.substring(8);
+                        var subflow = RED.nodes.subflow(subflowId);
+                        sublabel = "subflow : "+subflow.name;
+                    }
+                }
+                if (!nodeDef || !label) {
+                    label = n.type;
+                }
+                nodeItemMap[n.id] = {
+                    node: n,
+                    label: label,
+                    sublabel: sublabel,
+                    selected: isChecked
+                };
+                items.push(nodeItemMap[n.id]);
+            });
+            dirList.treeList('data',items);
 
-                var items = nodeList.find("li").get();
-                items.sort(function(a,b) {
-                    var labelA = $(a).find(".node-input-target-node-"+currentSort).text().toLowerCase();
-                    var labelB = $(b).find(".node-input-target-node-"+currentSort).text().toLowerCase();
-                    if (labelA < labelB) { return currentSortOrder==='a'?-1:1; }
-                    if (labelA > labelB) { return currentSortOrder==='a'?1:-1; }
-                    return 0;
-                });
-                $.each(items, function(i, li){
-                    nodeList.append(li);
-                });
-            }
-            $("#node-input-target-sort-label").on("click", function(e) {
+            $("#node-input-catch-target-select").on("click", function(e) {
                 e.preventDefault();
-                sortNodeList('label');
-            });
-
-            $("#node-input-target-sort-type").on("click", function(e) {
-                e.preventDefault();
-                sortNodeList('sublabel');
-            });
-            $("#node-input-target-node-checkbox-all").on("change", function() {
-                $(".node-input-target-node-checkbox").prop('checked',this.checked);
-            });
-
-
+                var preselected = dirList.treeList('selected').map(function(n) {return n.node.id});
+                RED.tray.hide();
+                RED.view.selectNodes({
+                    prompt: RED._("node-red:common.notification.selectNodesTarget"),
+                    selected: preselected,
+                    onselect: function(selection) {
+                        RED.tray.show();
+                        var newlySelected = {};
+                        selection.forEach(function(n) {
+                            newlySelected[n.id] = true;
+                            if (nodeItemMap[n.id]) {
+                                nodeItemMap[n.id].treeList.select(true);
+                            }
+                        })
+                        preselected.forEach(function(id) {
+                            if (!newlySelected[id]) {
+                                nodeItemMap[id].treeList.select(false);
+                            }
+                        })
+                    },
+                    oncancel: function() {
+                        RED.tray.show();
+                    },
+                    filter: function(n) {
+                        return n.id !== node.id;
+                    }
+                });
+            })
 
             $("#node-input-scope-select").on("change", function(e) {
                 var scope = $(this).val();
                 if (scope === "target") {
-                    createNodeList();
                     $(".node-input-target-row").show();
                     $(".node-input-uncaught-row").hide();
                 } else {
                     $(".node-input-target-row").hide();
                     $(".node-input-uncaught-row").show();
                 }
-                node.resize();
+                node._resize();
             });
             if (this.scope === null) {
                 $("#node-input-scope-select").val("all");
@@ -241,17 +165,11 @@
                 this.scope = null;
             } else {
                 $("#node-input-uncaught").prop("checked",false);
-                var node = this;
-                node.scope = [];
-                $(".node-input-target-node-checkbox").each(function(n) {
-                    if ($(this).prop("checked")) {
-                        node.scope.push($(this).data('node-id'));
-                    }
-                });
+                this.scope = $("#node-input-catch-target-container-div").treeList('selected').map(function(i) { return i.node.id})
             }
         },
         oneditresize: function(size) {
-            this.resize();
+            this._resize();
         }
     });
 </script>
diff --git a/packages/node_modules/@node-red/nodes/core/core/25-status.html b/packages/node_modules/@node-red/nodes/core/core/25-status.html
index 588804ab1..bf53b78f8 100644
--- a/packages/node_modules/@node-red/nodes/core/core/25-status.html
+++ b/packages/node_modules/@node-red/nodes/core/core/25-status.html
@@ -7,17 +7,11 @@
             <option value="target" data-i18n="status.scope.selected"></options>
         </select>
     </div>
-    <div class="form-row node-input-target-row" style="display: none;">
-        <div id="node-input-status-target-container-div" style=" min-height: 100px;position: relative;   box-sizing: border-box; border-radius: 2px; height: 180px;  border: 1px solid #ccc;overflow:hidden; ">
-            <div style="box-sizing: border-box; line-height: 20px; font-size: 0.8em; border-bottom: 1px solid #ddd; height: 20px;">
-              <input type="checkbox" data-i18n="[title]status.label.selectAll" id="node-input-target-node-checkbox-all" style="width: 30px; margin: 0 2px 1px 2px;">
-              <div style="display: inline-block;"><a id="node-input-target-sort-label" href="#" data-i18n="[title]status.label.sortByLabel"><span data-i18n="status.label.node"></span> <i class="node-input-status-sort-label-a fa fa-caret-down"></i><i class="node-input-status-sort-label-d fa fa-caret-up"></i></a></div>
-              <div style="position: absolute; right: 10px; width: 50px; display: inline-block; text-align: right;"><a id="node-input-target-sort-type" href="#" data-i18n="[title]status.label.sortByType"><i class="node-input-status-sort-sublabel-a fa fa-caret-down"></i><i class="node-input-status-sort-sublabel-d fa fa-caret-up"></i> <span data-i18n="status.label.type"></span></a></div>
-            </div>
-            <div style="background: #fbfbfb; box-sizing: border-box; position:absolute; top:20px;bottom:0;left:0px;right:0px; overflow-y: scroll; overflow-x: hidden;">
-                <ul id="node-input-status-target-container" style=" list-style-type:none; margin: 0;"></ul>
-            </div>
-        </div>
+    <div class="form-row node-input-target-row">
+        <button id="node-input-status-target-select" class="red-ui-button" data-i18n="common.label.selectNodes"></button>
+    </div>
+    <div class="form-row node-input-target-row node-input-target-list-row" style="min-height: 100px">
+        <div id="node-input-status-target-container-div"></div>
     </div>
     <div class="form-row">
         <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
@@ -25,39 +19,6 @@
     </div>
 </script>
 
-<style>
-#node-input-status-target-container {
-    position: relative;
-}
-#node-input-status-target-container li {
-    padding: 2px 5px;
-    background: none;
-    font-size: 0.8em;
-    margin:0;
-    white-space: nowrap;
-}
-#node-input-status-target-container li label {
-    margin-bottom: 0;
-    width: 100%;
-}
-#node-input-status-target-container li label input {
-    vertical-align: top;
-    width:15px;
-    margin-right: 10px;
-}
-#node-input-status-target-container li:hover,
-#node-input-status-target-container li:hover .node-input-target-node-sublabel {
-    background: #f0f0f0;
-}
-.node-input-target-node-sublabel {
-    position:absolute;
-    right: 0px;
-    padding-right: 10px;
-    padding-left: 10px;
-    font-size: 0.8em;
-    background: #fbfbfb;
-}
-</style>
 <script type="text/javascript">
     RED.nodes.registerType('status',{
         category: 'input',
@@ -76,142 +37,106 @@
             return this.name?"node_label_italic":"";
         },
         oneditprepare: function() {
-            var nodeList = $("#node-input-status-target-container");
             var node = this;
-            this.resize = function() {
-                var rows = $("#dialog-form>div:not(.node-input-target-row)");
+            var scope = node.scope || [];
+            this._resize = function() {
+                var rows = $("#dialog-form>div:not(.node-input-target-list-row)");
                 var height = $("#dialog-form").height();
                 for (var i=0;i<rows.length;i++) {
                     height -= $(rows[i]).outerHeight(true);
                 }
-                var editorRow = $("#dialog-form>div.node-input-target-row");
-                height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
-                $("#node-input-status-target-container-div").css("height",height+"px");
+                var editorRow = $("#dialog-form>div.node-input-target-list-row");
+                editorRow.css("height",height+"px");
             };
 
-            function createNodeList() {
-                var scope = node.scope || [];
-                nodeList.empty();
+            var dirList = $("#node-input-status-target-container-div").css({width: "100%", height: "100%"})
+                .treeList({multi:true}).on("treelistitemmouseover", function(e, item) {
+                    item.node.highlighted = true;
+                    item.node.dirty = true;
+                    RED.view.redraw();
+                }).on("treelistitemmouseout", function(e, item) {
+                    item.node.highlighted = false;
+                    item.node.dirty = true;
+                    RED.view.redraw();
+                })
+            var candidateNodes = RED.nodes.filterNodes({z:node.z});
+            var allChecked = true;
+            var items = [];
+            var nodeItemMap = {};
 
-                var candidateNodes = RED.nodes.filterNodes({z:node.z});
-                var allChecked = true;
-
-                candidateNodes.forEach(function(n) {
-                    if (n.id === node.id) {
-                        return;
-                    }
-                    var isChecked = scope.indexOf(n.id) !== -1;
-
-                    allChecked = allChecked && isChecked;
-
-                    var container = $('<li/>',{class:"node-input-target-node"});
-                    var row = $('<label/>',{for:"node-input-target-node-"+n.id}).appendTo(container);
-                    $('<input>',{type:"checkbox",class:"node-input-target-node-checkbox",id:"node-input-target-node-"+n.id})
-                        .data('node-id',n.id)
-                        .prop('checked', isChecked)
-                        .appendTo(row);
-                    container.on('mouseover',function(e) {
-                        n.highlighted = true;
-                        n.dirty = true;
-                        RED.view.redraw();
-                    });
-                    container.on('mouseout',function(e) {
-                        n.highlighted = false;
-                        n.dirty = true;
-                        RED.view.redraw();
-                    });
-                    var labelSpan = $('<span>');
-                    var nodeDef = RED.nodes.getType(n.type);
-                    var label;
-                    var sublabel;
-                    if (nodeDef) {
-                        var l = nodeDef.label;
-                        label = (typeof l === "function" ? l.call(n) : l)||"";
-                        sublabel = n.type;
-                        if (sublabel.indexOf("subflow:") === 0) {
-                            var subflowId = sublabel.substring(8);
-                            var subflow = RED.nodes.subflow(subflowId);
-                            sublabel = "subflow : "+subflow.name;
-                        }
-                    }
-                    if (!nodeDef || !label) {
-                        label = n.type;
-                    }
-                    $('<span>',{class:"node-input-target-node-label",style:"white-space:nowrap"}).text(label).appendTo(row);
-                    if (sublabel) {
-                        $('<span>',{class:"node-input-target-node-sublabel"}).text(sublabel).appendTo(row);
-                    }
-
-                    container.appendTo(nodeList);
-                });
-
-                $(".node-input-target-node-checkbox").on("change", function() {
-                    if (!this.checked) {
-                        $("#node-input-target-node-checkbox-all").prop('checked',false);
-                    }
-                });
-
-                $("#node-input-target-node-checkbox-all").prop('checked',allChecked);
-
-                sortNodeList('label');
-            }
-
-            function sortNodeList(sortOn) {
-                var currentSort = nodeList.data('currentSort');
-                var currentSortOrder = nodeList.data('currentSortOrder');
-
-                if (!currentSort) {
-                    currentSort = sortOn;
-                    currentSortOrder = 'a';
-                } else {
-                    if (currentSort === sortOn) {
-                        currentSortOrder = (currentSortOrder === 'a'?'d':'a');
-                    } else {
-                        currentSortOrder = 'a';
-                    }
-                    currentSort = sortOn;
+            candidateNodes.forEach(function(n) {
+                if (n.id === node.id) {
+                    return;
                 }
-                nodeList.data('currentSort',currentSort);
-                nodeList.data('currentSortOrder',currentSortOrder);
+                var isChecked = scope.indexOf(n.id) !== -1;
 
-                $("#node-input-status-target-container-div .fa").hide();
-                $(".node-input-status-sort-"+currentSort+"-"+currentSortOrder).show();
+                allChecked = allChecked && isChecked;
 
+                var nodeDef = RED.nodes.getType(n.type);
+                var label;
+                var sublabel;
+                if (nodeDef) {
+                    var l = nodeDef.label;
+                    label = (typeof l === "function" ? l.call(n) : l)||"";
+                    sublabel = n.type;
+                    if (sublabel.indexOf("subflow:") === 0) {
+                        var subflowId = sublabel.substring(8);
+                        var subflow = RED.nodes.subflow(subflowId);
+                        sublabel = "subflow : "+subflow.name;
+                    }
+                }
+                if (!nodeDef || !label) {
+                    label = n.type;
+                }
+                nodeItemMap[n.id] = {
+                    node: n,
+                    label: label,
+                    sublabel: sublabel,
+                    selected: isChecked
+                };
+                items.push(nodeItemMap[n.id]);
+            });
+            dirList.treeList('data',items);
 
-                var items = nodeList.find("li").get();
-                items.sort(function(a,b) {
-                    var labelA = $(a).find(".node-input-target-node-"+currentSort).text().toLowerCase();
-                    var labelB = $(b).find(".node-input-target-node-"+currentSort).text().toLowerCase();
-                    if (labelA < labelB) { return currentSortOrder==='a'?-1:1; }
-                    if (labelA > labelB) { return currentSortOrder==='a'?1:-1; }
-                    return 0;
-                });
-                $.each(items, function(i, li) {
-                    nodeList.append(li);
-                });
-            }
-            $("#node-input-target-sort-label").on("click", function(e) {
+            $("#node-input-status-target-select").on("click", function(e) {
                 e.preventDefault();
-                sortNodeList('label');
-            });
-
-            $("#node-input-target-sort-type").on("click", function(e) {
-                e.preventDefault();
-                sortNodeList('sublabel');
-            });
-            $("#node-input-target-node-checkbox-all").on("change", function() {
-                $(".node-input-target-node-checkbox").prop('checked',this.checked);
-            });
+                var preselected = dirList.treeList('selected').map(function(n) {return n.node.id});
+                RED.tray.hide();
+                RED.view.selectNodes({
+                    prompt: RED._("node-red:common.notification.selectNodesTarget"),
+                    selected: preselected,
+                    onselect: function(selection) {
+                        RED.tray.show();
+                        var newlySelected = {};
+                        selection.forEach(function(n) {
+                            newlySelected[n.id] = true;
+                            if (nodeItemMap[n.id]) {
+                                nodeItemMap[n.id].treeList.select(true);
+                            }
+                        })
+                        preselected.forEach(function(id) {
+                            if (!newlySelected[id]) {
+                                nodeItemMap[id].treeList.select(false);
+                            }
+                        })
+                    },
+                    oncancel: function() {
+                        RED.tray.show();
+                    },
+                    filter: function(n) {
+                        return n.id !== node.id;
+                    }
+                });
+            })
 
             $("#node-input-scope-select").on("change", function(e) {
                 var scope = $(this).val();
                 if (scope === "target") {
-                    createNodeList();
                     $(".node-input-target-row").show();
                 } else {
                     $(".node-input-target-row").hide();
                 }
-                node.resize();
+                node._resize();
             });
             if (this.scope === null) {
                 $("#node-input-scope-select").val("all");
@@ -225,17 +150,11 @@
             if (scope === 'all') {
                 this.scope = null;
             } else {
-                var node = this;
-                node.scope = [];
-                $(".node-input-target-node-checkbox").each(function(n) {
-                    if ($(this).prop("checked")) {
-                        node.scope.push($(this).data('node-id'));
-                    }
-                });
+                this.scope = $("#node-input-status-target-container-div").treeList('selected').map(function(i) { return i.node.id})
             }
         },
         oneditresize: function(size) {
-            this.resize();
+            this._resize();
         }
     });
 </script>
diff --git a/packages/node_modules/@node-red/nodes/locales/en-US/messages.json b/packages/node_modules/@node-red/nodes/locales/en-US/messages.json
index 275ab3c9b..367afb0c8 100755
--- a/packages/node_modules/@node-red/nodes/locales/en-US/messages.json
+++ b/packages/node_modules/@node-red/nodes/locales/en-US/messages.json
@@ -6,7 +6,8 @@
             "name": "Name",
             "username": "Username",
             "password": "Password",
-            "property": "Property"
+            "property": "Property",
+            "selectNodes": "Select nodes..."
         },
         "status": {
             "connected": "connected",
@@ -17,6 +18,7 @@
             "ok": "OK"
         },
         "notification": {
+            "selectNodesTarget": "Click nodes to select",
             "error": "<strong>Error</strong>: __message__",
             "errors": {
                 "not-deployed": "node not deployed",
@@ -90,11 +92,7 @@
         "catchUncaught": "catch: uncaught",
         "label": {
             "source": "Catch errors from",
-            "node": "node",
-            "type": "type",
             "selectAll": "select all",
-            "sortByLabel": "sort by label",
-            "sortByType": "sort by type",
             "uncaught": "Ignore errors handled by other Catch nodes"
         },
         "scope": {
@@ -107,10 +105,6 @@
         "statusNodes": "status: __number__",
         "label": {
             "source": "Report status from",
-            "node": "node",
-            "type": "type",
-            "selectAll": "select all",
-            "sortByLabel": "sort by label",
             "sortByType": "sort by type"
         },
         "scope": {