Merge branch 'vue2' into 'master'

Migration to Vuejs version 2

List of required changes for our Vue usages 

- `init` :arrow_right: `beforeCreate`
- `read` :arrow_right: `mounted`
- `$els` :arrow_right: `$refs`
- :no_entry_sign: `$remove` completely removed. :white_check_mark: Use `indexOf` and `splice`
- :no_entry_sign: HTML embedding with `{{{ }}}` is deprecated. :white_check_mark: Use `v-html`


See merge request !7254

24 files changed, 202 insertions, 164 deletions

diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index efb22d38513..7ba918a05f8 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -22,6 +22,8 @@ $(() => {
     gl.IssueBoardsApp.$destroy(true);
   }
 
+  Store.create();
+
   gl.IssueBoardsApp = new Vue({
     el: $boardApp,
     components: {
@@ -37,16 +39,15 @@ $(() => {
       issueLinkBase: $boardApp.dataset.issueLinkBase,
       detailIssue: Store.detail
     },
-    init: Store.create.bind(Store),
     computed: {
       detailIssueVisible () {
         return Object.keys(this.detailIssue.issue).length;
-      }
+      },
     },
     created () {
       gl.boardService = new BoardService(this.endpoint, this.boardId);
     },
-    ready () {
+    mounted () {
       Store.disabled = this.disabled;
       gl.boardService.all()
         .then((resp) => {
@@ -60,6 +61,8 @@ $(() => {
             }
           });
 
+          this.state.lists = _.sortBy(this.state.lists, 'position');
+
           Store.addBlankState();
           this.loading = false;
         });
@@ -70,6 +73,9 @@ $(() => {
     el: '#js-boards-seach',
     data: {
       filters: Store.state.filters
+    },
+    mounted () {
+      gl.issueBoards.newListDropdownInit();
     }
   });
 });
diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6
index 0e03d43872b..31de3b25284 100644
--- a/app/assets/javascripts/boards/components/board.js.es6
+++ b/app/assets/javascripts/boards/components/board.js.es6
@@ -10,6 +10,7 @@
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.Board = Vue.extend({
+    template: '#js-board-template',
     components: {
       'board-list': gl.issueBoards.BoardList,
       'board-delete': gl.issueBoards.BoardDelete,
@@ -24,7 +25,6 @@
       return {
         detailIssue: Store.detail,
         filters: Store.state.filters,
-        showIssueForm: false
       };
     },
     watch: {
@@ -58,10 +58,10 @@
     },
     methods: {
       showNewIssueForm() {
-        this.showIssueForm = !this.showIssueForm;
+        this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm;
       }
     },
-    ready () {
+    mounted () {
       const options = gl.issueBoards.getBoardSortableDefaultOptions({
         disabled: this.disabled,
         group: 'boards',
@@ -72,13 +72,9 @@
 
           if (e.newIndex !== undefined && e.oldIndex !== e.newIndex) {
             const order = this.sortable.toArray(),
-                  $board = this.$parent.$refs.board[e.oldIndex + 1],
-                  list = $board.list;
-
-            $board.$destroy(true);
+                  list = Store.findList('id', parseInt(e.item.dataset.id));
 
             this.$nextTick(() => {
-              Store.state.lists.splice(e.newIndex, 0, list);
               Store.moveList(list, order);
             });
           }
@@ -87,8 +83,5 @@
 
       this.sortable = Sortable.create(this.$el.parentNode, options);
     },
-    beforeDestroy () {
-      Store.state.lists.$remove(this.list);
-    }
   });
 })();
diff --git a/app/assets/javascripts/boards/components/board_blank_state.js.es6 b/app/assets/javascripts/boards/components/board_blank_state.js.es6
index 885553690d3..691487b272a 100644
--- a/app/assets/javascripts/boards/components/board_blank_state.js.es6
+++ b/app/assets/javascripts/boards/components/board_blank_state.js.es6
@@ -30,6 +30,8 @@
           });
         });
 
