Moved issue board components from being global

6 files changed, 39 insertions, 16 deletions

diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index 6a83785aa50..7944f53d13a 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -5,7 +5,8 @@
 //= require_tree ./stores
 //= require_tree ./services
 //= require_tree ./mixins
-//= require_tree ./components
+//= require ./components/board
+//= require ./components/new_list_dropdown
 
 $(() => {
   const $boardApp = $('#board-app');
@@ -18,6 +19,9 @@ $(() => {
 
   gl.IssueBoardsApp = new Vue({
     el: $boardApp.get(0),
+    components: {
+      'board': gl.issueBoards.Board
+    },
     data: {
       state: gl.issueBoards.BoardsStore.state,
       loading: true,
diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6
index f872d7f4b3f..989c1d3d8ba 100644
--- a/app/assets/javascripts/boards/components/board.js.es6
+++ b/app/assets/javascripts/boards/components/board.js.es6
@@ -1,5 +1,17 @@
+//= require ./board_blank_state
+//= require ./board_delete
+//= require ./board_list
+
 (() => {
-  const Board = Vue.extend({
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.Board = Vue.extend({
+    components: {
+      'board-list': gl.issueBoards.BoardList,
+      'board-delete': gl.issueBoards.BoardDelete,
+      'board-blank-state': gl.issueBoards.BoardBlankState
+    },
     props: {
       list: Object,
       disabled: Boolean,
@@ -67,6 +79,4 @@
       this.sortable.destroy();
     }
   });
-
-  Vue.component('board', Board)
 })();
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 5a189f5b4a9..15da0fafe74 100644
--- a/app/assets/javascripts/boards/components/board_blank_state.js.es6
+++ b/app/assets/javascripts/boards/components/board_blank_state.js.es6
@@ -1,5 +1,8 @@
 (() => {
-  const BoardBlankState = Vue.extend({
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.BoardBlankState = Vue.extend({
     data () {
       return {
         predefinedLabels: [
@@ -49,6 +52,4 @@
       }
     }
   });
-
-  Vue.component('board-blank-state', BoardBlankState);
 })();
diff --git a/app/assets/javascripts/boards/components/board_card.js.es6 b/app/assets/javascripts/boards/components/board_card.js.es6
index 481116d21d2..f3a324fc3d3 100644
--- a/app/assets/javascripts/boards/components/board_card.js.es6
+++ b/app/assets/javascripts/boards/components/board_card.js.es6
@@ -1,5 +1,8 @@
 (() => {
-  const BoardCard = Vue.extend({
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.BoardCard = Vue.extend({
     props: {
       list: Object,
       issue: Object,
@@ -34,6 +37,4 @@
       }
     }
   });
-
-  Vue.component('board-card', BoardCard);
 })();
diff --git a/app/assets/javascripts/boards/components/board_delete.js.es6 b/app/assets/javascripts/boards/components/board_delete.js.es6
index 5d1de715a26..ad6a320f086 100644
--- a/app/assets/javascripts/boards/components/board_delete.js.es6
+++ b/app/assets/javascripts/boards/components/board_delete.js.es6
@@ -1,5 +1,8 @@
 (() => {
-  const BoardDelete = Vue.extend({
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.BoardDelete = Vue.extend({
     props: {
       list: Object
     },
@@ -14,6 +17,4 @@
       }
     }
   });
-
-  Vue.component('board-delete', BoardDelete);
 })();
diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6
index 5a0b1caf51d..39c936ac81e 100644
--- a/app/assets/javascripts/boards/components/board_list.js.es6
+++ b/app/assets/javascripts/boards/components/board_list.js.es6
@@ -1,5 +1,13 @@
+//= require ./board_card
+
 (() => {
-  const BoardList = Vue.extend({
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.BoardList = Vue.extend({
+    components: {
+      'board-card': gl.issueBoards.BoardCard
+    },
     props: {
       disabled: Boolean,
       list: Object,
@@ -78,6 +86,4 @@
       this.sortable.destroy();
     }
   });
-
-  Vue.component('board-list', BoardList);
 })();