#28481: Display time tracking totals on milestone page

5 files changed, 47 insertions, 15 deletions

diff --git a/app/assets/javascripts/pages/dashboard/milestones/show/index.js b/app/assets/javascripts/pages/dashboard/milestones/show/index.js
index 06195d73c0a..397149aaa9e 100644
--- a/app/assets/javascripts/pages/dashboard/milestones/show/index.js
+++ b/app/assets/javascripts/pages/dashboard/milestones/show/index.js
@@ -1,7 +1,9 @@
 import Milestone from '~/milestone';
 import Sidebar from '~/right_sidebar';
+import MountMilestoneSidebar from '~/sidebar/mount_milestone_sidebar';
 
 document.addEventListener('DOMContentLoaded', () => {
   new Milestone(); // eslint-disable-line no-new
   new Sidebar(); // eslint-disable-line no-new
+  new MountMilestoneSidebar(); // eslint-disable-line no-new
 });
diff --git a/app/assets/javascripts/pages/milestones/shared/init_milestones_show.js b/app/assets/javascripts/pages/milestones/shared/init_milestones_show.js
index 7aa5be0d5b9..b2a896a3265 100644
--- a/app/assets/javascripts/pages/milestones/shared/init_milestones_show.js
+++ b/app/assets/javascripts/pages/milestones/shared/init_milestones_show.js
@@ -2,8 +2,10 @@
 
 import Milestone from '~/milestone';
 import Sidebar from '~/right_sidebar';
+import MountMilestoneSidebar from '~/sidebar/mount_milestone_sidebar';
 
 export default () => {
   new Milestone();
   new Sidebar();
+  new MountMilestoneSidebar();
 };
diff --git a/app/assets/javascripts/sidebar/mount_milestone_sidebar.js b/app/assets/javascripts/sidebar/mount_milestone_sidebar.js
new file mode 100644
index 00000000000..b15ad0e5586
--- /dev/null
+++ b/app/assets/javascripts/sidebar/mount_milestone_sidebar.js
@@ -0,0 +1,27 @@
+import Vue from 'vue';
+import timeTracker from './components/time_tracking/time_tracker.vue';
+
+export default class SidebarMilestone {
+  constructor() {
+    const el = document.getElementById('issuable-time-tracker');
+
+    if (!el) return;
+
+    // eslint-disable-next-line no-new
+    new Vue({
+      el,
+      components: {
+        timeTracker,
+      },
+      render: createElement => createElement('timeTracker', {
+        props: {
+          time_estimate: parseInt(el.dataset.timeEstimate, 10),
+          time_spent: parseInt(el.dataset.timeSpent, 10),
+          human_time_estimate: el.dataset.humanTimeEstimate,
+          human_time_spent: el.dataset.humanTimeSpent,
+          rootPath: '/',
+        },
+      }),
+    });
+  }
+}
diff --git a/app/models/concerns/milestoneish.rb b/app/models/concerns/milestoneish.rb
index fd6703831e4..caf8afa97f9 100644
--- a/app/models/concerns/milestoneish.rb
+++ b/app/models/concerns/milestoneish.rb
@@ -94,6 +94,14 @@ module Milestoneish
     Gitlab::TimeTrackingFormatter.output(total_issue_time_spent)
   end
 
+  def total_issue_time_estimate
+    @total_issue_time_estimate ||= issues.sum(:time_estimate)
+  end
+
+  def human_total_issue_time_estimate
+    Gitlab::TimeTrackingFormatter.output(total_issue_time_estimate)
+  end
+
   private
 
   def count_issues_by_state(user)
diff --git a/app/views/shared/milestones/_sidebar.html.haml b/app/views/shared/milestones/_sidebar.html.haml
index 4f51455c26e..cd4188daf5b 100644
--- a/app/views/shared/milestones/_sidebar.html.haml
+++ b/app/views/shared/milestones/_sidebar.html.haml
@@ -1,5 +1,7 @@
 - affix_offset = local_assigns.fetch(:affix_offset, "50")
 - project = local_assigns[:project]
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('common_vue')
 
 %aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => affix_offset, "spy" => "affix", "always-show-toggle" => true }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
   .issuable-sidebar.milestone-sidebar
@@ -85,21 +87,12 @@
               Closed:
               = milestone.issues_visible_to_user(current_user).closed.count
 
-    .block.time_spent
-      .sidebar-collapsed-icon
-        = custom_icon('icon_hourglass')
-        %span.collapsed-milestone-total-time-spent
-        - if milestone.human_total_issue_time_spent
-          = milestone.human_total_issue_time_spent
-        - else
-          = _("None")
-      .title.hide-collapsed
-        = _("Total issue time spent")
-      .value.hide-collapsed
-        - if milestone.human_total_issue_time_spent
-          %span.bold= milestone.human_total_issue_time_spent
-        - else
-          %span.no-value= _("No time spent")
+    .block
+      #issuable-time-tracker{ data: { time_estimate: @milestone.total_issue_time_estimate, time_spent: @milestone.total_issue_time_spent, human_time_estimate: @milestone.human_total_issue_time_estimate, human_time_spent: @milestone.human_total_issue_time_spent } }
+        // Fallback while content is loading
+        .title.hide-collapsed
+          = _('Time tracking')
+          = icon('spinner spin')
 
     .block.merge-requests
       .sidebar-collapsed-icon