3 files changed, 46 insertions, 8 deletions

diff --git a/spec/frontend/issues/list/components/issues_list_app_spec.js b/spec/frontend/issues/list/components/issues_list_app_spec.js
index 6bd952cd215..b432a29ee5c 100644
--- a/spec/frontend/issues/list/components/issues_list_app_spec.js
+++ b/spec/frontend/issues/list/components/issues_list_app_spec.js
@@ -19,6 +19,7 @@ import {
   getIssuesCountsQueryResponse,
   getIssuesQueryEmptyResponse,
   getIssuesQueryResponse,
+  groupedFilteredTokens,
   locationSearch,
   setSortPreferenceMutationResponse,
   setSortPreferenceMutationResponseWithErrors,
@@ -507,6 +508,13 @@ describe('CE IssuesListApp component', () => {
     });
 
     describe('filter tokens', () => {
+      it('groups url params of assignee and author', () => {
+        setWindowLocation(locationSearch);
+        wrapper = mountComponent({ provide: { glFeatures: { groupMultiSelectTokens: true } } });
+
+        expect(findIssuableList().props('initialFilterValue')).toEqual(groupedFilteredTokens);
+      });
+
       it('is set from the url params', () => {
         setWindowLocation(locationSearch);
         wrapper = mountComponent();
diff --git a/spec/frontend/issues/list/mock_data.js b/spec/frontend/issues/list/mock_data.js
index b9a8bc171db..e387c924418 100644
--- a/spec/frontend/issues/list/mock_data.js
+++ b/spec/frontend/issues/list/mock_data.js
@@ -231,19 +231,33 @@ export const locationSearchWithSpecialValues = [
   'health_status=None',
 ].join('&');
 
-export const filteredTokens = [
+const makeFilteredTokens = ({ grouped }) => [
   { type: FILTERED_SEARCH_TERM, value: { data: 'find issues', operator: 'undefined' } },
   { type: TOKEN_TYPE_AUTHOR, value: { data: 'homer', operator: OPERATOR_IS } },
-  { type: TOKEN_TYPE_AUTHOR, value: { data: 'marge', operator: OPERATOR_NOT } },
-  { type: TOKEN_TYPE_AUTHOR, value: { data: 'burns', operator: OPERATOR_OR } },
-  { type: TOKEN_TYPE_AUTHOR, value: { data: 'smithers', operator: OPERATOR_OR } },
+  ...(grouped
+    ? [
+        { type: TOKEN_TYPE_AUTHOR, value: { data: ['marge'], operator: OPERATOR_NOT } },
+        { type: TOKEN_TYPE_AUTHOR, value: { data: ['burns', 'smithers'], operator: OPERATOR_OR } },
+      ]
+    : [
+        { type: TOKEN_TYPE_AUTHOR, value: { data: 'marge', operator: OPERATOR_NOT } },
+        { type: TOKEN_TYPE_AUTHOR, value: { data: 'burns', operator: OPERATOR_OR } },
+        { type: TOKEN_TYPE_AUTHOR, value: { data: 'smithers', operator: OPERATOR_OR } },
+      ]),
   { type: TOKEN_TYPE_ASSIGNEE, value: { data: 'bart', operator: OPERATOR_IS } },
   { type: TOKEN_TYPE_ASSIGNEE, value: { data: 'lisa', operator: OPERATOR_IS } },
   { type: TOKEN_TYPE_ASSIGNEE, value: { data: '5', operator: OPERATOR_IS } },
-  { type: TOKEN_TYPE_ASSIGNEE, value: { data: 'patty', operator: OPERATOR_NOT } },
-  { type: TOKEN_TYPE_ASSIGNEE, value: { data: 'selma', operator: OPERATOR_NOT } },
-  { type: TOKEN_TYPE_ASSIGNEE, value: { data: 'carl', operator: OPERATOR_OR } },
-  { type: TOKEN_TYPE_ASSIGNEE, value: { data: 'lenny', operator: OPERATOR_OR } },
+  ...(grouped
+    ? [
+        { type: TOKEN_TYPE_ASSIGNEE, value: { data: ['patty', 'selma'], operator: OPERATOR_NOT } },
+        { type: TOKEN_TYPE_ASSIGNEE, value: { data: ['carl', 'lenny'], operator: OPERATOR_OR } },
+      ]
+    : [
+        { type: TOKEN_TYPE_ASSIGNEE, value: { data: 'patty', operator: OPERATOR_NOT } },
+        { type: TOKEN_TYPE_ASSIGNEE, value: { data: 'selma', operator: OPERATOR_NOT } },
+        { type: TOKEN_TYPE_ASSIGNEE, value: { data: 'carl', operator: OPERATOR_OR } },
+        { type: TOKEN_TYPE_ASSIGNEE, value: { data: 'lenny', operator: OPERATOR_OR } },
+      ]),
   { type: TOKEN_TYPE_MILESTONE, value: { data: 'season 3', operator: OPERATOR_IS } },
   { type: TOKEN_TYPE_MILESTONE, value: { data: 'season 4', operator: OPERATOR_IS } },
   { type: TOKEN_TYPE_MILESTONE, value: { data: 'season 20', operator: OPERATOR_NOT } },
@@ -279,6 +293,9 @@ export const filteredTokens = [
   { type: TOKEN_TYPE_HEALTH, value: { data: 'onTrack', operator: OPERATOR_NOT } },
 ];
 
+export const filteredTokens = makeFilteredTokens({ grouped: false });
+export const groupedFilteredTokens = makeFilteredTokens({ grouped: true });
+
 export const filteredTokensWithSpecialValues = [
   { type: TOKEN_TYPE_ASSIGNEE, value: { data: '123', operator: OPERATOR_IS } },
   { type: TOKEN_TYPE_ASSIGNEE, value: { data: 'bart', operator: OPERATOR_IS } },
diff --git a/spec/frontend/issues/list/utils_spec.js b/spec/frontend/issues/list/utils_spec.js
index c14dcf96c98..e13a69b7444 100644
--- a/spec/frontend/issues/list/utils_spec.js
+++ b/spec/frontend/issues/list/utils_spec.js
@@ -5,6 +5,7 @@ import {
   apiParamsWithSpecialValues,
   filteredTokens,
   filteredTokensWithSpecialValues,
+  groupedFilteredTokens,
   locationSearch,
   locationSearchWithSpecialValues,
   urlParams,
@@ -19,6 +20,7 @@ import {
   getInitialPageParams,
   getSortKey,
   getSortOptions,
+  groupMultiSelectFilterTokens,
   isSortKey,
 } from '~/issues/list/utils';
 import { DEFAULT_PAGE_SIZE } from '~/vue_shared/issuable/list/constants';
@@ -163,3 +165,14 @@ describe('convertToSearchQuery', () => {
     expect(convertToSearchQuery(filteredTokens)).toBe('find issues');
   });
 });
+
+describe('groupMultiSelectFilterTokens', () => {
+  it('groups multiSelect filter tokens with || and != operators', () => {
+    expect(
+      groupMultiSelectFilterTokens(filteredTokens, [
+        { type: 'assignee', multiSelect: true },
+        { type: 'author', multiSelect: true },
+      ]),
+    ).toEqual(groupedFilteredTokens);
+  });
+});