@activecollab/components 2.0.406 → 2.0.408

package/dist/esm/presentation/shared/WebhookLogsDialog.js

@@ -217,6 +217,54 @@ const StatusChip = _ref => {
   });
 };
 
+/* --- Relative "ago" time -------------------------------------------------- */
+/* The Time column reads relative to a fixed "now" so the mock's examples stay  */
+/* stable across renders — a live clock would drift the buckets on every reload */
+/* and the crafted "3 minutes ago" / "Yesterday" rows would lose their meaning. */
+
+const NOW = new Date(2026, 7, 11, 15, 0, 0); // Tue, 11 Aug 2026, 15:00
+const NOW_TS = Math.floor(NOW.getTime() / 1000);
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+const pad2 = value => String(value).padStart(2, "0");
+const startOfDay = date => new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+
+/**
+ * When a webhook was received, in the app's relative style:
+ *   < 1 min               → "Just now"
+ *   < 1 hour              → "N minutes ago"
+ *   earlier today         → "Today, HH:MM"
+ *   yesterday             → "Yesterday, HH:MM"
+ *   older, this year      → "MMM D"
+ *   older, earlier years  → "MMM D, YYYY"
+ */
+const formatReceivedAt = function (receivedAt, now) {
+  if (now === void 0) {
+    now = NOW;
+  }
+  const then = new Date(receivedAt * 1000);
+  const diffMinutes = Math.floor((now.getTime() - then.getTime()) / 60000);
+  if (diffMinutes < 1) {
+    return "Just now";
+  }
+  if (diffMinutes < 60) {
+    return diffMinutes + " " + (diffMinutes === 1 ? "minute" : "minutes") + " ago";
+  }
+  const time = pad2(then.getHours()) + ":" + pad2(then.getMinutes());
+  const dayDiff = Math.round((startOfDay(now) - startOfDay(then)) / 86400000);
+  if (dayDiff === 0) {
+    return "Today, " + time;
+  }
+  if (dayDiff === 1) {
+    return "Yesterday, " + time;
+  }
+  const date = MONTHS[then.getMonth()] + " " + then.getDate();
+  return then.getFullYear() === now.getFullYear() ? date : date + ", " + then.getFullYear();
+};
+
+/* Timestamp helpers for the mock data below. */
+const secondsAgo = seconds => NOW_TS - seconds;
+const at = (year, month, day, hour, minute) => Math.floor(new Date(year, month, day, hour, minute, 0).getTime() / 1000);
+
 /* --- Mock log data (newest first is enforced by sorting on receivedAt) --- */
 
 const PAYLOAD_ISSUE_OPENED = JSON.stringify({
@@ -284,8 +332,10 @@ const PAYLOAD_PUSH = JSON.stringify({
     full_name: "activecollab/feather"
   }
 }, null, 2);
-const WEBHOOK_LOGS = [{
-  id: "log-7",
+const WEBHOOK_LOGS = [
+// Just now (< 1 minute)
+{
+  id: "log-just-now",
   connectionId: "gh-activecollab",
   repositoryId: "ac-feather",
   eventKind: "issue",
@@ -301,10 +351,11 @@ const WEBHOOK_LOGS = [{
     }
   }],
   payload: PAYLOAD_ISSUE_OPENED,
-  receivedOn: "Jun 29, 2026 · 14:32",
-  receivedAt: 1751207520
-}, {
-  id: "log-6",
+  receivedAt: secondsAgo(25)
+},
+// Minutes ago
+{
+  id: "log-3m",
   connectionId: "gl-content",
   repositoryId: "co-handbook",
   eventKind: "pull_request",
@@ -314,12 +365,11 @@ const WEBHOOK_LOGS = [{
     summary: "Skipped: merge request has no linked issue"
   }],
   payload: PAYLOAD_MERGE_REQUEST,
-  receivedOn: "Jun 29, 2026 · 11:08",
-  receivedAt: 1751195280
+  receivedAt: secondsAgo(3 * 60)
 }, {
-  id: "log-5",
-  connectionId: "gh-activecollab",
-  repositoryId: "ac-backend",
+  id: "log-12m",
+  connectionId: "gh-abstergo",
+  repositoryId: "ab-animus",
   eventKind: "issue",
   status: "failed",
   deliveryIdentifier: "9c1185a5-c5e9-4e3f-8a1b-7d6e5f4c3b2a",
@@ -327,12 +377,11 @@ const WEBHOOK_LOGS = [{
     summary: "Failed at task creation: project not found"
   }],
   payload: PAYLOAD_ISSUE_OPENED,
-  receivedOn: "Jun 28, 2026 · 18:54",
-  receivedAt: 1751136840
+  receivedAt: secondsAgo(12 * 60)
 }, {
-  id: "log-4",
-  connectionId: "gl-content",
-  repositoryId: "co-handbook",
+  id: "log-47m",
+  connectionId: "gl-platform",
+  repositoryId: "pl-gateway",
   eventKind: "push",
   status: "processed",
   deliveryIdentifier: "f7c3bc1d-8c5a-4b2e-9f0a-1b2c3d4e5f60",
@@ -354,10 +403,11 @@ const WEBHOOK_LOGS = [{
     }
   }],
   payload: PAYLOAD_PUSH,
-  receivedOn: "Jun 28, 2026 · 09:21",
-  receivedAt: 1751102460
-}, {
-  id: "log-3",
+  receivedAt: secondsAgo(47 * 60)
+},
+// Earlier today
+{
+  id: "log-today-1",
   connectionId: "gh-activecollab",
   repositoryId: "ac-feather",
   eventKind: "other",
@@ -368,48 +418,109 @@ const WEBHOOK_LOGS = [{
     zen: "Keep it logically awesome.",
     hook_id: 552012
   }, null, 2),
-  receivedOn: "Jun 27, 2026 · 16:05",
-  receivedAt: 1751040300
+  receivedAt: at(2026, 7, 11, 10, 0)
 }, {
-  id: "log-2",
+  id: "log-today-2",
+  connectionId: "gh-binford",
+  repositoryId: "bi-tool-time",
+  eventKind: "pull_request_review",
+  status: "processed",
+  deliveryIdentifier: "5f2b1c8e-7a3d-4e6f-9b0c-1d2e3f4a5b6c",
+  outcomes: [{
+    summary: "Referenced task #1699 from pull request #58",
+    task: {
+      id: 1699,
+      name: "Refresh the Tool Time build badge",
+      projectName: "Tool Time",
+      description: "The build badge shows an old status. Update it when the pipeline finishes."
+    }
+  }],
+  payload: PAYLOAD_MERGE_REQUEST,
+  receivedAt: at(2026, 7, 11, 7, 12)
+},
+// Yesterday
+{
+  id: "log-yesterday-1",
   connectionId: "gl-content",
   repositoryId: "co-marketing",
   eventKind: "issue",
   status: "received",
   deliveryIdentifier: "0716d970-2b9e-4a1d-9c3f-5e6a7b8c9d01",
   outcomes: [],
-  receivedOn: "Jun 27, 2026 · 08:47",
-  receivedAt: 1751013420
+  receivedAt: at(2026, 7, 10, 13, 20)
 }, {
-  id: "log-1",
+  id: "log-yesterday-2",
   connectionId: "gh-activecollab",
   repositoryId: "ac-feather",
   eventKind: "issue",
-  status: "processed",
+  status: "duplicate",
   deliveryIdentifier: "fa3ebd6742c360b2d9652b7f78d9bd7d",
+  outcomes: [],
+  payload: PAYLOAD_ISSUE_OPENED,
+  receivedAt: at(2026, 7, 10, 9, 5)
+},
+// Older, this year — date only
+{
+  id: "log-aug-8",
+  connectionId: "gh-activecollab",
+  repositoryId: "ac-backend",
+  eventKind: "repository",
+  status: "skipped",
+  deliveryIdentifier: "2c9d0e1f-3a4b-4c5d-8e9f-0a1b2c3d4e5f",
+  outcomes: [{
+    summary: "Skipped: repository events are not processed"
+  }],
+  receivedAt: at(2026, 7, 8, 16, 42)
+}, {
+  id: "log-jul-30",
+  connectionId: "gl-acme-ce",
+  repositoryId: "acme-ce",
+  eventKind: "push",
+  status: "failed",
+  deliveryIdentifier: "7d8e9f0a-1b2c-4d3e-9f0a-2b3c4d5e6f70",
   outcomes: [{
-    summary: "Created task #1804 from issue #29",
+    summary: "Failed to match a repository for this push"
+  }],
+  payload: PAYLOAD_PUSH,
+  receivedAt: at(2026, 6, 30, 11, 9)
+}, {
+  id: "log-jun-12",
+  connectionId: "gh-abstergo",
+  repositoryId: "ab-animus",
+  eventKind: "issue",
+  status: "processed",
+  deliveryIdentifier: "aa11bb22-cc33-4d44-9e55-6f7788990011",
+  outcomes: [{
+    summary: "Created task #1720 from issue #204",
     task: {
-      id: 1804,
-      name: "Restore missing repository icons",
-      projectName: "Feather",
-      description: "Provider icons are missing from the repository list. Restore the GitHub and GitLab glyphs."
+      id: 1720,
+      name: "Animus sync drops issue labels",
+      projectName: "Animus",
+      description: "Issue labels are lost when Animus syncs from GitHub. Map the incoming labels onto task labels."
     }
   }],
   payload: PAYLOAD_ISSUE_OPENED,
-  receivedOn: "Jun 26, 2026 · 13:12",
-  receivedAt: 1750943520
-}, {
-  id: "log-1-replay",
-  connectionId: "gh-activecollab",
-  repositoryId: "ac-feather",
+  receivedAt: at(2026, 5, 12, 8, 30)
+},
+// Older, earlier year — date with year
+{
+  id: "log-mar-2025",
+  connectionId: "gl-platform",
+  repositoryId: "pl-gateway",
   eventKind: "issue",
-  status: "duplicate",
-  deliveryIdentifier: "fa3ebd6742c360b2d9652b7f78d9bd7d",
-  outcomes: [],
+  status: "processed",
+  deliveryIdentifier: "bb22cc33-dd44-4e55-9f66-7a8899001122",
+  outcomes: [{
+    summary: "Created task #1533 from issue #88",
+    task: {
+      id: 1533,
+      name: "Gateway times out on large payloads",
+      projectName: "API Gateway",
+      description: "Large webhook payloads time out at the gateway. Raise the body limit or stream the request."
+    }
+  }],
   payload: PAYLOAD_ISSUE_OPENED,
-  receivedOn: "Jun 26, 2026 · 13:18",
-  receivedAt: 1750943880
+  receivedAt: at(2025, 2, 3, 10, 15)
 }];
 
 /* --- Lightweight, Prism-style JSON syntax highlighter -------------------- */
@@ -471,7 +582,7 @@ const PayloadBlock = _ref3 => {
 const LogRowWrap = styled.div.withConfig({
   displayName: "WebhookLogsDialog__LogRowWrap",
   componentId: "sc-6ol7f6-2"
-})(["border-top:1px solid var(--color-theme-300);.lr-summary{box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 8px 8px 12px;background:none;border:0;text-align:left;cursor:pointer;font-family:inherit;&:hover{background-color:var(--color-theme-200);}}.lr-expand{flex-shrink:0;fill:var(--color-theme-600);color:var(--color-theme-600);transform:rotate(180deg);transition:transform 200ms ease;}.lr-expand.open{transform:rotate(0deg);}.lr-conn{display:flex;align-items:center;gap:8px;width:180px;min-width:0;flex-shrink:0;}.lr-conn svg{width:20px;height:20px;flex-shrink:0;}.lr-conn .lr-conn-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.lr-event{flex:1 1 0%;min-width:0;}.lr-status{flex-shrink:0;}.lr-outcomes{width:96px;flex-shrink:0;text-align:right;}.lr-detail{padding:4px 16px 20px 44px;display:flex;flex-direction:column;gap:16px;}.lr-field-label{display:block;margin-bottom:4px;}.lr-id{font-family:\"SFMono-Regular\",Consolas,\"Liberation Mono\",Menlo,monospace;word-break:break-all;}.lr-outcome-list{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:6px;}.lr-outcome{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;}.lr-open-task{padding:0;border:0;background:none;font:inherit;font-size:13px;line-height:18px;color:var(--color-theme-600);text-decoration:underline;cursor:pointer;white-space:nowrap;}.lr-open-task:hover{color:var(--color-theme-800);}"]);
+})(["border-top:1px solid var(--color-theme-300);.lr-summary{box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 8px 8px 12px;background:none;border:0;text-align:left;cursor:pointer;font-family:inherit;&:hover{background-color:var(--color-theme-200);}}.lr-expand{flex-shrink:0;fill:var(--color-theme-600);color:var(--color-theme-600);transform:rotate(180deg);transition:transform 200ms ease;}.lr-expand.open{transform:rotate(0deg);}.lr-conn{display:flex;align-items:center;gap:8px;width:180px;min-width:0;flex-shrink:0;}.lr-conn svg{width:20px;height:20px;flex-shrink:0;}.lr-conn .lr-conn-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.lr-event{flex:1 1 0%;min-width:0;}.lr-time{width:120px;flex-shrink:0;text-align:right;white-space:nowrap;}.lr-status{width:110px;flex-shrink:0;display:flex;}.lr-outcomes{width:96px;flex-shrink:0;text-align:right;}.lr-detail{padding:4px 16px 20px 44px;display:flex;flex-direction:column;gap:16px;}.lr-field-label{display:block;margin-bottom:4px;}.lr-id{font-family:\"SFMono-Regular\",Consolas,\"Liberation Mono\",Menlo,monospace;word-break:break-all;}.lr-outcome-list{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:6px;}.lr-outcome{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;}.lr-open-task{padding:0;border:0;background:none;font:inherit;font-size:13px;line-height:18px;color:var(--color-theme-600);text-decoration:underline;cursor:pointer;white-space:nowrap;}.lr-open-task:hover{color:var(--color-theme-800);}"]);
 const LogRow = _ref4 => {
   var _connection$name;
   let log = _ref4.log,
@@ -496,7 +607,10 @@ const LogRow = _ref4 => {
   }, (_connection$name = connection == null ? void 0 : connection.name) != null ? _connection$name : "Unknown")), /*#__PURE__*/React.createElement(Body2, {
     className: "lr-event",
     color: "tertiary"
-  }, EVENT_KIND_LABELS[log.eventKind]), /*#__PURE__*/React.createElement("span", {
+  }, EVENT_KIND_LABELS[log.eventKind]), /*#__PURE__*/React.createElement(Caption1, {
+    className: "lr-time",
+    color: "tertiary"
+  }, formatReceivedAt(log.receivedAt)), /*#__PURE__*/React.createElement("span", {
     className: "lr-status"
   }, /*#__PURE__*/React.createElement(StatusChip, {
     status: log.status
@@ -634,7 +748,7 @@ const DialogTitleBar = styled.div.withConfig({
 const LogListHeader = styled.div.withConfig({
   displayName: "WebhookLogsDialog__LogListHeader",
   componentId: "sc-6ol7f6-8"
-})(["box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:0 8px 8px 44px;.lh-conn{width:180px;flex-shrink:0;}.lh-event{flex:1 1 0%;min-width:0;}.lh-status{width:96px;flex-shrink:0;text-align:right;}.lh-outcomes{width:96px;flex-shrink:0;text-align:right;}"]);
+})(["box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:0 8px 8px 44px;.lh-conn{width:180px;flex-shrink:0;}.lh-event{flex:1 1 0%;min-width:0;}.lh-time{width:120px;flex-shrink:0;text-align:right;}.lh-status{width:110px;flex-shrink:0;text-align:left;}.lh-outcomes{width:96px;flex-shrink:0;text-align:right;}"]);
 const EmptyLogs = styled.div.withConfig({
   displayName: "WebhookLogsDialog__EmptyLogs",
   componentId: "sc-6ol7f6-9"
@@ -798,6 +912,10 @@ export const WebhookLogsDialog = _ref7 => {
     color: "secondary",
     weight: "bold"
   }, "EVENT TYPE"), /*#__PURE__*/React.createElement(Caption2, {
+    className: "lh-time",
+    color: "secondary",
+    weight: "bold"
+  }, "TIME"), /*#__PURE__*/React.createElement(Caption2, {
     className: "lh-status",
     color: "secondary",
     weight: "bold"