Added filter bar into add issues modal

[ci skip]

4 files changed, 29 insertions, 26 deletions

diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js b/app/assets/javascripts/filtered_search/dropdown_hint.js
index 28e5e3232cb..98dcb697af9 100644
--- a/app/assets/javascripts/filtered_search/dropdown_hint.js
+++ b/app/assets/javascripts/filtered_search/dropdown_hint.js
@@ -45,7 +45,7 @@ require('./filtered_search_dropdown');
               gl.FilteredSearchVisualTokens.addSearchVisualToken(searchTerms.join(' '));
             }
 
-            gl.FilteredSearchDropdownManager.addWordToInput(token.replace(':', ''));
+            gl.FilteredSearchDropdownManager.addWordToInput(token.replace(':', ''), '', false, this.container);
           }
           this.dismissDropdown();
           this.dispatchInputEvent();
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
index d37c812c1f7..96f73f728f8 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
@@ -2,11 +2,12 @@
 
 (() => {
   class FilteredSearchDropdownManager {
-    constructor(baseEndpoint = '', page) {
+    constructor(baseEndpoint = '', page, container) {
+      this.container = container;
       this.baseEndpoint = baseEndpoint.replace(/\/$/, '');
       this.tokenizer = gl.FilteredSearchTokenizer;
       this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
-      this.filteredSearchInput = document.querySelector('.filtered-search');
+      this.filteredSearchInput = this.container.querySelector('.filtered-search');
       this.page = page;
 
       this.setupMapping();
@@ -31,37 +32,37 @@
         author: {
           reference: null,
           gl: 'DropdownUser',
-          element: document.querySelector('#js-dropdown-author'),
+          element: this.container.querySelector('#js-dropdown-author'),
         },
         assignee: {
           reference: null,
           gl: 'DropdownUser',
-          element: document.querySelector('#js-dropdown-assignee'),
+          element: this.container.querySelector('#js-dropdown-assignee'),
         },
         milestone: {
           reference: null,
           gl: 'DropdownNonUser',
           extraArguments: [`${this.baseEndpoint}/milestones.json`, '%'],
-          element: document.querySelector('#js-dropdown-milestone'),
+          element: this.container.querySelector('#js-dropdown-milestone'),
         },
         label: {
           reference: null,
           gl: 'DropdownNonUser',
           extraArguments: [`${this.baseEndpoint}/labels.json`, '~'],
-          element: document.querySelector('#js-dropdown-label'),
+          element: this.container.querySelector('#js-dropdown-label'),
         },
         hint: {
           reference: null,
           gl: 'DropdownHint',
-          element: document.querySelector('#js-dropdown-hint'),
+          element: this.container.querySelector('#js-dropdown-hint'),
         },
       };
     }
 
-    static addWordToInput(tokenName, tokenValue = '', clicked = false) {
-      const input = document.querySelector('.filtered-search');
+    static addWordToInput(tokenName, tokenValue = '', clicked = false, container = document) {
+      const input = container.querySelector('.filtered-search');
 
-      gl.FilteredSearchVisualTokens.addFilterVisualToken(tokenName, tokenValue);
+      gl.FilteredSearchVisualTokens.addFilterVisualToken(tokenName, tokenValue, container);
       input.value = '';
 
       if (clicked) {
@@ -75,13 +76,13 @@
 
     updateDropdownOffset(key) {
       // Always align dropdown with the input field
-      let offset = this.filteredSearchInput.getBoundingClientRect().left - document.querySelector('.scroll-container').getBoundingClientRect().left;
+      let offset = this.filteredSearchInput.getBoundingClientRect().left - this.container.querySelector('.scroll-container').getBoundingClientRect().left;
 
       const maxInputWidth = 240;
       const currentDropdownWidth = this.mapping[key].element.clientWidth || maxInputWidth;
 
       // Make sure offset never exceeds the input container
-      const offsetMaxWidth = document.querySelector('.scroll-container').clientWidth - currentDropdownWidth;
+      const offsetMaxWidth = this.container.querySelector('.scroll-container').clientWidth - currentDropdownWidth;
       if (offsetMaxWidth < offset) {
         offset = offsetMaxWidth;
       }
@@ -102,6 +103,7 @@
 
         // Passing glArguments to `new gl[glClass](<arguments>)`
         mappingKey.reference = new (Function.prototype.bind.apply(gl[glClass], glArguments))();
+        mappingKey.reference.container = this.container;
       }
 
       if (firstLoad) {
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js
index f885932bd91..55e00890d07 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js
@@ -1,14 +1,15 @@
 (() => {
   class FilteredSearchManager {
-    constructor(page) {
-      this.filteredSearchInput = document.querySelector('.filtered-search');
-      this.clearSearchButton = document.querySelector('.clear-search');
-      this.tokensContainer = document.querySelector('.tokens-container');
+    constructor(page, container = document) {
+      this.container = container;
+      this.filteredSearchInput = this.container.querySelector('.filtered-search');
+      this.clearSearchButton = this.container.querySelector('.clear-search');
+      this.tokensContainer = this.container.querySelector('.tokens-container');
       this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
 
       if (this.filteredSearchInput) {
         this.tokenizer = gl.FilteredSearchTokenizer;
-        this.dropdownManager = new gl.FilteredSearchDropdownManager(this.filteredSearchInput.getAttribute('data-base-endpoint') || '', page);
+        this.dropdownManager = new gl.FilteredSearchDropdownManager(this.filteredSearchInput.getAttribute('data-base-endpoint') || '', page, container);
 
         this.bindEvents();
         this.loadSearchParamsFromURL();
@@ -132,7 +133,7 @@
     }
 
     unselectEditTokens(e) {
-      const inputContainer = document.querySelector('.filtered-search-input-container');
+      const inputContainer = this.container.querySelector('.filtered-search-input-container');
       const isElementInFilteredSearch = inputContainer && inputContainer.contains(e.target);
       const isElementInFilterDropdown = e.target.closest('.filter-dropdown') !== null;
       const isElementTokensContainer = e.target.classList.contains('tokens-container');
diff --git a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
index 320afa26130..8c932f63d2b 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
@@ -41,7 +41,7 @@ class FilteredSearchVisualTokens {
     `;
   }
 
-  static addVisualTokenElement(name, value, isSearchTerm) {
+  static addVisualTokenElement(name, value, isSearchTerm, container) {
     const li = document.createElement('li');
     li.classList.add('js-visual-token');
     li.classList.add(isSearchTerm ? 'filtered-search-term' : 'filtered-search-token');
@@ -54,8 +54,8 @@ class FilteredSearchVisualTokens {
     }
     li.querySelector('.name').innerText = name;
 
-    const tokensContainer = document.querySelector('.tokens-container');
-    const input = document.querySelector('.filtered-search');
+    const tokensContainer = container.querySelector('.tokens-container');
+    const input = container.querySelector('.filtered-search');
     tokensContainer.insertBefore(li, input.parentElement);
   }
 
@@ -71,20 +71,20 @@ class FilteredSearchVisualTokens {
     }
   }
 
-  static addFilterVisualToken(tokenName, tokenValue) {
+  static addFilterVisualToken(tokenName, tokenValue, container) {
     const { lastVisualToken, isLastVisualTokenValid }
       = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
     const addVisualTokenElement = FilteredSearchVisualTokens.addVisualTokenElement;
 
     if (isLastVisualTokenValid) {
-      addVisualTokenElement(tokenName, tokenValue);
+      addVisualTokenElement(tokenName, tokenValue, false, container);
     } else {
       const previousTokenName = lastVisualToken.querySelector('.name').innerText;
-      const tokensContainer = document.querySelector('.tokens-container');
+      const tokensContainer = container.querySelector('.tokens-container');
       tokensContainer.removeChild(lastVisualToken);
 
       const value = tokenValue || tokenName;
-      addVisualTokenElement(previousTokenName, value);
+      addVisualTokenElement(previousTokenName, value, false, container);
     }
   }