diff options
4 files changed, 70 insertions, 14 deletions
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js index 3be889c684b..fbb1a08089f 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js +++ b/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) => { diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss index 28b2a7cfacd..f64d9a4cabc 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/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; diff --git a/app/views/shared/issuable/_nav.html.haml b/app/views/shared/issuable/_nav.html.haml index ad995cbe962..adccfa53a59 100644 --- a/app/views/shared/issuable/_nav.html.haml +++ b/app/views/shared/issuable/_nav.html.haml @@ -1,25 +1,24 @@ - 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)} diff --git a/changelogs/unreleased/auto-search-when-state-changed.yml b/changelogs/unreleased/auto-search-when-state-changed.yml new file mode 100644 index 00000000000..2723beb8600 --- /dev/null +++ b/changelogs/unreleased/auto-search-when-state-changed.yml @@ -0,0 +1,4 @@ +--- +title: Perform filtered search when state tab is changed +merge_request: +author: |