Merge branch 'mr-widget-discussion-state-fix' into 'master'

Fixed MR widget unresolved discussions state

See merge request gitlab-org/gitlab-ce!21705

5 files changed, 216 insertions, 7 deletions

diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index 9a2ec15debd..68df63b8539 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -10,6 +10,7 @@ import service from '../services/notes_service';
 import loadAwardsHandler from '../../awards_handler';
 import sidebarTimeTrackingEventHub from '../../sidebar/event_hub';
 import { isInViewport, scrollToElement } from '../../lib/utils/common_utils';
+import mrWidgetEventHub from '../../vue_merge_request_widget/event_hub';
 
 let eTagPoll;
 
@@ -61,9 +62,11 @@ export const refetchDiscussionById = ({ commit, state }, { path, discussionId })
       .catch(() => {});
   });
 
-export const deleteNote = ({ commit }, note) =>
+export const deleteNote = ({ commit, dispatch }, note) =>
   service.deleteNote(note.path).then(() => {
     commit(types.DELETE_NOTE, note);
+
+    dispatch('updateMergeRequestWidget');
   });
 
 export const updateNote = ({ commit }, { endpoint, note }) =>
@@ -84,20 +87,22 @@ export const replyToDiscussion = ({ commit }, { endpoint, data }) =>
       return res;
     });
 
-export const createNewNote = ({ commit }, { endpoint, data }) =>
+export const createNewNote = ({ commit, dispatch }, { endpoint, data }) =>
   service
     .createNewNote(endpoint, data)
     .then(res => res.json())
     .then(res => {
       if (!res.errors) {
         commit(types.ADD_NEW_NOTE, res);
+
+        dispatch('updateMergeRequestWidget');
       }
       return res;
     });
 
 export const removePlaceholderNotes = ({ commit }) => commit(types.REMOVE_PLACEHOLDER_NOTES);
 
-export const toggleResolveNote = ({ commit }, { endpoint, isResolved, discussion }) =>
+export const toggleResolveNote = ({ commit, dispatch }, { endpoint, isResolved, discussion }) =>
   service
     .toggleResolveNote(endpoint, isResolved)
     .then(res => res.json())
@@ -105,6 +110,8 @@ export const toggleResolveNote = ({ commit }, { endpoint, isResolved, discussion
       const mutationType = discussion ? types.UPDATE_DISCUSSION : types.UPDATE_NOTE;
 
       commit(mutationType, res);
+
+      dispatch('updateMergeRequestWidget');
     });
 
 export const closeIssue = ({ commit, dispatch, state }) => {
@@ -333,5 +340,9 @@ export const fetchDiscussionDiffLines = ({ commit }, discussion) =>
     });
   });
 
