Make class initialization configurable

app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js

@@ -3,19 +3,15 @@ import DropLab from '~/droplab/drop_lab';
 import FilteredSearchContainer from './container';
 
 class FilteredSearchDropdownManager {
-  constructor(baseEndpoint = '', tokenizer, page, isGroup) {
+  constructor(baseEndpoint = '', tokenizer, page, isGroup, filteredSearchTokenKeys) {
     this.container = FilteredSearchContainer.container;
     this.baseEndpoint = baseEndpoint.replace(/\/$/, '');
     this.tokenizer = tokenizer;
-    this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
+    this.filteredSearchTokenKeys = filteredSearchTokenKeys;
     this.filteredSearchInput = this.container.querySelector('.filtered-search');
     this.page = page;
     this.groupsOnly = page === 'boards' && isGroup;
 
-    if (this.page === 'issues' || this.page === 'boards') {
-      this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeysIssuesEE;
-    }
-
     this.setupMapping();
 
     this.cleanupWrapper = this.cleanup.bind(this);
@@ -34,12 +30,30 @@ class FilteredSearchDropdownManager {
   }
 
   setupMapping() {
-    this.mapping = {
+    const supportedTokens = this.filteredSearchTokenKeys.getKeys();
+    const allowedMappings = {
+      hint: {
+        reference: null,
+        gl: 'DropdownHint',
+        element: this.container.querySelector('#js-dropdown-hint'),
+      },
+    };
+    const availableMappings = {
       author: {
         reference: null,
         gl: 'DropdownUser',
         element: this.container.querySelector('#js-dropdown-author'),
       },
+      label: {
+        reference: null,
+        gl: 'DropdownNonUser',
+        extraArguments: {
+          endpoint: `${this.baseEndpoint}/labels.json${this.groupsOnly ? '?only_group_labels=true' : ''}`,
+          symbol: '~',
+          preprocessing: gl.DropdownUtils.duplicateLabelPreprocessing,
+        },
+        element: this.container.querySelector('#js-dropdown-label'),
+      },
       assignee: {
         reference: null,
         gl: 'DropdownUser',
@@ -54,35 +68,25 @@ class FilteredSearchDropdownManager {
         },
         element: this.container.querySelector('#js-dropdown-milestone'),
       },
-      label: {
-        reference: null,
-        gl: 'DropdownNonUser',
-        extraArguments: {
-          endpoint: `${this.baseEndpoint}/labels.json${this.groupsOnly ? '?only_group_labels=true' : ''}`,
-          symbol: '~',
-          preprocessing: gl.DropdownUtils.duplicateLabelPreprocessing,
-        },
-        element: this.container.querySelector('#js-dropdown-label'),
-      },
       'my-reaction': {
         reference: null,
         gl: 'DropdownEmoji',
         element: this.container.querySelector('#js-dropdown-my-reaction'),
       },
-      hint: {
+      weight: {
         reference: null,
-        gl: 'DropdownHint',
-        element: this.container.querySelector('#js-dropdown-hint'),
+        gl: 'DropdownNonUser',
+        element: this.container.querySelector('#js-dropdown-weight'),
       },
     };
 
-    if (this.page === 'issues' || this.page === 'boards') {
-      this.mapping.weight = {
-        reference: null,
-        gl: 'DropdownNonUser',
-        element: this.container.querySelector('#js-dropdown-weight'),
-      };
-    }
+    supportedTokens.forEach((type) => {
+      if (availableMappings[type]) {
+        allowedMappings[type] = availableMappings[type];
+      }
+    });
+
+    this.mapping = allowedMappings;
   }
 
   static addWordToInput(tokenName, tokenValue = '', clicked = false) {

app/assets/javascripts/filtered_search/filtered_search_manager.js

@@ -3,28 +3,36 @@ import { visitUrl } from '../lib/utils/url_utility';
 import Flash from '../flash';
 import FilteredSearchContainer from './container';
 import RecentSearchesRoot from './recent_searches_root';
+import FilteredSearchTokenKeys from './filtered_search_token_keys';
 import RecentSearchesStore from './stores/recent_searches_store';
 import RecentSearchesService from './services/recent_searches_service';
 import eventHub from './event_hub';
 import { addClassIfElementExists } from '../lib/utils/dom_utils';
 
 class FilteredSearchManager {
-  constructor(page) {
+  constructor({
+    page,
+    filteredSearchTokenKeys = FilteredSearchTokenKeys,
+    stateFiltersSelector = '.issues-state-filters',
+  }) {
+    this.isGroup = false;
+    this.states = ['opened', 'closed', 'merged', 'all'];
+
     this.page = page;
     this.container = FilteredSearchContainer.container;
     this.filteredSearchInput = this.container.querySelector('.filtered-search');
     this.filteredSearchInputForm = this.filteredSearchInput.form;
     this.clearSearchButton = this.container.querySelector('.clear-search');
     this.tokensContainer = this.container.querySelector('.tokens-container');
-    this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
-
-    gl.FilteredSearchTokenKeysIssuesEE.init({
-      multipleAssignees: this.filteredSearchInput.dataset.multipleAssignees,
-    });
+    this.filteredSearchTokenKeys = filteredSearchTokenKeys;
+    this.stateFiltersSelector = stateFiltersSelector;
+    this.recentsStorageKeyNames = {
+      issues: 'issue-recent-searches',
+      merge_requests: 'merge-request-recent-searches',
+    };
 
-    if (this.page === 'issues' || this.page === 'boards') {
-      this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeysIssuesEE;
-    }
+    // EE specific setup
+    this.initEE();
 
     this.recentSearchesStore = new RecentSearchesStore({
       isLocalStorageAvailable: RecentSearchesService.isAvailable(),
@@ -33,14 +41,30 @@ class FilteredSearchManager {
     this.searchHistoryDropdownElement = document.querySelector('.js-filtered-search-history-dropdown');
     const fullPath = this.searchHistoryDropdownElement ?
       this.searchHistoryDropdownElement.dataset.fullPath : 'project';
-    let recentSearchesPagePrefix = 'issue-recent-searches';
-    if (this.page === 'merge_requests') {
-      recentSearchesPagePrefix = 'merge-request-recent-searches';
-    }
-    const recentSearchesKey = `${fullPath}-${recentSearchesPagePrefix}`;
+    const recentSearchesKey = `${fullPath}-${this.recentsStorageKeyNames[this.page]}`;
     this.recentSearchesService = new RecentSearchesService(recentSearchesKey);
   }
 
+  /**
+   * Do EE specific initializations
+   */
+  initEE() {
+    // Setup token keys for multiple-assignees support
+    if (typeof this.filteredSearchTokenKeys.init === 'function') {
+      this.filteredSearchTokenKeys.init({
+        multipleAssignees: this.filteredSearchInput.dataset.multipleAssignees,
+      });
+    }
+
+    // Add localStorage key name for Epics recent searches
+    this.recentsStorageKeyNames.epics = 'epics-recent-searches';
+
+    // Update `isGroup` from DOM info
+    if (this.filteredSearchInput) {
+      this.isGroup = !!this.filteredSearchInput.getAttribute('data-group-id');
+    }
+  }
+
   setup() {
     // Fetch recent searches from localStorage
     this.fetchingRecentSearchesPromise = this.recentSearchesService.fetch()
@@ -70,7 +94,8 @@ class FilteredSearchManager {
         this.filteredSearchInput.getAttribute('data-base-endpoint') || '',
         this.tokenizer,
         this.page,
-        Boolean(this.filteredSearchInput.getAttribute('data-group-id')),
+        this.isGroup,
+        this.filteredSearchTokenKeys,
       );
 
       this.recentSearchesRoot = new RecentSearchesRoot(
@@ -99,40 +124,33 @@ class FilteredSearchManager {
   }
 
   bindStateEvents() {
-    this.stateFilters = document.querySelector('.container-fluid .issues-state-filters');
+    this.stateFilters = document.querySelector(`.container-fluid ${this.stateFiltersSelector}`);
 
     if (this.stateFilters) {
       this.searchStateWrapper = this.searchState.bind(this);
 
-      this.stateFilters.querySelector('[data-state="opened"]')
-        .addEventListener('click', this.searchStateWrapper);
-      this.stateFilters.querySelector('[data-state="closed"]')
-        .addEventListener('click', this.searchStateWrapper);
-      this.stateFilters.querySelector('[data-state="all"]')
-        .addEventListener('click', this.searchStateWrapper);
-
-      this.mergedState = this.stateFilters.querySelector('[data-state="merged"]');
-      if (this.mergedState) {
-        this.mergedState.addEventListener('click', this.searchStateWrapper);
-      }
+      this.applyToStateFilters((filterEl) => {
+        filterEl.addEventListener('click', this.searchStateWrapper);
+      });
     }
   }
 
   unbindStateEvents() {
     if (this.stateFilters) {
-      this.stateFilters.querySelector('[data-state="opened"]')
-        .removeEventListener('click', this.searchStateWrapper);
-      this.stateFilters.querySelector('[data-state="closed"]')
-        .removeEventListener('click', this.searchStateWrapper);
-      this.stateFilters.querySelector('[data-state="all"]')
-        .removeEventListener('click', this.searchStateWrapper);
-
-      if (this.mergedState) {
-        this.mergedState.removeEventListener('click', this.searchStateWrapper);
-      }
+      this.applyToStateFilters((filterEl) => {
+        filterEl.removeEventListener('click', this.searchStateWrapper);
+      });
     }
   }
 
+  applyToStateFilters(callback) {
+    this.stateFilters.querySelectorAll('a[data-state]').forEach((filterEl) => {
+      if (this.states.indexOf(filterEl.dataset.state) > -1) {
+        callback(filterEl);
+      }
+    });
+  }
+
   bindEvents() {
     this.handleFormSubmit = this.handleFormSubmit.bind(this);
     this.setDropdownWrapper = this.dropdownManager.setDropdown.bind(this.dropdownManager);