1 files changed, 28 insertions, 18 deletions

diff --git a/app/assets/javascripts/work_items/components/work_item_state.vue b/app/assets/javascripts/work_items/components/work_item_state.vue
index 51db4c804eb..87f4a8822b1 100644
--- a/app/assets/javascripts/work_items/components/work_item_state.vue
+++ b/app/assets/javascripts/work_items/components/work_item_state.vue
@@ -7,8 +7,9 @@ import {
   STATE_CLOSED,
   STATE_EVENT_CLOSE,
   STATE_EVENT_REOPEN,
+  TRACKING_CATEGORY_SHOW,
 } from '../constants';
-import updateWorkItemMutation from '../graphql/update_work_item.mutation.graphql';
+import { getUpdateWorkItemMutation } from './update_work_item';
 import ItemState from './item_state.vue';
 
 export default {
@@ -21,6 +22,11 @@ export default {
       type: Object,
       required: true,
     },
+    workItemParentId: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -33,14 +39,14 @@ export default {
     },
     tracking() {
       return {
-        category: 'workItems:show',
+        category: TRACKING_CATEGORY_SHOW,
         label: 'item_state',
         property: `type_${this.workItemType}`,
       };
     },
   },
   methods: {
-    async updateWorkItemState(newState) {
+    updateWorkItemState(newState) {
       const stateEventMap = {
         [STATE_OPEN]: STATE_EVENT_REOPEN,
         [STATE_CLOSED]: STATE_EVENT_CLOSE,
@@ -48,35 +54,39 @@ export default {
 
       const stateEvent = stateEventMap[newState];
 
-      await this.updateWorkItem(stateEvent);
+      this.updateWorkItem(stateEvent);
     },
+
     async updateWorkItem(updatedState) {
       if (!updatedState) {
         return;
       }
 
+      const input = {
+        id: this.workItem.id,
+        stateEvent: updatedState,
+      };
+
       this.updateInProgress = true;
 
       try {
         this.track('updated_state');
 
-        const {
-          data: { workItemUpdate },
-        } = await this.$apollo.mutate({
-          mutation: updateWorkItemMutation,
-          variables: {
-            input: {
-              id: this.workItem.id,
-              stateEvent: updatedState,
-            },
-          },
+        const { mutation, variables } = getUpdateWorkItemMutation({
+          workItemParentId: this.workItemParentId,
+          input,
         });
 
-        if (workItemUpdate?.errors?.length) {
-          throw new Error(workItemUpdate.errors[0]);
-        }
+        const { data } = await this.$apollo.mutate({
+          mutation,
+          variables,
+        });
 
-        this.$emit('updated');
+        const errors = data.workItemUpdate?.errors;
+
+        if (errors?.length) {
+          throw new Error(errors[0]);
+        }
       } catch (error) {
         this.$emit('error', i18n.updateError);
         Sentry.captureException(error);