Display time tracking totals on milestone page (EE)

app/assets/javascripts/pages/dashboard/milestones/show/index.js

 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
 });

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();
 };

app/assets/javascripts/sidebar/mount_milestone_sidebar.js

+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: '/',
+        },
+      }),
+    });
+  }
+}

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)

app/views/shared/milestones/_sidebar.html.haml

 - 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,25 +87,15 @@
               Closed:
               = milestone.issues_visible_to_user(current_user).closed.count
 
+    .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', 'aria-hidden': 'true')
 
     = render 'shared/milestones/weight', milestone: milestone
 
-    .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.merge-requests
       .sidebar-collapsed-icon
         %strong

config/webpack.config.js

@@ -92,7 +92,7 @@ var config = {
     service_desk_issues:  './service_desk_issues/index.js',
     registry_list:        './registry/index.js',
     roadmap:              'ee/roadmap',
-    ide:                 './ide/index.js',
+    ide:                  './ide/index.js',
     sidebar:              './sidebar/sidebar_bundle.js',
     ee_sidebar:           'ee/sidebar/sidebar_bundle.js',
     snippet:              './snippet/snippet_bundle.js',

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