Merge branch 'leipert-update-timeago-to-use-no-jquery' into 'master'

Update localTimeAgo to accept Arrays and NodeList

See merge request gitlab-org/gitlab!65851

app/assets/javascripts/activities.js

@@ -42,7 +42,7 @@ export default class Activities {
   }
 
   updateTooltips() {
-    localTimeAgo($('.js-timeago', '.content_list'));
+    localTimeAgo(document.querySelectorAll('.content_list .js-timeago'));
   }
 
   reloadActivities() {

app/assets/javascripts/commits.js

@@ -93,7 +93,7 @@ export default class CommitsList {
         .text(n__('%d commit', '%d commits', commitsCount));
     }
 
-    localTimeAgo($processedData.find('.js-timeago'));
+    localTimeAgo($processedData.find('.js-timeago').get());
 
     return processedData;
   }

app/assets/javascripts/lib/utils/datetime/timeago_utility.js

-import $ from 'jquery';
 import * as timeago from 'timeago.js';
 import { languageCode, s__, createDateTimeFormat } from '../../../locale';
 import { formatDate } from './date_format_utility';
@@ -97,21 +96,21 @@ export const getTimeago = () =>
 
 /**
  * For the given elements, sets a tooltip with a formatted date.
- * @param {JQuery} $timeagoEls
- * @param {Boolean} setTimeago
+ * @param {Array<Node>|NodeList} elements
+ * @param {Boolean} updateTooltip
  */
-export const localTimeAgo = ($timeagoEls, setTimeago = true) => {
+export const localTimeAgo = (elements, updateTooltip = true) => {
   const { format } = getTimeago();
-  $timeagoEls.each((i, el) => {
-    $(el).text(format($(el).attr('datetime'), timeagoLanguageCode));
+  elements.forEach((el) => {
+    el.innerText = format(el.dateTime, timeagoLanguageCode);
   });
 
-  if (!setTimeago) {
+  if (!updateTooltip) {
     return;
   }
 
   function addTimeAgoTooltip() {
-    $timeagoEls.each((i, el) => {
+    elements.forEach((el) => {
       // Recreate with custom template
       el.setAttribute('title', formatDate(el.dateTime));
     });

app/assets/javascripts/main.js

@@ -183,7 +183,7 @@ document.addEventListener('DOMContentLoaded', () => {
     return true;
   });
 
-  localTimeAgo($('abbr.timeago, .js-timeago'), true);
+  localTimeAgo(document.querySelectorAll('abbr.timeago, .js-timeago'), true);
 
   /**
    * This disables form buttons while a form is submitting

app/assets/javascripts/merge_request_tabs.js

@@ -333,8 +333,9 @@ export default class MergeRequestTabs {
     axios
       .get(`${source}.json`)
       .then(({ data }) => {
-        document.querySelector('div#commits').innerHTML = data.html;
-        localTimeAgo($('.js-timeago', 'div#commits'));
+        const commitsDiv = document.querySelector('div#commits');
+        commitsDiv.innerHTML = data.html;
+        localTimeAgo(commitsDiv.querySelectorAll('.js-timeago'));
         this.commitsLoaded = true;
         this.scrollToContainerElement('#commits');
 
@@ -407,7 +408,7 @@ export default class MergeRequestTabs {
 
         initChangesDropdown(this.stickyTop);
 
-        localTimeAgo($('.js-timeago', 'div#diffs'));
+        localTimeAgo(document.querySelectorAll('#diffs .js-timeago'));
         syntaxHighlight($('#diffs .js-syntax-highlight'));
 
         if (this.isDiffAction(this.currentAction)) {

app/assets/javascripts/notes.js

@@ -358,7 +358,7 @@ export default class Notes {
 
   setupNewNote($note) {
     // Update datetime format on the recent note
-    localTimeAgo($note.find('.js-timeago'), false);
+    localTimeAgo($note.find('.js-timeago').get(), false);
 
     this.collapseLongCommitList();
     this.taskList.init();
@@ -511,7 +511,7 @@ export default class Notes {
       Notes.animateAppendNote(noteEntity.html, discussionContainer);
     }
 
-    localTimeAgo($('.js-timeago'), false);
+    localTimeAgo(document.querySelectorAll('.js-timeago'), false);
     Notes.checkMergeRequestStatus();
     return this.updateNotesCount(1);
   }

app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js

@@ -15,7 +15,7 @@ const updateCommitList = (url, $loadingIndicator, $commitList, params) => {
     .then(({ data }) => {
       $loadingIndicator.hide();
       $commitList.html(data);
-      localTimeAgo($('.js-timeago', $commitList));
+      localTimeAgo($commitList.get(0).querySelectorAll('.js-timeago'));
     });
 };
 

app/assets/javascripts/pages/users/user_tabs.js

@@ -166,7 +166,7 @@ export default class UserTabs {
         const tabSelector = `div#${action}`;
         this.$parentEl.find(tabSelector).html(data.html);
         this.loaded[action] = true;
-        localTimeAgo($('.js-timeago', tabSelector));
+        localTimeAgo(document.querySelectorAll(`${tabSelector} .js-timeago`));
 
         this.toggleLoading(false);
       })
@@ -209,7 +209,7 @@ export default class UserTabs {
       container,
       url: $(`${container} .overview-content-list`).data('href'),
       ...options,
-      postRenderCallback: () => localTimeAgo($('.js-timeago', container)),
+      postRenderCallback: () => localTimeAgo(document.querySelectorAll(`${container} .js-timeago`)),
     });
   }
 

spec/frontend/lib/utils/datetime/timeago_utility_spec.js

-import $ from 'jquery';
 import { getTimeago, localTimeAgo, timeFor } from '~/lib/utils/datetime/timeago_utility';
 import { s__ } from '~/locale';
 import '~/commons/bootstrap';
@@ -81,16 +80,16 @@ describe('TimeAgo utils', () => {
       `With User Setting timeDisplayRelative: $timeDisplayRelative`,
       ({ timeDisplayRelative, text }) => {
         it.each`
-          timeagoArg | title
-          ${false}   | ${'some time'}
-          ${true}    | ${'Feb 18, 2020 10:22pm UTC'}
+          updateTooltip | title
+          ${false}      | ${'some time'}
+          ${true}       | ${'Feb 18, 2020 10:22pm UTC'}
         `(
-          `has content: '${text}' and tooltip: '$title' with timeagoArg = $timeagoArg`,
-          ({ timeagoArg, title }) => {
+          `has content: '${text}' and tooltip: '$title' with updateTooltip = $updateTooltip`,
+          ({ updateTooltip, title }) => {
             window.gon = { time_display_relative: timeDisplayRelative };
 
             const element = document.querySelector('time');
-            localTimeAgo($(element), timeagoArg);
+            localTimeAgo([element], updateTooltip);
 
             jest.runAllTimers();