Replace `notes_service.js` with axios calls in the notes/stores/actions.js

app/assets/javascripts/notes/services/notes_service.js

-import axios from '~/lib/utils/axios_utils';
-import * as constants from '../constants';
-
-export default {
-  fetchDiscussions(endpoint, filter, persistFilter = true) {
-    const config =
-      filter !== undefined
-        ? { params: { notes_filter: filter, persist_filter: persistFilter } }
-        : null;
-    return axios.get(endpoint, config);
-  },
-  replyToDiscussion(endpoint, data) {
-    return axios.post(endpoint, data);
-  },
-  updateNote(endpoint, data) {
-    return axios.put(endpoint, data);
-  },
-  createNewNote(endpoint, data) {
-    return axios.post(endpoint, data);
-  },
-  toggleResolveNote(endpoint, isResolved) {
-    const { RESOLVE_NOTE_METHOD_NAME, UNRESOLVE_NOTE_METHOD_NAME } = constants;
-    const method = isResolved ? UNRESOLVE_NOTE_METHOD_NAME : RESOLVE_NOTE_METHOD_NAME;
-
-    return axios[method](endpoint);
-  },
-  poll(data = {}) {
-    const endpoint = data.notesData.notesPath;
-    const { lastFetchedAt } = data;
-    const options = {
-      headers: {
-        'X-Last-Fetched-At': lastFetchedAt ? `${lastFetchedAt}` : undefined,
-      },
-    };
-
-    return axios.get(endpoint, options);
-  },
-  toggleIssueState(endpoint, data) {
-    return axios.put(endpoint, data);
-  },
-};

app/assets/javascripts/notes/stores/actions.js

@@ -8,7 +8,6 @@ import Poll from '../../lib/utils/poll';
 import * as types from './mutation_types';
 import * as utils from './utils';
 import * as constants from '../constants';
-import service from '../services/notes_service';
 import loadAwardsHandler from '../../awards_handler';
 import sidebarTimeTrackingEventHub from '../../sidebar/event_hub';
 import { isInViewport, scrollToElement, isInMRPage } from '../../lib/utils/common_utils';
@@ -47,11 +46,17 @@ export const setNotesFetchedState = ({ commit }, state) =>
 
 export const toggleDiscussion = ({ commit }, data) => commit(types.TOGGLE_DISCUSSION, data);
 
