Merge branch '37298-the-prettytime-utils-module-could-use-some-light-maintenance' into 'master'

Resolve some tech debt in the prettyTime module

Closes #37298

See merge request gitlab-org/gitlab-ce!14058

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

 import _ from 'underscore';
 
-(() => {
-  /*
-   * TODO: Make these methods more configurable (e.g. stringifyTime condensed or
-   * non-condensed, abbreviateTimelengths)
-   * */
-
-  const utils = window.gl.utils = gl.utils || {};
-  const prettyTime = utils.prettyTime = {
-    /*
-     * Accepts seconds and returns a timeObject { weeks: #, days: #, hours: #, minutes: # }
-     * Seconds can be negative or positive, zero or non-zero. Can be configured for any day
-     * or week length.
-    */
-    parseSeconds(seconds, { daysPerWeek = 5, hoursPerDay = 8 } = {}) {
-      const DAYS_PER_WEEK = daysPerWeek;
-      const HOURS_PER_DAY = hoursPerDay;
-      const MINUTES_PER_HOUR = 60;
-      const MINUTES_PER_WEEK = DAYS_PER_WEEK * HOURS_PER_DAY * MINUTES_PER_HOUR;
-      const MINUTES_PER_DAY = HOURS_PER_DAY * MINUTES_PER_HOUR;
-
-      const timePeriodConstraints = {
-        weeks: MINUTES_PER_WEEK,
-        days: MINUTES_PER_DAY,
-        hours: MINUTES_PER_HOUR,
-        minutes: 1,
-      };
+/*
+ * TODO: Make these methods more configurable (e.g. stringifyTime condensed or
+ * non-condensed, abbreviateTimelengths)
+ * */
+
+/*
+ * Accepts seconds and returns a timeObject { weeks: #, days: #, hours: #, minutes: # }
+ * Seconds can be negative or positive, zero or non-zero. Can be configured for any day
+ * or week length.
+*/
+
+export function parseSeconds(seconds, { daysPerWeek = 5, hoursPerDay = 8 } = {}) {
+  const DAYS_PER_WEEK = daysPerWeek;
+  const HOURS_PER_DAY = hoursPerDay;
+  const MINUTES_PER_HOUR = 60;
+  const MINUTES_PER_WEEK = DAYS_PER_WEEK * HOURS_PER_DAY * MINUTES_PER_HOUR;
+  const MINUTES_PER_DAY = HOURS_PER_DAY * MINUTES_PER_HOUR;
+
+  const timePeriodConstraints = {
+    weeks: MINUTES_PER_WEEK,
+    days: MINUTES_PER_DAY,
+    hours: MINUTES_PER_HOUR,
+    minutes: 1,
+  };
 
-      let unorderedMinutes = prettyTime.secondsToMinutes(seconds);
+  let unorderedMinutes = Math.abs(seconds / MINUTES_PER_HOUR);
 
-      return _.mapObject(timePeriodConstraints, (minutesPerPeriod) => {
-        const periodCount = Math.floor(unorderedMinutes / minutesPerPeriod);
+  return _.mapObject(timePeriodConstraints, (minutesPerPeriod) => {
+    const periodCount = Math.floor(unorderedMinutes / minutesPerPeriod);
 
-        unorderedMinutes -= (periodCount * minutesPerPeriod);
+    unorderedMinutes -= (periodCount * minutesPerPeriod);
 
-        return periodCount;
-      });
-    },
+    return periodCount;
+  });
+}
 
-    /*
-    * Accepts a timeObject and returns a condensed string representation of it
-    * (e.g. '1w 2d 3h 1m' or '1h 30m'). Zero value units are not included.
-    */
+/*
+* Accepts a timeObject (see parseSeconds) and returns a condensed string representation of it
+* (e.g. '1w 2d 3h 1m' or '1h 30m'). Zero value units are not included.
+*/
 
-    stringifyTime(timeObject) {
-      const reducedTime = _.reduce(timeObject, (memo, unitValue, unitName) => {
-        const isNonZero = !!unitValue;
-        return isNonZero ? `${memo} ${unitValue}${unitName.charAt(0)}` : memo;
-      }, '').trim();
-      return reducedTime.length ? reducedTime : '0m';
-    },
+export function stringifyTime(timeObject) {
+  const reducedTime = _.reduce(timeObject, (memo, unitValue, unitName) => {
+    const isNonZero = !!unitValue;
+    return isNonZero ? `${memo} ${unitValue}${unitName.charAt(0)}` : memo;
+  }, '').trim();
+  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.
-    */
+/*
+* 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.
+*/
 
-    abbreviateTime(timeStr) {
-      return timeStr.split(' ')
-        .filter(unitStr => unitStr.charAt(0) !== '0')[0];
-    },
+export function abbreviateTime(timeStr) {
+  return timeStr.split(' ')
+    .filter(unitStr => unitStr.charAt(0) !== '0')[0];
+}
 
-    secondsToMinutes(seconds) {
-      return Math.abs(seconds / 60);
-    },
-  };
-})(window.gl || (window.gl = {}));

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

 import stopwatchSvg from 'icons/_icon_stopwatch.svg';
-
-import '../../../lib/utils/pretty_time';
+import { abbreviateTime } from '../../../lib/utils/pretty_time';
 
 export default {
   name: 'time-tracking-collapsed-state',
@@ -79,7 +78,7 @@ export default {
   },
   methods: {
     abbreviateTime(timeStr) {
-      return gl.utils.prettyTime.abbreviateTime(timeStr);
+      return abbreviateTime(timeStr);
     },
   },
   template: `

app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.js

-import '../../../lib/utils/pretty_time';
-
-const prettyTime = gl.utils.prettyTime;
+import { parseSeconds, stringifyTime } from '../../../lib/utils/pretty_time';
 
 export default {
   name: 'time-tracking-comparison-pane',
@@ -23,12 +21,12 @@ export default {
     },
   },
   computed: {
-    parsedRemaining() {
+    parsedTimeRemaining() {
       const diffSeconds = this.timeEstimate - this.timeSpent;
-      return prettyTime.parseSeconds(diffSeconds);
+      return parseSeconds(diffSeconds);
     },
     timeRemainingHumanReadable() {
-      return prettyTime.stringifyTime(this.parsedRemaining);
+      return stringifyTime(this.parsedTimeRemaining);
     },
     timeRemainingTooltip() {
       const prefix = this.timeRemainingMinutes < 0 ? 'Over by' : 'Time remaining:';
@@ -44,13 +42,6 @@ export default {
     timeRemainingStatusClass() {
       return this.timeEstimate >= this.timeSpent ? 'within_estimate' : 'over_estimate';
     },
-    /* Parsed time values */
-    parsedEstimate() {
-      return prettyTime.parseSeconds(this.timeEstimate);
-    },
-    parsedSpent() {
-      return prettyTime.parseSeconds(this.timeSpent);
-    },
   },
   template: `
     <div class="time-tracking-comparison-pane">