1 files changed, 78 insertions, 22 deletions

diff --git a/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue b/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue
index 1af1bc18e3e..1785174e8d7 100644
--- a/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue
+++ b/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue
@@ -1,11 +1,26 @@
 <script>
 import $ from 'jquery';
-import { difference, union } from 'lodash';
-import flash from '~/flash';
-import axios from '~/lib/utils/axios_utils';
+import { camelCase, difference, union } from 'lodash';
+import updateIssueLabelsMutation from '~/boards/queries/issue_set_labels.mutation.graphql';
+import createFlash from '~/flash';
+import { IssuableType } from '~/issue_show/constants';
 import { __ } from '~/locale';
+import updateMergeRequestLabelsMutation from '~/sidebar/queries/update_merge_request_labels.mutation.graphql';
+import { toLabelGid } from '~/sidebar/utils';
 import { DropdownVariant } from '~/vue_shared/components/sidebar/labels_select_vue/constants';
 import LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue';
+import { getIdFromGraphQLId, MutationOperationMode } from '~/graphql_shared/utils';
+
+const mutationMap = {
+  [IssuableType.Issue]: {
+    mutation: updateIssueLabelsMutation,
+    mutationName: 'updateIssue',
+  },
+  [IssuableType.MergeRequest]: {
+    mutation: updateMergeRequestLabelsMutation,
+    mutationName: 'mergeRequestSetLabels',
+  },
+};
 
 export default {
   components: {
@@ -21,7 +36,6 @@ export default {
     'issuableType',
     'labelsFetchPath',
     'labelsManagePath',
-    'labelsUpdatePath',
     'projectIssuesPath',
     'projectPath',
   ],
@@ -35,37 +49,79 @@ export default {
     handleDropdownClose() {
       $(this.$el).trigger('hidden.gl.dropdown');
     },
-    handleUpdateSelectedLabels(dropdownLabels) {
+    getUpdateVariables(dropdownLabels) {
       const currentLabelIds = this.selectedLabels.map(label => label.id);
       const userAddedLabelIds = dropdownLabels.filter(label => label.set).map(label => label.id);
       const userRemovedLabelIds = dropdownLabels.filter(label => !label.set).map(label => label.id);
 
       const labelIds = difference(union(currentLabelIds, userAddedLabelIds), userRemovedLabelIds);
 
-      this.updateSelectedLabels(labelIds);
+      switch (this.issuableType) {
+        case IssuableType.Issue:
+          return {
+            addLabelIds: userAddedLabelIds,
+            iid: this.iid,
+            projectPath: this.projectPath,
+            removeLabelIds: userRemovedLabelIds,
+          };
+        case IssuableType.MergeRequest:
+          return {
+            iid: this.iid,
+            labelIds: labelIds.map(toLabelGid),
+            operationMode: MutationOperationMode.Replace,
+            projectPath: this.projectPath,
+          };
+        default:
+          return {};
+      }
+    },
+    handleUpdateSelectedLabels(dropdownLabels) {
+      this.updateSelectedLabels(this.getUpdateVariables(dropdownLabels));
+    },
+    getRemoveVariables(labelId) {
+      switch (this.issuableType) {
+        case IssuableType.Issue:
+          return {
+            iid: this.iid,
+            projectPath: this.projectPath,
+            removeLabelIds: [labelId],
+          };
+        case IssuableType.MergeRequest:
+          return {
+            iid: this.iid,
+            labelIds: [toLabelGid(labelId)],
+            operationMode: MutationOperationMode.Remove,
+            projectPath: this.projectPath,
+          };
+        default:
+          return {};
+      }
     },
     handleLabelRemove(labelId) {
-      const currentLabelIds = this.selectedLabels.map(label => label.id);
-      const labelIds = difference(currentLabelIds, [labelId]);
-
-      this.updateSelectedLabels(labelIds);
+      this.updateSelectedLabels(this.getRemoveVariables(labelId));
     },
-    updateSelectedLabels(labelIds) {
+    updateSelectedLabels(inputVariables) {
       this.isLabelsSelectInProgress = true;
 
-      axios({
-        data: {
-          [this.issuableType]: {
-            label_ids: labelIds,
-          },
-        },
-        method: 'put',
-        url: this.labelsUpdatePath,
-      })
+      this.$apollo
+        .mutate({
+          mutation: mutationMap[this.issuableType].mutation,
+          variables: { input: inputVariables },
+        })
         .then(({ data }) => {
-          this.selectedLabels = data.labels;
+          const { mutationName } = mutationMap[this.issuableType];
+
+          if (data[mutationName]?.errors?.length) {
+            throw new Error();
+          }
+
+          const issuableType = camelCase(this.issuableType);
+          this.selectedLabels = data[mutationName]?.[issuableType]?.labels?.nodes?.map(label => ({
+            ...label,
+            id: getIdFromGraphQLId(label.id),
+          }));
         })
-        .catch(() => flash(__('An error occurred while updating labels.')))
+        .catch(() => createFlash({ message: __('An error occurred while updating labels.') }))
         .finally(() => {
           this.isLabelsSelectInProgress = false;
         });