Use MR widget event_hub to dispatch update event

Instead of relying on a global method, we now emit an event on the MR
widget that tells it to check the status

4 files changed, 10 insertions, 9 deletions

diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index 17ff0a63833..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;
 
@@ -340,7 +341,7 @@ export const fetchDiscussionDiffLines = ({ commit }, discussion) =>
   });
 
 export const updateMergeRequestWidget = () => {
-  if (gl.mrWidget) gl.mrWidget.checkStatus();
+  mrWidgetEventHub.$emit('mr.discussion.updated');
 };
 
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
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/spec/javascripts/notes/stores/actions_spec.js b/spec/javascripts/notes/stores/actions_spec.js
index 350162d5bb6..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 {
@@ -501,13 +502,11 @@ describe('Actions Notes Store', () => {
 
   describe('updateMergeRequestWidget', () => {
     it('calls mrWidget checkStatus', () => {
-      gl.mrWidget = {
-        checkStatus: jasmine.createSpy('checkStatus'),
-      };
+      spyOn(mrWidgetEventHub, '$emit');
 
       actions.updateMergeRequestWidget();
 
-      expect(gl.mrWidget.checkStatus).toHaveBeenCalled();
+      expect(mrWidgetEventHub.$emit).toHaveBeenCalledWith('mr.discussion.updated');
     });
   });
 });