From 12dc4ab1fa305c91566c2ea57ea9158fc635be92 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Mon, 27 Apr 2020 15:23:39 +0100
Subject: [PATCH] [outline] Connect search dialog to outline filter box

---
 .../editor-client/src/js/ui/search.js         |  5 ++++
 .../src/js/ui/tab-info-outliner.js            | 27 ++++++++++---------
 .../editor-client/src/sass/search.scss        |  7 +++++
 .../editor-client/src/sass/tab-info.scss      |  2 +-
 4 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/search.js b/packages/node_modules/@node-red/editor-client/src/js/ui/search.js
index 3fae8ec62..f84fae02f 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/search.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/search.js
@@ -157,6 +157,11 @@ RED.search = (function() {
 
             }
         });
+        var copySearchContainer = $('<button type="button" class="red-ui-button red-ui-button-small"><i class="fa fa-caret-right"></button>').appendTo(searchDiv).on('click', function(evt) {
+            evt.preventDefault();
+            RED.sidebar.info.outliner.search(searchInput.val())
+            hide();
+        });
 
         searchInput.on('keydown',function(evt) {
             var children;
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js
index 82d3ce1c0..2975098ec 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js
@@ -1,7 +1,7 @@
 RED.sidebar.info.outliner = (function() {
 
     var treeList;
-
+    var searchInput;
     var flowList;
     var subflowList;
     var globalConfigNodes;
@@ -222,23 +222,21 @@ RED.sidebar.info.outliner = (function() {
             var container = $("<div>", {class:"red-ui-info-outline"}).css({'height': '400px'});
             var toolbar = $("<div>", {class:"red-ui-info-outline-toolbar"}).appendTo(container);
 
-            var searchInput = $('<input type="text">').appendTo(toolbar).searchBox({
-                delay: 100,
+            searchInput = $('<input type="text">').appendTo(toolbar).searchBox({
+                delay: 300,
                 change: function() {
-                    var val = $(this).val().trim().toLowerCase();
+                    var val = $(this).val();
+                    var searchResults = RED.search.search(val);
                     if (val) {
+                        var resultMap = {};
+                        for (var i=0,l=searchResults.length;i<l;i++) {
+                            resultMap[searchResults[i].node.id] = true;
+                        }
                         var c = treeList.treeList('filter',function(item) {
                             if (item.depth === 0) {
                                 return true;
                             }
-                            if (item.id &&  objects[item.id]) {
-                                var l = ((objects[item.id].type||"")+" "+(objects[item.id].name||"")+" "+(objects[item.id].id||"")+" "+(objects[item.id].label||"")).toLowerCase();
-                                var isMatch = l.indexOf(val) > -1;
-                                if (isMatch) {
-                                    return true;
-                                }
-                            }
-                            return false;
+                            return item.id &&  objects[item.id] && resultMap[item.id]
                         })
                     } else {
                         treeList.treeList('filter',null);
@@ -421,6 +419,9 @@ RED.sidebar.info.outliner = (function() {
     }
 
     return {
-        build: build
+        build: build,
+        search: function(val) {
+            searchInput.searchBox('value',val)
+        }
     }
 })();
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/search.scss b/packages/node_modules/@node-red/editor-client/src/sass/search.scss
index 273793896..27ebb1a04 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/search.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/search.scss
@@ -24,6 +24,13 @@
     top: 0px;
     border: 1px solid $primary-border-color;
     box-shadow: 0 0 10px $shadow;
+    background: $secondary-background;
+
+    .red-ui-searchBox-container {
+        display: inline-block;
+        margin-right: 6px;
+        width: calc(100% - 30px);
+    }
 }
 
 .red-ui-type-search {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
index 1605c9c76..699203703 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
@@ -369,7 +369,7 @@ div.red-ui-info-table {
     top:0;
     bottom: 0;
     right: 0px;
-    padding: 2px 0 0 1px;
+    padding: 2px 8px 0 1px;
     text-align: right;
     background: $list-item-background;