Fix query params parsing when NOT operator is used

Fixes a bug where Epics list query didn't parse
variable containing `NOT` operator correctly.

Changelog: fixed
EE: true

ee/app/assets/javascripts/epics_list/components/epics_list_root.vue

@@ -12,6 +12,7 @@ import { IssuableListTabs, DEFAULT_PAGE_SIZE } from '~/vue_shared/issuable/list/
 import { parsePikadayDate, dateInWords } from '~/lib/utils/datetime_utility';
 import { s__, sprintf } from '~/locale';
 
+import { transformFetchEpicFilterParams } from '../../roadmap/utils/epic_utils';
 import { EpicsSortOptions } from '../constants';
 import groupEpics from '../queries/group_epics.query.graphql';
 
@@ -75,8 +76,10 @@ export default {
         }
 
         if (Object.keys(this.filterParams).length) {
+          const transformedFilterParams = transformFetchEpicFilterParams(this.filterParams);
+
           Object.assign(queryVariables, {
-            ...this.filterParams,
+            ...transformedFilterParams,
           });
         }
 

ee/app/assets/javascripts/epics_list/queries/group_epics.query.graphql

@@ -10,6 +10,7 @@ query groupEpics(
   $milestoneTitle: String = ""
   $myReactionEmoji: String
   $confidential: Boolean
+  $not: NegatedEpicFilterInput
   $search: String = ""
   $sortBy: EpicSort
   $firstPageSize: Int
@@ -27,6 +28,7 @@ query groupEpics(
       milestoneTitle: $milestoneTitle
       myReactionEmoji: $myReactionEmoji
       confidential: $confidential
+      not: $not
       search: $search
       sort: $sortBy
       first: $firstPageSize

ee/app/assets/javascripts/roadmap/store/actions.js

@@ -29,7 +29,7 @@ const fetchGroupEpics = (
     }),
   };
 
-  const transformedFilterParams = roadmapItemUtils.transformFetchEpicFilterParams(filterParams);
+  const transformedFilterParams = epicUtils.transformFetchEpicFilterParams(filterParams);
 
   // When epicIid is present,
   // Roadmap is being accessed from within an Epic,

ee/app/assets/javascripts/roadmap/utils/epic_utils.js

@@ -17,3 +17,33 @@ export const scrollToCurrentDay = (parentEl) => {
     todayIndicatorEl.scrollIntoView({ block: 'nearest', inline: 'center' });
   }
 };
+
+/**
+ * Returns transformed `filterParams` by congregating all `not` params into a
+ * single object like { not: { labelName: [], ... }, authorUsername: '' }
+ *
+ * @param {Object} filterParams
+ */
+export const transformFetchEpicFilterParams = (filterParams) => {
+  if (!filterParams) {
+    return filterParams;
+  }
+
+  const newParams = {};
+
+  Object.keys(filterParams).forEach((param) => {
+    if (param.startsWith('not')) {
+      // Get the param name like `authorUsername` from `not[authorUsername]`
+      const key = param.match(/not\[(.+)\]/)[1];
+
+      if (key) {
+        newParams.not = newParams.not || {};
+        newParams.not[key] = filterParams[param];
+      }
+    } else {
+      newParams[param] = filterParams[param];
+    }
+  });
+
+  return newParams;
+};

ee/app/assets/javascripts/roadmap/utils/roadmap_item_utils.js

@@ -148,33 +148,3 @@ export const timeframeEndDate = (presetType, timeframe) => {
   endDate.setDate(endDate.getDate() + DAYS_IN_WEEK);
   return endDate;
 };
-
-/**
- * Returns transformed `filterParams` by congregating all `not` params into a
- * single object like { not: { labelName: [], ... }, authorUsername: '' }
- *
- * @param {Object} filterParams
- */
-export const transformFetchEpicFilterParams = (filterParams) => {
-  if (!filterParams) {
-    return filterParams;
-  }
-
-  const newParams = {};
-
-  Object.keys(filterParams).forEach((param) => {
-    if (param.startsWith('not')) {
-      // Get the param name like `authorUsername` from `not[authorUsername]`
-      const key = param.match(/not\[(.+)\]/)[1];
-
-      if (key) {
-        newParams.not = newParams.not || {};
-        newParams.not[key] = filterParams[param];
-      }
-    } else {
-      newParams[param] = filterParams[param];
-    }
-  });
-
-  return newParams;
-};

ee/spec/features/epics/epics_list_spec.rb

@@ -7,8 +7,19 @@ RSpec.describe 'epics list', :js do
   let(:user) { create(:user) }
   let(:user_dev) { create(:user) }
   let!(:bug_label) { create(:group_label, group: group, title: 'Bug') }
+  let!(:docs_label) { create(:group_label, group: group, title: 'Documentation') }
+  let!(:enhancement_label) { create(:group_label, group: group, title: 'Enhancement') }
   let!(:critical_label) { create(:group_label, group: group, title: 'Critical') }
 
