Merge branch 'fix-filtered-search-clear-button' into '26652-add-token-ui-for-filtered-search-bar' 26652-add-token-ui-for-filtered-search-bar

Fix clear filtered search button

See merge request !9427

9 files changed, 22 insertions, 34 deletions

diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
index 50df35605e4..7a28963cb14 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
@@ -89,11 +89,15 @@
       }
     }
 
-    toggleClearSearchButton(e) {
-      if (e.target.value) {
-        this.clearSearchButton.classList.remove('hidden');
-      } else {
-        this.clearSearchButton.classList.add('hidden');
+    toggleClearSearchButton() {
+      const query = gl.DropdownUtils.getSearchQuery();
+      const hidden = 'hidden';
+      const hasHidden = this.clearSearchButton.classList.contains(hidden);
+
+      if (query.length === 0 && !hasHidden) {
+        this.clearSearchButton.classList.add(hidden);
+      } else if (query.length && hasHidden) {
+        this.clearSearchButton.classList.remove(hidden);
       }
     }
 
@@ -101,6 +105,7 @@
       e.preventDefault();
 
       this.filteredSearchInput.value = '';
+      this.filteredSearchInput.parentElement.querySelector('.tokens-container').innerHTML = '';
       this.clearSearchButton.classList.add('hidden');
 
       this.dropdownManager.resetDropdowns();
@@ -156,7 +161,7 @@
     loadSearchParamsFromURL() {
       const params = gl.utils.getUrlParamsArray();
       const usernameParams = this.getUsernameParams();
-      const inputValues = [];
+      let hasFilteredSearch = false;
 
       params.forEach((p) => {
         const split = p.split('=');
@@ -167,6 +172,7 @@
         const condition = this.filteredSearchTokenKeys.searchByConditionUrl(p);
 
         if (condition) {
+          hasFilteredSearch = true;
           gl.FilteredSearchVisualTokens.addFilterVisualToken(condition.tokenKey, condition.value);
         } else {
           // Sanitize value since URL converts spaces into +
@@ -185,27 +191,28 @@
               quotationsToUse = sanitizedValue.indexOf('"') === -1 ? '"' : '\'';
             }
 
+            hasFilteredSearch = true;
             gl.FilteredSearchVisualTokens.addFilterVisualToken(sanitizedKey, `${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}`);
           } else if (!match && keyParam === 'assignee_id') {
             const id = parseInt(value, 10);
             if (usernameParams[id]) {
+              hasFilteredSearch = true;
               gl.FilteredSearchVisualTokens.addFilterVisualToken('assignee', `@${usernameParams[id]}`);
             }
           } else if (!match && keyParam === 'author_id') {
             const id = parseInt(value, 10);
             if (usernameParams[id]) {
+              hasFilteredSearch = true;
               gl.FilteredSearchVisualTokens.addFilterVisualToken('author', `@${usernameParams[id]}`);
             }
           } else if (!match && keyParam === 'search') {
-            inputValues.push(sanitizedValue);
+            hasFilteredSearch = true;
+            this.filteredSearchInput.value = sanitizedValue;
           }
         }
       });
 
-      // Trim the last space value
-      this.filteredSearchInput.value = inputValues.join(' ');
-
-      if (inputValues.length > 0) {
+      if (hasFilteredSearch) {
         this.clearSearchButton.classList.remove('hidden');
       }
     }
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 61f092be83e..de4e0a6f9d6 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -95,6 +95,7 @@
     left: 30px;
     position: relative;
     min-width: 200px;
+    max-width: calc(100% - 30px);
     padding-left: 0;
     padding-right: 25px;
     border-color: transparent;
@@ -131,6 +132,7 @@
     right: 0;
     height: 100%;
     outline: none;
+    z-index: 1;
 
     &:hover .fa-times {
       color: $common-gray-dark;
diff --git a/spec/features/issues/filtered_search/dropdown_assignee_spec.rb b/spec/features/issues/filtered_search/dropdown_assignee_spec.rb
index 167d6fe438e..27808477fed 100644
--- a/spec/features/issues/filtered_search/dropdown_assignee_spec.rb
+++ b/spec/features/issues/filtered_search/dropdown_assignee_spec.rb
@@ -176,7 +176,6 @@ describe 'Dropdown assignee', js: true, feature: true do
 
   describe 'caching requests' do
     it 'caches requests after the first load' do
-      pending('Fix this after clear button is fixed')
       filtered_search.set('assignee')
       send_keys_to_filtered_search(':')
       initial_size = dropdown_assignee_size
diff --git a/spec/features/issues/filtered_search/dropdown_author_spec.rb b/spec/features/issues/filtered_search/dropdown_author_spec.rb
index 9c5c019828b..13ce97ba2f9 100644
--- a/spec/features/issues/filtered_search/dropdown_author_spec.rb
+++ b/spec/features/issues/filtered_search/dropdown_author_spec.rb
@@ -163,7 +163,6 @@ describe 'Dropdown author', js: true, feature: true do
 
   describe 'caching requests' do
     it 'caches requests after the first load' do
-      pending('Fix this after clear button is fixed')
       filtered_search.set('author')
       send_keys_to_filtered_search(':')
       initial_size = dropdown_author_size
diff --git a/spec/features/issues/filtered_search/dropdown_label_spec.rb b/spec/features/issues/filtered_search/dropdown_label_spec.rb
index 8cd0af741a3..b531476394e 100644
--- a/spec/features/issues/filtered_search/dropdown_label_spec.rb
+++ b/spec/features/issues/filtered_search/dropdown_label_spec.rb
@@ -92,10 +92,8 @@ describe 'Dropdown label', js: true, feature: true do
       init_label_search
     end
 
-    # TODO: Remove this temporary disable before merging visual tokens MR
     it 'filters by case-insensitive name with or without symbol' do
-      pending('Fix this after clear button is fixed')
-      search_for_label('b')
+      filtered_search.send_keys('b')
 
       expect(filter_dropdown.find('.filter-dropdown-item', text: bug_label.title)).to be_visible
       expect(filter_dropdown.find('.filter-dropdown-item', text: uppercase_label.title)).to be_visible
@@ -104,16 +102,14 @@ describe 'Dropdown label', js: true, feature: true do
       clear_search_field
       init_label_search
 
-      search_for_label('~bu')
+      filtered_search.send_keys('~bu')
 
       expect(filter_dropdown.find('.filter-dropdown-item', text: bug_label.title)).to be_visible
       expect(filter_dropdown.find('.filter-dropdown-item', text: uppercase_label.title)).to be_visible
       expect(dropdown_label_size).to eq(2)
     end
 
-    # TODO: Remove this temporary disable before merging visual tokens MR
     it 'filters by multiple words with or without symbol' do
-      pending('Fix this after clear button is fixed')
       filtered_search.send_keys('Hig')
 
       expect(filter_dropdown.find('.filter-dropdown-item', text: two_words_label.title)).to be_visible
@@ -128,9 +124,7 @@ describe 'Dropdown label', js: true, feature: true do
       expect(dropdown_label_size).to eq(1)
     end
 
-    # TODO: Remove this temporary disable before merging visual tokens MR
     it 'filters by multiple words containing single quotes with or without symbol' do
-      pending('Fix this after clear button is fixed')
       filtered_search.send_keys('won\'t')
 
       expect(filter_dropdown.find('.filter-dropdown-item', text: wont_fix_single_label.title)).to be_visible
@@ -145,9 +139,7 @@ describe 'Dropdown label', js: true, feature: true do
       expect(dropdown_label_size).to eq(1)
     end
 
-    # TODO: Remove this temporary disable before merging visual tokens MR
     it 'filters by multiple words containing double quotes with or without symbol' do
-      pending('Fix this after clear button is fixed')
       filtered_search.send_keys('won"t')
 
       expect(filter_dropdown.find('.filter-dropdown-item', text: wont_fix_label.title)).to be_visible
@@ -162,9 +154,7 @@ describe 'Dropdown label', js: true, feature: true do
       expect(dropdown_label_size).to eq(1)
     end
 
-    # TODO: Remove this temporary disable before merging visual tokens MR
     it 'filters by special characters with or without symbol' do
-      pending('Fix this after clear button is fixed')
       filtered_search.send_keys('^+')
 
       expect(filter_dropdown.find('.filter-dropdown-item', text: special_label.title)).to be_visible
@@ -287,7 +277,6 @@ describe 'Dropdown label', js: true, feature: true do
 
   describe 'caching requests' do
     it 'caches requests after the first load' do
-      pending('Fix this after clear button is fixed')
       create(:label, project: project, title: 'bug-label')
       init_label_search
 
diff --git a/spec/features/issues/filtered_search/dropdown_milestone_spec.rb b/spec/features/issues/filtered_search/dropdown_milestone_spec.rb
index f2690489f59..a83ce8fe020 100644
--- a/spec/features/issues/filtered_search/dropdown_milestone_spec.rb
+++ b/spec/features/issues/filtered_search/dropdown_milestone_spec.rb
@@ -232,7 +232,6 @@ describe 'Dropdown milestone', js: true, feature: true do
 
   describe 'caching requests' do
     it 'caches requests after the first load' do
-      pending('Fix this after clear button is fixed')
       filtered_search.set('milestone')
       send_keys_to_filtered_search(':')
       initial_size = dropdown_milestone_size
diff --git a/spec/features/issues/filtered_search/search_bar_spec.rb b/spec/features/issues/filtered_search/search_bar_spec.rb
index adff208531a..cb802578037 100644
--- a/spec/features/issues/filtered_search/search_bar_spec.rb
+++ b/spec/features/issues/filtered_search/search_bar_spec.rb
@@ -88,7 +88,6 @@ describe 'Search bar', js: true, feature: true do
     end
 
     it 'resets the dropdown filters' do
-      pending('Fix this after clear button is fixed')
       filtered_search.set('a')
       hint_style = page.find('#js-dropdown-hint')['style']
       hint_offset = get_left_style(hint_style)
diff --git a/spec/features/merge_requests/filter_by_labels_spec.rb b/spec/features/merge_requests/filter_by_labels_spec.rb
index 8f6208c5f2d..5ba9743e926 100644
--- a/spec/features/merge_requests/filter_by_labels_spec.rb
+++ b/spec/features/merge_requests/filter_by_labels_spec.rb
@@ -86,7 +86,6 @@ feature 'Issue filtering by Labels', feature: true, js: true do
     end
 
     it 'allows user to remove filtered labels' do
-      pending('Fix this after clear button is fixed')
       first('.clear-search').click
       filtered_search.send_keys(:enter)
 
diff --git a/spec/features/merge_requests/reset_filters_spec.rb b/spec/features/merge_requests/reset_filters_spec.rb
index 68348684f65..16fd15599e6 100644
--- a/spec/features/merge_requests/reset_filters_spec.rb
+++ b/spec/features/merge_requests/reset_filters_spec.rb
@@ -23,7 +23,6 @@ feature 'Merge requests filter clear button', feature: true, js: true do
 
   context 'when a milestone filter has been applied' do
     it 'resets the milestone filter' do
-      pending('Fix this after clear button is fixed')
       visit_merge_requests(project, milestone_title: milestone.title)
       expect(page).to have_css(merge_request_css, count: 1)
 
@@ -34,7 +33,6 @@ feature 'Merge requests filter clear button', feature: true, js: true do
 
   context 'when a label filter has been applied' do
     it 'resets the label filter' do
-      pending('Fix this after clear button is fixed')
       visit_merge_requests(project, label_name: bug.name)
       expect(page).to have_css(merge_request_css, count: 1)
 
@@ -55,7 +53,6 @@ feature 'Merge requests filter clear button', feature: true, js: true do
 
   context 'when author filter has been applied' do
     it 'resets the author filter' do
-      pending('Fix this after clear button is fixed')
       visit_merge_requests(project, author_username: user.username)
       expect(page).to have_css(merge_request_css, count: 1)
 
@@ -66,7 +63,6 @@ feature 'Merge requests filter clear button', feature: true, js: true do
 
   context 'when assignee filter has been applied' do
     it 'resets the assignee filter' do
-      pending('Fix this after clear button is fixed')
       visit_merge_requests(project, assignee_username: user.username)
       expect(page).to have_css(merge_request_css, count: 1)
 
@@ -77,7 +73,6 @@ feature 'Merge requests filter clear button', feature: true, js: true do
 
   context 'when all filters have been applied' do
     it 'clears all filters' do
-      pending('Fix this after clear button is fixed')
       visit_merge_requests(project, assignee_username: user.username, author_username: user.username, milestone_title: milestone.title, label_name: bug.name, search: 'Bug')
       expect(page).to have_css(merge_request_css, count: 0)