Add search presets option to searchBox widget

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

@@ -48,7 +48,7 @@
                 form.addClass("red-ui-searchBox-form");
             }
             $('<i class="fa fa-search"></i>').prependTo(this.uiContainer);
-            this.clearButton = $('<a href="#"><i class="fa fa-times"></i></a>').appendTo(this.uiContainer);
+            this.clearButton = $('<a class="red-ui-searchBox-clear" href="#"><i class="fa fa-times"></i></a>').appendTo(this.uiContainer);
             this.clearButton.on("click",function(e) {
                 e.preventDefault();
                 that.element.val("");
@@ -56,6 +56,62 @@
                 that.element.trigger("focus");
             });
 
+            if (this.options.options) {
+                this.uiContainer.addClass("red-ui-searchBox-has-options");
+                this.optsButton = $('<a class="red-ui-searchBox-opts" href="#"><i class="fa fa-caret-down"></i></a>').appendTo(this.uiContainer);
+                var menuShown = false;
+                this.optsMenu = RED.popover.menu({
+                    style: this.options.style,
+                    options: this.options.options.map(function(opt) {
+                        return {
+                            label: opt.label,
+                            onselect: function() {
+                                that.element.val(opt.value+" ");
+                                that._change(opt.value,true);
+                            }
+                        }
+                    }),
+                    onclose: function(cancelled) {
+                        menuShown = false;
+                        that.element.trigger("focus");
+                    },
+                    disposeOnClose: false
+                });
+
+                var showMenu = function() {
+                    menuShown = true;
+                    that.optsMenu.show({
+                        target: that.optsButton,
+                        align: "left",
+                        offset: [that.optsButton.width()-2,-1],
+                        dispose: false
+                    })
+                }
+                this.optsButton.on("click",function(e) {
+                    e.preventDefault();
+                    if (!menuShown) {
+                        showMenu();
+                    } else {
+                        // TODO: This doesn't quite work because the panel's own
+                        // mousedown handler triggers a close before this click
+                        // handler fires.
+                        that.optsMenu.hide(true);
+                    }
+                });
+                this.optsButton.on("keydown",function(e) {
+                    if (!menuShown && e.keyCode === 40) {
+                        //DOWN
+                        showMenu();
+                    }
+                });
+                this.element.on("keydown",function(e) {
+                    if (!menuShown && e.keyCode === 40) {
+                        //DOWN
+                        showMenu();
+                    }
+                });
+            }
+
             this.resultCount = $('<span>',{class:"red-ui-searchBox-resultCount hide"}).appendTo(this.uiContainer);
 
             this.element.val("");

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

@@ -18,23 +18,32 @@
 .red-ui-searchBox-container {
     position: relative;
     i {
+        position: absolute;
+        top: 9px;
         font-size: 10px;
         color: $secondary-text-color;
     }
     i.fa-search {
-        position: absolute;
         pointer-events: none;
         left: 8px;
-        top: 9px;
+    }
+    i.fa-caret-down {
+        position: absolute;
+        right: 6px;
+        font-size: 12px;
     }
     i.fa-times {
         position: absolute;
-        right: 5px;
+        right: 4px;
-        top: 9px;
     }
+
     form.red-ui-searchBox-form {
         margin: 0;
     }
+    a.red-ui-searchBox-opts:hover {
+        color: $workspace-button-color-hover;
+        background: $workspace-button-background-hover;
+    }
     input.red-ui-searchBox-input {
         border-radius: 0;
         border: none;
@@ -57,9 +66,12 @@
         right: 0;
         top: 0;
         bottom: 0;
-        width: 20px;
+        width: 16px;
+    }
+    a.red-ui-searchBox-clear {
         display: none;
     }
+
     .red-ui-searchBox-resultCount {
         position: absolute;
         right: 18px;
@@ -70,6 +82,17 @@
         font-size: 9px;
         border-radius: 4px;
     }
+    &.red-ui-searchBox-has-options {
+        a.red-ui-searchBox-clear {
+            right: 16px;
+        }
+        .red-ui-searchBox-resultCount {
+            right: 33px;
+        }
+        input.red-ui-searchBox-input {
+            padding-right: 33px;
+        }
+    }
 }
 .red-ui-searchBox-compact {
     input.red-ui-searchBox-input,input:focus.red-ui-searchBox-input {
@@ -78,7 +101,7 @@
         font-size: 12px;
         height: 26px;
     }
-    i.fa-times,i.fa-search {
+    i.fa-times,i.fa-search, i.fa-caret-down {
         top: 7px;
     }
     .red-ui-searchBox-resultCount {