+  def select_token(token, operator, value)
+    find_field('Search').click
+    click_link token
+    first('a', text: operator).click
+    page.within('.gl-filtered-search-suggestion-list') do
+      click_link value
+    end
+  end
+
   before do
     stub_licensed_features(epics: true)
     stub_feature_flags(unfiltered_epic_aggregates: false)
@@ -21,9 +32,9 @@ RSpec.describe 'epics list', :js do
     available_sort_options = ['Created date', 'Updated date', 'Start date', 'Due date', 'Title']
 
     describe 'within a group' do
-      let!(:epic1) { create(:epic, group: group, start_date: '2020-12-15', end_date: '2021-1-15') }
-      let!(:epic2) { create(:epic, group: group, start_date: '2020-12-15') }
-      let!(:epic3) { create(:epic, group: group, end_date: '2021-1-15') }
+      let!(:epic1) { create(:epic, group: group, start_date: '2020-12-15', end_date: '2021-1-15', labels: [docs_label]) }
+      let!(:epic2) { create(:epic, group: group, start_date: '2020-12-15', labels: [docs_label, enhancement_label]) }
+      let!(:epic3) { create(:epic, group: group, end_date: '2021-1-15', labels: [enhancement_label]) }
       let!(:award_emoji_star) { create(:award_emoji, name: 'star', user: user, awardable: epic1) }
       let!(:award_emoji_upvote) { create(:award_emoji, :upvote, user: user, awardable: epic1) }
       let!(:award_emoji_downvote) { create(:award_emoji, :downvote, user: user, awardable: epic2) }
@@ -78,6 +89,30 @@ RSpec.describe 'epics list', :js do
 
         it_behaves_like 'filtered search bar', available_tokens, available_sort_options
 
+        it 'filters epics list based on labels with "=" operator' do
+          select_token('Label', '=', docs_label.title)
+          find('.gl-search-box-by-click-search-button').click
+
+          wait_for_requests
+
+          page.within('.issuable-list-container') do
+            expect(page.find('.issuable-list')).to have_selector('li.issue', count: 2)
+          end
+        end
+
+        it 'filters epics list based on labels with "!=" operator', :aggregate_failures do
+          select_token('Label', '=', docs_label.title)
+          select_token('Label', '!=', enhancement_label.title)
+          find('.gl-search-box-by-click-search-button').click
+
+          wait_for_requests
+
+          page.within('.issuable-list-container .issuable-list') do
+            expect(page).to have_selector('li.issue', count: 1)
+            expect(page.find('li.issue .issuable-info')).not_to have_selector('.gl-label', text: enhancement_label.title)
+          end
+        end
+
         it 'shows bulk editing sidebar with actions and labels select dropdown', :aggregate_failures do
           click_button 'Edit epics'
 
@@ -100,8 +135,8 @@ RSpec.describe 'epics list', :js do
         end
 
         it 'applies label to multiple epics from bulk editing sidebar', :aggregate_failures do
-          # Vertify that no labels are applied already
-          expect(find('.issuable-list li.issue .issuable-info', match: :first)).not_to have_selector('.gl-label')
+          # Vertify that label `Bug` is not applied already
+          expect(find('.issuable-list li.issue .issuable-info', match: :first)).not_to have_selector('.gl-label', text: bug_label.title)
 
           # Bulk edit all epics to apply label
           page.within('.issuable-list-container') do
@@ -112,7 +147,7 @@ RSpec.describe 'epics list', :js do
             end
 
             page.within('aside.right-sidebar') do
-              click_button 'Label'
+              find('button.js-dropdown-button').click
 
               wait_for_requests
 

ee/spec/frontend/roadmap/utils/epic_utils_spec.js

@@ -61,3 +61,21 @@ describe('scrollToCurrentDay', () => {
     });
   });
 });
+
+describe('transformFetchEpicFilterParams', () => {
+  it('should return congregated `not[]` params in a single key', () => {
+    const filterParams = {
+      'not[authorUsername]': 'foo',
+      'not[myReactionEmoji]': ':emoji:',
+      authorUsername: 'baz',
+    };
+
+    expect(epicUtils.transformFetchEpicFilterParams(filterParams)).toEqual({
+      not: {
+        authorUsername: 'foo',
+        myReactionEmoji: ':emoji:',
+      },
+      authorUsername: 'baz',
+    });
+  });
+});

ee/spec/frontend/roadmap/utils/roadmap_item_utils_spec.js

@@ -186,21 +186,3 @@ describe('timeframeEndDate', () => {
     },
   );
 });
-
-describe('transformFetchEpicFilterParams', () => {
-  it('should return congregated `not[]` params in a single key', () => {
-    const filterParams = {
-      'not[authorUsername]': 'foo',
-      'not[myReactionEmoji]': ':emoji:',
-      authorUsername: 'baz',
-    };
-
-    expect(roadmapItemUtils.transformFetchEpicFilterParams(filterParams)).toEqual({
-      not: {
-        authorUsername: 'foo',
-        myReactionEmoji: ':emoji:',
-      },
-      authorUsername: 'baz',
-    });
-  });
-});