-export const fetchDiscussions = ({ commit, dispatch }, { path, filter, persistFilter }) =>
-  service.fetchDiscussions(path, filter, persistFilter).then(({ data }) => {
+export const fetchDiscussions = ({ commit, dispatch }, { path, filter, persistFilter }) => {
+  const config =
+    filter !== undefined
+      ? { params: { notes_filter: filter, persist_filter: persistFilter } }
+      : null;
+
+  return axios.get(path, config).then(({ data }) => {
     commit(types.SET_INITIAL_DISCUSSIONS, data);
     dispatch('updateResolvableDiscussionsCounts');
   });
+};
 
 export const updateDiscussion = ({ commit, state }, discussion) => {
   commit(types.UPDATE_DISCUSSION, discussion);
@@ -78,7 +83,7 @@ export const deleteNote = ({ dispatch }, note) =>
   });
 
 export const updateNote = ({ commit, dispatch }, { endpoint, note }) =>
-  service.updateNote(endpoint, note).then(({ data }) => {
+  axios.put(endpoint, note).then(({ data }) => {
     commit(types.UPDATE_NOTE, data);
     dispatch('startTaskList');
   });
@@ -109,7 +114,7 @@ export const replyToDiscussion = (
   { commit, state, getters, dispatch },
   { endpoint, data: reply },
 ) =>
-  service.replyToDiscussion(endpoint, reply).then(({ data }) => {
+  axios.post(endpoint, reply).then(({ data }) => {
     if (data.discussion) {
       commit(types.UPDATE_DISCUSSION, data.discussion);
 
@@ -126,7 +131,7 @@ export const replyToDiscussion = (
   });
 
 export const createNewNote = ({ commit, dispatch }, { endpoint, data: reply }) =>
-  service.createNewNote(endpoint, reply).then(({ data }) => {
+  axios.post(endpoint, reply).then(({ data }) => {
     if (!data.errors) {
       commit(types.ADD_NEW_NOTE, data);
 
@@ -156,20 +161,24 @@ export const resolveDiscussion = ({ state, dispatch, getters }, { discussionId }
   });
 };
 
-export const toggleResolveNote = ({ commit, dispatch }, { endpoint, isResolved, discussion }) =>
-  service.toggleResolveNote(endpoint, isResolved).then(({ data }) => {
-    const mutationType = discussion ? types.UPDATE_DISCUSSION : types.UPDATE_NOTE;
+export const toggleResolveNote = ({ commit, dispatch }, { endpoint, isResolved, discussion }) => {
+  const method = isResolved
+    ? constants.UNRESOLVE_NOTE_METHOD_NAME
+    : constants.RESOLVE_NOTE_METHOD_NAME;
+  const mutationType = discussion ? types.UPDATE_DISCUSSION : types.UPDATE_NOTE;
 
+  return axios[method](endpoint).then(({ data }) => {
     commit(mutationType, data);
 
     dispatch('updateResolvableDiscussionsCounts');
 
     dispatch('updateMergeRequestWidget');
   });
+};
 
 export const closeIssue = ({ commit, dispatch, state }) => {
   dispatch('toggleStateButtonLoading', true);
-  return service.toggleIssueState(state.notesData.closePath).then(({ data }) => {
+  return axios.put(state.notesData.closePath).then(({ data }) => {
     commit(types.CLOSE_ISSUE);
     dispatch('emitStateChangedEvent', data);
     dispatch('toggleStateButtonLoading', false);
@@ -178,7 +187,7 @@ export const closeIssue = ({ commit, dispatch, state }) => {
 
 export const reopenIssue = ({ commit, dispatch, state }) => {
   dispatch('toggleStateButtonLoading', true);
-  return service.toggleIssueState(state.notesData.reopenPath).then(({ data }) => {
+  return axios.put(state.notesData.reopenPath).then(({ data }) => {
     commit(types.REOPEN_ISSUE);
     dispatch('emitStateChangedEvent', data);
     dispatch('toggleStateButtonLoading', false);
@@ -355,11 +364,35 @@ const pollSuccessCallBack = (resp, commit, state, getters, dispatch) => {
   return resp;
 };
 
+const getFetchDataParams = state => {
+  const endpoint = state.notesData.notesPath;
+  const options = {
+    headers: {
+      'X-Last-Fetched-At': state.lastFetchedAt ? `${state.lastFetchedAt}` : undefined,
+    },
+  };
+
+  return { endpoint, options };
+};
+
+export const fetchData = ({ commit, state, getters }) => {
+  const { endpoint, options } = getFetchDataParams(state);
+
+  axios
+    .get(endpoint, options)
+    .then(({ data }) => pollSuccessCallBack(data, commit, state, getters))
+    .catch(() => Flash(__('Something went wrong while fetching latest comments.')));
+};
+
 export const poll = ({ commit, state, getters, dispatch }) => {
   eTagPoll = new Poll({
-    resource: service,
+    resource: {
+      poll: () => {
+        const { endpoint, options } = getFetchDataParams(state);
+        return axios.get(endpoint, options);
+      },
+    },
     method: 'poll',
-    data: state,
     successCallback: ({ data }) => pollSuccessCallBack(data, commit, state, getters, dispatch),
     errorCallback: () => Flash(__('Something went wrong while fetching latest comments.')),
   });
@@ -367,7 +400,7 @@ export const poll = ({ commit, state, getters, dispatch }) => {
   if (!Visibility.hidden()) {
     eTagPoll.makeRequest();
   } else {
-    service.poll(state);
+    fetchData({ commit, state, getters });
   }
 
   Visibility.change(() => {
@@ -387,18 +420,6 @@ export const restartPolling = () => {
   if (eTagPoll) eTagPoll.restart();
 };
 
-export const fetchData = ({ commit, state, getters }) => {
-  const requestData = {
-    endpoint: state.notesData.notesPath,
-    lastFetchedAt: state.lastFetchedAt,
-  };
-
-  service
-    .poll(requestData)
-    .then(({ data }) => pollSuccessCallBack(data, commit, state, getters))
-    .catch(() => Flash(__('Something went wrong while fetching latest comments.')));
-};
-
 export const toggleAward = ({ commit, getters }, { awardName, noteId }) => {
   commit(types.TOGGLE_AWARD, { awardName, note: getters.notesById[noteId] });
 };

spec/frontend/notes/components/note_app_spec.js

@@ -5,7 +5,6 @@ import { mount } from '@vue/test-utils';
 import { setTestTimeout } from 'helpers/timeout';
 import axios from '~/lib/utils/axios_utils';
 import NotesApp from '~/notes/components/notes_app.vue';
-import service from '~/notes/services/notes_service';
 import createStore from '~/notes/stores';
 import '~/behaviors/markdown/render_gfm';
 // TODO: use generated fixture (https://gitlab.com/gitlab-org/gitlab-foss/issues/62491)
@@ -192,7 +191,6 @@ describe('note_app', () => {
     describe('individual note', () => {
       beforeEach(() => {
         axiosMock.onAny().reply(mockData.getIndividualNoteResponse);
-        jest.spyOn(service, 'updateNote');
         wrapper = mountComponent();
         return waitForDiscussionsRequest().then(() => {
           wrapper.find('.js-note-edit').trigger('click');
@@ -203,18 +201,18 @@ describe('note_app', () => {
         expect(wrapper.find('.js-vue-issue-note-form').exists()).toBe(true);
       });
 
-      it('calls the service to update the note', () => {
+      it('calls the store action to update the note', () => {
+        jest.spyOn(axios, 'put').mockImplementation(() => Promise.resolve({ data: {} }));
         wrapper.find('.js-vue-issue-note-form').value = 'this is a note';
         wrapper.find('.js-vue-issue-save').trigger('click');
 
-        expect(service.updateNote).toHaveBeenCalled();
+        expect(axios.put).toHaveBeenCalled();
       });
     });
 
     describe('discussion note', () => {
       beforeEach(() => {
         axiosMock.onAny().reply(mockData.getDiscussionNoteResponse);
-        jest.spyOn(service, 'updateNote');
         wrapper = mountComponent();
         return waitForDiscussionsRequest().then(() => {
           wrapper.find('.js-note-edit').trigger('click');
@@ -226,10 +224,11 @@ describe('note_app', () => {
       });
 
       it('updates the note and resets the edit form', () => {
+        jest.spyOn(axios, 'put').mockImplementation(() => Promise.resolve({ data: {} }));
         wrapper.find('.js-vue-issue-note-form').value = 'this is a note';
         wrapper.find('.js-vue-issue-save').trigger('click');
 
-        expect(service.updateNote).toHaveBeenCalled();
+        expect(axios.put).toHaveBeenCalled();
       });
     });
   });