Export date utility functions as ES6 modules

app/assets/javascripts/activities.js

@@ -2,6 +2,7 @@
 /* global Pager */
 
 import Cookies from 'js-cookie';
+import { localTimeAgo } from './lib/utils/datetime_utility';
 
 class Activities {
   constructor() {
@@ -15,7 +16,7 @@ class Activities {
   }
 
   updateTooltips() {
-    gl.utils.localTimeAgo($('.js-timeago', '.content_list'));
+    localTimeAgo($('.js-timeago', '.content_list'));
   }
 
   reloadActivities() {

app/assets/javascripts/commits.js

@@ -4,6 +4,7 @@
 /* global Pager */
 
 import { pluralize } from './lib/utils/text_utility';
+import { localTimeAgo } from './lib/utils/datetime_utility';
 
 export default (function () {
   const CommitsList = {};
@@ -91,7 +92,7 @@ export default (function () {
       $commitsHeadersLast.find('span.commits-count').text(`${commitsCount} ${pluralize('commit', commitsCount)}`);
     }
 
-    gl.utils.localTimeAgo($processedData.find('.js-timeago'));
+    localTimeAgo($processedData.find('.js-timeago'));
 
     return processedData;
   };

app/assets/javascripts/compare.js

 /* eslint-disable func-names, space-before-function-paren, wrap-iife, quotes, no-var, object-shorthand, consistent-return, no-unused-vars, comma-dangle, vars-on-top, prefer-template, max-len */
+import { localTimeAgo } from './lib/utils/datetime_utility';
 
 window.Compare = (function() {
   function Compare(opts) {
@@ -81,7 +82,7 @@ window.Compare = (function() {
         loading.hide();
         $target.html(html);
         var className = '.' + $target[0].className.replace(' ', '.');
-        gl.utils.localTimeAgo($('.js-timeago', className));
+        localTimeAgo($('.js-timeago', className));
       }
     });
   };

app/assets/javascripts/deploy_keys/components/key.vue

 <script>
   import actionBtn from './action_btn.vue';
+  import { getTimeago } from '../../lib/utils/datetime_utility';
 
   export default {
     props: {
@@ -21,7 +22,7 @@
     },
     computed: {
       timeagoDate() {
-        return gl.utils.getTimeago().format(this.deployKey.created_at);
+        return getTimeago().format(this.deployKey.created_at);
       },
       editDeployKeyPath() {
         return `${this.endpoint}/${this.deployKey.id}/edit`;

app/assets/javascripts/diff_notes/models/discussion.js

@@ -2,6 +2,7 @@
 /* global NoteModel */
 
 import Vue from 'vue';
+import { localTimeAgo } from '../../lib/utils/datetime_utility';
 
 class DiscussionModel {
   constructor (discussionId) {
@@ -71,7 +72,7 @@ class DiscussionModel {
         $(`${discussionSelector} .discussion-header`).append(data.discussion_headline_html);
       }
 
-      gl.utils.localTimeAgo($('.js-timeago', `${discussionSelector}`));
+      localTimeAgo($('.js-timeago', `${discussionSelector}`));
     } else {
       $discussionHeadline.remove();
     }

app/assets/javascripts/job.js

@@ -2,6 +2,7 @@ import _ from 'underscore';
 import bp from './breakpoints';
 import { bytesToKiB } from './lib/utils/number_utils';
 import { setCiStatusFavicon } from './lib/utils/common_utils';
+import { timeFor } from './lib/utils/datetime_utility';
 
 export default class Job {
   constructor(options) {
@@ -260,7 +261,7 @@ export default class Job {
     if ($date.length) {
       const date = $date.text();
       return $date.text(
-        gl.utils.timeFor(new Date(date.replace(/([0-9]+)-([0-9]+)-([0-9]+)/g, '$1/$2/$3')), ' '),
+        timeFor(new Date(date.replace(/([0-9]+)-([0-9]+)-([0-9]+)/g, '$1/$2/$3'))),
       );
     }
   }

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

-class Cache {
+export default class Cache {
   constructor() {
     this.internalStorage = { };
   }
@@ -15,5 +15,3 @@ class Cache {
     delete this.internalStorage[key];
   }
 }
-
-export default Cache;

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

-/* eslint-disable import/prefer-default-export */
 export const BYTES_IN_KIB = 1024;
 export const HIDDEN_CLASS = 'hidden';

app/assets/javascripts/main.js

@@ -28,7 +28,7 @@ import './commit/image_file';
 
 // lib/utils
 import { handleLocationHash } from './lib/utils/common_utils';
-import './lib/utils/datetime_utility';
+import { localTimeAgo, renderTimeago, getLocationHash } from './lib/utils/datetime_utility';
 import './lib/utils/url_utility';
 
 // behaviors
@@ -122,7 +122,7 @@ $(function () {
   // `hashchange` is not triggered when link target is already in window.location
   $body.on('click', 'a[href^="#"]', function() {
     var href = this.getAttribute('href');
-    if (href.substr(1) === gl.utils.getLocationHash()) {
+    if (href.substr(1) === getLocationHash()) {
       setTimeout(handleLocationHash, 1);
     }
   });
@@ -194,7 +194,7 @@ $(function () {
     return $(this).parents('form').submit();
   // Form submitter
   });
-  gl.utils.localTimeAgo($('abbr.timeago, .js-timeago'), true);
+  localTimeAgo($('abbr.timeago, .js-timeago'), true);
   // Disable form buttons while a form is submitting
   $body.on('ajax:complete, ajax:beforeSend, submit', 'form', function (e) {
     var buttons;
@@ -283,7 +283,7 @@ $(function () {
   loadAwardsHandler();
   new Aside();
 
-  gl.utils.renderTimeago();
+  renderTimeago();
 
   $(document).trigger('init.scrolling-tabs');
 

app/assets/javascripts/merge_request_tabs.js

@@ -13,6 +13,9 @@ import {
 } from './lib/utils/common_utils';
 import initDiscussionTab from './image_diff/init_discussion_tab';
 import Diff from './diff';
+import {
+  localTimeAgo,
+} from './lib/utils/datetime_utility';
 
 /* eslint-disable max-len */
 // MergeRequestTabs
@@ -246,7 +249,7 @@ import Diff from './diff';
         url: `${source}.json`,
         success: (data) => {
           document.querySelector('div#commits').innerHTML = data.html;
-          gl.utils.localTimeAgo($('.js-timeago', 'div#commits'));
+          localTimeAgo($('.js-timeago', 'div#commits'));
           this.commitsLoaded = true;
           this.scrollToElement('#commits');
         },
@@ -293,7 +296,7 @@ import Diff from './diff';
             gl.diffNotesCompileComponents();
           }
 
-          gl.utils.localTimeAgo($('.js-timeago', 'div#diffs'));
+          localTimeAgo($('.js-timeago', 'div#diffs'));
           $('#diffs .js-syntax-highlight').syntaxHighlight();
 
           if (this.diffViewType() === 'parallel' && this.isDiffAction(this.currentAction)) {
@@ -317,7 +320,7 @@ import Diff from './diff';
 
           // Scroll any linked note into view
           // Similar to `toggler_behavior` in the discussion tab
-          const hash = window.gl.utils.getLocationHash();
+          const hash = gl.utils.getLocationHash();
           const anchor = hash && $container.find(`.note[id="${hash}"]`);
           if (anchor && anchor.length > 0) {
             const notesContent = anchor.closest('.notes_content');

app/assets/javascripts/milestone_select.js

@@ -2,6 +2,7 @@
 /* global Issuable */
 /* global ListMilestone */
 import _ from 'underscore';
+import { timeFor } from './lib/utils/datetime_utility';
 
 (function() {
   this.MilestoneSelect = (function() {
@@ -216,7 +217,7 @@ import _ from 'underscore';
                 $value.css('display', '');
                 if (data.milestone != null) {
                   data.milestone.full_path = _this.currentProject.full_path;
-                  data.milestone.remaining = gl.utils.timeFor(data.milestone.due_date);
+                  data.milestone.remaining = timeFor(data.milestone.due_date);
                   data.milestone.name = data.milestone.title;
                   $value.html(milestoneLinkTemplate(data.milestone));
                   return $sidebarCollapsedValue.find('span').html(collapsedSidebarLabelTemplate(data.milestone));

app/assets/javascripts/notes.js

@@ -24,6 +24,7 @@ import Autosave from './autosave';
 import TaskList from './task_list';
 import { ajaxPost, isInViewport, getPagePath, scrollToElement, isMetaKey } from './lib/utils/common_utils';
 import imageDiffHelper from './image_diff/helpers/index';
+import { localTimeAgo } from './lib/utils/datetime_utility';
 
 window.autosize = Autosize;
 
@@ -310,7 +311,7 @@ export default class Notes {
 
   setupNewNote($note) {
     // Update datetime format on the recent note
-    gl.utils.localTimeAgo($note.find('.js-timeago'), false);
+    localTimeAgo($note.find('.js-timeago'), false);
 
     this.collapseLongCommitList();
     this.taskList.init();
@@ -462,7 +463,7 @@ export default class Notes {
       this.renderDiscussionAvatar(diffAvatarContainer, noteEntity);
     }
 
-    gl.utils.localTimeAgo($('.js-timeago'), false);
+    localTimeAgo($('.js-timeago'), false);
     Notes.checkMergeRequestStatus();
     return this.updateNotesCount(1);
   }

app/assets/javascripts/users/activity_calendar.js

 import _ from 'underscore';
 import d3 from 'd3';
+import { getDayName, getDayDifference } from '../lib/utils/datetime_utility';
 
 const LOADING_HTML = `
   <div class="text-center">
@@ -17,7 +18,7 @@ function getSystemDate(systemUtcOffsetSeconds) {
 
 function formatTooltipText({ date, count }) {
   const dateObject = new Date(date);
-  const dateDayName = gl.utils.getDayName(dateObject);
+  const dateDayName = getDayName(dateObject);
   const dateText = dateObject.format('mmm d, yyyy');
 
   let contribText = 'No contributions';
@@ -51,7 +52,7 @@ export default class ActivityCalendar {
     const oneYearAgo = new Date(today);
     oneYearAgo.setFullYear(today.getFullYear() - 1);
 
-    const days = gl.utils.getDayDifference(oneYearAgo, today);
+    const days = getDayDifference(oneYearAgo, today);
 
     for (let i = 0; i <= days; i += 1) {
       const date = new Date(oneYearAgo);

app/assets/javascripts/users/user_tabs.js

 import ActivityCalendar from './activity_calendar';
+import { localTimeAgo } from '../lib/utils/datetime_utility';
 
 /**
  * UserTabs
@@ -138,7 +139,7 @@ export default class UserTabs {
         const tabSelector = `div#${action}`;
         this.$parentEl.find(tabSelector).html(data.html);
         this.loaded[action] = true;
-        gl.utils.localTimeAgo($('.js-timeago', tabSelector));
+        localTimeAgo($('.js-timeago', tabSelector));
       },
     });
   }

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js

-import '~/lib/utils/datetime_utility';
+import { getTimeago } from '~/lib/utils/datetime_utility';
 import Flash from '../../flash';
 import MemoryUsage from './mr_widget_memory_usage';
 import StatusIcon from './mr_widget_status_icon';
@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     formatDate(date) {
-      return gl.utils.getTimeago().format(date);
+      return getTimeago().format(date);
     },
     hasExternalUrls(deployment = {}) {
       return deployment.external_url && deployment.external_url_formatted;

app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js

 import Timeago from 'timeago.js';
 import { getStateKey } from '../dependencies';
+import { formatDate } from '../../lib/utils/datetime_utility';
 
 export default class MergeRequestStore {
 
@@ -122,7 +123,7 @@ export default class MergeRequestStore {
   static getEventObject(event) {
     return {
       author: MergeRequestStore.getAuthorObject(event),
-      updatedAt: gl.utils.formatDate(MergeRequestStore.getEventUpdatedAtDate(event)),
+      updatedAt: formatDate(MergeRequestStore.getEventUpdatedAtDate(event)),
       formattedUpdatedAt: MergeRequestStore.getEventDate(event),
     };
   }

app/assets/javascripts/vue_shared/components/memory_graph.js

+import { getTimeago } from '../../lib/utils/datetime_utility';
+
 export default {
   name: 'MemoryGraph',
   props: {
@@ -16,7 +18,7 @@ export default {
   },
   computed: {
     getFormattedMedian() {
-      const deployedSince = gl.utils.getTimeago().format(this.deploymentTime * 1000);
+      const deployedSince = getTimeago().format(this.deploymentTime * 1000);
       return `Deployed ${deployedSince}`;
     },
   },

app/assets/javascripts/vue_shared/mixins/timeago.js

-import '../../lib/utils/datetime_utility';
+import { formatDate, getTimeago } from '../../lib/utils/datetime_utility';
 
 /**
  * Mixin with time ago methods used in some vue components
@@ -6,13 +6,13 @@ import '../../lib/utils/datetime_utility';
 export default {
   methods: {
     timeFormated(time) {
-      const timeago = gl.utils.getTimeago();
+      const timeago = getTimeago();
 
       return timeago.format(time);
     },
 
     tooltipTitle(time) {
-      return gl.utils.formatDate(time);
+      return formatDate(time);
     },
   },
 };

spec/javascripts/datetime_utility_spec.js

 import * as datetimeUtility from '~/lib/utils/datetime_utility';
 
-(() => {
-  describe('Date time utils', () => {
-    describe('timeFor', () => {
-      it('returns `past due` when in past', () => {
-        const date = new Date();
-        date.setFullYear(date.getFullYear() - 1);
-
-        expect(
-          gl.utils.timeFor(date),
-        ).toBe('Past due');
-      });
-
-      it('returns remaining time when in the future', () => {
-        const date = new Date();
-        date.setFullYear(date.getFullYear() + 1);
-
-        // Add a day to prevent a transient error. If date is even 1 second
-        // short of a full year, timeFor will return '11 months remaining'
-        date.setDate(date.getDate() + 1);
-
-        expect(
-          gl.utils.timeFor(date),
-        ).toBe('1 year remaining');
-      });
+describe('Date time utils', () => {
+  describe('timeFor', () => {
+    it('returns `past due` when in past', () => {
+      const date = new Date();
+      date.setFullYear(date.getFullYear() - 1);
+
+      expect(
+        datetimeUtility.timeFor(date),
+      ).toBe('Past due');
     });
 
-    describe('get day name', () => {
-      it('should return Sunday', () => {
-        const day = gl.utils.getDayName(new Date('07/17/2016'));
-        expect(day).toBe('Sunday');
-      });
-
-      it('should return Monday', () => {
-        const day = gl.utils.getDayName(new Date('07/18/2016'));
-        expect(day).toBe('Monday');
-      });
-
-      it('should return Tuesday', () => {
-        const day = gl.utils.getDayName(new Date('07/19/2016'));
-        expect(day).toBe('Tuesday');
-      });
-
-      it('should return Wednesday', () => {
-        const day = gl.utils.getDayName(new Date('07/20/2016'));
-        expect(day).toBe('Wednesday');
-      });
-
-      it('should return Thursday', () => {
-        const day = gl.utils.getDayName(new Date('07/21/2016'));
-        expect(day).toBe('Thursday');
-      });
-
-      it('should return Friday', () => {
-        const day = gl.utils.getDayName(new Date('07/22/2016'));
-        expect(day).toBe('Friday');
-      });
-
-      it('should return Saturday', () => {
-        const day = gl.utils.getDayName(new Date('07/23/2016'));
-        expect(day).toBe('Saturday');
-      });
-    });
+    it('returns remaining time when in the future', () => {
+      const date = new Date();
+      date.setFullYear(date.getFullYear() + 1);
+
+      // Add a day to prevent a transient error. If date is even 1 second
+      // short of a full year, timeFor will return '11 months remaining'
+      date.setDate(date.getDate() + 1);
 
-    describe('get day difference', () => {
-      it('should return 7', () => {
-        const firstDay = new Date('07/01/2016');
-        const secondDay = new Date('07/08/2016');
-        const difference = gl.utils.getDayDifference(firstDay, secondDay);
-        expect(difference).toBe(7);
-      });
-
-      it('should return 31', () => {
-        const firstDay = new Date('07/01/2016');
-        const secondDay = new Date('08/01/2016');
-        const difference = gl.utils.getDayDifference(firstDay, secondDay);
-        expect(difference).toBe(31);
-      });
-
-      it('should return 365', () => {
-        const firstDay = new Date('07/02/2015');
-        const secondDay = new Date('07/01/2016');
-        const difference = gl.utils.getDayDifference(firstDay, secondDay);
-        expect(difference).toBe(365);
-      });
+      expect(
+        datetimeUtility.timeFor(date),
+      ).toBe('1 year remaining');
     });
   });
 
-  describe('timeIntervalInWords', () => {
-    it('should return string with number of minutes and seconds', () => {
-      expect(datetimeUtility.timeIntervalInWords(9.54)).toEqual('9 seconds');
-      expect(datetimeUtility.timeIntervalInWords(1)).toEqual('1 second');
-      expect(datetimeUtility.timeIntervalInWords(200)).toEqual('3 minutes 20 seconds');
-      expect(datetimeUtility.timeIntervalInWords(6008)).toEqual('100 minutes 8 seconds');
+  describe('get day name', () => {
+    it('should return Sunday', () => {
+      const day = datetimeUtility.getDayName(new Date('07/17/2016'));
+      expect(day).toBe('Sunday');
+    });
+
+    it('should return Monday', () => {
+      const day = datetimeUtility.getDayName(new Date('07/18/2016'));
+      expect(day).toBe('Monday');
+    });
+
+    it('should return Tuesday', () => {
+      const day = datetimeUtility.getDayName(new Date('07/19/2016'));
+      expect(day).toBe('Tuesday');
+    });
+
+    it('should return Wednesday', () => {
+      const day = datetimeUtility.getDayName(new Date('07/20/2016'));
+      expect(day).toBe('Wednesday');
+    });
+
+    it('should return Thursday', () => {
+      const day = datetimeUtility.getDayName(new Date('07/21/2016'));
+      expect(day).toBe('Thursday');
+    });
+
+    it('should return Friday', () => {
+      const day = datetimeUtility.getDayName(new Date('07/22/2016'));
+      expect(day).toBe('Friday');
+    });
+
+    it('should return Saturday', () => {
+      const day = datetimeUtility.getDayName(new Date('07/23/2016'));
+      expect(day).toBe('Saturday');
     });
   });
 
-  describe('dateInWords', () => {
-    const date = new Date('07/01/2016');
+  describe('get day difference', () => {
+    it('should return 7', () => {
+      const firstDay = new Date('07/01/2016');
+      const secondDay = new Date('07/08/2016');
+      const difference = datetimeUtility.getDayDifference(firstDay, secondDay);
+      expect(difference).toBe(7);
+    });
 
-    it('should return date in words', () => {
-      expect(datetimeUtility.dateInWords(date)).toEqual('July 1, 2016');
+    it('should return 31', () => {
+      const firstDay = new Date('07/01/2016');
+      const secondDay = new Date('08/01/2016');
+      const difference = datetimeUtility.getDayDifference(firstDay, secondDay);
+      expect(difference).toBe(31);
     });
 
-    it('should return abbreviated month name', () => {
-      expect(datetimeUtility.dateInWords(date, true)).toEqual('Jul 1, 2016');
+    it('should return 365', () => {
+      const firstDay = new Date('07/02/2015');
+      const secondDay = new Date('07/01/2016');
+      const difference = datetimeUtility.getDayDifference(firstDay, secondDay);
+      expect(difference).toBe(365);
     });
   });
-})();
+});
+
+describe('timeIntervalInWords', () => {
+  it('should return string with number of minutes and seconds', () => {
+    expect(datetimeUtility.timeIntervalInWords(9.54)).toEqual('9 seconds');
+    expect(datetimeUtility.timeIntervalInWords(1)).toEqual('1 second');
+    expect(datetimeUtility.timeIntervalInWords(200)).toEqual('3 minutes 20 seconds');
+    expect(datetimeUtility.timeIntervalInWords(6008)).toEqual('100 minutes 8 seconds');
+  });
+});
+
+describe('dateInWords', () => {
+  const date = new Date('07/01/2016');
+
+  it('should return date in words', () => {
+    expect(datetimeUtility.dateInWords(date)).toEqual('July 1, 2016');
+  });
+
+  it('should return abbreviated month name', () => {
+    expect(datetimeUtility.dateInWords(date, true)).toEqual('Jul 1, 2016');
+  });
+});

spec/javascripts/deploy_keys/components/key_spec.js

 import Vue from 'vue';
 import DeployKeysStore from '~/deploy_keys/store';
 import key from '~/deploy_keys/components/key.vue';
+import { getTimeago } from '~/lib/utils/datetime_utility';
 
 describe('Deploy keys key', () => {
   let vm;
@@ -37,7 +38,7 @@ describe('Deploy keys key', () => {
     it('renders human friendly formatted created date', () => {
       expect(
         vm.$el.querySelector('.key-created-at').textContent.trim(),
-      ).toBe(`created ${gl.utils.getTimeago().format(deployKey.created_at)}`);
+      ).toBe(`created ${getTimeago().format(deployKey.created_at)}`);
     });
 
     it('shows edit button', () => {

spec/javascripts/notes_spec.js

@@ -224,7 +224,6 @@ import '~/notes';
         notes.note_ids = [];
         notes.updatedNotesTrackingMap = {};
 
-        spyOn(gl.utils, 'localTimeAgo');
         spyOn(Notes, 'isNewNote').and.callThrough();
         spyOn(Notes, 'isUpdatedNote').and.callThrough();
         spyOn(Notes, 'animateAppendNote').and.callThrough();
@@ -351,7 +350,6 @@ import '~/notes';
         ]);
         notes.note_ids = [];
 
-        spyOn(gl.utils, 'localTimeAgo');
         spyOn(Notes, 'isNewNote');
         spyOn(Notes, 'animateAppendNote');
         Notes.isNewNote.and.returnValue(true);

spec/javascripts/vue_mr_widget/components/mr_widget_deployment_spec.js

 import Vue from 'vue';
 import deploymentComponent from '~/vue_merge_request_widget/components/mr_widget_deployment';
 import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
+import { getTimeago } from '~/lib/utils/datetime_utility';
 
 const deploymentMockData = [
   {
@@ -48,7 +49,7 @@ describe('MRWidgetDeployment', () => {
 
     describe('formatDate', () => {
       it('should work', () => {
-        const readable = gl.utils.getTimeago().format(deployment.deployed_at);
+        const readable = getTimeago().format(deployment.deployed_at);
         expect(vm.formatDate(deployment.deployed_at)).toEqual(readable);
       });
     });

spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js

 import Vue from 'vue';
 import timeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-import '~/lib/utils/datetime_utility';
+import { formatDate, getTimeago } from '~/lib/utils/datetime_utility';
 
 describe('Time ago with tooltip component', () => {
   let TimeagoTooltip;
@@ -24,10 +24,10 @@ describe('Time ago with tooltip component', () => {
     expect(vm.$el.tagName).toEqual('TIME');
     expect(
       vm.$el.getAttribute('data-original-title'),
-    ).toEqual(gl.utils.formatDate('2017-05-08T14:57:39.781Z'));
+    ).toEqual(formatDate('2017-05-08T14:57:39.781Z'));
     expect(vm.$el.getAttribute('data-placement')).toEqual('top');
 
-    const timeago = gl.utils.getTimeago();
+    const timeago = getTimeago();
 
     expect(vm.$el.textContent.trim()).toEqual(timeago.format('2017-05-08T14:57:39.781Z'));
   });