Resolve "Time tracking report is bugged on GraphQL boards"

app/assets/javascripts/boards/components/sidebar/board_sidebar_time_tracker.vue

@@ -15,6 +15,7 @@ export default {
 
 <template>
   <issuable-time-tracker
+    :issuable-id="activeBoardItem.id.toString()"
     :time-estimate="activeBoardItem.timeEstimate"
     :time-spent="activeBoardItem.totalTimeSpent"
     :human-time-estimate="activeBoardItem.humanTimeEstimate"

app/assets/javascripts/sidebar/components/time_tracking/report.vue

@@ -13,13 +13,17 @@ export default {
     GlLoadingIcon,
     GlTable,
   },
-  inject: ['issuableId', 'issuableType'],
+  inject: ['issuableType'],
   props: {
     limitToHours: {
       type: Boolean,
       default: false,
       required: false,
     },
+    issuableId: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return { report: [], isLoading: true };

app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue

@@ -13,6 +13,12 @@ export default {
   components: {
     IssuableTimeTracker,
   },
+  props: {
+    issuableId: {
+      type: String,
+      required: true,
+    },
+  },
   data() {
     return {
       mediator: new Mediator(),
@@ -51,6 +57,7 @@ export default {
 <template>
   <div class="block">
     <issuable-time-tracker
+      :issuable-id="issuableId"
       :time-estimate="store.timeEstimate"
       :time-spent="store.totalTimeSpent"
       :human-time-estimate="store.humanTimeEstimate"

app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue

 <script>
 import { GlIcon, GlLink, GlModal, GlModalDirective } from '@gitlab/ui';
+import { IssuableType } from '~/issue_show/constants';
 import { s__, __ } from '~/locale';
 import eventHub from '../../event_hub';
 import TimeTrackingCollapsedState from './collapsed_state.vue';
@@ -27,6 +28,7 @@ export default {
   directives: {
     GlModal: GlModalDirective,
   },
+  inject: ['issuableType'],
   props: {
     timeEstimate: {
       type: Number,
@@ -51,6 +53,11 @@ export default {
       default: false,
       required: false,
     },
+    issuableId: {
+      type: String,
+      required: false,
+      default: '',
+    },
     /*
       In issue list, "time-tracking-collapsed-state" is always rendered even if the sidebar isn't collapsed.
       The actual hiding is controlled with css classes:
@@ -94,6 +101,12 @@ export default {
     showHelpState() {
       return Boolean(this.showHelp);
     },
+    isTimeReportSupported() {
+      return (
+        [IssuableType.Issue, IssuableType.MergeRequest].includes(this.issuableType) &&
+        this.issuableId
+      );
+    },
   },
   created() {
     eventHub.$on('timeTracker:updateData', this.update);
@@ -167,6 +180,7 @@ export default {
         :time-estimate-human-readable="humanTimeEstimate"
         :limit-to-hours="limitToHours"
       />
+      <template v-if="isTimeReportSupported">
         <gl-link
           v-if="hasTimeSpent"
           v-gl-modal="'time-tracking-report'"
@@ -180,8 +194,9 @@ export default {
           :title="__('Time tracking report')"
           :hide-footer="true"
         >
-        <time-tracking-report :limit-to-hours="limitToHours" />
+          <time-tracking-report :limit-to-hours="limitToHours" :issuable-id="issuableId" />
         </gl-modal>
+      </template>
       <transition name="help-state-toggle">
         <time-tracking-help-state v-if="showHelpState" />
       </transition>

app/assets/javascripts/sidebar/mount_milestone_sidebar.js

 import Vue from 'vue';
+import { IssuableType } from '~/issue_show/constants';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import timeTracker from './components/time_tracking/time_tracker.vue';
 
@@ -8,7 +9,14 @@ export default class SidebarMilestone {
 
     if (!el) return;
 
-    const { timeEstimate, timeSpent, humanTimeEstimate, humanTimeSpent, limitToHours } = el.dataset;
+    const {
+      timeEstimate,
+      timeSpent,
+      humanTimeEstimate,
+      humanTimeSpent,
+      limitToHours,
+      id,
+    } = el.dataset;
 
     // eslint-disable-next-line no-new
     new Vue({
@@ -16,6 +24,9 @@ export default class SidebarMilestone {
       components: {
         timeTracker,
       },
+      provide: {
+        issuableType: IssuableType.Milestone,
+      },
       render: (createElement) =>
         createElement('timeTracker', {
           props: {
@@ -24,6 +35,7 @@ export default class SidebarMilestone {
             humanTimeEstimate,
             humanTimeSpent,
             limitToHours: parseBoolean(limitToHours),
+            issuableId: id.toString(),
           },
         }),
     });

app/assets/javascripts/sidebar/mount_sidebar.js

@@ -383,8 +383,13 @@ function mountTimeTrackingComponent() {
   new Vue({
     el,
     apolloProvider,
-    provide: { issuableId: id, issuableType },
-    render: (createElement) => createElement(SidebarTimeTracking, {}),
+    provide: { issuableType },
+    render: (createElement) =>
+      createElement(SidebarTimeTracking, {
+        props: {
+          issuableId: id.toString(),
+        },
+      }),
   });
 }
 

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

@@ -4,4 +4,5 @@
     ":human-time-estimate" => "issue.humanTimeEstimate",
     ":human-time-spent" => "issue.humanTimeSpent",
     ":limit-to-hours" => "timeTrackingLimitToHours",
+    ":issuable-id" => "issue.id",
     "root-path" => "#{root_url}" }

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

@@ -98,6 +98,7 @@
         time_spent: @milestone.total_time_spent,
         human_time_estimate: @milestone.human_total_time_estimate,
         human_time_spent: @milestone.human_total_time_spent,
+        id: @milestone.id,
         limit_to_hours: Gitlab::CurrentSettings.time_tracking_limit_to_hours.to_s } }
 
     = render_if_exists 'shared/milestones/weight', milestone: milestone

changelogs/unreleased/331420-time-tracking-report-is-bugged-on-graphql-boards.yml

+---
+title: Resolve Time tracking report is bugged on GraphQL boards
+merge_request: 62109
+author:
+type: fixed

spec/frontend/boards/components/sidebar/board_sidebar_time_tracker_spec.js

@@ -26,6 +26,7 @@ describe('BoardSidebarTimeTracker', () => {
     store = createStore();
     store.state.boardItems = {
       1: {
+        id: 1,
         timeEstimate: 3600,
         totalTimeSpent: 1800,
         humanTimeEstimate: '1h',
@@ -52,6 +53,7 @@ describe('BoardSidebarTimeTracker', () => {
         humanTimeSpent: '30min',
         limitToHours: timeTrackingLimitToHours,
         showCollapsed: false,
+        issuableId: '1',
       });
     },
   );

spec/frontend/sidebar/components/time_tracking/report_spec.js

@@ -36,7 +36,7 @@ describe('Issuable Time Tracking Report', () => {
         issuableId: 1,
         issuableType,
       },
-      propsData: { limitToHours },
+      propsData: { limitToHours, issuableId: '1' },
       localVue,
       apolloProvider: fakeApollo,
     });

spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js

@@ -18,15 +18,19 @@ describe('Issuable Time Tracker', () => {
     humanTimeEstimate: '2h 46m',
     humanTimeSpent: '1h 23m',
     limitToHours: false,
+    issuableId: '1',
   };
 
-  const mountComponent = ({ props = {} } = {}) =>
+  const mountComponent = ({ props = {}, issuableType = 'issue' } = {}) =>
     mount(TimeTracker, {
       propsData: { ...defaultProps, ...props },
       directives: { GlTooltip: createMockDirective() },
       stubs: {
         transition: stubTransition(),
       },
+      provide: {
+        issuableType,
+      },
     });
 
   afterEach(() => {
@@ -210,13 +214,20 @@ describe('Issuable Time Tracker', () => {
       });
 
       describe('When time spent', () => {
-        beforeEach(() => {
+        it('link should appear on issue', () => {
           wrapper = mountComponent();
+          expect(findReportLink().exists()).toBe(true);
         });
 
-        it('link should appear', () => {
+        it('link should appear on merge request', () => {
+          wrapper = mountComponent({ issuableType: 'merge_request' });
           expect(findReportLink().exists()).toBe(true);
         });
+
+        it('link should not appear on milestone', () => {
+          wrapper = mountComponent({ issuableType: 'milestone' });
+          expect(findReportLink().exists()).toBe(false);
+        });
       });
     });