Merge branch 'add-filtered-search-to-mr' into 'master'

Add filtered search to MR page

Closes #27131

See merge request !9284

6 files changed, 44 insertions, 39 deletions

diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6
index 45aa6050aed..f55db02f0fd 100644
--- a/app/assets/javascripts/dispatcher.js.es6
+++ b/app/assets/javascripts/dispatcher.js.es6
@@ -74,7 +74,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'projects:merge_requests:index':
         case 'projects:issues:index':
           if (gl.FilteredSearchManager) {
-            new gl.FilteredSearchManager();
+            new gl.FilteredSearchManager(page === 'projects:issues:index' ? 'issues' : 'merge_requests');
           }
           Issuable.init();
           new gl.IssuableBulkActions({
diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6
index 572c221929a..9e92d544bef 100644
--- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6
+++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6
@@ -37,23 +37,18 @@ require('./filtered_search_dropdown');
     }
 
     renderContent() {
-      const dropdownData = [{
-        icon: 'fa-pencil',
-        hint: 'author:',
-        tag: '<@author>',
-      }, {
-        icon: 'fa-user',
-        hint: 'assignee:',
-        tag: '<@assignee>',
-      }, {
-        icon: 'fa-clock-o',
-        hint: 'milestone:',
-        tag: '<%milestone>',
-      }, {
-        icon: 'fa-tag',
-        hint: 'label:',
-        tag: '<~label>',
-      }];
+      const dropdownData = [];
+
+      [].forEach.call(this.input.parentElement.querySelectorAll('.dropdown-menu'), (dropdownMenu) => {
+        const { icon, hint, tag } = dropdownMenu.dataset;
+        if (icon && hint && tag) {
+          dropdownData.push({
+            icon: `fa-${icon}`,
+            hint,
+            tag: `<${tag}>`,
+          });
+        }
+      });
 
       this.droplab.changeHookList(this.hookId, this.dropdown, [droplabFilter], this.config);
       this.droplab.setData(this.hookId, dropdownData);
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
index e8c2df03a46..fbc72a3001a 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
@@ -52,8 +52,9 @@
     }
 
     renderContent(forceShowList = false) {
-      if (forceShowList && this.getCurrentHook().list.hidden) {
-        this.getCurrentHook().list.show();
+      const currentHook = this.getCurrentHook();
+      if (forceShowList && currentHook && currentHook.list.hidden) {
+        currentHook.list.show();
       }
     }
 
@@ -92,18 +93,24 @@
     }
 
     hideDropdown() {
-      this.getCurrentHook().list.hide();
+      const currentHook = this.getCurrentHook();
+      if (currentHook) {
+        currentHook.list.hide();
+      }
     }
 
     resetFilters() {
       const hook = this.getCurrentHook();
-      const data = hook.list.data;
-      const results = data.map((o) => {
-        const updated = o;
-        updated.droplab_hidden = false;
-        return updated;
-      });
-      hook.list.render(results);
+
+      if (hook) {
+        const data = hook.list.data;
+        const results = data.map((o) => {
+          const updated = o;
+          updated.droplab_hidden = false;
+          return updated;
+        });
+        hook.list.render(results);
+      }
     }
   }
 
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6
index 8ce4cf4fc36..cecd3518ce3 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6
@@ -2,10 +2,12 @@
 
 (() => {
   class FilteredSearchDropdownManager {
-    constructor(baseEndpoint = '') {
+    constructor(baseEndpoint = '', page) {
       this.baseEndpoint = baseEndpoint.replace(/\/$/, '');
       this.tokenizer = gl.FilteredSearchTokenizer;
+      this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
       this.filteredSearchInput = document.querySelector('.filtered-search');
+      this.page = page;
 
       this.setupMapping();
 
@@ -150,7 +152,7 @@
         this.droplab = new DropLab();
       }
 
-      const match = gl.FilteredSearchTokenKeys.searchByKey(dropdownName.toLowerCase());
+      const match = this.filteredSearchTokenKeys.searchByKey(dropdownName.toLowerCase());
       const shouldOpenFilterDropdown = match && this.currentDropdown !== match.key
         && this.mapping[match.key];
       const shouldOpenHintDropdown = !match && this.currentDropdown !== 'hint';
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 13a9bf59246..bbafead0305 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
@@ -1,12 +1,13 @@
 (() => {
   class FilteredSearchManager {
-    constructor() {
+    constructor(page) {
       this.filteredSearchInput = document.querySelector('.filtered-search');
       this.clearSearchButton = document.querySelector('.clear-search');
+      this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
 
       if (this.filteredSearchInput) {
         this.tokenizer = gl.FilteredSearchTokenizer;
-        this.dropdownManager = new gl.FilteredSearchDropdownManager(this.filteredSearchInput.getAttribute('data-base-endpoint') || '');
+        this.dropdownManager = new gl.FilteredSearchDropdownManager(this.filteredSearchInput.getAttribute('data-base-endpoint') || '', page);
 
         this.bindEvents();
         this.loadSearchParamsFromURL();
@@ -117,8 +118,8 @@
         const keyParam = decodeURIComponent(split[0]);
         const value = split[1];
 
-        // Check if it matches edge conditions listed in gl.FilteredSearchTokenKeys
-        const condition = gl.FilteredSearchTokenKeys.searchByConditionUrl(p);
+        // Check if it matches edge conditions listed in this.filteredSearchTokenKeys
+        const condition = this.filteredSearchTokenKeys.searchByConditionUrl(p);
 
         if (condition) {
           inputValues.push(`${condition.tokenKey}:${condition.value}`);
@@ -126,7 +127,7 @@
           // Sanitize value since URL converts spaces into +
           // Replace before decode so that we know what was originally + versus the encoded +
           const sanitizedValue = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : value;
-          const match = gl.FilteredSearchTokenKeys.searchByKeyParam(keyParam);
+          const match = this.filteredSearchTokenKeys.searchByKeyParam(keyParam);
 
           if (match) {
             const indexOf = keyParam.indexOf('_');
@@ -171,9 +172,9 @@
       paths.push(`state=${currentState}`);
 
       tokens.forEach((token) => {
-        const condition = gl.FilteredSearchTokenKeys
+        const condition = this.filteredSearchTokenKeys
           .searchByConditionKeyValue(token.key, token.value.toLowerCase());
-        const { param } = gl.FilteredSearchTokenKeys.searchByKey(token.key) || {};
+        const { param } = this.filteredSearchTokenKeys.searchByKey(token.key) || {};
         const keyParam = param ? `${token.key}_${param}` : token.key;
         let tokenPath = '';
 
diff --git a/app/assets/javascripts/search_autocomplete.js.es6 b/app/assets/javascripts/search_autocomplete.js.es6
index 6250e75d407..6fd5345a0a6 100644
--- a/app/assets/javascripts/search_autocomplete.js.es6
+++ b/app/assets/javascripts/search_autocomplete.js.es6
@@ -169,10 +169,10 @@
           url: issuesPath + "/?author_username=" + userName
         }, 'separator', {
           text: 'Merge requests assigned to me',
-          url: mrPath + "/?assignee_id=" + userId
+          url: mrPath + "/?assignee_username=" + userName
         }, {
           text: "Merge requests I've created",
-          url: mrPath + "/?author_id=" + userId
+          url: mrPath + "/?author_username=" + userName
         }
       ];
       if (!name) {