+export const updateMergeRequestWidget = () => {
+  mrWidgetEventHub.$emit('mr.discussion.updated');
+};
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};
diff --git a/app/assets/javascripts/vue_merge_request_widget/index.js b/app/assets/javascripts/vue_merge_request_widget/index.js
index 69a9132a2da..cc6e620f365 100644
--- a/app/assets/javascripts/vue_merge_request_widget/index.js
+++ b/app/assets/javascripts/vue_merge_request_widget/index.js
@@ -1,7 +1,4 @@
-import {
-  Vue,
-  mrWidgetOptions,
-} from './dependencies';
+import { Vue, mrWidgetOptions } from './dependencies';
 import Translate from '../vue_shared/translate';
 
 Vue.use(Translate);
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index dc6be025f11..b5eaaf054e7 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -107,10 +107,14 @@ export default {
   created() {
     this.initPolling();
     this.bindEventHubListeners();
+    eventHub.$on('mr.discussion.updated', this.checkStatus);
   },
   mounted() {
     this.handleMounted();
   },
+  beforeDestroy() {
+    eventHub.$off('mr.discussion.updated', this.checkStatus);
+  },
   methods: {
     createService(store) {
       const endpoints = {
diff --git a/changelogs/unreleased/mr-widget-discussion-state-fix.yml b/changelogs/unreleased/mr-widget-discussion-state-fix.yml
new file mode 100644
index 00000000000..562d78a7aa7
--- /dev/null
+++ b/changelogs/unreleased/mr-widget-discussion-state-fix.yml
@@ -0,0 +1,5 @@
+---
+title: Fixed merge request widget discussion state not updating after resolving discussions
+merge_request: 21705
+author:
+type: fixed
diff --git a/spec/javascripts/notes/stores/actions_spec.js b/spec/javascripts/notes/stores/actions_spec.js
index b66e8e1ceb3..f4643fd55ed 100644
--- a/spec/javascripts/notes/stores/actions_spec.js
+++ b/spec/javascripts/notes/stores/actions_spec.js
@@ -3,6 +3,7 @@ import _ from 'underscore';
 import { headersInterceptor } from 'spec/helpers/vue_resource_helper';
 import * as actions from '~/notes/stores/actions';
 import createStore from '~/notes/stores';
+import mrWidgetEventHub from '~/vue_merge_request_widget/event_hub';
 import testAction from '../../helpers/vuex_action_helper';
 import { resetStore } from '../helpers';
 import {
@@ -317,4 +318,195 @@ describe('Actions Notes Store', () => {
       );
     });
   });
+
+  describe('deleteNote', () => {
+    const interceptor = (request, next) => {
+      next(
+        request.respondWith(JSON.stringify({}), {
+          status: 200,
+        }),
+      );
+    };
+
+    beforeEach(() => {
+      Vue.http.interceptors.push(interceptor);
+    });
+
+    afterEach(() => {
+      Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
+    });
+
+    it('commits DELETE_NOTE and dispatches updateMergeRequestWidget', done => {
+      const note = { path: `${gl.TEST_HOST}`, id: 1 };
+
+      testAction(
+        actions.deleteNote,
+        note,
+        store.state,
+        [
+          {
+            type: 'DELETE_NOTE',
+            payload: note,
+          },
+        ],
+        [
+          {
+            type: 'updateMergeRequestWidget',
+          },
+        ],
+        done,
+      );
+    });
+  });
+
+  describe('createNewNote', () => {
+    describe('success', () => {
+      const res = {
+        id: 1,
+        valid: true,
+      };
+      const interceptor = (request, next) => {
+        next(
+          request.respondWith(JSON.stringify(res), {
+            status: 200,
+          }),
+        );
+      };
+
+      beforeEach(() => {
+        Vue.http.interceptors.push(interceptor);
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
+      });
+
+      it('commits ADD_NEW_NOTE and dispatches updateMergeRequestWidget', done => {
+        testAction(
+          actions.createNewNote,
+          { endpoint: `${gl.TEST_HOST}`, data: {} },
+          store.state,
+          [
+            {
+              type: 'ADD_NEW_NOTE',
+              payload: res,
+            },
+          ],
+          [
+            {
+              type: 'updateMergeRequestWidget',
+            },
+          ],
+          done,
+        );
+      });
+    });
+
+    describe('error', () => {
+      const res = {
+        errors: ['error'],
+      };
+      const interceptor = (request, next) => {
+        next(
+          request.respondWith(JSON.stringify(res), {
+            status: 200,
+          }),
+        );
+      };
+
+      beforeEach(() => {
+        Vue.http.interceptors.push(interceptor);
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
+      });
+
+      it('does not commit ADD_NEW_NOTE or dispatch updateMergeRequestWidget', done => {
+        testAction(
+          actions.createNewNote,
+          { endpoint: `${gl.TEST_HOST}`, data: {} },
+          store.state,
+          [],
+          [],
+          done,
+        );
+      });
+    });
+  });
+
+  describe('toggleResolveNote', () => {
+    const res = {
+      resolved: true,
+    };
+    const interceptor = (request, next) => {
+      next(
+        request.respondWith(JSON.stringify(res), {
+          status: 200,
+        }),
+      );
+    };
+
+    beforeEach(() => {
+      Vue.http.interceptors.push(interceptor);
+    });
+
+    afterEach(() => {
+      Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
+    });
+
+    describe('as note', () => {
+      it('commits UPDATE_NOTE and dispatches updateMergeRequestWidget', done => {
+        testAction(
+          actions.toggleResolveNote,
+          { endpoint: `${gl.TEST_HOST}`, isResolved: true, discussion: false },
+          store.state,
+          [
+            {
+              type: 'UPDATE_NOTE',
+              payload: res,
+            },
+          ],
+          [
+            {
+              type: 'updateMergeRequestWidget',
+            },
+          ],
+          done,
+        );
+      });
+    });
+
+    describe('as discussion', () => {
+      it('commits UPDATE_DISCUSSION and dispatches updateMergeRequestWidget', done => {
+        testAction(
+          actions.toggleResolveNote,
+          { endpoint: `${gl.TEST_HOST}`, isResolved: true, discussion: true },
+          store.state,
+          [
+            {
+              type: 'UPDATE_DISCUSSION',
+              payload: res,
+            },
+          ],
+          [
+            {
+              type: 'updateMergeRequestWidget',
+            },
+          ],
+          done,
+        );
+      });
+    });
+  });
+
+  describe('updateMergeRequestWidget', () => {
+    it('calls mrWidget checkStatus', () => {
+      spyOn(mrWidgetEventHub, '$emit');
+
+      actions.updateMergeRequestWidget();
+
+      expect(mrWidgetEventHub.$emit).toHaveBeenCalledWith('mr.discussion.updated');
+    });
+  });
 });