Changed how resolving notes is rendered

Vue2 was taking the template out & then appending again. This changes that

app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6

@@ -8,25 +8,31 @@
 //= require_directory ./components
 
 $(() => {
-  window.DiffNotesApp = new Vue({
+  window.gl = window.gl || {};
-    el: '#diff-notes-app',
+  window.gl.diffNoteApps = {};
-    methods: {
-      compileComponents: function () {
-        const $components = $('resolve-btn, resolve-discussion-btn, jump-to-discussion, comment-and-resolve-btn');
 
-        if ($components.length) {
+  gl.diffNotesCompileComponents = () => {
-          $components.each(function () {
+    const $components = $('resolve-btn, resolve-discussion-btn, jump-to-discussion, comment-and-resolve-btn');
-            const $this = $(this);
+
-            const tmp = Vue.extend({
+    if ($components) {
-              template: $this.get(0).outerHTML,
+      $components.each(function () {
-              parent: DiffNotesApp,
+        const $this = $(this);
-            });
+        const noteId = $this.attr(':note-id');
-            $this.replaceWith(new tmp().$mount().$el);
+        const tmp = Vue.extend({
-          });
+          template: $this.get(0).outerHTML
+        });
+        const tmpApp = new tmp().$mount();
+
+        if (noteId) {
+          gl.diffNoteApps[`note_${noteId}`] = tmpApp;
         }
-      }
+
+        $this.replaceWith(tmpApp.$el);
+      });
     }
-  });
+  };
+
+  gl.diffNotesCompileComponents();
 
   new Vue({
     el: '#resolve-count-app',

app/assets/javascripts/merge_request_tabs.js

@@ -227,8 +227,8 @@
           return function(data) {
             $('#diffs').html(data.html);
 
-            if (typeof DiffNotesApp !== 'undefined') {
+            if (typeof gl.diffNotesCompileComponents !== 'undefined') {
-              DiffNotesApp.compileComponents();
+              gl.diffNotesCompileComponents();
             }
 
             gl.utils.localTimeAgo($('.js-timeago', 'div#diffs'));

app/assets/javascripts/notes.js

@@ -325,8 +325,8 @@
         discussionContainer.append(note_html);
       }
 
-      if (typeof DiffNotesApp !== 'undefined') {
+      if (typeof gl.diffNotesCompileComponents !== 'undefined') {
-        DiffNotesApp.compileComponents();
+        gl.diffNotesCompileComponents();
       }
 
       gl.utils.localTimeAgo($('.js-timeago', note_html), false);
@@ -466,8 +466,8 @@
 
       $note_li.replaceWith($html);
 
-      if (typeof DiffNotesApp !== 'undefined') {
+      if (typeof gl.diffNotesCompileComponents !== 'undefined') {
-        DiffNotesApp.compileComponents();
+        gl.diffNotesCompileComponents();
       }
     };
 
@@ -559,11 +559,9 @@
           note = $(el);
           notes = note.closest(".notes");
 
-          if (typeof DiffNotesApp !== "undefined" && DiffNotesApp !== null) {
+          if (typeof gl.diffNotesCompileComponents !== 'undefined') {
-            ref = DiffNotesApp.$refs[noteId];
+            if (gl.diffNoteApps[noteId]) {
-
+              gl.diffNoteApps[noteId].$destroy();
-            if (ref) {
-              ref.$destroy(true);
             }
           }
 
@@ -643,12 +641,12 @@
       form.find('.js-note-target-close').remove();
       this.setupNoteForm(form);
 
-      if (typeof DiffNotesApp !== 'undefined') {
+      if (typeof gl.diffNotesCompileComponents !== 'undefined') {
         var $commentBtn = form.find('comment-and-resolve-btn');
         $commentBtn
           .attr(':discussion-id', "'" + dataHolder.data('discussionId') + "'");
 
-        DiffNotesApp.compileComponents();
+        gl.diffNotesCompileComponents();
       }
 
       form.find(".js-note-text").focus();

app/assets/javascripts/single_file_diff.js

@@ -45,15 +45,15 @@
         this.content.hide();
         this.$toggleIcon.addClass('fa-caret-right').removeClass('fa-caret-down');
         this.collapsedContent.show();
-        if (typeof DiffNotesApp !== 'undefined') {
+        if (typeof gl.diffNotesCompileComponents !== 'undefined') {
-          DiffNotesApp.compileComponents();
+          gl.diffNotesCompileComponents();
         }
       } else if (this.content) {
         this.collapsedContent.hide();
         this.content.show();
         this.$toggleIcon.addClass('fa-caret-down').removeClass('fa-caret-right');
-        if (typeof DiffNotesApp !== 'undefined') {
+        if (typeof gl.diffNotesCompileComponents !== 'undefined') {
-          DiffNotesApp.compileComponents();
+          gl.diffNotesCompileComponents();
         }
       } else {
         this.$toggleIcon.addClass('fa-caret-down').removeClass('fa-caret-right');
@@ -76,8 +76,8 @@
           }
           _this.collapsedContent.after(_this.content);
 
-          if (typeof DiffNotesApp !== 'undefined') {
+          if (typeof gl.diffNotesCompileComponents !== 'undefined') {
-            DiffNotesApp.compileComponents();
+            gl.diffNotesCompileComponents();
           }
 
           if (cb) cb();