Fauxton: Extract a common filter component from logs

Create a reusable component from the filter that is used in logs,
that can be used in for tasks like
COUCHDB-2158 ("Apply filter with custom params on changes feed page")
and other situtations where a filter is needed.

10 files changed, 186 insertions, 70 deletions

diff --git a/src/Makefile.am b/src/Makefile.am
index a17674cc3..f09d31305 100644
--- a/src/Makefile.am
+++ b/src/Makefile.am
@@ -82,7 +82,6 @@ FAUXTON_FILES = \
     fauxton/app/addons/logs/resources.js \
     fauxton/app/addons/logs/routes.js \
     fauxton/app/addons/logs/templates/dashboard.html \
-    fauxton/app/addons/logs/templates/filterItem.html \
     fauxton/app/addons/logs/templates/sidebar.html \
     fauxton/app/addons/logs/tests/baseSpec.js \
     fauxton/app/addons/logs/tests/resourcesSpec.js \
@@ -160,6 +159,7 @@ FAUXTON_FILES = \
     fauxton/app/addons/fauxton/tests/baseSpec.js \
     fauxton/app/addons/fauxton/tests/navbarSpec.js \
     fauxton/app/addons/fauxton/tests/paginateSpec.js \
+    fauxton/app/addons/fauxton/tests/filterViewSpec.js \
     fauxton/app/addons/pouchdb/base.js \
     fauxton/app/addons/pouchdb/pouch.collate.js \
     fauxton/app/addons/pouchdb/pouchdb.mapreduce.js \
@@ -198,6 +198,8 @@ FAUXTON_FILES = \
     fauxton/app/addons/fauxton/templates/nav_bar.html \
     fauxton/app/addons/fauxton/templates/notification.html \
     fauxton/app/addons/fauxton/templates/pagination.html \
+    fauxton/app/addons/fauxton/templates/filter_item.html \
+    fauxton/app/addons/fauxton/templates/filter.html \
     fauxton/app/templates/layouts/one_pane.html \
     fauxton/app/templates/layouts/two_pane.html \
     fauxton/app/templates/layouts/with_sidebar.html \
diff --git a/src/fauxton/app/addons/fauxton/components.js b/src/fauxton/app/addons/fauxton/components.js
index 47f4726c0..52e7e8b3b 100644
--- a/src/fauxton/app/addons/fauxton/components.js
+++ b/src/fauxton/app/addons/fauxton/components.js
@@ -339,6 +339,65 @@ function(app, FauxtonAPI, ace, spin) {
     }
   });
 