+        Store.state.lists = _.sortBy(Store.state.lists, 'position');
+
         // Save the labels
         gl.boardService.generateDefaultLists()
           .then((resp) => {
diff --git a/app/assets/javascripts/boards/components/board_card.js.es6 b/app/assets/javascripts/boards/components/board_card.js.es6
index 2f6c03e3538..b1afbe7d97e 100644
--- a/app/assets/javascripts/boards/components/board_card.js.es6
+++ b/app/assets/javascripts/boards/components/board_card.js.es6
@@ -6,6 +6,7 @@
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.BoardCard = Vue.extend({
+    template: '#js-board-list-card',
     props: {
       list: Object,
       issue: Object,
@@ -53,11 +54,6 @@
       mouseDown () {
         this.showDetail = true;
       },
-      mouseMove () {
-        if (this.showDetail) {
-          this.showDetail = false;
-        }
-      },
       showIssue (e) {
         const targetTagName = e.target.tagName.toLowerCase();
 
diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6
index 34fc7694241..379f4f0d72b 100644
--- a/app/assets/javascripts/boards/components/board_list.js.es6
+++ b/app/assets/javascripts/boards/components/board_list.js.es6
@@ -9,6 +9,7 @@
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.BoardList = Vue.extend({
+    template: '#js-board-list-template',
     components: {
       'board-card': gl.issueBoards.BoardCard,
       'board-new-issue': gl.issueBoards.BoardNewIssue
@@ -19,20 +20,20 @@
       issues: Array,
       loading: Boolean,
       issueLinkBase: String,
-      showIssueForm: Boolean
     },
     data () {
       return {
         scrollOffset: 250,
         filters: Store.state.filters,
-        showCount: false
+        showCount: false,
+        showIssueForm: false
       };
     },
     watch: {
       filters: {
         handler () {
           this.list.loadingMore = false;
-          this.$els.list.scrollTop = 0;
+          this.$refs.list.scrollTop = 0;
         },
         deep: true
       },
@@ -51,15 +52,20 @@
         });
       }
     },
+    computed: {
+      orderedIssues () {
+        return _.sortBy(this.issues, 'priority');
+      },
+    },
     methods: {
       listHeight () {
-        return this.$els.list.getBoundingClientRect().height;
+        return this.$refs.list.getBoundingClientRect().height;
       },
       scrollHeight () {
-        return this.$els.list.scrollHeight;
+        return this.$refs.list.scrollHeight;
       },
       scrollTop () {
-        return this.$els.list.scrollTop + this.listHeight();
+        return this.$refs.list.scrollTop + this.listHeight();
       },
       loadNextPage () {
         const getIssues = this.list.nextPage();
@@ -72,7 +78,7 @@
         }
       },
     },
-    ready () {
+    mounted () {
       const options = gl.issueBoards.getBoardSortableDefaultOptions({
         group: 'issues',
         sort: false,
@@ -81,23 +87,27 @@
         onStart: (e) => {
           const card = this.$refs.issue[e.oldIndex];
 
+          card.showDetail = false;
           Store.moving.issue = card.issue;
           Store.moving.list = card.list;
 
           gl.issueBoards.onStart();
         },
         onAdd: (e) => {
-          gl.issueBoards.BoardsStore.moveIssueToList(Store.moving.list, this.list, Store.moving.issue);
+          // Add the element back to original list to allow Vue to handle DOM updates
+          e.from.appendChild(e.item);
+
+          this.$nextTick(() => {
+            // Update the issues once we know the element has been moved
+            gl.issueBoards.BoardsStore.moveIssueToList(Store.moving.list, this.list, Store.moving.issue);
+          });
         },
-        onRemove: (e) => {
-          this.$refs.issue[e.oldIndex].$destroy(true);
-        }
       });
 
-      this.sortable = Sortable.create(this.$els.list, options);
+      this.sortable = Sortable.create(this.$refs.list, options);
 
       // Scroll event on list to load more
-      this.$els.list.onscroll = () => {
+      this.$refs.list.onscroll = () => {
         if ((this.scrollTop() > this.scrollHeight() - this.scrollOffset) && !this.list.loadingMore) {
           this.loadNextPage();
         }
diff --git a/app/assets/javascripts/boards/components/board_new_issue.js.es6 b/app/assets/javascripts/boards/components/board_new_issue.js.es6
index 7fc0bfd56f3..a7989a2ff4c 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.js.es6
+++ b/app/assets/javascripts/boards/components/board_new_issue.js.es6
@@ -7,7 +7,6 @@
   gl.issueBoards.BoardNewIssue = Vue.extend({
     props: {
       list: Object,
-      showIssueForm: Boolean
     },
     data() {
       return {
@@ -15,11 +14,6 @@
         error: false
       };
     },
-    watch: {
-      showIssueForm () {
-        this.$els.input.focus();
-      }
-    },
     methods: {
       submit(e) {
         e.preventDefault();
@@ -37,28 +31,30 @@
         this.list.newIssue(issue)
           .then((data) => {
             // Need this because our jQuery very kindly disables buttons on ALL form submissions
-            $(this.$els.submitButton).enable();
+            $(this.$refs.submitButton).enable();
 
             Store.detail.issue = issue;
           })
           .catch(() => {
             // Need this because our jQuery very kindly disables buttons on ALL form submissions
-            $(this.$els.submitButton).enable();
+            $(this.$refs.submitButton).enable();
 
             // Remove the issue
             this.list.removeIssue(issue);
 
             // Show error message
             this.error = true;
-            this.showIssueForm = true;
           });
 
         this.cancel();
       },
       cancel() {
-        this.showIssueForm = false;
         this.title = '';
+        this.$parent.showIssueForm = false;
       }
-    }
+    },
+    mounted() {
+      this.$refs.input.focus();
+    },
   });
 })();
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js.es6 b/app/assets/javascripts/boards/components/board_sidebar.js.es6
index 4928320d015..d5cb6164e0b 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js.es6
+++ b/app/assets/javascripts/boards/components/board_sidebar.js.es6
@@ -41,7 +41,7 @@
         this.detail.issue = {};
       }
     },
-    ready () {
+    mounted () {
       new IssuableContext(this.currentUser);
       new MilestoneSelect();
       new gl.DueDateSelectors();
diff --git a/app/assets/javascripts/boards/components/new_list_dropdown.js.es6 b/app/assets/javascripts/boards/components/new_list_dropdown.js.es6
index 14f618fd5d5..10ce746deb5 100644
--- a/app/assets/javascripts/boards/components/new_list_dropdown.js.es6
+++ b/app/assets/javascripts/boards/components/new_list_dropdown.js.es6
@@ -1,5 +1,8 @@
 /* eslint-disable */
-$(() => {
+(() => {
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
   const Store = gl.issueBoards.BoardsStore;
 
   $(document).off('created.label').on('created.label', (e, label) => {
@@ -15,54 +18,58 @@ $(() => {
     });
   });
 
-  $('.js-new-board-list').each(function () {
-    const $this = $(this);
-    new gl.CreateLabelDropdown($this.closest('.dropdown').find('.dropdown-new-label'), $this.data('namespace-path'), $this.data('project-path'));
+  gl.issueBoards.newListDropdownInit = () => {
+    $('.js-new-board-list').each(function () {
+      const $this = $(this);
+      new gl.CreateLabelDropdown($this.closest('.dropdown').find('.dropdown-new-label'), $this.data('namespace-path'), $this.data('project-path'));
 
-    $this.glDropdown({
-      data(term, callback) {
-        $.get($this.attr('data-labels'))
-          .then((resp) => {
-            callback(resp);
-          });
-      },
-      renderRow (label) {
-        const active = Store.findList('title', label.title),
-              $li = $('<li />'),
-              $a = $('<a />', {
-                class: (active ? `is-active js-board-list-${active.id}` : ''),
-                text: label.title,
-                href: '#'
-              }),
-              $labelColor = $('<span />', {
-                class: 'dropdown-label-box',
-                style: `background-color: ${label.color}`
-              });
+      $this.glDropdown({
+        data(term, callback) {
+          $.get($this.attr('data-labels'))
+            .then((resp) => {
+              callback(resp);
+            });
+        },
+        renderRow (label) {
+          const active = Store.findList('title', label.title),
+                $li = $('<li />'),
+                $a = $('<a />', {
+                  class: (active ? `is-active js-board-list-${active.id}` : ''),
+                  text: label.title,
+                  href: '#'
+                }),
+                $labelColor = $('<span />', {
+                  class: 'dropdown-label-box',
+                  style: `background-color: ${label.color}`
+                });
 
-        return $li.append($a.prepend($labelColor));
-      },
-			search: {
-				fields: ['title']
-			},
-			filterable: true,
-      selectable: true,
-      multiSelect: true,
-      clicked (label, $el, e) {
-        e.preventDefault();
+          return $li.append($a.prepend($labelColor));
+        },
+  			search: {
+  				fields: ['title']
+  			},
+  			filterable: true,
+        selectable: true,
+        multiSelect: true,
+        clicked (label, $el, e) {
+          e.preventDefault();
 
-        if (!Store.findList('title', label.title)) {
-          Store.new({
-            title: label.title,
-            position: Store.state.lists.length - 2,
-            list_type: 'label',
-            label: {
-              id: label.id,
+          if (!Store.findList('title', label.title)) {
+            Store.new({
               title: label.title,
-              color: label.color
-            }
-          });
+              position: Store.state.lists.length - 2,
+              list_type: 'label',
+              label: {
+                id: label.id,
+                title: label.title,
+                color: label.color
+              }
+            });
+
+            Store.state.lists = _.sortBy(Store.state.lists, 'position');
+          }
         }
-      }
+      });
     });
-  });
-});
+  };
+})();
diff --git a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6 b/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
index db9a5a8e40a..5f99de39122 100644
--- a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
+++ b/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
@@ -23,7 +23,7 @@
       fallbackOnBody: true,
       ghostClass: 'is-ghost',
       filter: '.board-delete, .btn',
-      delay: gl.issueBoards.touchEnabled ? 100 : 50,
+      delay: gl.issueBoards.touchEnabled ? 100 : 0,
       scrollSensitivity: gl.issueBoards.touchEnabled ? 60 : 100,
       scrollSpeed: 20,
       onStart: gl.issueBoards.onStart,
diff --git a/app/assets/javascripts/boards/models/list.js.es6 b/app/assets/javascripts/boards/models/list.js.es6
index b331a26fed5..8a7dc67409e 100644
--- a/app/assets/javascripts/boards/models/list.js.es6
+++ b/app/assets/javascripts/boards/models/list.js.es6
@@ -42,7 +42,8 @@ class List {
   }
 
   destroy () {
-    gl.issueBoards.BoardsStore.state.lists.$remove(this);
+    const index = gl.issueBoards.BoardsStore.state.lists.indexOf(this);
+    gl.issueBoards.BoardsStore.state.lists.splice(index, 1);
     gl.issueBoards.BoardsStore.updateNewListDropdown(this.id);
 
     gl.boardService.destroyList(this.id);
diff --git a/app/assets/javascripts/boards/stores/boards_store.js.es6 b/app/assets/javascripts/boards/stores/boards_store.js.es6
index 175e034afed..6bc95aa60f2 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js.es6
+++ b/app/assets/javascripts/boards/stores/boards_store.js.es6
@@ -39,6 +39,8 @@
           // Remove any new issues from the backlog
           // as they will be visible in the new list
           list.issues.forEach(backlogList.removeIssue.bind(backlogList));
+
+          this.state.lists = _.sortBy(this.state.lists, 'position');
         });
       this.removeBlankState();
     },
@@ -58,6 +60,8 @@
         title: 'Welcome to your Issue Board!',
         position: 0
       });
+
+      this.state.lists = _.sortBy(this.state.lists, 'position');
     },
     removeBlankState () {
       this.removeList('blank');
diff --git a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js.es6 b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js.es6
index 29a12a2395b..52e2846d279 100644
--- a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js.es6
+++ b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js.es6
@@ -1,9 +1,13 @@
 /* eslint-disable */
-((w) => {
-  w.CommentAndResolveBtn = Vue.extend({
+(() => {
+  const CommentAndResolveBtn = Vue.extend({
     props: {
       discussionId: String,
-      textareaIsEmpty: Boolean
+    },
+    data() {
+      return {
+        textareaIsEmpty: true
+      }
     },
     computed: {
       discussion: function () {
@@ -35,7 +39,7 @@
         }
       }
     },
-    ready: function () {
+    mounted: function () {
       const $textarea = $(`#new-discussion-note-form-${this.discussionId} .note-textarea`);
       this.textareaIsEmpty = $textarea.val() === '';
 
@@ -47,4 +51,6 @@
       $(`#new-discussion-note-form-${this.discussionId} .note-textarea`).off('input.comment-and-resolve-btn');
     }
   });
+
+  Vue.component('comment-and-resolve-btn', CommentAndResolveBtn);
 })(window);
diff --git a/app/assets/javascripts/diff_notes/components/resolve_btn.js.es6 b/app/assets/javascripts/diff_notes/components/resolve_btn.js.es6
index bcc052c7c8c..27af9fc96ad 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_btn.js.es6
+++ b/app/assets/javascripts/diff_notes/components/resolve_btn.js.es6
@@ -1,6 +1,6 @@
 /* eslint-disable */
-((w) => {
-  w.ResolveBtn = Vue.extend({
+(() => {
+  const ResolveBtn = Vue.extend({
     props: {
       noteId: Number,
       discussionId: String,
@@ -54,7 +54,7 @@
     },
     methods: {
       updateTooltip: function () {
-        $(this.$els.button)
+        $(this.$refs.button)
           .tooltip('hide')
           .tooltip('fixTitle');
       },
@@ -89,8 +89,8 @@
         });
       }
     },
-    compiled: function () {
-      $(this.$els.button).tooltip({
+    mounted: function () {
+      $(this.$refs.button).tooltip({
         container: 'body'
       });
     },
@@ -101,4 +101,6 @@
       CommentsStore.create(this.discussionId, this.noteId, this.canResolve, this.resolved, this.resolvedBy);
     }
   });
-})(window);
+
+  Vue.component('resolve-btn', ResolveBtn);
+})();
diff --git a/app/assets/javascripts/diff_notes/components/resolve_count.js.es6 b/app/assets/javascripts/diff_notes/components/resolve_count.js.es6
index 24a99e23132..9522ccb49da 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_count.js.es6
+++ b/app/assets/javascripts/diff_notes/components/resolve_count.js.es6
@@ -13,6 +13,9 @@
     computed: {
       allResolved: function () {
         return this.resolvedDiscussionCount === this.discussionCount;
+      },
+      resolvedCountText() {
+        return this.discussionCount === 1 ? 'discussion' : 'discussions';
       }
     }
   });
diff --git a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6 b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6
index 060034f049b..b945a09fcbe 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6
+++ b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6
@@ -1,6 +1,6 @@
 /* eslint-disable */
-((w) => {
-  w.ResolveDiscussionBtn = Vue.extend({
+(() => {
+  const ResolveDiscussionBtn = Vue.extend({
     props: {
       discussionId: String,
       mergeRequestId: Number,
@@ -54,4 +54,6 @@
       CommentsStore.createDiscussion(this.discussionId, this.canResolve);
     }
   });
-})(window);
+
+  Vue.component('resolve-discussion-btn', ResolveDiscussionBtn);
+})();
diff --git a/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6 b/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6
index 6149bfd052a..bd4c20aed8b 100644
--- a/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6
+++ b/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6
@@ -8,24 +8,35 @@
 //= require_directory ./components
 
 $(() => {
-  window.DiffNotesApp = new Vue({
-    el: '#diff-notes-app',
-    components: {
-      'resolve-btn': ResolveBtn,
-      'resolve-discussion-btn': ResolveDiscussionBtn,
-      'comment-and-resolve-btn': CommentAndResolveBtn
-    },
-    methods: {
-      compileComponents: function () {
-        const $components = $('resolve-btn, resolve-discussion-btn, jump-to-discussion');
-        if ($components.length) {
-          $components.each(function () {
-            DiffNotesApp.$compile($(this).get(0));
-          });
+  const COMPONENT_SELECTOR = 'resolve-btn, resolve-discussion-btn, jump-to-discussion, comment-and-resolve-btn';
+
+  window.gl = window.gl || {};
+  window.gl.diffNoteApps = {};
+
+  gl.diffNotesCompileComponents = () => {
+    const $components = $(COMPONENT_SELECTOR).filter(function () {
+      return $(this).closest('resolve-count').length !== 1;
+    });
+
+    if ($components) {
+      $components.each(function () {
+        const $this = $(this);
+        const noteId = $this.attr(':note-id');
+        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',
diff --git a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js.es6 b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js.es6
index 6da3942ea52..9e4ffd07dbd 100644
--- a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js.es6
+++ b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js.es6
@@ -36,7 +36,7 @@
         this.loadEditor();
       }
     },
-    ready() {
+    mounted() {
       if (this.file.loadEditor) {
         this.loadEditor();
       }
diff --git a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_line.js.es6 b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_line.js.es6
deleted file mode 100644
index 797850262cc..00000000000
--- a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_line.js.es6
+++ /dev/null
@@ -1,15 +0,0 @@
-/* eslint-disable */
-((global) => {
-
-  global.mergeConflicts = global.mergeConflicts || {};
-
-  global.mergeConflicts.parallelConflictLine = Vue.extend({
-    props: {
-      file: Object,
-      line: Object
-    },
-    mixins: [global.mergeConflicts.utils, global.mergeConflicts.actions],
-    template: '#parallel-conflict-line'
-  });
-
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js.es6 b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js.es6
index 1b3e9901f1e..4ccbdcd6daa 100644
--- a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js.es6
+++ b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js.es6
@@ -7,10 +7,22 @@
     props: {
       file: Object
     },
-    mixins: [global.mergeConflicts.utils],
-    components: {
-      'parallel-conflict-line': gl.mergeConflicts.parallelConflictLine
-    }
+    mixins: [global.mergeConflicts.utils, global.mergeConflicts.actions],
+    template: `
+      <table>
+        <tr class="line_holder parallel" v-for="section in file.parallelLines">
+          <template v-for="line in section">
+            <td class="diff-line-num header" :class="lineCssClass(line)" v-if="line.isHeader"></td>
+            <td class="line_content header" :class="lineCssClass(line)" v-if="line.isHeader">
+              <strong>{{line.richText}}</strong>
+              <button class="btn" @click="handleSelected(file, line.id, line.section)">{{line.buttonTitle}}</button>
+            </td>
+            <td class="diff-line-num old_line" :class="lineCssClass(line)" v-if="!line.isHeader">{{line.lineNumber}}</td>
+            <td class="line_content parallel" :class="lineCssClass(line)" v-if="!line.isHeader" v-html="line.richText"></td>
+          </template> 
+        </tr>
+      </table>
+    `,
   });
 
 })(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js.es6 b/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js.es6
index 222a5dcfc2e..815443fb54e 100644
--- a/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js.es6
+++ b/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js.es6
@@ -6,7 +6,6 @@
 //= require ./mixins/line_conflict_actions
 //= require ./components/diff_file_editor
 //= require ./components/inline_conflict_lines
-//= require ./components/parallel_conflict_line
 //= require ./components/parallel_conflict_lines
 
 $(() => {
@@ -49,7 +48,7 @@ $(() => {
           mergeConflictsStore.setLoadingState(false);
 
           this.$nextTick(() => {
-            $(conflictsEl.querySelectorAll('.js-syntax-highlight')).syntaxHighlight();
+            $('.js-syntax-highlight').syntaxHighlight();
           });
         });
     },
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index f06b10a9cf7..5ca4b34909a 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -227,8 +227,8 @@
           return function(data) {
             $('#diffs').html(data.html);
 
-            if (typeof DiffNotesApp !== 'undefined') {
-              DiffNotesApp.compileComponents();
+            if (typeof gl.diffNotesCompileComponents !== 'undefined') {
+              gl.diffNotesCompileComponents();
             }
 
             gl.utils.localTimeAgo($('.js-timeago', 'div#diffs'));
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 4976eef2896..df7e316ca6c 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -325,8 +325,8 @@
         discussionContainer.append(note_html);
       }
 
-      if (typeof DiffNotesApp !== 'undefined') {
-        DiffNotesApp.compileComponents();
+      if (typeof gl.diffNotesCompileComponents !== 'undefined') {
+        gl.diffNotesCompileComponents();
       }
 
       gl.utils.localTimeAgo($('.js-timeago', note_html), false);
@@ -466,8 +466,8 @@
 
       $note_li.replaceWith($html);
 
-      if (typeof DiffNotesApp !== 'undefined') {
-        DiffNotesApp.compileComponents();
+      if (typeof gl.diffNotesCompileComponents !== 'undefined') {
+        gl.diffNotesCompileComponents();
       }
     };
 
@@ -559,11 +559,9 @@
           note = $(el);
           notes = note.closest(".notes");
 
-          if (typeof DiffNotesApp !== "undefined" && DiffNotesApp !== null) {
-            ref = DiffNotesApp.$refs[noteId];
-
-            if (ref) {
-              ref.$destroy(true);
+          if (typeof gl.diffNotesCompileComponents !== 'undefined') {
+            if (gl.diffNoteApps[noteId]) {
+              gl.diffNoteApps[noteId].$destroy();
             }
           }
 
@@ -643,11 +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.$compile($commentBtn.get(0));
+
+        gl.diffNotesCompileComponents();
       }
 
       form.find(".js-note-text").focus();
diff --git a/app/assets/javascripts/single_file_diff.js b/app/assets/javascripts/single_file_diff.js
index 8e54ca4f0dc..01ccbe5b987 100644
--- a/app/assets/javascripts/single_file_diff.js
+++ b/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') {
-          DiffNotesApp.compileComponents();
+        if (typeof gl.diffNotesCompileComponents !== 'undefined') {
+          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') {
-          DiffNotesApp.compileComponents();
+        if (typeof gl.diffNotesCompileComponents !== 'undefined') {
+          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') {
-            DiffNotesApp.compileComponents();
+          if (typeof gl.diffNotesCompileComponents !== 'undefined') {
+            gl.diffNotesCompileComponents();
           }
 
           if (cb) cb();
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 47a7e84b5c6..4f5753f6fc6 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -166,8 +166,12 @@
   }
 }
 
-.board-list {
+.board-list-component {
   height: calc(100% - 49px);
+}
+
+.board-list {
+  height: 100%;
   margin-bottom: 0;
   padding: 5px;
   list-style: none;
@@ -175,7 +179,7 @@
   overflow-x: hidden;
 
   &.is-smaller {
-    height: calc(100% - 185px);
+    height: calc(100% - 136px);
   }
 }