Use labels widget on epic board and mr sidebar

Fix epic boards action

ee/app/assets/javascripts/boards/stores/actions.js

@@ -12,6 +12,7 @@ import listsIssuesQuery from '~/boards/graphql/lists_issues.query.graphql';
 import projectBoardMembersQuery from '~/boards/graphql/project_board_members.query.graphql';
 import actionsCE from '~/boards/stores/actions';
 import * as typesCE from '~/boards/stores/mutation_types';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { historyPushState, convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { mergeUrlParams, removeParams, queryToObject } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
@@ -583,26 +584,43 @@ export default {
 
   setActiveEpicLabels: async ({ commit, getters, state }, input) => {
     const { activeBoardItem } = getters;
-    const { data } = await gqlClient.mutate({
-      mutation: updateEpicLabelsMutation,
-      variables: {
-        input: {
-          iid: String(activeBoardItem.iid),
-          addLabelIds: input.addLabelIds ?? [],
-          removeLabelIds: input.removeLabelIds ?? [],
-          groupPath: state.fullPath,
+
+    if (!gon.features?.labelsWidget) {
+      const { data } = await gqlClient.mutate({
+        mutation: updateEpicLabelsMutation,
+        variables: {
+          input: {
+            iid: String(activeBoardItem.iid),
+            addLabelIds: input.addLabelIds ?? [],
+            removeLabelIds: input.removeLabelIds ?? [],
+            groupPath: state.fullPath,
+          },
         },
-      },
-    });
+      });
 
-    if (data.updateEpic?.errors?.length > 0) {
-      throw new Error(data.updateEpic.errors);
+      if (data.updateEpic?.errors?.length > 0) {
+        throw new Error(data.updateEpic.errors);
+      }
+
+      commit(typesCE.UPDATE_BOARD_ITEM_BY_ID, {
+        itemId: activeBoardItem.id,
+        prop: 'labels',
+        value: data.updateEpic.epic.labels.nodes,
+      });
+
+      return;
     }
 
-    commit(typesCE.UPDATE_BOARD_ITEM_BY_ID, {
-      itemId: activeBoardItem.id,
+    let labels = input?.labels || [];
+    if (input.removeLabelIds) {
+      labels = activeBoardItem.labels.filter(
+        (label) => input.removeLabelIds[0] !== getIdFromGraphQLId(label.id),
+      );
+    }
+    commit(types.UPDATE_BOARD_ITEM_BY_ID, {
+      itemId: input.id || activeBoardItem.id,
       prop: 'labels',
-      value: data.updateEpic.epic.labels.nodes,
+      value: labels,
     });
   },
 };

ee/spec/frontend/boards/mock_data.js

@@ -122,6 +122,12 @@ export const labels = [
     color: '#34ebec',
     description: null,
   },
+  {
+    id: 'gid://gitlab/GroupLabel/6',
+    title: 'Brock',
+    color: '#e082b6',
+    description: null,
+  },
 ];
 
 export const rawIssue = {

ee/spec/frontend/boards/stores/actions_spec.js

@@ -14,6 +14,7 @@ import { mockMoveIssueParams, mockMoveData, mockMoveState } from 'jest/boards/mo
 import { formatListIssues } from '~/boards/boards_util';
 import listsIssuesQuery from '~/boards/graphql/lists_issues.query.graphql';
 import * as typesCE from '~/boards/stores/mutation_types';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import * as commonUtils from '~/lib/utils/common_utils';
 import { mergeUrlParams, removeParams } from '~/lib/utils/url_utility';
 import {
@@ -1380,4 +1381,62 @@ describe('setActiveEpicLabels', () => {
 
     await expect(actions.setActiveEpicLabels({ getters }, input)).rejects.toThrow(Error);
   });
+
+  describe('labels_widget FF on', () => {
+    beforeEach(() => {
+      window.gon = {
+        features: { labelsWidget: true },
+      };
+
+      getters.activeBoardItem = { ...mockIssue, labels };
+    });
+
+    afterEach(() => {
+      window.gon = {
+        features: {},
+      };
+    });
+
+    it('should assign labels', () => {
+      const payload = {
+        itemId: getters.activeBoardItem.id,
+        prop: 'labels',
+        value: labels,
+      };
+
+      testAction(
+        actions.setActiveEpicLabels,
+        input,
+        { ...state, ...getters },
+        [
+          {
+            type: types.UPDATE_BOARD_ITEM_BY_ID,
+            payload,
+          },
+        ],
+        [],
+      );
+    });
+
+    it('should remove label', () => {
+      const payload = {
+        itemId: getters.activeBoardItem.id,
+        prop: 'labels',
+        value: [labels[1]],
+      };
+
+      testAction(
+        actions.setActiveEpicLabels,
+        { ...input, removeLabelIds: [getIdFromGraphQLId(labels[0].id)] },
+        { ...state, ...getters },
+        [
+          {
+            type: types.UPDATE_BOARD_ITEM_BY_ID,
+            payload,
+          },
+        ],
+        [],
+      );
+    });
+  });
 });