diff options
Diffstat (limited to 'app/assets/javascripts/sidebar/components/labels')
-rw-r--r-- | app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue | 100 |
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; }); |