+  Components.FilterView = FauxtonAPI.View.extend({
+    template: "addons/fauxton/templates/filter",
+
+    initialize: function (options) {
+      this.eventListener = options.eventListener;
+      this.eventNamespace = options.eventNamespace;
+    },
+
+    events: {
+      "submit .js-log-filter-form": "filterLogs"
+    },
+
+    filterLogs: function (event) {
+      event.preventDefault();
+      var $filter = this.$('input[name="filter"]'),
+          filter = $filter.val();
+
+      this.eventListener.trigger(this.eventNamespace + ":filter", filter);
+
+      this.insertView(".filter-list", new Components.FilterItemView({
+        filter: filter,
+        eventListener: this.eventListener,
+        eventNamespace: this.eventNamespace
+      })).render();
+
+      $filter.val('');
+    }
+
+  });
+
+  Components.FilterItemView = FauxtonAPI.View.extend({
+    template: "addons/fauxton/templates/filter_item",
+    tagName: "li",
+
+    initialize: function (options) {
+      this.filter = options.filter;
+      this.eventListener = options.eventListener;
+      this.eventNamespace = options.eventNamespace;
+    },
+
+    events: {
+      "click .js-remove-filter": "removeFilter"
+    },
+
+    serialize: function () {
+      return {
+        filter: this.filter
+      };
+    },
+
+    removeFilter: function (event) {
+      event.preventDefault();
+
+      this.eventListener.trigger(this.eventNamespace + ":remove", this.filter);
+      this.remove();
+    }
+
+  });
+
   Components.Editor = FauxtonAPI.View.extend({
     initialize: function (options) {
       this.editorId = options.editorId;
diff --git a/src/fauxton/app/addons/fauxton/templates/filter.html b/src/fauxton/app/addons/fauxton/templates/filter.html
new file mode 100644
index 000000000..d7930fcce
--- /dev/null
+++ b/src/fauxton/app/addons/fauxton/templates/filter.html
@@ -0,0 +1,22 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+-->
+
+<form class="form-inline js-log-filter-form">
+  <fieldset>
+    <input type="text" name="filter" placeholder="Type a filter to sort the logs by">
+    <button type="submit" class="btn">Filter</button>
+    <span class="help-block"> <h6> Eg. debug or <1.4.1> or any regex </h6> </span>
+  </fieldset>
+</form>
+<ul class="filter-list"></ul>
diff --git a/src/fauxton/app/addons/logs/templates/filterItem.html b/src/fauxton/app/addons/fauxton/templates/filter_item.html
index e3872d85f..351f12efa 100644
--- a/src/fauxton/app/addons/logs/templates/filterItem.html
+++ b/src/fauxton/app/addons/fauxton/templates/filter_item.html
@@ -12,5 +12,5 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-<span class="label label-info"> <%= filter %>  </span>
-<a class="label label-info remove-filter" data-bypass="true" href="#">&times;</a>
+<span class="label label-info"><%- filter %></span>
+<a class="label label-info js-remove-filter" data-bypass="true" href="#">&times;</a>
diff --git a/src/fauxton/app/addons/fauxton/tests/filterViewSpec.js b/src/fauxton/app/addons/fauxton/tests/filterViewSpec.js
new file mode 100644
index 000000000..3fb17483a
--- /dev/null
+++ b/src/fauxton/app/addons/fauxton/tests/filterViewSpec.js
@@ -0,0 +1,81 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+define([
+       'app',
+       'addons/fauxton/components',
+       'testUtils',
+       'api'
+], function (app, Components, testUtils, FauxtonAPI) {
+  var assert = testUtils.assert,
+      ViewSandbox = testUtils.ViewSandbox,
+      myEvents = {};
+
+  _.extend(myEvents, Backbone.Events);
+
+  describe('FilterView', function () {
+    var viewSandbox,
+        filterView;
+
+    beforeEach(function () {
+      filterView = new Components.FilterView({
+        eventListener: myEvents,
+        eventNamespace: 'mynamespace'
+      });
+
+      viewSandbox = new ViewSandbox();
+      viewSandbox.renderView(filterView);
+    });
+
+    afterEach(function () {
+      viewSandbox.remove();
+    });
+
+    it('should trigger an event on add', function () {
+      filterView.$('[name="filter"]').val('i am a lonely filter');
+      myEvents.listenToOnce(myEvents, 'ente:filter', function (msg) {
+        assert.equal('i am a lonely filter', msg);
+      });
+      filterView.$('.js-log-filter-form').submit();
+    });
+
+    it('should trigger an event on remove', function () {
+      myEvents.listenToOnce(myEvents, 'mynamespace:filter', function (msg) {
+        assert.equal('i am a lonely filter', msg);
+      });
+
+      filterView.$('[name="filter"]').val('i am a lonely filter');
+      filterView.$('.js-log-filter-form').submit();
+      filterView.$('.js-remove-filter').click();
+    });
+
+    it('should add filter markup', function () {
+      filterView.$('[name="filter"]').val('i was a lonely filter');
+      filterView.$('.js-log-filter-form').submit();
+
+      filterView.$('[name="filter"]').val('i am a filter');
+      filterView.$('.js-log-filter-form').submit();
+      assert.equal(2, filterView.$('.js-remove-filter').length);
+    });
+
+    it('should remove filter markup', function () {
+      filterView.$('[name="filter"]').val('i was a lonely filter');
+      filterView.$('.js-log-filter-form').submit();
+      filterView.$('[name="filter"]').val('i am a filter');
+      filterView.$('.js-log-filter-form').submit();
+
+      filterView.$('.js-remove-filter').click();
+
+      assert.equal(0, filterView.$('.js-remove-filter').length);
+    });
+  });
+});
diff --git a/src/fauxton/app/addons/logs/assets/less/logs.less b/src/fauxton/app/addons/logs/assets/less/logs.less
index a988a4653..17a418254 100644
--- a/src/fauxton/app/addons/logs/assets/less/logs.less
+++ b/src/fauxton/app/addons/logs/assets/less/logs.less
@@ -22,12 +22,3 @@
     }
   }
 }
