#28481: Display time tracking totals on milestone page

8 files changed, 62 insertions, 22 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
diff --git a/changelogs/unreleased/feature--2848-display-time-tracking-totals-milestone-page.yml b/changelogs/unreleased/feature--2848-display-time-tracking-totals-milestone-page.yml
new file mode 100644
index 00000000000..ca877d32b05
--- /dev/null
+++ b/changelogs/unreleased/feature--2848-display-time-tracking-totals-milestone-page.yml
@@ -0,0 +1,5 @@
+---
+title: "#28481: Display time tracking totals on milestone page"
+merge_request: 16753
+author: Riccardo Padovani
+type: added
diff --git a/config/webpack.config.js b/config/webpack.config.js
index defbfc848d3..ec2e786a9e2 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -78,7 +78,7 @@ var config = {
     protected_branches:   './protected_branches',
     protected_tags:       './protected_tags',
     registry_list:        './registry/index.js',
-    ide:                 './ide/index.js',
+    ide:                  './ide/index.js',
     sidebar:              './sidebar/sidebar_bundle.js',
     snippet:              './snippet/snippet_bundle.js',
     sketch_viewer:        './blob/sketch_viewer.js',
diff --git a/spec/features/milestone_spec.rb b/spec/features/milestone_spec.rb
index b02d2d4261c..cc12a1005ba 100644
--- a/spec/features/milestone_spec.rb
+++ b/spec/features/milestone_spec.rb
@@ -66,15 +66,16 @@ feature 'Milestone' do
     end
   end
 
-  feature 'Open a milestone' do
+  feature 'Open a milestone', :js do
     scenario 'shows total issue time spent correctly when no time has been logged' do
       milestone = create(:milestone, project: project, title: 8.7)
 
       visit project_milestone_path(project, milestone)
 
-      page.within('.block.time_spent') do
-        expect(page).to have_content 'No time spent'
-        expect(page).to have_content 'None'
+      wait_for_requests
+
+      page.within('.time-tracking-no-tracking-pane') do
+        expect(page).to have_content 'No estimate or time spent'
       end
     end
 
@@ -89,8 +90,10 @@ feature 'Milestone' do
 
       visit project_milestone_path(project, milestone)
 
-      page.within('.block.time_spent') do
-        expect(page).to have_content '3h'
+      wait_for_requests
+
+      page.within('.time-tracking-spend-only-pane') do
+        expect(page).to have_content 'Spent: 3h'
       end
     end
   end