1 files changed, 23 insertions, 1 deletions
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
index 4c095006dd7..64f2ddc1d16 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
@@ -1,10 +1,11 @@
 <script>
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlLink, GlModal, GlModalDirective } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
 import eventHub from '../../event_hub';
 import TimeTrackingCollapsedState from './collapsed_state.vue';
 import TimeTrackingComparisonPane from './comparison_pane.vue';
 import TimeTrackingHelpState from './help_state.vue';
+import TimeTrackingReport from './report.vue';
 import TimeTrackingSpentOnlyPane from './spent_only_pane.vue';
 
 export default {
@@ -15,10 +16,16 @@ export default {
   },
   components: {
     GlIcon,
+    GlLink,
+    GlModal,
     TimeTrackingCollapsedState,
     TimeTrackingSpentOnlyPane,
     TimeTrackingComparisonPane,
     TimeTrackingHelpState,
+    TimeTrackingReport,
+  },
+  directives: {
+    GlModal: GlModalDirective,
   },
   props: {
     timeEstimate: {
@@ -160,6 +167,21 @@ export default {
         :time-estimate-human-readable="humanTimeEstimate"
         :limit-to-hours="limitToHours"
       />
+      <gl-link
+        v-if="hasTimeSpent"
+        v-gl-modal="'time-tracking-report'"
+        data-testid="reportLink"
+        href="#"
+        class="btn-link"
+        >{{ __('Time tracking report') }}</gl-link
+      >
+      <gl-modal
+        modal-id="time-tracking-report"
+        :title="__('Time tracking report')"
+        :hide-footer="true"
+      >
+        <time-tracking-report :limit-to-hours="limitToHours" />
+      </gl-modal>
       <transition name="help-state-toggle">
         <time-tracking-help-state v-if="showHelpState" />
       </transition>