Fix broken Time Tracking Reports on Issuables

Fixes a bug where Report component for Time Tracking
in Issuables sidebar didn't get `id` value for Issuable
which led to GraphQL query failing to load detailed
time tracking report.

Changelog: fixed

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

@@ -29,6 +29,7 @@ export default {
 
 <template>
   <issuable-time-tracker
+    :issuable-id="activeBoardItem.id.toString()"
     :issuable-iid="activeBoardItem.iid.toString()"
     :limit-to-hours="timeTrackingLimitToHours"
     :initial-time-tracking="initialTimeTracking"

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

@@ -17,6 +17,10 @@ export default {
       required: false,
       default: '',
     },
+    issuableId: {
+      type: String,
+      required: true,
+    },
     issuableIid: {
       type: String,
       required: true,
@@ -60,6 +64,7 @@ export default {
   <div class="block">
     <issuable-time-tracker
       :full-path="fullPath"
+      :issuable-id="issuableId"
       :issuable-iid="issuableIid"
       :limit-to-hours="limitToHours"
     />

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

@@ -31,7 +31,11 @@ export default {
   directives: {
     GlModal: GlModalDirective,
   },
-  inject: ['issuableType'],
+  inject: {
+    issuableType: {
+      default: null,
+    },
+  },
   props: {
     limitToHours: {
       type: Boolean,
@@ -43,6 +47,11 @@ export default {
       required: false,
       default: '',
     },
+    issuableId: {
+      type: String,
+      required: false,
+      default: '',
+    },
     issuableIid: {
       type: String,
       required: false,
@@ -83,15 +92,18 @@ export default {
         return timeTrackingQueries[this.issuableType].query;
       },
       skip() {
-        // We don't fetch info via GraphQL in following cases
-        // 1. Time tracking info was provided via prop
-        // 2. issuableIid and fullPath are not provided.
-        if (!this.initialTimeTracking) {
-          return false;
-        } else if (this.issuableIid && this.fullPath) {
-          return false;
+        // Skip the query if either of the conditions are true
+        // 1. issuableType is not provided
+        // 2. Time tracking info was provided via prop
+        // 3. issuableIid and fullPath are not provided
+        if (!this.issuableType || !timeTrackingQueries[this.issuableType]) {
+          return true;
+        } else if (this.initialTimeTracking) {
+          return true;
+        } else if (!this.issuableIid || !this.fullPath) {
+          return true;
         }
-        return true;
+        return false;
       },
       variables() {
         return {
@@ -146,7 +158,7 @@ export default {
     isTimeReportSupported() {
       return (
         [IssuableType.Issue, IssuableType.MergeRequest].includes(this.issuableType) &&
-        this.issuableIid
+        this.issuableId
       );
     },
   },
@@ -240,7 +252,7 @@ export default {
           :title="__('Time tracking report')"
           :hide-footer="true"
         >
-          <time-tracking-report :limit-to-hours="limitToHours" :issuable-iid="issuableIid" />
+          <time-tracking-report :limit-to-hours="limitToHours" :issuable-id="issuableId" />
         </gl-modal>
       </template>
       <transition name="help-state-toggle">

app/assets/javascripts/sidebar/mount_sidebar.js

@@ -391,7 +391,7 @@ function mountSubscriptionsComponent() {
 
 function mountTimeTrackingComponent() {
   const el = document.getElementById('issuable-time-tracker');
-  const { iid, fullPath, issuableType, timeTrackingLimitToHours } = getSidebarOptions();
+  const { id, iid, fullPath, issuableType, timeTrackingLimitToHours } = getSidebarOptions();
 
   if (!el) return;
 
@@ -404,6 +404,7 @@ function mountTimeTrackingComponent() {
       createElement(SidebarTimeTracking, {
         props: {
           fullPath,
+          issuableId: id.toString(),
           issuableIid: iid.toString(),
           limitToHours: timeTrackingLimitToHours,
         },

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

 .block.time-tracking
   %time-tracker{ ":limit-to-hours" => "timeTrackingLimitToHours",
+    ":issuable-id" => "issue.id ? issue.id.toString() : ''",
     ":issuable-iid" => "issue.iid ? issue.iid.toString() : ''",
     ":full-path" => "issue.project ? issue.project.fullPath : ''",
     "root-path" => "#{root_url}" }

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,
         iid: 1,
         timeEstimate: 3600,
         totalTimeSpent: 1800,
@@ -49,6 +50,7 @@ describe('BoardSidebarTimeTracker', () => {
       expect(wrapper.find(IssuableTimeTracker).props()).toEqual({
         limitToHours: timeTrackingLimitToHours,
         showCollapsed: false,
+        issuableId: '1',
         issuableIid: '1',
         fullPath: '',
         initialTimeTracking: {

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

@@ -19,6 +19,7 @@ describe('Issuable Time Tracker', () => {
   const defaultProps = {
     limitToHours: false,
     fullPath: 'gitlab-org/gitlab-test',
+    issuableId: '1',
     issuableIid: '1',
     initialTimeTracking: {
       ...issuableTimeTrackingResponse.data.workspace.issuable,