Props use objects with required & type values

7 files changed, 73 insertions, 23 deletions

diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js.es6 b/app/assets/javascripts/boards/components/issue_card_inner.js.es6
index 73db6480269..10b82ba0998 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.js.es6
+++ b/app/assets/javascripts/boards/components/issue_card_inner.js.es6
@@ -6,9 +6,24 @@
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.IssueCardInner = Vue.extend({
-    props: [
-      'issue', 'issueLinkBase', 'list', 'rootPath',
-    ],
+    props: {
+      issue: {
+        type: Object,
+        required: true,
+      },
+      issueLinkBase: {
+        type: String,
+        required: true,
+      },
+      list: {
+        type: Object,
+        required: false,
+      },
+      rootPath: {
+        type: String,
+        required: true,
+      },
+    },
     methods: {
       showLabel(label) {
         if (!this.list) return true;
diff --git a/app/assets/javascripts/boards/components/modal/empty_state.js.es6 b/app/assets/javascripts/boards/components/modal/empty_state.js.es6
index 93d250e07f5..7bd7c27b579 100644
--- a/app/assets/javascripts/boards/components/modal/empty_state.js.es6
+++ b/app/assets/javascripts/boards/components/modal/empty_state.js.es6
@@ -6,9 +6,16 @@
     data() {
       return ModalStore.store;
     },
-    props: [
-      'image', 'newIssuePath',
-    ],
+    props: {
+      image: {
+        type: String,
+        required: true,
+      },
+      newIssuePath: {
+        type: String,
+        required: true,
+      },
+    },
     computed: {
       contents() {
         const obj = {
diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index 4c0f21fa1d6..059e2416b05 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -41,7 +41,7 @@
       },
     },
     components: {
-      listsDropdown: gl.issueBoards.ModalFooterListsDropdown,
+      'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown,
     },
     template: `
       <footer
diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
index 4a1845e4580..63268fcdb3d 100644
--- a/app/assets/javascripts/boards/components/modal/header.js.es6
+++ b/app/assets/javascripts/boards/components/modal/header.js.es6
@@ -24,7 +24,7 @@
       },
     },
     components: {
-      modalTabs: gl.issueBoards.ModalTabs,
+      'modal-tabs': gl.issueBoards.ModalTabs,
     },
     template: `
       <div>
diff --git a/app/assets/javascripts/boards/components/modal/index.js.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6
index 612657753d5..43d2fa03d92 100644
--- a/app/assets/javascripts/boards/components/modal/index.js.es6
+++ b/app/assets/javascripts/boards/components/modal/index.js.es6
@@ -8,10 +8,24 @@
   const ModalStore = gl.issueBoards.ModalStore;
 
   gl.issueBoards.IssuesModal = Vue.extend({
-    props: [
-      'blankStateImage', 'newIssuePath', 'issueLinkBase',
-      'rootPath',
-    ],
+    props: {
+      blankStateImage: {
+        type: String,
+        required: true,
+      },
+      newIssuePath: {
+        type: String,
+        required: true,
+      },
+      issueLinkBase: {
+        type: String,
+        required: true,
+      },
+      rootPath: {
+        type: String,
+        required: true,
+      },
+    },
     data() {
       return ModalStore.store;
     },
@@ -76,10 +90,10 @@
       },
     },
     components: {
-      modalHeader: gl.issueBoards.IssuesModalHeader,
-      modalList: gl.issueBoards.ModalList,
-      modalFooter: gl.issueBoards.ModalFooter,
-      emptyState: gl.issueBoards.ModalEmptyState,
+      'modal-header': gl.issueBoards.IssuesModalHeader,
+      'modal-list': gl.issueBoards.ModalList,
+      'modal-footer': gl.issueBoards.ModalFooter,
+      'empty-state': gl.issueBoards.ModalEmptyState,
     },
     template: `
       <div
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index 8db1ab4df5e..ae3e405e70e 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -6,9 +6,16 @@
   const ModalStore = gl.issueBoards.ModalStore;
 
   gl.issueBoards.ModalList = Vue.extend({
-    props: [
-      'issueLinkBase', 'rootPath',
-    ],
+    props: {
+      issueLinkBase: {
+        type: String,
+        required: true,
+      },
+      rootPath: {
+        type: String,
+        required: true,
+      },
+    },
     data() {
       return ModalStore.store;
     },
@@ -94,7 +101,7 @@
       this.destroyMasonry();
     },
     components: {
-      issueCardInner: gl.issueBoards.IssueCardInner,
+      'issue-card-inner': gl.issueBoards.IssueCardInner,
     },
     template: `
       <section
diff --git a/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6 b/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6
index 70f7da17d49..124baaae42a 100644
--- a/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6
+++ b/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6
@@ -6,9 +6,16 @@
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.RemoveIssueBtn = Vue.extend({
-    props: [
-      'issue', 'list',
-    ],
+    props: {
+      issue: {
+        type: Object,
+        required: true,
+      },
+      list: {
+        type: Object,
+        required: true,
+      },
+    },
     methods: {
       removeIssue() {
         const lists = this.issue.getLists();