Merge pull request #1518 from /issues/1515

Fixes #1515 - fixed encoding param

Author: Mike Taylor

tests/functional/issue-list-non-auth.js

@@ -463,34 +463,6 @@ define(
             })
             .end()
         );
-      },
-
-      "Results are loaded from the query params": function() {
-        var params = "?q=vladvlad";
-        return FunctionalHelpers.openPage(
-          this,
-          url("/issues", params),
-          ".js-IssueList:nth-of-type(1)"
-        )
-          .findByCssSelector(".wc-IssueList:nth-of-type(1) a")
-          .getVisibleText()
-          .then(function(text) {
-            assert.include(
-              text,
-              "vladvlad",
-              "The search query results show up on the page."
-            );
-          })
-          .end()
-          .getCurrentUrl()
-          .then(function(currUrl) {
-            assert.include(
-              currUrl,
-              "q=vladvlad",
-              "Our params didn't go anywhere."
-            );
-          })
-          .end();
       }
     });
   }

tests/functional/search-non-auth.js

@@ -8,9 +8,10 @@ define(
     "intern!object",
     "intern/chai!assert",
     "require",
-    "tests/functional/lib/helpers"
+    "tests/functional/lib/helpers",
+    "intern/dojo/node!leadfoot/keys"
   ],
-  function(intern, registerSuite, assert, require, FunctionalHelpers) {
+  function(intern, registerSuite, assert, require, FunctionalHelpers, keys) {
     "use strict";
     var url = function(path, params) {
       var base = intern.config.siteRoot + path;
@@ -128,6 +129,82 @@ define(
             );
           })
           .end();
+      },
+
+      "Search with a dash works": function() {
+        // load up a garbage search, so we can more easily detect when
+        // the search values we want are loaded.
+        var searchParam = "?q=jfdkjfkdjfkdjfdkjfkd";
+        return FunctionalHelpers.openPage(
+          this,
+          url("/issues", searchParam),
+          ".wc-SearchIssue-noResults-title"
+        )
+          .findByCssSelector("#js-SearchForm-input")
+          .clearValue()
+          .click()
+          .type("label:status-tacos")
+          .type(keys.ENTER)
+          .end()
+          .findDisplayedByCssSelector(
+            ".wc-IssueList:first-of-type .js-Issue-label"
+          )
+          .getVisibleText()
+          .then(function(text) {
+            assert.include(
+              text,
+              "tacos",
+              "The label:status-tacos search worked."
+            );
+          })
+          .end();
+      },
+
+      "Search input is loaded from q param (with dashes)": function() {
+        // load up a garbage search, so we can more easily detect when
+        // the search values we want are loaded.
+        var searchParam = "?q=one:two-three";
+        return FunctionalHelpers.openPage(
+          this,
+          url("/issues", searchParam),
+          ".wc-SearchIssue-noResults-title"
+        )
+          .findByCssSelector("#js-SearchForm-input")
+          .getProperty("value")
+          .then(function(text) {
+            assert.include(
+              text,
+              "one:two-three",
+              "The q param populated the search input."
+            );
+          })
+          .end();
+      },
+
+      "Empty search input removes q param": function() {
+        // load up a garbage search, so we can more easily detect when
+        // the search values we want are loaded.
+        var searchParam = "?q=fffffff";
+        return FunctionalHelpers.openPage(
+          this,
+          url("/issues", searchParam),
+          ".js-SearchForm"
+        )
+          .findByCssSelector("#js-SearchForm-input")
+          .clearValue()
+          .click()
+          .type("")
+          .type(keys.ENTER)
+          .sleep(1000)
+          .getCurrentUrl()
+          .then(function(currUrl) {
+            assert.notInclude(
+              currUrl,
+              "q=fffffff",
+              "old search param was removed"
+            );
+          })
+          .end();
       }
     });
   }

webcompat/static/js/lib/issue-list.js

