Observe limit to hours setting in timelog report

Changelog: added

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

@@ -14,6 +14,13 @@ export default {
     GlTable,
   },
   inject: ['issuableId', 'issuableType'],
+  props: {
+    limitToHours: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
   data() {
     return { report: [], isLoading: true };
   },
@@ -60,7 +67,10 @@ export default {
     },
     formatTimeSpent(seconds) {
       const negative = seconds < 0;
-      return (negative ? '- ' : '') + stringifyTime(parseSeconds(seconds));
+      return (
+        (negative ? '- ' : '') +
+        stringifyTime(parseSeconds(seconds, { limitToHours: this.limitToHours }))
+      );
     },
   },
   fields: [

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

@@ -180,7 +180,7 @@ export default {
         :title="__('Time tracking report')"
         :hide-footer="true"
       >
-        <time-tracking-report />
+        <time-tracking-report :limit-to-hours="limitToHours" />
       </gl-modal>
       <transition name="help-state-toggle">
         <time-tracking-help-state v-if="showHelpState" />

changelogs/unreleased/330845-observe-limit-to-hours.yml

+---
+title: Observe limit to hours setting in timelog report
+merge_request: 61849
+author: Lee Tickett @leetickett
+type: added

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

 import { GlLoadingIcon } from '@gitlab/ui';
-import { getAllByRole } from '@testing-library/dom';
+import { getAllByRole, getByRole } from '@testing-library/dom';
 import { shallowMount, createLocalVue, mount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -25,6 +25,7 @@ describe('Issuable Time Tracking Report', () => {
     queryHandler = successIssueQueryHandler,
     issuableType = 'issue',
     mountFunction = shallowMount,
+    limitToHours = false,
   } = {}) => {
     fakeApollo = createMockApollo([
       [getIssueTimelogsQuery, queryHandler],
@@ -35,6 +36,7 @@ describe('Issuable Time Tracking Report', () => {
         issuableId: 1,
         issuableType,
       },
+      propsData: { limitToHours },
       localVue,
       apolloProvider: fakeApollo,
     });
@@ -94,4 +96,30 @@ describe('Issuable Time Tracking Report', () => {
       expect(getAllByRole(wrapper.element, 'row', { name: /Administrator/i })).toHaveLength(3);
     });
   });
+
+  describe('observes `limit display of time tracking units to hours` setting', () => {
+    describe('when false', () => {
+      beforeEach(() => {
+        mountComponent({ limitToHours: false, mountFunction: mount });
+      });
+
+      it('renders correct results', async () => {
+        await waitForPromises();
+
+        expect(getByRole(wrapper.element, 'columnheader', { name: /1d 30m/i })).not.toBeNull();
+      });
+    });
+
+    describe('when true', () => {
+      beforeEach(() => {
+        mountComponent({ limitToHours: true, mountFunction: mount });
+      });
+
+      it('renders correct results', async () => {
+        await waitForPromises();
+
+        expect(getByRole(wrapper.element, 'columnheader', { name: /8h 30m/i })).not.toBeNull();
+      });
+    });
+  });
 });