Search Routes

app/controllers/route-tree.js

@@ -2,6 +2,7 @@ import { alias } from '@ember/object/computed';
 import { computed } from '@ember/object';
 import Controller, { inject as controller } from '@ember/controller';
 import checkCurrentRoute from "ember-inspector/utils/check-current-route";
+import searchMatch from 'ember-inspector/utils/search-match';
 
 export default Controller.extend({
   application: controller(),
@@ -10,23 +11,28 @@ export default Controller.extend({
 
   currentRoute: null,
   hideRoutes: alias('options.hideRoutes'),
+  searchValue: '',
 
   options: {
     hideRoutes: false
   },
 
   model: computed(() => []),
 
-  filtered: computed('model.[]', 'options.hideRoutes', 'currentRoute', function() {
+  filtered: computed('model.[]', 'options.hideRoutes', 'currentRoute', 'searchValue', function() {
     return this.get('model').filter(routeItem => {
       let currentRoute = this.get('currentRoute');
       let hideRoutes = this.get('options.hideRoutes');
 
+      if (!searchMatch(routeItem.value.name, this.get('searchValue'))) {
+        return false;
+      }
+
       if (hideRoutes && currentRoute) {
         return checkCurrentRoute(currentRoute, routeItem.value.name);
-      } else {
-        return true;
       }
+
+      return true;
     });
   }),
 

app/templates/route-tree-toolbar.hbs

@@ -5,4 +5,10 @@
       Current Route only
     </label>
   </div>
+
+  <div class="divider"></div>
+
+  <div class="toolbar__search js-filter-views">
+    {{search-field value=searchValue}}
+  </div>
 </div>

tests/acceptance/route-tree-test.js

@@ -1,4 +1,4 @@
-import { visit, find, findAll, click, triggerEvent } from '@ember/test-helpers';
+import { visit, fillIn, find, findAll, click, triggerEvent } from '@ember/test-helpers';
 import { run } from '@ember/runloop';
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
@@ -191,6 +191,30 @@ module('Route Tree Tab', function(hooks) {
     assert.deepEqual(isCurrent, [true, true, true, false], 'Current route is bound');
   });
 
+  test("It should filter the tree using the search text", async function(assert) {
+    port.reopen({
+      send(name/*, message*/) {
+        if (name === 'route:getTree') {
+          this.trigger('route:routeTree', { tree: routeTree });
+        } else if (name === 'route:getCurrentRoute') {
+          this.trigger('route:currentRoute', { name: 'post.edit' });
+        }
+      }
+    });
+
+    await visit('route-tree');
+    let routeNodes = findAll('.js-route-tree-item');
+    assert.equal(routeNodes.length, 4);
+
+    await fillIn('.js-filter-views input', 'edit');
+    routeNodes = findAll('.js-route-tree-item');
+    assert.equal(routeNodes.length, 1);
+
+    await click('.js-search-field-clear-button');
+    routeNodes = findAll('.js-route-tree-item');
+    assert.equal(routeNodes.length, 4);
+  });
+
   test("Hiding non current route", async function(assert) {
     port.reopen({
       send(name/*, message*/) {