@@ -190,6 +190,7 @@ issueList.SearchView = Backbone.View.extend({
   initialize: function() {
     issueList.events.on("search:update", _.bind(this.updateSearchQuery, this));
     issueList.events.on("search:clear", _.bind(this.clearSearchBox, this));
+    issueList.events.on("search:current", _.bind(this.currentSearch, this));
   },
   template: _.template($("#issuelist-search-tmpl").html()),
   render: function(cb) {
@@ -207,6 +208,9 @@ issueList.SearchView = Backbone.View.extend({
   updateSearchQuery: function(data) {
     this.input.val(data);
   },
+  currentSearch: function(data) {
+    this._currentSearch = data;
+  },
   _isEmpty: true,
   _currentSearch: null,
   searchIfNotEmpty: _.debounce(function(e) {
@@ -218,8 +222,8 @@ issueList.SearchView = Backbone.View.extend({
       // don't search if nothing has changed
       // (or user just added whitespace)
       if ($.trim(searchValue) !== this._currentSearch) {
-        this._currentSearch = $.trim(searchValue);
-        this.doSearch(this._currentSearch);
+        this.currentSearch($.trim(searchValue));
+        this.doSearch($.trim(searchValue));
         // clear any filters that have been set.
         issueList.events.trigger("filter:clear", { removeQ: false });
       }
@@ -228,9 +232,10 @@ issueList.SearchView = Backbone.View.extend({
     // if it's empty and the user searches, show the default results
     // (but only once)
     if (!searchValue.length && this._currentSearch !== "") {
-      this._currentSearch = "";
+      this.doSearch("");
+      this.currentSearch("");
+      issueList.events.trigger("filter:clear", { removeQ: true });
       this._isEmpty = true;
-      issueList.events.trigger("issues:update");
     }
   }, 350),
   doSearch: _.throttle(function(value) {
@@ -336,14 +341,22 @@ issueList.IssueView = Backbone.View.extend(
       // There are some params in the URL
       if (urlParams.length !== 0) {
         queryMatch = urlParams.match(this._searchRegex);
+        if (queryMatch) {
+          _.delay(function() {
+            issueList.events.trigger(
+              "search:update",
+              decodeURIComponent(queryMatch[1])
+            );
+            issueList.events.trigger(
+              "search:current",
+              decodeURIComponent(queryMatch[1])
+            );
+          }, 0);
+        }
         if (!this._isLoggedIn && queryMatch) {
           // We're dealing with an un-authed user, with a q param.
           this.doGitHubSearch(urlParams);
           this.updateModelParams(urlParams);
-          _.delay(function() {
-            // TODO: update search input from query param for authed users.
-            issueList.events.trigger("search:update", queryMatch[1]);
-          }, 0);
         } else if (
           (category = window.location.search.match(this._filterRegex))
         ) {
@@ -473,13 +486,22 @@ issueList.IssueView = Backbone.View.extend(
           this.issues.setURLState("/api/issues/search", paramsCopy);
         }
       } else if (_.contains(issuesAPICategories, category)) {
-        this.issues.setURLState("/api/issues/category/" + category, params);
+        this.issues.setURLState(
+          "/api/issues/category/" + category,
+          this.removeParamQuery(params)
+        );
       } else {
-        this.issues.setURLState("/api/issues", params);
+        this.issues.setURLState("/api/issues", this.removeParamQuery(params));
       }
 
       this.fetchAndRenderIssues();
     },
+    removeParamQuery: function(params) {
+      if (params && params.q) {
+        delete params.q;
+      }
+      return params;
+    },
     addParamsToModel: function(paramsArray) {
       // this method just puts the params in the model's params property.
       // paramsArray is an array of param 'key=value' string pairs
@@ -489,7 +511,7 @@ issueList.IssueView = Backbone.View.extend(
           var kvArray = param.split("=");
           var key = kvArray[0];
           var value = kvArray[1];
-          this.issues.params[key] = value;
+          this.issues.params[key] = decodeURIComponent(value);
         }, this)
       );
     },