Declare approval component propTypes.

app/assets/javascripts/merge_request_widget/approvals/components/approvals_body.js.es6

@@ -5,7 +5,28 @@
 (() => {
   Vue.component('approvals-body', {
     name: 'approvals-body',
-    props: ['approvedBy', 'approvalsLeft', 'userCanApprove', 'userHasApproved', 'suggestedApprovers', 'widgetLoading'],
+    props: {
+      approvedBy: {
+        type: Array,
+        required: false,
+      },
+      approvalsLeft: {
+        type: Number,
+        required: false,
+      },
+      userCanApprove: {
+        type: Boolean,
+        required: false,
+      },
+      userHasApproved: {
+        type: Boolean,
+        required: false,
+      } ,
+      suggestedApprovers: {
+        type: Array,
+        required: false,
+      }
+    },
     computed: {
       approvalsRequiredStringified() {
         const baseString = `${this.approvalsLeft} more approval`;

app/assets/javascripts/merge_request_widget/approvals/components/approvals_footer.js.es6

@@ -5,7 +5,36 @@
 (() => {
   Vue.component('approvals-footer', {
     name: 'approvals-footer',
-    props: ['userCanApprove', 'userHasApproved', 'approvedBy', 'approvalsLeft', 'pendingAvatarSvg', 'checkmarkSvg'],
+    props: {
+      approvedBy: {
+        type: Array,
+        required: false,
+      },
+      approvalsLeft: {
+        type: Number,
+        required: false,
+      },
+      userCanApprove: {
+        type: Boolean,
+        required: false,
+      },
+      userHasApproved: {
+        type: Boolean,
+        required: false,
+      } ,
+      suggestedApprovers: {
+        type: Array,
+        required: false,
+      },
+      pendingAvatarSvg: {
+        type: String,
+        required: true,
+      },
+      checkmarkSvg: {
+        type: String,
+        required: true,
+      }
+    },
     computed: {
       hasApprovers() {
         return this.approvedBy && this.approvedBy.length;