Re-compile merge request Vue app after jQuery ajax

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/27134

app/assets/javascripts/merge_request_widget.js.es6

@@ -150,6 +150,11 @@ require('./smart_interval');
 
         $('.mr-widget-body').replaceWith($html.find('.mr-widget-body'));
         $('.mr-widget-footer').replaceWith($html.find('.mr-widget-footer'));
+        $('.approvals-components').replaceWith($html.find('.approvals-components'));
+
+        if (gl.compileApprovalsWidget) {
+          gl.compileApprovalsWidget();
+        }
       });
     };
 

app/assets/javascripts/merge_request_widget/ci_bundle.js.es6

@@ -46,7 +46,7 @@
       .on('click', '.js-rebase-button', () => {
         $('.js-rebase-button').html("<i class='fa fa-spinner fa-spin'></i> Rebase in progress");
       });
-    } else if (!$('.mr-approvals-footer').length) {
+    } else {
       // getMergeStatus replaces the MR widget with new, updated HTML, which means any persistent
       // event management gets clobbered. When the MR is approvable, MR status is already managed
       // and breaks when the DOM is clobbered.

app/assets/javascripts/merge_request_widget/widget_bundle.js.es6

@@ -6,11 +6,22 @@ require('./approvals/approvals_bundle');
 window.gl = window.gl || {};
 
 $(() => {
+  let widgetSharedStore;
+
+  gl.compileApprovalsWidget = () => {
     const rootEl = document.getElementById('merge-request-widget-app');
-  const widgetSharedStore = new gl.MergeRequestWidgetStore(rootEl);
+
+    if (gl.MergeRequestWidgetApp) {
+      gl.MergeRequestWidgetApp.$destroy();
+    } else {
+      widgetSharedStore = new gl.MergeRequestWidgetStore(rootEl);
+    }
 
     gl.MergeRequestWidgetApp = new Vue({
       el: rootEl,
       data: widgetSharedStore.data,
     });
+  };
+
+  gl.compileApprovalsWidget();
 });

changelogs/unreleased-ee/mr-stuck-checking-fix.yml

+---
+title: Fixed merge request state not updating when approvals feature is active
+merge_request:
+author: