Fix issuables list search filter on labels

app/assets/javascripts/issuables_list/components/issuable.vue

@@ -313,6 +313,7 @@ export default {
           <gl-label
             v-for="label in issuable.labels"
             :key="label.id"
+            data-qa-selector="issuable-label"
             :target="labelHref(label)"
             :background-color="label.color"
             :description="label.description"

app/assets/javascripts/issuables_list/components/issuables_list_app.vue

@@ -275,9 +275,13 @@ export default {
       const {
         label_name: labels,
         milestone_title: milestoneTitle,
+        'not[label_name]': excludedLabels,
+        'not[milestone_title]': excludedMilestone,
         ...filters
       } = this.getQueryObject();
 
+      // TODO: https://gitlab.com/gitlab-org/gitlab/-/issues/227880
+
       if (milestoneTitle) {
         filters.milestone = milestoneTitle;
       }
@@ -288,6 +292,14 @@ export default {
         filters.state = 'opened';
       }
 
+      if (excludedLabels) {
+        filters['not[labels]'] = excludedLabels;
+      }
+
+      if (excludedMilestone) {
+        filters['not[milestone]'] = excludedMilestone;
+      }
+
       Object.assign(filters, sortOrderMap[this.sortKey]);
 
       this.filters = filters;

spec/features/issues/filtered_search/filter_issues_spec.rb

@@ -20,14 +20,10 @@ RSpec.describe 'Filter issues', :js do
   let!(:milestone) { create(:milestone, title: "8", project: project, start_date: 2.days.ago) }
 
   def expect_no_issues_list
-    page.within '.issues-list' do
-      expect(page).to have_no_selector('.issue')
-    end
+    expect(page).to have_no_selector('.issue')
   end
 
   before do
-    stub_feature_flags(vue_issuables_list: false)
-
     project.add_maintainer(user)
 
     create(:issue, project: project, author: user2, title: "Bug report 1")
@@ -90,7 +86,7 @@ RSpec.describe 'Filter issues', :js do
     end
 
     it 'does not have the != option' do
-      input_filtered_search("label:", submit: false)
+      input_filtered_search("label:", submit: false, extra_space: false)
 
       wait_for_requests
       within('#js-dropdown-operator') do
@@ -346,7 +342,7 @@ RSpec.describe 'Filter issues', :js do
 
     context 'issue label clicked' do
       it 'filters and displays in search bar' do
-        find('.issues-list .issue .issuable-main-info .issuable-info a .gl-label-text', text: multiple_words_label.title).click
+        find('[data-qa-selector="issuable-label"]', text: multiple_words_label.title).click
 
         expect_issues_list_count(1)
         expect_tokens([label_token("\"#{multiple_words_label.title}\"")])

spec/features/projects/labels/issues_sorted_by_priority_spec.rb

@@ -13,12 +13,8 @@ RSpec.describe 'Issue prioritization' do
   let(:label_4) { create(:label, title: 'label_4', project: project, priority: 4) }
   let(:label_5) { create(:label, title: 'label_5', project: project) } # no priority
 
-  before do
-    stub_feature_flags(vue_issuables_list: false)
-  end
-
   # According to https://gitlab.com/gitlab-org/gitlab-foss/issues/14189#note_4360653
-  context 'when issues have one label' do
+  context 'when issues have one label', :js do
     it 'Are sorted properly' do
       # Issues
       issue_1 = create(:issue, title: 'issue_1', project: project)
@@ -48,7 +44,7 @@ RSpec.describe 'Issue prioritization' do
     end
   end
 
-  context 'when issues have multiple labels' do
+  context 'when issues have multiple labels', :js do
     it 'Are sorted properly' do
       # Issues
       issue_1 = create(:issue, title: 'issue_1', project: project)

spec/frontend/issuables_list/components/issuables_list_app_spec.js

@@ -303,7 +303,7 @@ describe('Issuables list component', () => {
 
     describe('when page is not present in params', () => {
       const query =
-        '?assignee_username=root&author_username=root&confidential=yes&label_name%5B%5D=Aquapod&label_name%5B%5D=Astro&milestone_title=v3.0&my_reaction_emoji=airplane&scope=all&sort=priority&state=opened&utf8=%E2%9C%93&weight=0';
+        '?assignee_username=root&author_username=root&confidential=yes&label_name%5B%5D=Aquapod&label_name%5B%5D=Astro&milestone_title=v3.0&my_reaction_emoji=airplane&scope=all&sort=priority&state=opened&utf8=%E2%9C%93&weight=0&not[label_name][]=Afterpod&not[milestone_title][]=13';
 
       beforeEach(() => {
         setUrl(query);
@@ -320,7 +320,11 @@ describe('Issuables list component', () => {
 
       it('applies filters and sorts', () => {
         expect(wrapper.vm.hasFilters).toBe(true);
-        expect(wrapper.vm.filters).toEqual(expectedFilters);
+        expect(wrapper.vm.filters).toEqual({
+          ...expectedFilters,
+          'not[milestone]': ['13'],
+          'not[labels]': ['Afterpod'],
+        });
 
         expect(apiSpy).toHaveBeenCalledWith(
           expect.objectContaining({
@@ -329,6 +333,8 @@ describe('Issuables list component', () => {
               with_labels_details: true,
               page: 1,
               per_page: PAGE_SIZE,
+              'not[milestone]': ['13'],
+              'not[labels]': ['Afterpod'],
             },
           }),
         );

spec/support/helpers/filtered_search_helpers.rb

@@ -45,9 +45,8 @@ module FilteredSearchHelpers
     all_count = open_count + closed_count
 
     expect(page).to have_issuable_counts(open: open_count, closed: closed_count, all: all_count)
-    page.within '.issues-list' do
-      expect(page).to have_selector('.issue', count: open_count)
-    end
+
+    expect(page).to have_selector('.issue', count: open_count)
   end
 
   # Enables input to be added character by character