Handle both snake_case & camelCase propsce-10795-add-epic-tree

2 files changed, 17 insertions, 4 deletions

diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_assignees.vue b/app/assets/javascripts/vue_shared/components/issue/issue_assignees.vue
index 7e79e63aa1e..715cf97f0ac 100644
--- a/app/assets/javascripts/vue_shared/components/issue/issue_assignees.vue
+++ b/app/assets/javascripts/vue_shared/components/issue/issue_assignees.vue
@@ -62,6 +62,15 @@ export default {
         assigneeName: assignee.name,
       });
     },
+    // This method is for backward compat
+    // since Graph query would return camelCase
+    // props while Rails would return snake_case
+    webUrl(assignee) {
+      return assignee.web_url || assignee.webUrl;
+    },
+    avatarUrl(assignee) {
+      return assignee.avatar_url || assignee.avatarUrl;
+    },
   },
 };
 </script>
@@ -70,9 +79,9 @@ export default {
     <user-avatar-link
       v-for="assignee in assigneesToShow"
       :key="assignee.id"
-      :link-href="assignee.web_url"
+      :link-href="webUrl(assignee)"
       :img-alt="avatarUrlTitle(assignee)"
-      :img-src="assignee.avatar_url"
+      :img-src="avatarUrl(assignee)"
       :img-size="24"
       class="js-no-trigger"
       tooltip-placement="bottom"
diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_milestone.vue b/app/assets/javascripts/vue_shared/components/issue/issue_milestone.vue
index 53e6efa6ea3..9b2ee5062b1 100644
--- a/app/assets/javascripts/vue_shared/components/issue/issue_milestone.vue
+++ b/app/assets/javascripts/vue_shared/components/issue/issue_milestone.vue
@@ -19,10 +19,14 @@ export default {
   },
   computed: {
     milestoneDue() {
-      return this.milestone.due_date ? parsePikadayDate(this.milestone.due_date) : null;
+      const dueDate = this.milestone.due_date || this.milestone.dueDate;
+
+      return dueDate ? parsePikadayDate(dueDate) : null;
     },
     milestoneStart() {
-      return this.milestone.start_date ? parsePikadayDate(this.milestone.start_date) : null;
+      const startDate = this.milestone.start_date || this.milestone.startDate;
+
+      return startDate ? parsePikadayDate(startDate) : null;
     },
     isMilestoneStarted() {
       if (!this.milestoneStart) {