Merge branch '329050-refactor-and-fix-graphql-boards-filters' into 'master'

Fix labels board scope config parsing in GraphQL boards [RUN AS-IF-FOSS]

See merge request gitlab-org/gitlab!60358

app/assets/javascripts/boards/filtered_search_boards.js

@@ -28,6 +28,10 @@ export default class FilteredSearchBoards extends FilteredSearchManager {
 
     if (vuexstore.getters.shouldUseGraphQL && vuexstore.state.boardConfig) {
       const boardConfigPath = transformBoardConfig(vuexstore.state.boardConfig);
+      // TODO Refactor: https://gitlab.com/gitlab-org/gitlab/-/issues/329274
+      // here we are using "window.location.search" as a temporary store
+      // only to unpack the params and do another validation inside
+      // 'performSearch' and 'setFilter' vuex actions.
       if (boardConfigPath !== '') {
         const filterPath = window.location.search ? `${window.location.search}&` : '?';
         updateHistory({

ee/app/assets/javascripts/boards/boards_util.js

@@ -124,9 +124,8 @@ export function transformBoardConfig(boardConfig) {
   boardConfig.labels.forEach((label) => {
     const labelTitle = encodeURIComponent(label.title);
     const param = `label_name[]=${labelTitle}`;
-    const labelIndex = passedFilterParams.label_name?.indexOf(labelTitle);
 
-    if (labelIndex === -1 || labelIndex === undefined) {
+    if (!passedFilterParams.label_name?.includes(label.title)) {
       filterPath.push(param);
     }
   });

ee/spec/frontend/boards/boards_util_spec.js

@@ -85,6 +85,7 @@ describe('transformBoardConfig', () => {
     assigneeUsername: 'username',
     labels: [
       { id: 5, title: 'Deliverable', color: '#34ebec', type: 'GroupLabel', textColor: '#333333' },
+      { id: 6, title: 'On hold', color: '#34ebec', type: 'GroupLabel', textColor: '#333333' },
     ],
     weight: 0,
   };
@@ -94,12 +95,12 @@ describe('transformBoardConfig', () => {
     const result = transformBoardConfig(boardConfig);
 
     expect(result).toContain(
-      'milestone_title=milestone&weight=0&assignee_username=username&label_name[]=Deliverable',
+      'milestone_title=milestone&weight=0&assignee_username=username&label_name[]=Deliverable&label_name[]=On%20hold',
     );
   });
 
   it('formats url parameters from boardConfig object preventing duplicates with passed filter query', () => {
-    window.location = { search: 'label_name[]=Deliverable' };
+    window.location = { search: '?label_name[]=Deliverable&label_name[]=On%20hold' };
     const result = transformBoardConfig(boardConfig);
 
     expect(result).toContain('milestone_title=milestone&weight=0&assignee_username=username');