Merge branch '389444-fix-work-items-notifications-modal-issue' into 'master'

Fix for notification toggle not working on issue's task modal

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/117819



Merged-by: Natalia Tepluhina <ntepluhina@gitlab.com>
Approved-by: Natalia Tepluhina <ntepluhina@gitlab.com>
Approved-by: Deepika Guliani <dguliani@gitlab.com>
Co-authored-by: Rajan Mistry <rmistry@gitlab.com>

app/assets/javascripts/work_items/components/work_item_actions.vue

@@ -86,6 +86,11 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      initialSubscribed: this.subscribedToNotifications,
+    };
+  },
   computed: {
     i18n() {
       return {
@@ -94,6 +99,16 @@ export default {
       };
     },
   },
+  watch: {
+    subscribedToNotifications() {
+      /**
+       * To toggle the value if mutation fails, assign the
+       * subscribedToNotifications boolean value directly
+       * to data prop.
+       */
+      this.initialSubscribed = this.subscribedToNotifications;
+    },
+  },
   methods: {
     handleToggleWorkItemConfidentiality() {
       this.track('click_toggle_work_item_confidentiality');
@@ -180,7 +195,7 @@ export default {
         >
           <div class="gl-px-5 gl-pb-2 gl-pt-1">
             <gl-toggle
-              :value="subscribedToNotifications"
+              v-model="initialSubscribed"
               :label="$options.i18n.notifications"
               :data-testid="$options.notificationsToggleTestId"
               label-position="left"

spec/frontend/work_items/components/work_item_actions_spec.js

@@ -173,31 +173,59 @@ describe('WorkItemActions component', () => {
   });
 
   describe('notifications action', () => {
+    const errorMessage = 'Failed to subscribe';
+    const notificationToggledOffMessage = 'Notifications turned off.';
+    const notificationToggledOnMessage = 'Notifications turned on.';
+
     const workItemQueryResponse = workItemResponseFactory({ canUpdate: true, canDelete: true });
-    const inputVariables = {
+    const inputVariablesOff = {
       id: workItemQueryResponse.data.workItem.id,
       notificationsWidget: {
         subscribed: false,
       },
     };
 
-    const notificationExpectedResponse = workItemResponseFactory({
+    const inputVariablesOn = {
+      id: workItemQueryResponse.data.workItem.id,
+      notificationsWidget: {
+        subscribed: true,
+      },
+    };
+
+    const notificationsOffExpectedResponse = workItemResponseFactory({
       subscribed: false,
     });
 
-    const toggleNotificationsHandler = jest.fn().mockResolvedValue({
+    const toggleNotificationsOffHandler = jest.fn().mockResolvedValue({
       data: {
         workItemUpdate: {
-          workItem: notificationExpectedResponse.data.workItem,
+          workItem: notificationsOffExpectedResponse.data.workItem,
+          errors: [],
+        },
+      },
+    });
+
+    const notificationsOnExpectedResponse = workItemResponseFactory({
+      subscribed: true,
+    });
+
+    const toggleNotificationsOnHandler = jest.fn().mockResolvedValue({
+      data: {
+        workItemUpdate: {
+          workItem: notificationsOnExpectedResponse.data.workItem,
           errors: [],
         },
       },
     });
 
-    const errorMessage = 'Failed to subscribe';
     const toggleNotificationsFailureHandler = jest.fn().mockRejectedValue(new Error(errorMessage));
 
-    const notificationsMock = [updateWorkItemNotificationsMutation, toggleNotificationsHandler];
+    const notificationsOffMock = [
+      updateWorkItemNotificationsMutation,
+      toggleNotificationsOffHandler,
+    ];
+
+    const notificationsOnMock = [updateWorkItemNotificationsMutation, toggleNotificationsOnHandler];
 
     const notificationsFailureMock = [
       updateWorkItemNotificationsMutation,
@@ -213,20 +241,27 @@ describe('WorkItemActions component', () => {
       expect(findNotificationsToggleButton().exists()).toBe(true);
     });
 
-    it('calls notification mutation and displays a toast when the notification widget is toggled', async () => {
-      createComponent({ notificationsMock });
+    it.each`
+      scenario        | subscribedToNotifications | notificationsMock       | inputVariables       | toastMessage
+      ${'turned off'} | ${false}                  | ${notificationsOffMock} | ${inputVariablesOff} | ${notificationToggledOffMessage}
+      ${'turned on'}  | ${true}                   | ${notificationsOnMock}  | ${inputVariablesOn}  | ${notificationToggledOnMessage}
+    `(
+      'calls mutation and displays toast when notification toggle is $scenario',
+      async ({ subscribedToNotifications, notificationsMock, inputVariables, toastMessage }) => {
+        createComponent({ notificationsMock });
 
-      await waitForPromises();
+        await waitForPromises();
 
-      findNotificationsToggle().vm.$emit('change', false);
+        findNotificationsToggle().vm.$emit('change', subscribedToNotifications);
 
-      await waitForPromises();
+        await waitForPromises();
 
-      expect(notificationsMock[1]).toHaveBeenCalledWith({
-        input: inputVariables,
-      });
-      expect(toast).toHaveBeenCalledWith('Notifications turned off.');
-    });
+        expect(notificationsMock[1]).toHaveBeenCalledWith({
+          input: inputVariables,
+        });
+        expect(toast).toHaveBeenCalledWith(toastMessage);
+      },
+    );
 
     it('emits error when the update notification mutation fails', async () => {
       createComponent({ notificationsMock: notificationsFailureMock });