jupyterlab_notifications_extension 1.2.20 → 1.2.22

package/lib/index.js

@@ -136,12 +136,67 @@ function injectTimeAgoIntoCenter(center) {
         }
     }, 10000);
 }
+/**
+ * Inject time-ago into a single toast element using Notification.manager
+ * timestamps. Used by the MutationObserver for toasts NOT created by our
+ * extension (e.g. JupyterLab culler, file upload, kernel notifications).
+ */
+function injectTimeAgoIntoToast(toast) {
+    const msgEl = toast.querySelector('.jp-toast-message');
+    if (!msgEl) {
+        return;
+    }
+    const parent = msgEl.parentElement;
+    if (msgEl.querySelector('.jp-toast-time-ago') ||
+        (parent && parent.querySelector('.jp-toast-time-ago'))) {
+        return;
+    }
+    const msg = normalizeMsg(msgEl.innerText || '');
+    // Check server-side map first, then fall back to manager timestamps
+    const serverTs = serverCreatedAtMap.get(msg);
+    let createdAt = null;
+    if (serverTs && serverTs.length > 0) {
+        createdAt = serverTs[0];
+    }
+    else {
+        for (const n of Notification.manager.notifications) {
+            if (normalizeMsg(n.message) === msg) {
+                createdAt = n.createdAt;
+                break;
+            }
+        }
+    }
+    if (createdAt === null) {
+        return;
+    }
+    const timeEl = createTimeAgoElement(createdAt);
+    const bar = parent ? parent.querySelector('.jp-toast-buttonBar') : null;
+    if (bar) {
+        timeEl.style.marginTop = '0';
+        bar.insertBefore(timeEl, bar.firstChild);
+    }
+    else {
+        msgEl.appendChild(timeEl);
+    }
+    // Refresh while the toast is in the DOM
+    const refreshInterval = setInterval(() => {
+        if (!document.body.contains(timeEl)) {
+            clearInterval(refreshInterval);
+            return;
+        }
+        const ts = Number(timeEl.dataset.createdAt);
+        if (ts) {
+            timeEl.textContent = formatTimeAgo(ts);
+        }
+    }, 10000);
+}
 /**
  * Set up a MutationObserver to watch for the Notification Center
- * opening and inject time-ago indicators into its list items.
+ * opening and for any toast popup appearing, injecting time-ago
+ * indicators into both.
  *
- * Uses subtree observation to catch both the center being added
- * and its list items being populated after the initial render.
+ * Uses subtree observation to catch the center being added,
+ * its list items being populated, and individual toast popups.
  */
 function observeNotificationCenter() {
     const observer = new MutationObserver(mutations => {
@@ -163,6 +218,14 @@ function observeNotificationCenter() {
                 const existingCenter = node.closest('.jp-Notification-Center');
                 if (existingCenter) {
                     setTimeout(() => injectTimeAgoIntoCenter(existingCenter), 100);
+                    continue;
+                }
+                // Catch toast popups (from any source, not just our extension)
+                const toast = node.classList.contains('Toastify__toast')
+                    ? node
+                    : node.querySelector('.Toastify__toast');
+                if (toast instanceof HTMLElement) {
+                    setTimeout(() => injectTimeAgoIntoToast(toast), 100);
                 }
             }
         }

package/lib/utils.d.ts

@@ -1,8 +1,8 @@
 /**
  * Format a Unix timestamp (ms) as a relative time string.
  *
- * Returns a compact label such as "just now", "30s ago", "5m ago",
- * "2h ago", or "3d ago".
+ * Returns a compact label such as "just now", "5m ago", "2h ago",
+ * or "3d ago". Anything under 60 seconds is shown as "just now".
  */
 export declare function formatTimeAgo(createdAt: number): string;
 /**

package/lib/utils.js

@@ -1,17 +1,14 @@
 /**
  * Format a Unix timestamp (ms) as a relative time string.
  *
- * Returns a compact label such as "just now", "30s ago", "5m ago",
- * "2h ago", or "3d ago".
+ * Returns a compact label such as "just now", "5m ago", "2h ago",
+ * or "3d ago". Anything under 60 seconds is shown as "just now".
  */
 export function formatTimeAgo(createdAt) {
     const delta = Math.max(0, Date.now() - createdAt);
     const seconds = Math.floor(delta / 1000);
-    if (seconds < 5) {
-        return 'just now';
-    }
     if (seconds < 60) {
-        return `${seconds}s ago`;
+        return 'just now';
     }
     const minutes = Math.floor(seconds / 60);
     if (minutes < 60) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyterlab_notifications_extension",
-    "version": "1.2.20",
+    "version": "1.2.22",
     "description": "Jupyterlab extension to receive and display notifications in the main panel. Those can be from the jupyterjub administrator or from other places.",
     "keywords": [
         "jupyter",

package/src/__tests__/utils.spec.ts

@@ -1,15 +1,11 @@
 import { formatTimeAgo, appendTimeAgo } from '../utils';
 
 describe('formatTimeAgo', () => {
-  it('returns "just now" for timestamps less than 5 seconds old', () => {
+  it('returns "just now" for timestamps less than 60 seconds old', () => {
     expect(formatTimeAgo(Date.now())).toBe('just now');
-    expect(formatTimeAgo(Date.now() - 4999)).toBe('just now');
-  });
-
-  it('returns seconds for 5-59 seconds', () => {
-    expect(formatTimeAgo(Date.now() - 5000)).toBe('5s ago');
-    expect(formatTimeAgo(Date.now() - 30000)).toBe('30s ago');
-    expect(formatTimeAgo(Date.now() - 59000)).toBe('59s ago');
+    expect(formatTimeAgo(Date.now() - 5000)).toBe('just now');
+    expect(formatTimeAgo(Date.now() - 30000)).toBe('just now');
+    expect(formatTimeAgo(Date.now() - 59000)).toBe('just now');
   });
 
   it('returns minutes for 1-59 minutes', () => {

package/src/index.ts

@@ -192,12 +192,71 @@ function injectTimeAgoIntoCenter(center: Element): void {
   }, 10000);
 }
 
+/**
+ * Inject time-ago into a single toast element using Notification.manager
+ * timestamps. Used by the MutationObserver for toasts NOT created by our
+ * extension (e.g. JupyterLab culler, file upload, kernel notifications).
+ */
+function injectTimeAgoIntoToast(toast: HTMLElement): void {
+  const msgEl = toast.querySelector('.jp-toast-message') as HTMLElement | null;
+  if (!msgEl) {
+    return;
+  }
+  const parent = msgEl.parentElement;
+  if (
+    msgEl.querySelector('.jp-toast-time-ago') ||
+    (parent && parent.querySelector('.jp-toast-time-ago'))
+  ) {
+    return;
+  }
+  const msg = normalizeMsg(msgEl.innerText || '');
+
+  // Check server-side map first, then fall back to manager timestamps
+  const serverTs = serverCreatedAtMap.get(msg);
+  let createdAt: number | null = null;
+  if (serverTs && serverTs.length > 0) {
+    createdAt = serverTs[0];
+  } else {
+    for (const n of Notification.manager.notifications) {
+      if (normalizeMsg(n.message) === msg) {
+        createdAt = n.createdAt;
+        break;
+      }
+    }
+  }
+  if (createdAt === null) {
+    return;
+  }
+
+  const timeEl = createTimeAgoElement(createdAt);
+  const bar = parent ? parent.querySelector('.jp-toast-buttonBar') : null;
+  if (bar) {
+    timeEl.style.marginTop = '0';
+    bar.insertBefore(timeEl, bar.firstChild);
+  } else {
+    msgEl.appendChild(timeEl);
+  }
+
+  // Refresh while the toast is in the DOM
+  const refreshInterval = setInterval(() => {
+    if (!document.body.contains(timeEl)) {
+      clearInterval(refreshInterval);
+      return;
+    }
+    const ts = Number(timeEl.dataset.createdAt);
+    if (ts) {
+      timeEl.textContent = formatTimeAgo(ts);
+    }
+  }, 10000);
+}
+
 /**
  * Set up a MutationObserver to watch for the Notification Center
- * opening and inject time-ago indicators into its list items.
+ * opening and for any toast popup appearing, injecting time-ago
+ * indicators into both.
  *
- * Uses subtree observation to catch both the center being added
- * and its list items being populated after the initial render.
+ * Uses subtree observation to catch the center being added,
+ * its list items being populated, and individual toast popups.
  */
 function observeNotificationCenter(): void {
   const observer = new MutationObserver(mutations => {
@@ -219,6 +278,14 @@ function observeNotificationCenter(): void {
         const existingCenter = node.closest('.jp-Notification-Center');
         if (existingCenter) {
           setTimeout(() => injectTimeAgoIntoCenter(existingCenter), 100);
+          continue;
+        }
+        // Catch toast popups (from any source, not just our extension)
+        const toast = node.classList.contains('Toastify__toast')
+          ? node
+          : node.querySelector('.Toastify__toast');
+        if (toast instanceof HTMLElement) {
+          setTimeout(() => injectTimeAgoIntoToast(toast), 100);
         }
       }
     }

package/src/utils.ts

@@ -1,18 +1,15 @@
 /**
  * Format a Unix timestamp (ms) as a relative time string.
  *
- * Returns a compact label such as "just now", "30s ago", "5m ago",
- * "2h ago", or "3d ago".
+ * Returns a compact label such as "just now", "5m ago", "2h ago",
+ * or "3d ago". Anything under 60 seconds is shown as "just now".
  */
 export function formatTimeAgo(createdAt: number): string {
   const delta = Math.max(0, Date.now() - createdAt);
   const seconds = Math.floor(delta / 1000);
 
-  if (seconds < 5) {
-    return 'just now';
-  }
   if (seconds < 60) {
-    return `${seconds}s ago`;
+    return 'just now';
   }
   const minutes = Math.floor(seconds / 60);
   if (minutes < 60) {