1 files changed, 38 insertions, 9 deletions

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 5ff95f45be4..566fb295588 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
@@ -5,6 +5,7 @@ import FilteredSearchContainer from './container';
 import FilteredSearchTokenKeys from './filtered_search_token_keys';
 import DropdownUtils from './dropdown_utils';
 import FilteredSearchVisualTokens from './filtered_search_visual_tokens';
+import { DROPDOWN_TYPE } from './constants';
 
 export default class FilteredSearchDropdownManager {
   constructor({
@@ -67,10 +68,16 @@ export default class FilteredSearchDropdownManager {
     this.mapping = availableMappings.getAllowedMappings(supportedTokens);
   }
 
-  static addWordToInput(tokenName, tokenValue = '', clicked = false, options = {}) {
+  static addWordToInput({
+    tokenName,
+    tokenOperator = '',
+    tokenValue = '',
+    clicked = false,
+    options = {},
+  }) {
     const { uppercaseTokenName = false, capitalizeTokenValue = false } = options;
     const input = FilteredSearchContainer.container.querySelector('.filtered-search');
-    FilteredSearchVisualTokens.addFilterVisualToken(tokenName, tokenValue, {
+    FilteredSearchVisualTokens.addFilterVisualToken(tokenName, tokenOperator, tokenValue, {
       uppercaseTokenName,
       capitalizeTokenValue,
     });
@@ -129,7 +136,10 @@ export default class FilteredSearchDropdownManager {
       mappingKey.reference.init();
     }
 
-    if (this.currentDropdown === 'hint') {
+    if (
+      this.currentDropdown === DROPDOWN_TYPE.hint ||
+      this.currentDropdown === DROPDOWN_TYPE.operator
+    ) {
       // Force the dropdown to show if it was clicked from the hint dropdown
       forceShowList = true;
     }
@@ -148,13 +158,19 @@ export default class FilteredSearchDropdownManager {
       this.droplab = new DropLab();
     }
 
+    if (dropdownName === DROPDOWN_TYPE.operator) {
+      this.load(dropdownName, firstLoad);
+      return;
+    }
+
     const match = this.filteredSearchTokenKeys.searchByKey(dropdownName.toLowerCase());
     const shouldOpenFilterDropdown =
       match && this.currentDropdown !== match.key && this.mapping[match.key];
-    const shouldOpenHintDropdown = !match && this.currentDropdown !== 'hint';
+    const shouldOpenHintDropdown = !match && this.currentDropdown !== DROPDOWN_TYPE.hint;
 
     if (shouldOpenFilterDropdown || shouldOpenHintDropdown) {
-      const key = match && match.key ? match.key : 'hint';
+      const key = match && match.key ? match.key : DROPDOWN_TYPE.hint;
+
       this.load(key, firstLoad);
     }
   }
@@ -169,19 +185,32 @@ export default class FilteredSearchDropdownManager {
     if (this.currentDropdown) {
       this.updateCurrentDropdownOffset();
     }
-
     if (lastToken === searchToken && lastToken !== null) {
       // Token is not fully initialized yet because it has no value
       // Eg. token = 'label:'
 
       const split = lastToken.split(':');
       const dropdownName = _.last(split[0].split(' '));
-      this.loadDropdown(split.length > 1 ? dropdownName : '');
+      const possibleOperatorToken = _.last(split[1]);
+
+      const hasOperator = FilteredSearchVisualTokens.permissibleOperatorValues.includes(
+        possibleOperatorToken && possibleOperatorToken.trim(),
+      );
+
+      let dropdownToOpen = '';
+
+      if (split.length > 1) {
+        const lastOperatorToken = FilteredSearchVisualTokens.getLastTokenOperator();
+        dropdownToOpen = hasOperator && lastOperatorToken ? dropdownName : DROPDOWN_TYPE.operator;
+      }
+
+      this.loadDropdown(dropdownToOpen);
     } else if (lastToken) {
+      const lastOperator = FilteredSearchVisualTokens.getLastTokenOperator();
       // Token has been initialized into an object because it has a value
-      this.loadDropdown(lastToken.key);
+      this.loadDropdown(lastOperator ? lastToken.key : DROPDOWN_TYPE.operator);
     } else {
-      this.loadDropdown('hint');
+      this.loadDropdown(DROPDOWN_TYPE.hint);
     }
   }