Perform filtered search when state tab is changed

app/assets/javascripts/filtered_search/filtered_search_manager.js

@@ -77,6 +77,47 @@ class FilteredSearchManager {
     }
   }
 
+  bindStateEvents() {
+    const stateFilters = document.querySelector('.container-fluid .issues-state-filters');
+
+    if (stateFilters) {
+      this.searchStateOpened = this.search.bind(this, 'opened');
+      this.searchStateMerged = this.search.bind(this, 'merged');
+      this.searchStateClosed = this.search.bind(this, 'closed');
+      this.searchStateAll = this.search.bind(this, 'all');
+
+      stateFilters.querySelector('.state-opened')
+        .addEventListener('click', this.searchStateOpened);
+      stateFilters.querySelector('.state-closed')
+        .addEventListener('click', this.searchStateClosed);
+      stateFilters.querySelector('.state-all')
+        .addEventListener('click', this.searchStateAll);
+
+      const mergedState = stateFilters.querySelector('.state-merged');
+      if (mergedState) {
+        mergedState.addEventListener('click', this.searchStateMerged);
+      }
+    }
+  }
+
+  unbindStateEvents() {
+    const stateFilters = document.querySelector('.container-fluid .issues-state-filters');
+
+    if (stateFilters) {
+      stateFilters.querySelector('.state-opened')
+        .removeEventListener('click', this.searchStateOpened);
+      stateFilters.querySelector('.state-closed')
+        .removeEventListener('click', this.searchStateClosed);
+      stateFilters.querySelector('.state-all')
+        .removeEventListener('click', this.searchStateAll);
+
+      const mergedState = stateFilters.querySelector('.state-merged');
+      if (mergedState) {
+        mergedState.removeEventListener('click', this.searchStateMerged);
+      }
+    }
+  }
+
   bindEvents() {
     this.handleFormSubmit = this.handleFormSubmit.bind(this);
     this.setDropdownWrapper = this.dropdownManager.setDropdown.bind(this.dropdownManager);
@@ -114,6 +155,8 @@ class FilteredSearchManager {
     document.addEventListener('click', this.removeInputContainerFocusWrapper);
     document.addEventListener('keydown', this.removeSelectedTokenKeydownWrapper);
     eventHub.$on('recentSearchesItemSelected', this.onrecentSearchesItemSelectedWrapper);
+
+    this.bindStateEvents();
   }
 
   unbindEvents() {
@@ -136,6 +179,8 @@ class FilteredSearchManager {
     document.removeEventListener('click', this.removeInputContainerFocusWrapper);
     document.removeEventListener('keydown', this.removeSelectedTokenKeydownWrapper);
     eventHub.$off('recentSearchesItemSelected', this.onrecentSearchesItemSelectedWrapper);
+
+    this.unbindStateEvents();
   }
 
   checkForBackspace(e) {
@@ -459,7 +504,7 @@ class FilteredSearchManager {
     }
   }
 
-  search() {
+  search(state = null) {
     const paths = [];
     const searchQuery = gl.DropdownUtils.getSearchQuery();
 
@@ -467,7 +512,7 @@ class FilteredSearchManager {
 
     const { tokens, searchToken }
       = this.tokenizer.processTokens(searchQuery, this.filteredSearchTokenKeys.getKeys());
-    const currentState = gl.utils.getParameterByName('state') || 'opened';
+    const currentState = state || gl.utils.getParameterByName('state') || 'opened';
     paths.push(`state=${currentState}`);
 
     tokens.forEach((token) => {

app/assets/stylesheets/framework/nav.scss

@@ -45,7 +45,8 @@
   li {
     display: flex;
 
-    a {
+    a,
+    .div-btn {
       padding: $gl-btn-padding;
       padding-bottom: 11px;
       font-size: 14px;
@@ -67,7 +68,14 @@
       }
     }
 
-    &.active a {
+    .div-btn {
+      padding-top: 16px;
+      padding-left: 15px;
+      padding-right: 15px;
+    }
+
+    &.active a,
+    &.active .div-btn {
       border-bottom: 2px solid $link-underline-blue;
       color: $black;
       font-weight: 600;

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

 - type = local_assigns.fetch(:type, :issues)
 - page_context_word = type.to_s.humanize(capitalize: false)
 - issuables = @issues || @merge_requests
+- closed_title = 'Filter by issues that are currently closed.'
 
 %ul.nav-links.issues-state-filters
   %li{ class: active_when(params[:state] == 'opened') }>
-    = link_to page_filter_path(state: 'opened', label: true), id: 'state-opened', title: "Filter by #{page_context_word} that are currently opened." do
+    %div.div-btn.state-opened{ id: 'state-opened', title: "Filter by #{page_context_word} that are currently opened.", role: 'button' }
       #{issuables_state_counter_text(type, :opened)}
 
   - if type == :merge_requests
     %li{ class: active_when(params[:state] == 'merged') }>
-      = link_to page_filter_path(state: 'merged', label: true), id: 'state-merged', title: 'Filter by merge requests that are currently merged.' do
+      %div.div-btn.state-merged{ id: 'state-merged', title: 'Filter by merge requests that are currently merged.', role: 'button' }
         #{issuables_state_counter_text(type, :merged)}
 
-    %li{ class: active_when(params[:state] == 'closed') }>
-      = link_to page_filter_path(state: 'closed', label: true), id: 'state-closed', title: 'Filter by merge requests that are currently closed and unmerged.' do
-        #{issuables_state_counter_text(type, :closed)}
-  - else
-    %li{ class: active_when(params[:state] == 'closed') }>
-      = link_to page_filter_path(state: 'closed', label: true), id: 'state-all', title: 'Filter by issues that are currently closed.' do
-        #{issuables_state_counter_text(type, :closed)}
+    - closed_title = 'Filter by merge requests that are currently closed and unmerged.'
+
+  %li{ class: active_when(params[:state] == 'closed') }>
+    %div.div-btn.state-closed{ id: 'state-closed', title: closed_title, role: 'button' }
+      #{issuables_state_counter_text(type, :closed)}
 
   %li{ class: active_when(params[:state] == 'all') }>
-    = link_to page_filter_path(state: 'all', label: true), id: 'state-all', title: "Show all #{page_context_word}." do
+    %div.div-btn.state-all{ id: 'state-all', title: "Show all #{page_context_word}.", role: 'button' }
       #{issuables_state_counter_text(type, :all)}

changelogs/unreleased/auto-search-when-state-changed.yml

+---
+title: Perform filtered search when state tab is changed
+merge_request:
+author: