Add time tracking information to Issue Boards sidebar

Add time tracking progress bar to Issue Boards sidebar.

app/assets/javascripts/boards/components/board_sidebar.js

@@ -2,18 +2,19 @@
 import $ from 'jquery';
 import Vue from 'vue';
-import Flash from '../../flash';
-import { sprintf, __ } from '../../locale';
-import Sidebar from '../../right_sidebar';
-import eventHub from '../../sidebar/event_hub';
-import AssigneeTitle from '../../sidebar/components/assignees/assignee_title.vue';
-import Assignees from '../../sidebar/components/assignees/assignees.vue';
-import DueDateSelectors from '../../due_date_select';
+import Flash from '~/flash';
+import { sprintf, __ } from '~/locale';
+import Sidebar from '~/right_sidebar';
+import eventHub from '~/sidebar/event_hub';
+import DueDateSelectors from '~/due_date_select';
+import IssuableContext from '~/issuable_context';
+import LabelsSelect from '~/labels_select';
+import AssigneeTitle from '~/sidebar/components/assignees/assignee_title.vue';
+import Assignees from '~/sidebar/components/assignees/assignees.vue';
+import Subscriptions from '~/sidebar/components/subscriptions/subscriptions.vue';
+import TimeTracker from '~/sidebar/components/time_tracking/time_tracker.vue';
+import MilestoneSelect from '~/milestone_select';
 import RemoveBtn from './sidebar/remove_issue.vue';
-import IssuableContext from '../../issuable_context';
-import LabelsSelect from '../../labels_select';
-import Subscriptions from '../../sidebar/components/subscriptions/subscriptions.vue';
-import MilestoneSelect from '../../milestone_select';
 import boardsStore from '../stores/boards_store';
 export default Vue.extend({
@@ -22,6 +23,7 @@ export default Vue.extend({
     Assignees,
     RemoveBtn,
     Subscriptions,
+    TimeTracker,
   },
   props: {
     currentUser: {

app/assets/javascripts/boards/index.js

@@ -24,7 +24,11 @@ import BoardSidebar from './components/board_sidebar';
 import initNewListDropdown from './components/new_list_dropdown';
 import BoardAddIssuesModal from './components/modal/index.vue';
 import '~/vue_shared/vue_resource_interceptor';
-import { NavigationType, parseBoolean } from '~/lib/utils/common_utils';
+import {
+  NavigationType,
+  convertObjectPropsToCamelCase,
+  parseBoolean,
+} from '~/lib/utils/common_utils';
 let issueBoardsApp;
@@ -133,9 +137,25 @@ export default () => {
           BoardService.getIssueInfo(sidebarInfoEndpoint)
             .then(res => res.data)
             .then(data => {
+              const {
+                subscribed,
+                totalTimeSpent,
+                timeEstimate,
+                humanTimeEstimate,
+                humanTotalTimeSpent,
+                weight,
+                epic,
+              } = convertObjectPropsToCamelCase(data);
+
               newIssue.setFetchingState('subscriptions', false);
               newIssue.updateData({
-                subscribed: data.subscribed,
+                humanTimeSpent: humanTotalTimeSpent,
+                timeSpent: totalTimeSpent,
+                humanTimeEstimate,
+                timeEstimate,
+                subscribed,
+                weight,
+                epic,
               });
             })
             .catch(() => {

app/serializers/issue_board_entity.rb

@@ -12,6 +12,7 @@ class IssueBoardEntity < Grape::Entity
   expose :due_date
   expose :project_id
   expose :relative_position
+  expose :time_estimate
   expose :project do |issue|
     API::Entities::Project.represent issue.project, only: [:id, :path]

app/views/shared/boards/components/_sidebar.html.haml

@@ -20,6 +20,7 @@
           = render "shared/boards/components/sidebar/assignee"
           = render_if_exists "shared/boards/components/sidebar/epic"
           = render "shared/boards/components/sidebar/milestone"
+          = render "shared/boards/components/sidebar/time_tracker"
           = render "shared/boards/components/sidebar/due_date"
           = render "shared/boards/components/sidebar/labels"
           = render_if_exists "shared/boards/components/sidebar/weight"

app/views/shared/boards/components/sidebar/_time_tracker.html.haml

+.block.time-tracking
+  %time-tracker{ ":time-estimate" => "issue.timeEstimate || 0",
+    ":time-spent" => "issue.timeSpent || 0",
+    ":human-time-estimate" => "issue.humanTimeEstimate",
+    ":human-time-spent" => "issue.humanTimeSpent",
+    "root-path" => "#{root_url}" }

spec/features/boards/sidebar_spec.rb

@@ -222,6 +222,21 @@ describe 'Issue Boards', :js do
     end
   end
+  context 'time tracking' do
+    before do
+      issue2.timelogs.create(time_spent: 14400, user: user)
+      issue2.update!(time_estimate: 28800)
+    end
+
+    it 'shows time tracking progress bar' do
+      click_card(card)
+
+      page.within('.time-tracking') do
+        expect(find('.time-tracking-content .compare-meter')['data-original-title']).to eq('Time remaining: 4h')
+      end
+    end
+  end
+
   context 'due date' do
     it 'updates due date' do
       click_card(card)