Add latest changes from gitlab-org/gitlab@master

3 files changed, 55 insertions, 36 deletions

diff --git a/app/assets/javascripts/work_items/components/work_item_actions.vue b/app/assets/javascripts/work_items/components/work_item_actions.vue
index 6ca487d5427..e8fe64c932b 100644
--- a/app/assets/javascripts/work_items/components/work_item_actions.vue
+++ b/app/assets/javascripts/work_items/components/work_item_actions.vue
@@ -8,6 +8,7 @@ import {
   GlModalDirective,
   GlToggle,
 } from '@gitlab/ui';
+import { produce } from 'immer';
 
 import * as Sentry from '@sentry/browser';
 
@@ -15,6 +16,7 @@ import { __, s__ } from '~/locale';
 import Tracking from '~/tracking';
 import toast from '~/vue_shared/plugins/global_toast';
 import { isLoggedIn } from '~/lib/utils/common_utils';
+import workItemByIidQuery from '~/work_items/graphql/work_item_by_iid.query.graphql';
 
 import {
   sprintfWorkItem,
@@ -127,6 +129,10 @@ export default {
       required: false,
       default: false,
     },
+    workItemIid: {
+      type: String,
+      required: true,
+    },
   },
   apollo: {
     workItemTypes: {
@@ -168,16 +174,6 @@ export default {
       return this.workItemTypes.find((type) => type.name === WORK_ITEM_TYPE_VALUE_OBJECTIVE).id;
     },
   },
-  watch: {
-    subscribedToNotifications() {
-      /**
-       * To toggle the value if mutation fails, assign the
-       * subscribedToNotifications boolean value directly
-       * to data prop.
-       */
-      this.initialSubscribed = this.subscribedToNotifications;
-    },
-  },
   methods: {
     copyToClipboard(text, message) {
       if (this.isModal) {
@@ -203,10 +199,9 @@ export default {
     },
     toggleNotifications(subscribed) {
       const inputVariables = {
-        id: this.workItemId,
-        notificationsWidget: {
-          subscribed,
-        },
+        projectPath: this.fullPath,
+        iid: this.workItemIid,
+        subscribedState: subscribed,
       };
       this.$apollo
         .mutate({
@@ -215,27 +210,34 @@ export default {
             input: inputVariables,
           },
           optimisticResponse: {
-            workItemUpdate: {
-              errors: [],
-              workItem: {
+            updateWorkItemNotificationsSubscription: {
+              issue: {
                 id: this.workItemId,
-                widgets: [
-                  {
-                    type: WIDGET_TYPE_NOTIFICATIONS,
-                    subscribed,
-                    __typename: 'WorkItemWidgetNotifications',
-                  },
-                ],
-                __typename: 'WorkItem',
+                subscribed,
+              },
+              errors: [],
+            },
+          },
+          update: (
+            cache,
+            {
+              data: {
+                updateWorkItemNotificationsSubscription: { issue = {} },
               },
-              __typename: 'WorkItemUpdatePayload',
             },
+          ) => {
+            // As the mutation and the query both are different,
+            // overwrite the subscribed value in the cache
+            this.updateWorkItemNotificationsWidgetCache({
+              cache,
+              issue,
+            });
           },
         })
         .then(
           ({
             data: {
-              workItemUpdate: { errors },
+              updateWorkItemNotificationsSubscription: { errors },
             },
           }) => {
             if (errors?.length) {
@@ -251,6 +253,25 @@ export default {
           Sentry.captureException(error);
         });
     },
+    updateWorkItemNotificationsWidgetCache({ cache, issue }) {
+      const query = {
+        query: workItemByIidQuery,
+        variables: { fullPath: this.fullPath, iid: this.workItemIid },
+      };
+      // Read the work item object
+      const sourceData = cache.readQuery(query);
+
+      const newData = produce(sourceData, (draftState) => {
+        const { widgets } = draftState.workspace.workItems.nodes[0];
+
+        const widgetNotifications = widgets.find(({ type }) => type === WIDGET_TYPE_NOTIFICATIONS);
+        // overwrite the subscribed value
+        widgetNotifications.subscribed = issue.subscribed;
+      });
+
+      // write to the cache
+      cache.writeQuery({ ...query, data: newData });
+    },
     throwConvertError() {
       this.$emit('error', this.i18n.convertError);
     },
diff --git a/app/assets/javascripts/work_items/components/work_item_detail.vue b/app/assets/javascripts/work_items/components/work_item_detail.vue
index 04e7814e650..dc4065f9812 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail.vue
@@ -465,6 +465,7 @@ export default {
             :work-item-reference="workItem.reference"
             :work-item-create-note-email="workItem.createNoteEmail"
             :is-modal="isModal"
+            :work-item-iid="workItemIid"
             @deleteWorkItem="$emit('deleteWorkItem', { workItemType, workItemId: workItem.id })"
             @toggleWorkItemConfidentiality="toggleConfidentiality"
             @error="updateError = $event"
@@ -539,6 +540,7 @@ export default {
                   :work-item-reference="workItem.reference"
                   :work-item-create-note-email="workItem.createNoteEmail"
                   :is-modal="isModal"
+                  :work-item-iid="workItemIid"
                   @deleteWorkItem="
                     $emit('deleteWorkItem', { workItemType, workItemId: workItem.id })
                   "
diff --git a/app/assets/javascripts/work_items/graphql/update_work_item_notifications.mutation.graphql b/app/assets/javascripts/work_items/graphql/update_work_item_notifications.mutation.graphql
index f8952b62f28..f28317b79b5 100644
--- a/app/assets/javascripts/work_items/graphql/update_work_item_notifications.mutation.graphql
+++ b/app/assets/javascripts/work_items/graphql/update_work_item_notifications.mutation.graphql
@@ -1,13 +1,9 @@
-mutation updateWorkItemNotificationsWidget($input: WorkItemUpdateInput!) {
-  workItemUpdate(input: $input) {
-    workItem {
+mutation updateWorkItemNotificationsWidget($input: IssueSetSubscriptionInput!) {
+  updateWorkItemNotificationsSubscription: issueSetSubscription(input: $input) {
+    issue {
       id
-      widgets {
-        ... on WorkItemWidgetNotifications {
-          type
-          subscribed
-        }
-      }
+      subscribed
     }
+    errors
   }
 }