Consolidate labels widget architecture

Review feedback

app/assets/javascripts/boards/components/board_content_sidebar.vue

@@ -102,19 +102,19 @@ export default {
     handleClose() {
       this.toggleBoardItem({ boardItem: this.activeBoardItem, sidebarType: this.sidebarType });
     },
-    handleUpdateSelectedLabels(input) {
+    handleUpdateSelectedLabels(labels) {
       this.setActiveBoardItemLabels({
         iid: this.activeBoardItem.iid,
         projectPath: this.projectPathForActiveIssue,
-        labelsIds: input.map((label) => getIdFromGraphQLId(label.id)),
-        labels: input,
+        labelIds: labels.map((label) => getIdFromGraphQLId(label.id)),
+        labels,
       });
     },
-    handleLabelRemove(input) {
+    handleLabelRemove(removeLabelId) {
       this.setActiveBoardItemLabels({
         iid: this.activeBoardItem.iid,
         projectPath: this.projectPathForActiveIssue,
-        removeLabelIds: [input],
+        removeLabelIds: [removeLabelId],
       });
     },
   },

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

@@ -664,7 +664,8 @@ export default {
         variables: {
           input: {
             iid: input.iid || String(activeBoardItem.iid),
-            labelsIds: input.labelsIds ?? [],
+            labelIds: input.labelsId ?? undefined,
+            addLabelIds: input.addLabelIds ?? [],
             removeLabelIds: input.removeLabelIds ?? [],
             projectPath: input.projectPath,
           },
@@ -680,19 +681,21 @@ export default {
         prop: 'labels',
         value: data.updateIssue?.issue?.labels.nodes,
       });
-    } else {
-      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: activeBoardItem.id,
-        prop: 'labels',
-        value: labels,
-      });
+
+      return;
+    }
+
+    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: activeBoardItem.id,
+      prop: 'labels',
+      value: labels,
+    });
   },
 
   setActiveItemSubscribed: async ({ commit, getters, state }, input) => {

app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue

@@ -132,9 +132,8 @@ export default {
         };
       },
       update(data) {
-        const labels = data.workspace?.issuable?.labels.nodes || [];
-        this.selected = labels;
-        return labels;
+        this.selected = data.workspace?.issuable?.labels.nodes || [];
+        return this.selected;
       },
       error() {
         createFlash({ message: __('Error fetching labels.') });
@@ -145,9 +144,10 @@ export default {
     handleDropdownClose(labels) {
       if (this.iid !== '') {
         this.updateSelectedLabels(this.getUpdateVariables(labels));
+      } else {
+        this.$emit('updateSelectedLabels', labels);
       }
 
-      this.$emit('updateSelectedLabels', labels);
       this.collapseEditableItem();
     },
     collapseEditableItem() {
@@ -193,6 +193,8 @@ export default {
           if (data[mutationName]?.errors?.length) {
             throw new Error();
           }
+
+          this.$emit('updateSelectedLabels', data[mutationName]?.[this.issuableType].labels?.nodes);
         })
         .catch(() => createFlash({ message: __('An error occurred while updating labels.') }))
         .finally(() => {

spec/frontend/boards/stores/actions_spec.js

@@ -27,6 +27,7 @@ import issueCreateMutation from '~/boards/graphql/issue_create.mutation.graphql'
 import actions from '~/boards/stores/actions';
 import * as types from '~/boards/stores/mutation_types';
 import mutations from '~/boards/stores/mutations';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 
 import {
   mockLists,
@@ -1572,7 +1573,7 @@ describe('setActiveIssueLabels', () => {
   const getters = { activeBoardItem: mockIssue };
   const testLabelIds = labels.map((label) => label.id);
   const input = {
-    labelsIds: testLabelIds,
+    labelIds: testLabelIds,
     removeLabelIds: [],
     projectPath: 'h/b',
     labels,
@@ -1611,6 +1612,64 @@ describe('setActiveIssueLabels', () => {
 
     await expect(actions.setActiveIssueLabels({ 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.setActiveIssueLabels,
+        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.setActiveIssueLabels,
+        { ...input, removeLabelIds: [getIdFromGraphQLId(labels[0].id)] },
+        { ...state, ...getters },
+        [
+          {
+            type: types.UPDATE_BOARD_ITEM_BY_ID,
+            payload,
+          },
+        ],
+        [],
+      );
+    });
+  });
 });
 
 describe('setActiveItemSubscribed', () => {