Add updating of labels from mock API

- Include a loading state while the labels are updated
- Fix Jira status getting updated when labels are changed

ee/app/assets/javascripts/integrations/jira/issues_show/api.js

@@ -16,11 +16,22 @@ export const fetchIssueStatuses = () => {
   });
 };
 
-export const updateIssue = (issue, { status }) => {
+export const updateIssue = (issue, { labels = [], status = undefined }) => {
   // We are using mock call here which should become a backend call
   return new Promise((resolve) => {
     setTimeout(() => {
-      resolve({ ...issue, status });
+      const addedLabels = labels.filter((label) => label.set);
+      const removedLabelsIds = labels.filter((label) => !label.set).map((label) => label.id);
+
+      const finalLabels = [...issue.labels, ...addedLabels].filter(
+        (label) => !removedLabelsIds.includes(label.id),
+      );
+
+      resolve({
+        ...issue,
+        ...(status ? { status } : {}),
+        labels: finalLabels,
+      });
     }, 1000);
   });
 };

ee/app/assets/javascripts/integrations/jira/issues_show/components/jira_issues_show_root.vue

@@ -41,6 +41,7 @@ export default {
     return {
       isLoading: true,
       isLoadingStatus: false,
+      isUpdatingLabels: false,
       isUpdatingStatus: false,
       errorMessage: null,
       issue: {},
@@ -84,6 +85,23 @@ export default {
       return `jira_note_${id}`;
     },
 
+    onIssueLabelsUpdated(labels) {
+      this.isUpdatingLabels = true;
+      updateIssue(this.issue, { labels })
+        .then((response) => {
+          this.issue = response;
+        })
+        .catch(() => {
+          createFlash({
+            message: s__(
+              'JiraService|Failed to update Jira issue labels. View the issue in Jira, or reload the page.',
+            ),
+          });
+        })
+        .finally(() => {
+          this.isUpdatingLabels = false;
+        });
+    },
     onIssueStatusFetch() {
       this.isLoadingStatus = true;
       fetchIssueStatuses()
@@ -104,8 +122,8 @@ export default {
     onIssueStatusUpdated(status) {
       this.isUpdatingStatus = true;
       updateIssue(this.issue, { status })
-        .then(() => {
-          this.issue = { ...this.issue, status };
+        .then((response) => {
+          this.issue = response;
         })
         .catch(() => {
           createFlash({
@@ -161,8 +179,10 @@ export default {
             :sidebar-expanded="sidebarExpanded"
             :issue="issue"
             :is-loading-status="isLoadingStatus"
+            :is-updating-labels="isUpdatingLabels"
             :is-updating-status="isUpdatingStatus"
             :statuses="statuses"
+            @issue-labels-updated="onIssueLabelsUpdated"
             @issue-status-fetch="onIssueStatusFetch"
             @issue-status-updated="onIssueStatusUpdated"
           />

ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue

@@ -40,6 +40,11 @@ export default {
       required: false,
       default: false,
     },
+    isUpdatingLabels: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     isUpdatingStatus: {
       type: Boolean,
       required: false,
@@ -99,6 +104,9 @@ export default {
         );
       }
     },
+    onIssueLabelsUpdated(labels) {
+      this.$emit('issue-labels-updated', labels);
+    },
     onIssueStatusFetch() {
       this.$emit('issue-status-fetch');
     },
@@ -134,8 +142,10 @@ export default {
       :labels-fetch-path="issueLabelsPath"
       :labels-filter-base-path="issuesListPath"
       :labels-filter-param="$options.labelsFilterParam"
+      :labels-select-in-progress="isUpdatingLabels"
       variant="sidebar"
       class="block labels js-labels-block"
+      @updateSelectedLabels="onIssueLabelsUpdated"
     >
       {{ __('None') }}
     </labels-select>