Merge branch '34132-use-graphql-epic-subscription' into 'master'

Use GraphQL mutation to toggle Epic subscription

Closes #34132

See merge request gitlab-org/gitlab!22872

ee/app/assets/javascripts/epic/queries/epicSetSubscription.mutation.graphql

+mutation epicSetSubscription($epicSetSubscriptionInput: EpicSetSubscriptionInput!) {
+  epicSetSubscription(input: $epicSetSubscriptionInput) {
+    clientMutationId
+    errors
+  }
+}

ee/app/assets/javascripts/epic/store/actions.js

@@ -8,6 +8,7 @@ import epicUtils from '../utils/epic_utils';
 import { statusType, statusEvent, dateTypes } from '../constants';
 
 import updateEpic from '../queries/updateEpic.mutation.graphql';
+import epicSetSubscription from '../queries/epicSetSubscription.mutation.graphql';
 
 import * as types from './mutation_types';
 
@@ -182,12 +183,26 @@ export const requestEpicSubscriptionToggleFailure = ({ commit, state }) => {
 };
 export const toggleEpicSubscription = ({ state, dispatch }) => {
   dispatch('requestEpicSubscriptionToggle');
-  axios
-    .post(state.toggleSubscriptionPath)
-    .then(() => {
-      dispatch('requestEpicSubscriptionToggleSuccess', {
-        subscribed: !state.subscribed,
-      });
+  epicUtils.gqClient
+    .mutate({
+      mutation: epicSetSubscription,
+      variables: {
+        epicSetSubscriptionInput: {
+          iid: `${state.epicId}`,
+          groupPath: state.groupPath,
+          subscribedState: !state.subscribed,
+        },
+      },
+    })
+    .then(({ data }) => {
+      if (!data?.epicSetSubscription?.errors.length) {
+        dispatch('requestEpicSubscriptionToggleSuccess', {
+          subscribed: !state.subscribed,
+        });
+      } else {
+        // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
+        throw new Error('An error occurred while toggling to notifications.');
+      }
     })
     .catch(() => {
       dispatch('requestEpicSubscriptionToggleFailure');

ee/app/assets/javascripts/epic/store/state.js

@@ -8,7 +8,6 @@ export default () => ({
   labelsPath: '',
   todoPath: '',
   todoDeletePath: '',
-  toggleSubscriptionPath: '',
 
   // URLs to use with links
   epicsWebUrl: '',

ee/spec/javascripts/epic/store/actions_spec.js

@@ -769,6 +769,13 @@ describe('Epic Store Actions', () => {
 
   describe('toggleEpicSubscription', () => {
     let mock;
+    const mockEpicSetSubscriptionRes = {
+      epicSetSubscription: {
+        clientMutationId: null,
+        errors: [],
+        __typename: 'EpicSetSubscriptionPayload',
+      },
+    };
     const stateSubscribed = {
       subscribed: false,
     };
@@ -784,6 +791,11 @@ describe('Epic Store Actions', () => {
     describe('success', () => {
       it('dispatches requestEpicSubscriptionToggle and requestEpicSubscriptionToggleSuccess with param `subscribed` when request is complete', done => {
         mock.onPost(/(.*)/).replyOnce(200, {});
+        spyOn(epicUtils.gqClient, 'mutate').and.returnValue(
+          Promise.resolve({
+            data: mockEpicSetSubscriptionRes,
+          }),
+        );
 
         testAction(
           actions.toggleEpicSubscription,
@@ -807,6 +819,16 @@ describe('Epic Store Actions', () => {
     describe('failure', () => {
       it('dispatches requestEpicSubscriptionToggle and requestEpicSubscriptionToggleFailure when request fails', done => {
         mock.onPost(/(.*)/).replyOnce(500, {});
+        spyOn(epicUtils.gqClient, 'mutate').and.returnValue(
+          Promise.resolve({
+            data: {
+              epicSetSubscription: {
+                ...mockEpicSetSubscriptionRes,
+                errors: [{ foo: 'bar' }],
+              },
+            },
+          }),
+        );
 
         testAction(
           actions.toggleEpicSubscription,