-
-#log-sidebar {
-  ul {
-    margin-left: 0px;
-  }
-  li {
-    list-style-type: none;
-  }
-}
diff --git a/src/fauxton/app/addons/logs/resources.js b/src/fauxton/app/addons/logs/resources.js
index 2545542e1..cd0f54ae1 100644
--- a/src/fauxton/app/addons/logs/resources.js
+++ b/src/fauxton/app/addons/logs/resources.js
@@ -14,10 +14,11 @@ define([
   "app",
   "api",
   "backbone",
-  "d3"
+  "d3",
+  "addons/fauxton/components"
 ],
 
-function (app, FauxtonAPI, Backbone, d3) {
+function (app, FauxtonAPI, Backbone, d3, Components) {
 
   var Log = FauxtonAPI.addon();
 
@@ -195,57 +196,17 @@ function (app, FauxtonAPI, Backbone, d3) {
     }
   });
 
-  Log.Views.FilterView = FauxtonAPI.View.extend({
+  Log.Views.Sidebar = FauxtonAPI.View.extend({
     template: "addons/logs/templates/sidebar",
 
-    events: {
-      "submit #log-filter-form": "filterLogs"
-    },
-
-    filterLogs: function (event) {
-      event.preventDefault();
-      var $filter = this.$('input[name="filter"]'),
-          filter = $filter.val();
-
-      Log.events.trigger("log:filter", filter);
-
-      this.insertView("#filter-list", new Log.Views.FilterItemView({
-        filter: filter
-      })).render();
-
-      $filter.val('');
-    }
-
-  });
-
-  Log.Views.FilterItemView = FauxtonAPI.View.extend({
-    template: "addons/logs/templates/filterItem",
-    tagName: "li",
-
     initialize: function (options) {
-      this.filter = options.filter;
-    },
-
-    events: {
-      "click .remove-filter": "removeFilter"
-    },
-
-    serialize: function () {
-      return {
-        filter: this.filter
-      };
-    },
-
-    removeFilter: function (event) {
-      event.preventDefault();
-
-      Log.events.trigger("log:remove", this.filter);
-      this.remove();
+      this.setView(".js-filter", new Components.FilterView({
+        eventListener: Log.events,
+        eventNamespace: "log"
+      }));
     }
-
   });
 
-
   return Log;
 
 });
diff --git a/src/fauxton/app/addons/logs/routes.js b/src/fauxton/app/addons/logs/routes.js
index 5c937af6e..ce6522bde 100644
--- a/src/fauxton/app/addons/logs/routes.js
+++ b/src/fauxton/app/addons/logs/routes.js
@@ -42,7 +42,7 @@ function(app, FauxtonAPI, Log) {
 
     initialize: function () {
       this.logs = new Log.Collection();
-      this.setView("#sidebar-content", new Log.Views.FilterView({}));
+      this.setView("#sidebar-content", new Log.Views.Sidebar({}));
     },
 
     showLog: function () {
diff --git a/src/fauxton/app/addons/logs/templates/sidebar.html b/src/fauxton/app/addons/logs/templates/sidebar.html
index 59b10ace4..b9116f11a 100644
--- a/src/fauxton/app/addons/logs/templates/sidebar.html
+++ b/src/fauxton/app/addons/logs/templates/sidebar.html
@@ -14,14 +14,5 @@ the License.
 
 <div id="log-sidebar">
   <header>Log Filter</header>
-  <form class="form-inline" id="log-filter-form">
-    <fieldset>
-      <input type="text" name="filter" placeholder="Type a filter to sort the logs by">
-      <!-- TODO: filter by method -->
-      <!-- TODO: correct removed filter behaviour -->
-      <button type="submit" class="btn">Filter</button>
-      <span class="help-block"> <h6> Eg. debug or <1.4.1> or any regex </h6> </span>
-    </fieldset>
-  </form>
-  <ul id="filter-list"></ul>
+  <div class="js-filter"></div>
 </div>
diff --git a/src/fauxton/assets/less/fauxton.less b/src/fauxton/assets/less/fauxton.less
index aee3429df..177cadc6f 100644
--- a/src/fauxton/assets/less/fauxton.less
+++ b/src/fauxton/assets/less/fauxton.less
@@ -910,3 +910,12 @@ div.spinner {
     }
   }
 }
+
+.js-log-filter-form {
+  ul {
+    margin-left: 0px;
+  }
+  li {
+    list-style-type: none;
+  }
+}