Fix time tracking info when sidebar is collapsed

The time tracking info displayed the abbreviated time
instead of the full time, e.g. "2h / 3h" instead of "2h 15m / 3h 45m".
This commit fixes this so the full time is always displayed.

app/assets/javascripts/lib/utils/datetime_utility.js

@@ -536,13 +536,6 @@ export const stringifyTime = (timeObject, fullNameFormat = false) => {
   return reducedTime.length ? reducedTime : '0m';
 };
 
-/**
- * Accepts a time string of any size (e.g. '1w 2d 3h 5m' or '1w 2d') and returns
- *  the first non-zero unit/value pair.
- */
-export const abbreviateTime = timeStr =>
-  timeStr.split(' ').filter(unitStr => unitStr.charAt(0) !== '0')[0];
-
 /**
  * Calculates the milliseconds between now and a given date string.
  * The result cannot become negative.

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

 <script>
 import { __, sprintf } from '~/locale';
-import { abbreviateTime } from '~/lib/utils/datetime_utility';
 import icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 
@@ -41,12 +40,6 @@ export default {
     },
   },
   computed: {
-    timeSpent() {
-      return this.abbreviateTime(this.timeSpentHumanReadable);
-    },
-    timeEstimate() {
-      return this.abbreviateTime(this.timeEstimateHumanReadable);
-    },
     divClass() {
       if (this.showComparisonState) {
         return 'compare';
@@ -73,11 +66,11 @@ export default {
     },
     text() {
       if (this.showComparisonState) {
-        return `${this.timeSpent} / ${this.timeEstimate}`;
+        return `${this.timeSpentHumanReadable} / ${this.timeEstimateHumanReadable}`;
       } else if (this.showEstimateOnlyState) {
-        return `-- / ${this.timeEstimate}`;
+        return `-- / ${this.timeEstimateHumanReadable}`;
       } else if (this.showSpentOnlyState) {
-        return `${this.timeSpent} / --`;
+        return `${this.timeSpentHumanReadable} / --`;
       } else if (this.showNoTimeTrackingState) {
         return __('None');
       }
@@ -100,11 +93,6 @@ export default {
       return this.showNoTimeTrackingState ? __('Time tracking') : this.timeTrackedTooltipText;
     },
   },
-  methods: {
-    abbreviateTime(timeStr) {
-      return abbreviateTime(timeStr);
-    },
-  },
 };
 </script>
 

ee/changelogs/unreleased/29295-time-tracked-info-are-different-during-right-side-open-and-colla.yml

+---
+title: Fix time tracking info when the sidebar is collapsed
+merge_request:
+author:
+type: fixed

spec/frontend/lib/utils/datetime_utility_spec.js

@@ -388,20 +388,6 @@ describe('prettyTime methods', () => {
       expect(datetimeUtility.stringifyTime(timeObject, true)).toEqual('1 week 1 hour');
     });
   });
-
-  describe('abbreviateTime', () => {
-    it('should abbreviate stringified times for weeks', () => {
-      const fullTimeString = '1w 3d 4h 5m';
-
-      expect(datetimeUtility.abbreviateTime(fullTimeString)).toBe('1w');
-    });
-
-    it('should abbreviate stringified times for non-weeks', () => {
-      const fullTimeString = '0w 3d 4h 5m';
-
-      expect(datetimeUtility.abbreviateTime(fullTimeString)).toBe('3d');
-    });
-  });
 });
 
 describe('calculateRemainingMilliseconds', () => {

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

@@ -83,8 +83,8 @@ describe('Issuable Time Tracker', () => {
           initTimeTrackingComponent({
             timeEstimate: 100000, // 1d 3h
             timeSpent: 5000, // 1h 23m
-            timeEstimateHumanReadable: '',
-            timeSpentHumanReadable: '',
+            timeEstimateHumanReadable: '1d 3h',
+            timeSpentHumanReadable: '1h 23m',
           });
         });
 
@@ -98,6 +98,16 @@ describe('Issuable Time Tracker', () => {
           });
         });
 
+        it('should show full times when the sidebar is collapsed', done => {
+          Vue.nextTick(() => {
+            const timeTrackingText = vm.$el.querySelector('.time-tracking-collapsed-summary span')
+              .innerText;
+
+            expect(timeTrackingText).toBe('1h 23m / 1d 3h');
+            done();
+          });
+        });
+
         describe('Remaining meter', () => {
           it('should display the remaining meter with the correct width', done => {
             Vue.nextTick(() => {