From 9c4868141273b536cc0bc7fb80a662789fe89286 Mon Sep 17 00:00:00 2001
From: Clement Ho <ClemMakesApps@gmail.com>
Date: Fri, 16 Dec 2016 10:22:09 -0600
Subject: [PATCH] Make changes to make it more flexible for new filters

---
 .../javascripts/filtered_search/dropdown_hint.js.es6 |  2 +-
 .../filtered_search/filtered_search_manager.js.es6   | 12 +++++++++---
 .../filtered_search_token_keys.js.es6                | 10 +++++++++-
 app/assets/stylesheets/framework/filters.scss        |  4 ++++
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6
index bdcece61984..7bf30143d78 100644
--- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6
+++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6
@@ -37,7 +37,7 @@
 
       if (selected.tagName === 'LI') {
         if (selected.hasAttribute('data-value')) {
-        this.dismissDropdown();
+          this.dismissDropdown();
         } else {
           const token = selected.querySelector('.js-filter-hint').innerText.trim();
           const tag = selected.querySelector('.js-filter-tag').innerText.trim();
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
index e5b37f1e691..565f2347072 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
@@ -101,7 +101,8 @@
           const match = gl.FilteredSearchTokenKeys.searchByKeyParam(keyParam);
 
           if (match) {
-            const sanitizedKey = keyParam.slice(0, keyParam.indexOf('_'));
+            const indexOf = keyParam.indexOf('_');
+            const sanitizedKey = indexOf !== -1 ? keyParam.slice(0, keyParam.indexOf('_')) : keyParam;
             const symbol = match.symbol;
             let quotationsToUse = '';
 
@@ -137,14 +138,19 @@
         const { param } = gl.FilteredSearchTokenKeys.searchByKey(token.key);
         let tokenPath = '';
 
+        let keyParam = token.key;
+        if (param) {
+          keyParam += `_${param}`;
+        }
+
         if (token.wildcard && condition) {
           tokenPath = condition.url;
         } else if (token.wildcard) {
           // wildcard means that the token does not have a symbol
-          tokenPath = `${token.key}_${param}=${encodeURIComponent(token.value)}`;
+          tokenPath = `${keyParam}=${encodeURIComponent(token.value)}`;
         } else {
           // Remove the token symbol
-          tokenPath = `${token.key}_${param}=${encodeURIComponent(token.value.slice(1))}`;
+          tokenPath = `${keyParam}=${encodeURIComponent(token.value.slice(1))}`;
         }
 
         paths.push(tokenPath);
diff --git a/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6
index 6bd9cb06362..e46373024b6 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6
@@ -57,7 +57,15 @@
     }
 
     static searchByKeyParam(keyParam) {
-      return tokenKeys.find(tokenKey => keyParam === `${tokenKey.key}_${tokenKey.param}`) || null;
+      return tokenKeys.find((tokenKey) => {
+        let tokenKeyParam = tokenKey.key;
+
+        if (tokenKey.param) {
+          tokenKeyParam += `_${tokenKey.param}`;
+        }
+
+        return keyParam === tokenKeyParam;
+      }) || null;
     }
 
     static searchByConditionUrl(url) {
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 8b7cb245420..fee38b05023 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -89,6 +89,10 @@
     overflow-y: hidden;
     border-radius: 0;
 
+    .fa {
+      width: 15px;
+    }
+
     .dropdown-label-box {
       border-color: $white-light;
       border-style: solid;