Created a container class for filtered search

This class returns the correct container the filtered search should be
run in

At the moment it doesn't allow for multiple to be used at once, need to
look at a way to fix this

[ci skip]

app/assets/javascripts/boards/components/modal/filters.js

@@ -1,12 +1,16 @@
 /* global Vue */
 import FilteredSearchBoards from '../../filtered_search_boards';
+import { FilteredSearchContainer } from '../../../filtered_search/container';
 
 export default {
   name: 'modal-filters',
   mounted() {
-    this.filteredSearch = new FilteredSearchBoards({path: ''}, false, this.$el);
+    FilteredSearchContainer.container = this.$el;
+
+    this.filteredSearch = new FilteredSearchBoards({path: ''}, false);
   },
   destroyed() {
+    FilteredSearchContainer.container = document;
     gl.issueBoards.ModalStore.setDefaultFilter();
   },
   template: '#js-board-modal-filter',

app/assets/javascripts/boards/filtered_search_boards.js

@@ -1,6 +1,6 @@
 export default class FilteredSearchBoards extends gl.FilteredSearchManager {
-  constructor(store, updateUrl = false, container = document) {
-    super('boards', container);
+  constructor(store, updateUrl = false) {
+    super('boards');
 
     this.store = store;
     this.updateUrl = updateUrl;

app/assets/javascripts/filtered_search/container.js

@@ -0,0 +1,13 @@
+let _container = document;
+
+class FilteredSearchContainerClass {
+  set container(container) {
+    _container = container;
+  }
+
+  get container() {
+    return _container;
+  }
+}
+
+export let FilteredSearchContainer = new FilteredSearchContainerClass();

app/assets/javascripts/filtered_search/dropdown_user.js

@@ -56,6 +56,8 @@ require('./filtered_search_dropdown');
     }
 
     init() {
+      console.log(this.input);
+      console.log(this.dropdown);
       this.droplab.addHook(this.input, this.dropdown, [droplabAjaxFilter], this.config).init();
     }
   }

app/assets/javascripts/filtered_search/dropdown_utils.js

@@ -1,3 +1,5 @@
+import { FilteredSearchContainer } from './container';
+
 (() => {
   class DropdownUtils {
     static getEscapedText(text) {
@@ -85,7 +87,8 @@
 
     // Determines the full search query (visual tokens + input)
     static getSearchQuery(untilInput = false) {
-      const tokens = [].slice.call(document.querySelectorAll('.tokens-container li'));
+      const container = FilteredSearchContainer.container;
+      const tokens = [].slice.call(container.querySelectorAll('.tokens-container li'));
       const values = [];
 
       if (untilInput) {

app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js

@@ -1,9 +1,10 @@
 /* global DropLab */
+import { FilteredSearchContainer } from './container';
 
 (() => {
   class FilteredSearchDropdownManager {
-    constructor(baseEndpoint = '', page, container) {
-      this.container = container;
+    constructor(baseEndpoint = '', page) {
+      this.container = FilteredSearchContainer.container;
       this.baseEndpoint = baseEndpoint.replace(/\/$/, '');
       this.tokenizer = gl.FilteredSearchTokenizer;
       this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
@@ -59,10 +60,10 @@
       };
     }
 
-    static addWordToInput(tokenName, tokenValue = '', clicked = false, container = document) {
-      const input = container.querySelector('.filtered-search');
+    static addWordToInput(tokenName, tokenValue = '', clicked = false) {
+      const input = FilteredSearchContainer.container.querySelector('.filtered-search');
 
-      gl.FilteredSearchVisualTokens.addFilterVisualToken(tokenName, tokenValue, container);
+      gl.FilteredSearchVisualTokens.addFilterVisualToken(tokenName, tokenValue);
       input.value = '';
 
       if (clicked) {
@@ -103,7 +104,6 @@
 
         // Passing glArguments to `new gl[glClass](<arguments>)`
         mappingKey.reference = new (Function.prototype.bind.apply(gl[glClass], glArguments))();
-        mappingKey.reference.container = this.container;
       }
 
       if (firstLoad) {

app/assets/javascripts/filtered_search/filtered_search_manager.js

@@ -1,7 +1,9 @@
+import { FilteredSearchContainer } from './container';
+
 (() => {
   class FilteredSearchManager {
-    constructor(page, container = document) {
-      this.container = container;
+    constructor(page) {
+      this.container = FilteredSearchContainer.container;
       this.filteredSearchInput = this.container.querySelector('.filtered-search');
       this.clearSearchButton = this.container.querySelector('.clear-search');
       this.tokensContainer = this.container.querySelector('.tokens-container');
@@ -9,7 +11,7 @@
 
       if (this.filteredSearchInput) {
         this.tokenizer = gl.FilteredSearchTokenizer;
-        this.dropdownManager = new gl.FilteredSearchDropdownManager(this.filteredSearchInput.getAttribute('data-base-endpoint') || '', page, container);
+        this.dropdownManager = new gl.FilteredSearchDropdownManager(this.filteredSearchInput.getAttribute('data-base-endpoint') || '', page);
 
         this.bindEvents();
         this.loadSearchParamsFromURL();

app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js

@@ -1,6 +1,8 @@
+import { FilteredSearchContainer } from './container';
+
 class FilteredSearchVisualTokens {
   static getLastVisualTokenBeforeInput() {
-    const inputLi = document.querySelector('.input-token');
+    const inputLi = FilteredSearchContainer.container.querySelector('.input-token');
     const lastVisualToken = inputLi && inputLi.previousElementSibling;
 
     return {
@@ -10,7 +12,7 @@ class FilteredSearchVisualTokens {
   }
 
   static unselectTokens() {
-    const otherTokens = document.querySelectorAll('.js-visual-token .selectable.selected');
+    const otherTokens = FilteredSearchContainer.container.querySelectorAll('.js-visual-token .selectable.selected');
     [].forEach.call(otherTokens, t => t.classList.remove('selected'));
   }
 
@@ -24,7 +26,7 @@ class FilteredSearchVisualTokens {
   }
 
   static removeSelectedToken() {
-    const selected = document.querySelector('.js-visual-token .selected');
+    const selected = FilteredSearchContainer.container.querySelector('.js-visual-token .selected');
 
     if (selected) {
       const li = selected.closest('.js-visual-token');
@@ -41,7 +43,7 @@ class FilteredSearchVisualTokens {
     `;
   }
 
-  static addVisualTokenElement(name, value, isSearchTerm, container) {
+  static addVisualTokenElement(name, value, isSearchTerm) {
     const li = document.createElement('li');
     li.classList.add('js-visual-token');
     li.classList.add(isSearchTerm ? 'filtered-search-term' : 'filtered-search-token');
@@ -54,8 +56,8 @@ class FilteredSearchVisualTokens {
     }
     li.querySelector('.name').innerText = name;
 
-    const tokensContainer = container.querySelector('.tokens-container');
-    const input = container.querySelector('.filtered-search');
+    const tokensContainer = FilteredSearchContainer.container.querySelector('.tokens-container');
+    const input = FilteredSearchContainer.container.querySelector('.filtered-search');
     tokensContainer.insertBefore(li, input.parentElement);
   }
 
@@ -71,20 +73,20 @@ class FilteredSearchVisualTokens {
     }
   }
 
-  static addFilterVisualToken(tokenName, tokenValue, container) {
+  static addFilterVisualToken(tokenName, tokenValue) {
     const { lastVisualToken, isLastVisualTokenValid }
       = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
     const addVisualTokenElement = FilteredSearchVisualTokens.addVisualTokenElement;
 
     if (isLastVisualTokenValid) {
-      addVisualTokenElement(tokenName, tokenValue, false, container);
+      addVisualTokenElement(tokenName, tokenValue, false);
     } else {
       const previousTokenName = lastVisualToken.querySelector('.name').innerText;
-      const tokensContainer = container.querySelector('.tokens-container');
+      const tokensContainer = FilteredSearchContainer.container.querySelector('.tokens-container');
       tokensContainer.removeChild(lastVisualToken);
 
       const value = tokenValue || tokenName;
-      addVisualTokenElement(previousTokenName, value, false, container);
+      addVisualTokenElement(previousTokenName, value, false);
     }
   }
 
@@ -129,7 +131,7 @@ class FilteredSearchVisualTokens {
   }
 
   static tokenizeInput() {
-    const input = document.querySelector('.filtered-search');
+    const input = FilteredSearchContainer.container.querySelector('.filtered-search');
     const { isLastVisualTokenValid } =
       gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
 
@@ -145,7 +147,7 @@ class FilteredSearchVisualTokens {
   }
 
   static editToken(token) {
-    const input = document.querySelector('.filtered-search');
+    const input = FilteredSearchContainer.container.querySelector('.filtered-search');
 
     FilteredSearchVisualTokens.tokenizeInput();
 
@@ -174,9 +176,9 @@ class FilteredSearchVisualTokens {
   }
 
   static moveInputToTheRight() {
-    const input = document.querySelector('.filtered-search');
+    const input = FilteredSearchContainer.container.querySelector('.filtered-search');
     const inputLi = input.parentElement;
-    const tokenContainer = document.querySelector('.tokens-container');
+    const tokenContainer = FilteredSearchContainer.container.querySelector('.tokens-container');
 
     FilteredSearchVisualTokens.tokenizeInput();
 

app/views/shared/issuable/_search_bar.html.haml

@@ -15,7 +15,7 @@
           .scroll-container
             %ul.tokens-container.list-unstyled
               %li.input-token
-                %input.form-control.filtered-search{ placeholder: 'Search or filter results...', data: { id: 'filtered-search', 'project-id' => @project.id, 'username-params' => @users.to_json(only: [:id, :username]), 'base-endpoint' => namespace_project_path(@project.namespace, @project) } }
+                %input.form-control.filtered-search{ placeholder: 'Search or filter results...', data: { id: "filtered-search-#{type.to_s}", 'project-id' => @project.id, 'username-params' => @users.to_json(only: [:id, :username]), 'base-endpoint' => namespace_project_path(@project.namespace, @project) } }
             = icon('filter')
             %button.clear-search.hidden{ type: 'button' }
               = icon('times')