Add node-select to typedInput

packages/node_modules/@node-red/editor-client/locales/en-US/editor.json

@@ -29,7 +29,7 @@
         "enabled": "Enabled",
         "disabled":"Disabled",
         "info": "Description",
-        "selectNodes": "Select nodes"
+        "selectNodes": "Click nodes to select"
     },
     "menu": {
         "label": {

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

@@ -109,6 +109,55 @@
             value: "env",
             label: "env variable",
             icon: "red/images/typedInput/env.png"
+        },
+        node: {
+            value: "node",
+            label: "node",
+            icon: "red/images/typedInput/target.png",
+            valueLabel: function(container,value) {
+                var node = RED.nodes.node(value);
+                var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).css({
+                    "margin-top": "2px",
+                    "margin-left": "3px"
+                }).appendTo(container);
+                var nodeLabel = $('<span>').css({
+                    "line-height": "32px",
+                    "margin-left": "6px"
+                }).appendTo(container);
+                if (node) {
+                    var colour = RED.utils.getNodeColor(node.type,node._def);
+                    var icon_url = RED.utils.getNodeIcon(node._def,node);
+                    if (node.type === 'tab') {
+                        colour = "#C0DEED";
+                    }
+                    nodeDiv.css('backgroundColor',colour);
+                    var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
+                    RED.utils.createIconElement(icon_url, iconContainer, true);
+                    var l = RED.utils.getNodeLabel(node,node.id);
+                    nodeLabel.text(l);
+                } else {
+                    nodeDiv.css({
+                        'backgroundColor': '#eee',
+                        'border-style' : 'dashed'
+                    });
+
+                }
+            },
+            expand: function() {
+                var that = this;
+                RED.tray.hide();
+                RED.view.selectNodes({
+                    single: true,
+                    selected: [that.value()],
+                    onselect: function(selection) {
+                        that.value(selection.id);
+                        RED.tray.show();
+                    },
+                    oncancel: function() {
+                        RED.tray.show();
+                    }
+                })
+            }
         }
     };
     var nlsd = false;
@@ -212,6 +261,8 @@
                 that.uiSelect.addClass('red-ui-typedInput-focus');
             })
 
+            this.valueLabelContainer = $('<div class="red-ui-typedInput-value-label">').appendTo(this.uiSelect)
+
             // explicitly set optionSelectTrigger display to inline-block otherwise jQ sets it to 'inline'
             this.optionSelectTrigger = $('<button tabindex="0" class="red-ui-typedInput-option-trigger" style="display:inline-block"><span class="red-ui-typedInput-option-caret"><i class="red-ui-typedInput-icon fa fa-caret-down"></i></span></button>').appendTo(this.uiSelect);
             this.optionSelectLabel = $('<span class="red-ui-typedInput-option-label"></span>').prependTo(this.optionSelectTrigger);
@@ -394,10 +445,13 @@
                 this.selectTrigger.removeClass("red-ui-typedInput-full-width");
                 var labelWidth = this._getLabelWidth(this.selectTrigger);
                 this.elementDiv.css('left',labelWidth+"px");
+                this.valueLabelContainer.css('left',labelWidth+"px");
                 if (this.optionExpandButton.is(":visible")) {
                     this.elementDiv.css('right',"22px");
+                    this.valueLabelContainer.css('right',"22px");
                 } else {
                     this.elementDiv.css('right','0');
+                    this.valueLabelContainer.css('right','0');
                     this.input.css({
                         'border-top-right-radius': '4px',
                         'border-bottom-right-radius': '4px'
@@ -520,8 +574,13 @@
                         selectedOption = {value:""}
                     }
                     this._updateOptionSelectLabel(selectedOption)
+                } else {
+                    this.input.val(value);
+                }
+                if (this.typeMap[this.propertyType].valueLabel) {
+                    this.valueLabelContainer.empty();
+                    this.typeMap[this.propertyType].valueLabel.call(this,this.valueLabelContainer,value);
                 }
-                this.input.val(value);
                 this.input.trigger('change',this.type(),value);
             }
         },
