1 files changed, 72 insertions, 47 deletions

diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js
index 82dcbdc26c8..1d1763c3963 100644
--- a/app/assets/javascripts/lib/utils/datetime_utility.js
+++ b/app/assets/javascripts/lib/utils/datetime_utility.js
@@ -1,9 +1,15 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, comma-dangle, no-unused-expressions, prefer-template, max-len */
-/* global timeago */
-/* global dateFormat */
 
-window.timeago = require('timeago.js');
-window.dateFormat = require('vendor/date.format');
+import timeago from 'timeago.js';
+import dateFormat from 'vendor/date.format';
+
+import {
+  lang,
+  s__,
+} from '../../locale';
+
+window.timeago = timeago;
+window.dateFormat = dateFormat;
 
 (function() {
   (function(w) {
@@ -28,7 +34,7 @@ window.dateFormat = require('vendor/date.format');
 
     w.gl.utils.localTimeAgo = function($timeagoEls, setTimeago = true) {
       $timeagoEls.each((i, el) => {
-        el.setAttribute('title', gl.utils.formatDate(el.getAttribute('datetime')));
+        el.setAttribute('title', el.getAttribute('title'));
 
         if (setTimeago) {
           // Recreate with custom template
@@ -47,26 +53,45 @@ window.dateFormat = require('vendor/date.format');
       var locale;
 
       if (!timeagoInstance) {
+        const localeRemaining = function(number, index) {
+          return [
+            [s__('Timeago|less than a minute ago'), s__('Timeago|a while')],
+            [s__('Timeago|less than a minute ago'), s__('Timeago|%s seconds remaining')],
+            [s__('Timeago|about a minute ago'), s__('Timeago|1 minute remaining')],
+            [s__('Timeago|%s minutes ago'), s__('Timeago|%s minutes remaining')],
+            [s__('Timeago|about an hour ago'), s__('Timeago|1 hour remaining')],
+            [s__('Timeago|about %s hours ago'), s__('Timeago|%s hours remaining')],
+            [s__('Timeago|a day ago'), s__('Timeago|1 day remaining')],
+            [s__('Timeago|%s days ago'), s__('Timeago|%s days remaining')],
+            [s__('Timeago|a week ago'), s__('Timeago|1 week remaining')],
+            [s__('Timeago|%s weeks ago'), s__('Timeago|%s weeks remaining')],
+            [s__('Timeago|a month ago'), s__('Timeago|1 month remaining')],
+            [s__('Timeago|%s months ago'), s__('Timeago|%s months remaining')],
+            [s__('Timeago|a year ago'), s__('Timeago|1 year remaining')],
+            [s__('Timeago|%s years ago'), s__('Timeago|%s years remaining')]
+          ][index];
+        };
         locale = function(number, index) {
           return [
-            ['less than a minute ago', 'a while'],
-            ['less than a minute ago', 'in %s seconds'],
-            ['about a minute ago', 'in 1 minute'],
-            ['%s minutes ago', 'in %s minutes'],
-            ['about an hour ago', 'in 1 hour'],
-            ['about %s hours ago', 'in %s hours'],
-            ['a day ago', 'in 1 day'],
-            ['%s days ago', 'in %s days'],
-            ['a week ago', 'in 1 week'],
-            ['%s weeks ago', 'in %s weeks'],
-            ['a month ago', 'in 1 month'],
-            ['%s months ago', 'in %s months'],
-            ['a year ago', 'in 1 year'],
-            ['%s years ago', 'in %s years']
+            [s__('Timeago|less than a minute ago'), s__('Timeago|a while')],
+            [s__('Timeago|less than a minute ago'), s__('Timeago|in %s seconds')],
+            [s__('Timeago|about a minute ago'), s__('Timeago|in 1 minute')],
+            [s__('Timeago|%s minutes ago'), s__('Timeago|in %s minutes')],
+            [s__('Timeago|about an hour ago'), s__('Timeago|in 1 hour')],
+            [s__('Timeago|about %s hours ago'), s__('Timeago|in %s hours')],
+            [s__('Timeago|a day ago'), s__('Timeago|in 1 day')],
+            [s__('Timeago|%s days ago'), s__('Timeago|in %s days')],
+            [s__('Timeago|a week ago'), s__('Timeago|in 1 week')],
+            [s__('Timeago|%s weeks ago'), s__('Timeago|in %s weeks')],
+            [s__('Timeago|a month ago'), s__('Timeago|in 1 month')],
+            [s__('Timeago|%s months ago'), s__('Timeago|in %s months')],
+            [s__('Timeago|a year ago'), s__('Timeago|in 1 year')],
+            [s__('Timeago|%s years ago'), s__('Timeago|in %s years')]
           ][index];
         };
 
-        timeago.register('gl_en', locale);
+        timeago.register(lang, locale);
+        timeago.register(`${lang}-remaining`, localeRemaining);
         timeagoInstance = timeago();
       }
 
@@ -78,41 +103,20 @@ window.dateFormat = require('vendor/date.format');
       if (!time) {
         return '';
       }
-      suffix || (suffix = 'remaining');
-      expiredLabel || (expiredLabel = 'Past due');
-      timefor = gl.utils.getTimeago().format(time).replace('in', '');
-      if (timefor.indexOf('ago') > -1) {
+      if (new Date(time) < new Date()) {
+        expiredLabel || (expiredLabel = s__('Timeago|Past due'));
         timefor = expiredLabel;
       } else {
-        timefor = timefor.trim() + ' ' + suffix;
+        timefor = gl.utils.getTimeago().format(time, `${lang}-remaining`).trim();
       }
       return timefor;
     };
 
-    w.gl.utils.cachedTimeagoElements = [];
     w.gl.utils.renderTimeago = function($els) {
-      if (!$els && !w.gl.utils.cachedTimeagoElements.length) {
-        w.gl.utils.cachedTimeagoElements = [].slice.call(document.querySelectorAll('.js-timeago-render'));
-      } else if ($els) {
-        w.gl.utils.cachedTimeagoElements = w.gl.utils.cachedTimeagoElements.concat($els.toArray());
-      }
-
-      w.gl.utils.cachedTimeagoElements.forEach(gl.utils.updateTimeagoText);
-    };
-
-    w.gl.utils.updateTimeagoText = function(el) {
-      const timeago = gl.utils.getTimeago();
-      const formattedDate = timeago.format(el.getAttribute('datetime'), 'gl_en');
+      const timeagoEls = $els || document.querySelectorAll('.js-timeago-render');
 
-      if (el.textContent !== formattedDate) {
-        el.textContent = formattedDate;
-      }
-    };
-
-    w.gl.utils.initTimeagoTimeout = function() {
-      gl.utils.renderTimeago();
-
-      gl.utils.timeagoTimeout = setTimeout(gl.utils.initTimeagoTimeout, 1000);
+      // timeago.js sets timeouts internally for each timeago value to be updated in real time
+      gl.utils.getTimeago().render(timeagoEls, lang);
     };
 
     w.gl.utils.getDayDifference = function(a, b) {
@@ -124,3 +128,24 @@ window.dateFormat = require('vendor/date.format');
     };
   })(window);
 }).call(window);
+
+/**
+ * Port of ruby helper time_interval_in_words.
+ *
+ * @param  {Number} seconds
+ * @return {String}
+ */
+// eslint-disable-next-line import/prefer-default-export
+export function timeIntervalInWords(intervalInSeconds) {
+  const secondsInteger = parseInt(intervalInSeconds, 10);
+  const minutes = Math.floor(secondsInteger / 60);
+  const seconds = secondsInteger - (minutes * 60);
+  let text = '';
+
+  if (minutes >= 1) {
+    text = `${minutes} ${gl.text.pluralize('minute', minutes)} ${seconds} ${gl.text.pluralize('second', seconds)}`;
+  } else {
+    text = `${seconds} ${gl.text.pluralize('second', seconds)}`;
+  }
+  return text;
+}