Filter merge requests by target branch

5 files changed, 67 insertions, 12 deletions

diff --git a/app/assets/javascripts/filtered_search/add_extra_tokens_for_merge_requests.js b/app/assets/javascripts/filtered_search/add_extra_tokens_for_merge_requests.js
index 54ea936252e..0b24d9fc920 100644
--- a/app/assets/javascripts/filtered_search/add_extra_tokens_for_merge_requests.js
+++ b/app/assets/javascripts/filtered_search/add_extra_tokens_for_merge_requests.js
@@ -13,4 +13,16 @@ export default IssuableTokenKeys => {
 
   IssuableTokenKeys.tokenKeys.push(wipToken);
   IssuableTokenKeys.tokenKeysWithAlternative.push(wipToken);
+
+  const targetBranchToken = {
+    key: 'target-branch',
+    type: 'string',
+    param: '',
+    symbol: '',
+    icon: 'arrow-right',
+    tag: 'branch',
+  };
+
+  IssuableTokenKeys.tokenKeys.push(targetBranchToken);
+  IssuableTokenKeys.tokenKeysWithAlternative.push(targetBranchToken);
 };
diff --git a/app/assets/javascripts/filtered_search/available_dropdown_mappings.js b/app/assets/javascripts/filtered_search/available_dropdown_mappings.js
index e2f9c03ee65..be867a3838d 100644
--- a/app/assets/javascripts/filtered_search/available_dropdown_mappings.js
+++ b/app/assets/javascripts/filtered_search/available_dropdown_mappings.js
@@ -5,6 +5,7 @@ import DropdownEmoji from './dropdown_emoji';
 import NullDropdown from './null_dropdown';
 import DropdownAjaxFilter from './dropdown_ajax_filter';
 import DropdownUtils from './dropdown_utils';
+import { mergeUrlParams } from '../lib/utils/url_utility';
 
 export default class AvailableDropdownMappings {
   constructor(container, baseEndpoint, groupsOnly, includeAncestorGroups, includeDescendantGroups) {
@@ -13,6 +14,7 @@ export default class AvailableDropdownMappings {
     this.groupsOnly = groupsOnly;
     this.includeAncestorGroups = includeAncestorGroups;
     this.includeDescendantGroups = includeDescendantGroups;
+    this.filteredSearchInput = this.container.querySelector('.filtered-search');
   }
 
   getAllowedMappings(supportedTokens) {
@@ -102,6 +104,15 @@ export default class AvailableDropdownMappings {
         },
         element: this.container.querySelector('#js-dropdown-runner-tag'),
       },
+      'target-branch': {
+        reference: null,
+        gl: DropdownNonUser,
+        extraArguments: {
+          endpoint: this.getMergeRequestTargetBranchesEndpoint(),
+          symbol: '',
+        },
+        element: this.container.querySelector('#js-dropdown-target-branch'),
+      },
     };
   }
 
@@ -130,4 +141,24 @@ export default class AvailableDropdownMappings {
   getRunnerTagsEndpoint() {
     return `${this.baseEndpoint}/admin/runners/tag_list.json`;
   }
+
+  getMergeRequestTargetBranchesEndpoint() {
+    const endpoint = `${gon.relative_url_root ||
+      ''}/autocomplete/merge_request_target_branches.json`;
+
+    const params = {
+      group_id: this.getGroupId(),
+      project_id: this.getProjectId(),
+    };
+
+    return mergeUrlParams(params, endpoint);
+  }
+
+  getGroupId() {
+    return this.filteredSearchInput.getAttribute('data-group-id') || '';
+  }
+
+  getProjectId() {
+    return this.filteredSearchInput.getAttribute('data-project-id') || '';
+  }
 }
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js
index 33c82778c79..0c2e87521d9 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js
@@ -504,14 +504,7 @@ export default class FilteredSearchManager {
         const match = this.filteredSearchTokenKeys.searchByKeyParam(keyParam);
 
         if (match) {
-          // Use lastIndexOf because the token key is allowed to contain underscore
-          // e.g. 'my_reaction' is the token key of 'my_reaction_emoji'
-          const lastIndexOf = keyParam.lastIndexOf('_');
-          let sanitizedKey = lastIndexOf !== -1 ? keyParam.slice(0, lastIndexOf) : keyParam;
-          // Replace underscore with hyphen in the sanitizedkey.
-          // e.g. 'my_reaction' => 'my-reaction'
-          sanitizedKey = sanitizedKey.replace('_', '-');
-          const { symbol } = match;
+          const { key, symbol } = match;
           let quotationsToUse = '';
 
           if (sanitizedValue.indexOf(' ') !== -1) {
@@ -520,10 +513,10 @@ export default class FilteredSearchManager {
           }
 
           hasFilteredSearch = true;
-          const canEdit = this.canEdit && this.canEdit(sanitizedKey, sanitizedValue);
+          const canEdit = this.canEdit && this.canEdit(key, sanitizedValue);
           const { uppercaseTokenName, capitalizeTokenValue } = match;
           FilteredSearchVisualTokens.addFilterVisualToken(
-            sanitizedKey,
+            key,
             `${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}`,
             {
               canEdit,
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 7746908714e..315cd6f64da 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
@@ -69,11 +69,21 @@ export default class FilteredSearchVisualTokens {
   }
 
   static addVisualTokenElement(name, value, options = {}) {
-    const { isSearchTerm = false, canEdit, uppercaseTokenName, capitalizeTokenValue } = options;
+    const {
+      isSearchTerm = false,
+      canEdit,
+      uppercaseTokenName,
+      capitalizeTokenValue,
+      tokenClass = `search-token-${name.toLowerCase()}`,
+    } = options;
     const li = document.createElement('li');
     li.classList.add('js-visual-token');
     li.classList.add(isSearchTerm ? 'filtered-search-term' : 'filtered-search-token');
 
+    if (!isSearchTerm) {
+      li.classList.add(tokenClass);
+    }
+
     if (value) {
       li.innerHTML = FilteredSearchVisualTokens.createVisualTokenElementHTML({
         canEdit,
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index e5b529ae11d..5bcfd5d1322 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -108,6 +108,8 @@
   }
 
   .value-container {
+    display: flex;
+    align-items: center;
     background-color: $white-normal;
     color: $filter-value-text-color;
     border-radius: 0 2px 2px 0;
@@ -121,7 +123,7 @@
 
   .remove-token {
     display: inline-block;
-    padding-left: 4px;
+    padding-left: 8px;
     padding-right: 0;
 
     .fa-close {
@@ -412,3 +414,10 @@
   padding: 8px 16px;
   text-align: center;
 }
+
+.search-token-target-branch {
+  .value {
+    font-family: $monospace-font;
+    font-size: 13px;
+  }
+}