@@ -566,8 +625,10 @@
                             this.optionSelectTrigger.show();
                             if (!opt.hasValue) {
                                 this.elementDiv.hide();
+                                this.valueLabelContainer.hide();
                             } else {
                                 this.elementDiv.show();
+                                this.valueLabelContainer.hide();
                             }
                             this.activeOptions = {};
                             opt.options.forEach(function(o) {
@@ -655,11 +716,18 @@
                             this.oldValue = this.input.val();
                             this.input.val("");
                             this.elementDiv.hide();
+                            this.valueLabelContainer.hide();
+                        } else if (opt.valueLabel) {
+                            this.valueLabelContainer.show();
+                            this.valueLabelContainer.empty();
+                            opt.valueLabel.call(this,this.valueLabelContainer,this.input.val());
+                            this.elementDiv.hide();
                         } else {
                             if (this.oldValue !== undefined) {
                                 this.input.val(this.oldValue);
                                 delete this.oldValue;
                             }
+                            this.valueLabelContainer.hide();
                             this.elementDiv.show();
                         }
                         if (this.optionExpandButton) {

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

@@ -1386,6 +1386,9 @@ RED.view = (function() {
     }
 
     function selectAll() {
+        if (mouse_mode === RED.state.SELECTING_NODE && selectNodesOptions.single) {
+            return;
+        }
         RED.nodes.eachNode(function(n) {
             if (n.z == RED.workspaces.active()) {
                 if (mouse_mode === RED.state.SELECTING_NODE) {
@@ -2269,6 +2272,10 @@ RED.view = (function() {
             return;
         } else if (mouse_mode === RED.state.SELECTING_NODE) {
             d3.event.stopPropagation();
+            if (selectNodesOptions.single) {
+                selectNodesOptions.done(d);
+                return;
+            }
             if (d.selected) {
                 d.selected = false;
                 for (i=0;i<moving_set.length;i+=1) {
@@ -3677,10 +3684,10 @@ RED.view = (function() {
             $("#red-ui-header-shade").show();
             $("#red-ui-workspace").addClass("red-ui-workspace-select-mode");
 
-
             mouse_mode = RED.state.SELECTING_NODE;
             clearSelection();
             if (options.selected) {
+                console.log(options.selected);
                 options.selected.forEach(function(id) {
                     var n = RED.nodes.node(id);
                     if (n) {
@@ -3702,35 +3709,37 @@ RED.view = (function() {
                 resetMouseVars();
                 notification.close();
             }
+            selectNodesOptions.done = function(selection) {
+                closeNotification();
+                if (selectNodesOptions.onselect) {
+                    selectNodesOptions.onselect(selection);
+                }
+            }
+            var buttons = [{
+                text: RED._("common.label.cancel"),
+                click: function(e) {
+                    closeNotification();
+                    if (selectNodesOptions.oncancel) {
+                        selectNodesOptions.oncancel();
+                    }
+                }
+            }];
+            if (!selectNodesOptions.single) {
+                buttons.push({
+                    text: RED._("common.label.done"),
+                    class: "primary",
+                    click: function(e) {
+                        var selection = moving_set.map(function(n) { return n.n;});
+                        selectNodesOptions(selection);
+                    }
+                });
+            }
             var notification = RED.notify(selectNodesOptions.prompt || RED._("workspace.selectNodes"),{
                 modal: false,
                 fixed: true,
                 type: "compact",
-                buttons: [
+                buttons: buttons
-                    {
-                        text: RED._("common.label.cancel"),
-                        click: function(e) {
-                            closeNotification();
-                            if (selectNodesOptions.oncancel) {
-                                selectNodesOptions.oncancel();
-                            }
-                        }
-                    },
-                    {
-                        text: RED._("common.label.done"),
-                        class: "primary",
-                        click: function(e) {
-                            var selection = moving_set.map(function(n) { return n.n;});
-                            closeNotification();
-                            if (selectNodesOptions.onselect) {
-                                selectNodesOptions.onselect(selection);
-                            }
-                        }
-                    }
-                ]
             })
-
-
         }
     };
 })();

packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss

@@ -48,7 +48,16 @@
     &.red-ui-typedInput-focus:not(.input-error) {
         border-color: $form-input-focus-color !important;
     }
+    .red-ui-typedInput-value-label {
+        position: absolute;
+        display: inline-block;
+        height: 32px;
+        box-sizing: border-box;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
 
+    }
     button.red-ui-typedInput-type-select,
     button.red-ui-typedInput-option-expand,
     button.red-ui-typedInput-option-trigger

packages/node_modules/@node-red/nodes/core/core/25-catch.html

@@ -115,7 +115,6 @@
                 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();

packages/node_modules/@node-red/nodes/core/core/25-status.html

@@ -103,7 +103,6 @@
                 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();

packages/node_modules/@node-red/nodes/locales/en-US/messages.json

@@ -18,7 +18,6 @@
             "ok": "OK"
         },
         "notification": {
-            "selectNodesTarget": "Click nodes to select",
             "error": "<strong>Error</strong>: __message__",
             "errors": {
                 "not-deployed": "node not deployed",