@activecollab/components 2.0.399 → 2.0.401

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

@@ -1,13 +1,20 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
+import { RoundAvatar } from "./RoundAvatar";
+import { AVATAR_COLORS, LG } from "./tokens";
 import { Button } from "../../components/Button";
 import { Chip } from "../../components/Chip";
+import { CompleteCheckbox } from "../../components/CompleteCheckbox";
 import { Dialog } from "../../components/Dialog";
 import { Filter } from "../../components/Filter";
 import { IconButton } from "../../components/IconButton";
-import { CancelCrossIcon, CollapseExpandSingleIcon, GitHubIcon, GitIcon, GitLabIcon } from "../../components/Icons";
-import { Body2, Caption1, Caption2, Header3 } from "../../components/Typography";
+import { AccessLogIcon, CancelCrossIcon, CollapseExpandSingleIcon, GitHubIcon, GitIcon, GitLabIcon } from "../../components/Icons";
+import { Label } from "../../components/Label";
+import { SelectTrigger } from "../../components/SelectTrigger";
+import { Sheet } from "../../components/Sheet";
+import { Tooltip } from "../../components/Tooltip";
+import { Body2, Caption1, Caption2, Header2, Header3 } from "../../components/Typography";
 
 /**
  * "Webhook Logs" — the VCS webhook delivery log, shown as a wide dialog with a
@@ -29,9 +36,18 @@ import { Body2, Caption1, Caption2, Header3 } from "../../components/Typography"
 
 /**
  * Normalized event kind. The processor layer maps each provider's raw event
- * header (GitHub `issues`, GitLab `Issue Hook`, …) onto one provider-agnostic
- * kind, so the same logical event reads — and filters — identically across
- * connections instead of appearing once per provider.
+ * header (GitHub `issues` / GitLab `Issue Hook`, GitHub `pull_request` / GitLab
+ * `Merge Request Hook`, …) onto one provider-agnostic kind, so the same logical
+ * event reads — and filters — identically across connections instead of
+ * appearing once per provider. The set below mirrors the app's
+ * `EVENT_TYPE_OPTIONS` constant.
+ */
+
+/**
+ * The task an outcome created or referenced. In the app each
+ * `vcs_webhook_outcomes` row carries a nullable `task_id`; when it is set the
+ * outcome offers an "Open Task" link that opens the task in a sheet on top of
+ * the log dialog.
  */
 
 export const WEBHOOK_CONNECTIONS = [{
@@ -100,12 +116,38 @@ export const WEBHOOK_REPOSITORIES = [{
   connectionId: "gl-acme-ce"
 }];
 const EVENT_KIND_LABELS = {
-  issue: "Issue",
   push: "Push",
-  merge_request: "Merge request",
+  issue: "Issue",
+  pull_request: "Pull Request",
+  pull_request_review: "Pull Request Review",
   repository: "Repository",
-  ping: "Ping"
+  other: "Other"
 };
+
+/**
+ * Fixed Event Type filter options, mirroring the app's `EVENT_TYPE_OPTIONS`.
+ * The app offers the full list regardless of which kinds are present in the
+ * current result set, so we do the same instead of deriving it from the logs.
+ */
+const EVENT_TYPE_OPTIONS = [{
+  id: "push",
+  label: "Push"
+}, {
+  id: "issue",
+  label: "Issue"
+}, {
+  id: "pull_request",
+  label: "Pull Request"
+}, {
+  id: "pull_request_review",
+  label: "Pull Request Review"
+}, {
+  id: "repository",
+  label: "Repository"
+}, {
+  id: "other",
+  label: "Other"
+}];
 const STATUS_LABELS = {
   received: "Received",
   unhandled: "Unhandled",
@@ -171,9 +213,6 @@ const StatusChip = _ref => {
     typographyProps: {
       variant: "Caption 1",
       weight: "medium"
-    },
-    style: {
-      borderRadius: 6
     }
   });
 };
@@ -252,7 +291,15 @@ const WEBHOOK_LOGS = [{
   eventKind: "issue",
   status: "processed",
   deliveryIdentifier: "d3b07384-d9a0-4c9b-8f1e-2a6f1b9c4e21",
-  outcomes: ["Created task #1842 from issue #42"],
+  outcomes: [{
+    summary: "Created task #1842 from issue #42",
+    task: {
+      id: 1842,
+      name: "Webhook delivery retries are not logged",
+      projectName: "Feather",
+      description: "Retries are not written to the webhook log, so a delivery that only succeeds on a retry still shows as failed. Log each attempt with its outcome."
+    }
+  }],
   payload: PAYLOAD_ISSUE_OPENED,
   receivedOn: "Jun 29, 2026 · 14:32",
   receivedAt: 1751207520
@@ -260,10 +307,12 @@ const WEBHOOK_LOGS = [{
   id: "log-6",
   connectionId: "gl-content",
   repositoryId: "co-handbook",
-  eventKind: "merge_request",
+  eventKind: "pull_request",
   status: "skipped",
   deliveryIdentifier: "b1946ac9-2f3a-4c0d-9b7e-1d2c3e4f5a6b",
-  outcomes: ["Skipped: merge request has no linked issue"],
+  outcomes: [{
+    summary: "Skipped: merge request has no linked issue"
+  }],
   payload: PAYLOAD_MERGE_REQUEST,
   receivedOn: "Jun 29, 2026 · 11:08",
   receivedAt: 1751195280
@@ -274,7 +323,9 @@ const WEBHOOK_LOGS = [{
   eventKind: "issue",
   status: "failed",
   deliveryIdentifier: "9c1185a5-c5e9-4e3f-8a1b-7d6e5f4c3b2a",
-  outcomes: ["Failed at task creation: project not found"],
+  outcomes: [{
+    summary: "Failed at task creation: project not found"
+  }],
   payload: PAYLOAD_ISSUE_OPENED,
   receivedOn: "Jun 28, 2026 · 18:54",
   receivedAt: 1751136840
@@ -285,7 +336,23 @@ const WEBHOOK_LOGS = [{
   eventKind: "push",
   status: "processed",
   deliveryIdentifier: "f7c3bc1d-8c5a-4b2e-9f0a-1b2c3d4e5f60",
-  outcomes: ["Created task #1839 from issue #311", "Created task #1840 from issue #312"],
+  outcomes: [{
+    summary: "Created task #1839 from issue #311",
+    task: {
+      id: 1839,
+      name: "Refresh the onboarding handbook",
+      projectName: "Handbook",
+      description: "The onboarding handbook is out of date. Review each section and update the steps that changed in the last release."
+    }
+  }, {
+    summary: "Created task #1840 from issue #312",
+    task: {
+      id: 1840,
+      name: "Document webhook scopes",
+      projectName: "Handbook",
+      description: "Explain the connection and repository webhook scopes, and when each one applies."
+    }
+  }],
   payload: PAYLOAD_PUSH,
   receivedOn: "Jun 28, 2026 · 09:21",
   receivedAt: 1751102460
@@ -293,7 +360,7 @@ const WEBHOOK_LOGS = [{
   id: "log-3",
   connectionId: "gh-activecollab",
   repositoryId: "ac-feather",
-  eventKind: "ping",
+  eventKind: "other",
   status: "unhandled",
   deliveryIdentifier: "1574bddb-75c3-4b1e-8a9c-0d1e2f3a4b5c",
   outcomes: [],
@@ -320,7 +387,15 @@ const WEBHOOK_LOGS = [{
   eventKind: "issue",
   status: "processed",
   deliveryIdentifier: "fa3ebd6742c360b2d9652b7f78d9bd7d",
-  outcomes: ["Created task #1804 from issue #29"],
+  outcomes: [{
+    summary: "Created task #1804 from issue #29",
+    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."
+    }
+  }],
   payload: PAYLOAD_ISSUE_OPENED,
   receivedOn: "Jun 26, 2026 · 13:12",
   receivedAt: 1750943520
@@ -365,7 +440,7 @@ const PayloadPre = styled.pre.withConfig({
 const PayloadWrap = styled.div.withConfig({
   displayName: "WebhookLogsDialog__PayloadWrap",
   componentId: "sc-6ol7f6-1"
-})([".payload-toggle{display:flex;justify-content:flex-end;min-height:24px;margin-bottom:4px;}"]);
+})([".payload-header{display:flex;align-items:center;justify-content:space-between;min-height:24px;margin-bottom:4px;}"]);
 const PayloadBlock = _ref3 => {
   let payload = _ref3.payload;
   const _useState = useState(true),
@@ -374,13 +449,16 @@ const PayloadBlock = _ref3 => {
   const lineCount = useMemo(() => payload.split("\n").length, [payload]);
   const html = useMemo(() => highlightJson(payload), [payload]);
   const canToggle = lineCount > PAYLOAD_COLLAPSED_LINES;
-  return /*#__PURE__*/React.createElement(PayloadWrap, null, canToggle ? /*#__PURE__*/React.createElement("div", {
-    className: "payload-toggle"
-  }, /*#__PURE__*/React.createElement(Button, {
+  return /*#__PURE__*/React.createElement(PayloadWrap, null, /*#__PURE__*/React.createElement("div", {
+    className: "payload-header"
+  }, /*#__PURE__*/React.createElement(Caption1, {
+    color: "secondary",
+    weight: "bold"
+  }, "Payload"), canToggle ? /*#__PURE__*/React.createElement(Button, {
     variant: "text colored",
     size: "small",
     onClick: () => setCollapsed(value => !value)
-  }, collapsed ? "Show More" : "Show Less")) : null, /*#__PURE__*/React.createElement(PayloadPre, {
+  }, collapsed ? "Show More" : "Show Less") : null), /*#__PURE__*/React.createElement(PayloadPre, {
     $collapsed: collapsed && canToggle,
     dangerouslySetInnerHTML: {
       __html: html
@@ -393,11 +471,12 @@ 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;color:var(--color-theme-600);transform:rotate(90deg);transition:transform 150ms ease;}.lr-expand.open{transform:rotate(180deg);}.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:18px;display:flex;flex-direction:column;gap:4px;}"]);
+})(["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);}"]);
 const LogRow = _ref4 => {
   var _connection$name;
   let log = _ref4.log,
-    connection = _ref4.connection;
+    connection = _ref4.connection,
+    onOpenTask = _ref4.onOpenTask;
   const _useState2 = useState(false),
     open = _useState2[0],
     setOpen = _useState2[1];
@@ -433,25 +512,112 @@ const LogRow = _ref4 => {
   }, "Webhook identifier"), /*#__PURE__*/React.createElement(Body2, {
     className: "lr-id",
     color: "tertiary"
-  }, log.deliveryIdentifier)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Caption1, {
+  }, log.deliveryIdentifier)), log.outcomes.length > 0 ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Caption1, {
     className: "lr-field-label",
     color: "secondary",
     weight: "bold"
-  }, "Outcomes"), log.outcomes.length > 0 ? /*#__PURE__*/React.createElement("ul", {
+  }, "Outcomes"), /*#__PURE__*/React.createElement("ul", {
     className: "lr-outcome-list"
   }, log.outcomes.map((outcome, index) => /*#__PURE__*/React.createElement("li", {
-    key: index
+    key: index,
+    className: "lr-outcome"
   }, /*#__PURE__*/React.createElement(Body2, {
     color: "tertiary"
-  }, outcome)))) : /*#__PURE__*/React.createElement(Body2, {
-    color: "tertiary"
-  }, "No outcomes were recorded for this webhook.")), log.payload ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Caption1, {
-    className: "lr-field-label",
-    color: "secondary",
-    weight: "bold"
-  }, "Payload"), /*#__PURE__*/React.createElement(PayloadBlock, {
+  }, outcome.summary), outcome.task ? /*#__PURE__*/React.createElement(Tooltip, {
+    title: "See the task without closing the log"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "lr-open-task",
+    onClick: () => onOpenTask(outcome.task)
+  }, "Open Task")) : null)))) : null, log.payload ? /*#__PURE__*/React.createElement(PayloadBlock, {
     payload: log.payload
-  })) : null) : null);
+  }) : null) : null);
+};
+
+/* --- Task preview sheet --------------------------------------------------- */
+/* Opens the outcome's task in a right-side sheet, on top of the (still open)    */
+/* log dialog. Uses the same Sheet setup as the Task sheet stories — position    */
+/* "right", stretch mode, and a Close control — so it reads as the real task     */
+/* sheet. The body is a representative stand-in for the app's full task sheet.   */
+
+const StyledTaskSheet = styled.div.withConfig({
+  displayName: "WebhookLogsDialog__StyledTaskSheet",
+  componentId: "sc-6ol7f6-3"
+})(["display:grid;min-height:100%;padding:8px;grid-template-columns:1fr;@media (min-width:", "){grid-template-columns:1fr 328px;}"], LG);
+const StyledTaskMain = styled.div.withConfig({
+  displayName: "WebhookLogsDialog__StyledTaskMain",
+  componentId: "sc-6ol7f6-4"
+})(["padding:24px 24px 0;min-width:0;@media (min-width:", "){grid-column:1;}.task-header{display:flex;align-items:center;gap:8px;min-width:0;margin-bottom:8px;}.task-title{min-width:0;}.metadata{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:24px;}.metadata .seg:not(:last-child){padding-right:12px;margin-right:12px;border-right:1px solid var(--border-primary);}.description{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--border-primary);}"], LG);
+const StyledTaskProperties = styled.div.withConfig({
+  displayName: "WebhookLogsDialog__StyledTaskProperties",
+  componentId: "sc-6ol7f6-5"
+})(["padding:0 24px;@media (min-width:", "){grid-column:2;padding:24px;background-color:var(--color-theme-200);border-radius:8px;}.field{margin-bottom:24px;}.field:last-child{margin-bottom:0;}.field-label{display:flex;align-items:center;max-width:280px;margin-bottom:4px;}.field-control{width:100%;}.assignee-row{display:flex;align-items:center;gap:8px;}"], LG);
+const SheetField = _ref5 => {
+  let label = _ref5.label,
+    children = _ref5.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "field-label"
+  }, /*#__PURE__*/React.createElement(Label, {
+    size: "small"
+  }, label)), children);
+};
+const TaskPreviewSheet = _ref6 => {
+  let task = _ref6.task,
+    open = _ref6.open,
+    onClose = _ref6.onClose;
+  if (!task) {
+    return null;
+  }
+  const controls = [{
+    tooltip: "Close",
+    disabled: false,
+    onClick: onClose,
+    icon: /*#__PURE__*/React.createElement(CancelCrossIcon, null),
+    className: ""
+  }];
+  return /*#__PURE__*/React.createElement(Sheet, {
+    open: open,
+    onClose: onClose,
+    controls: controls,
+    position: "right",
+    animation: "right",
+    mode: "stretch"
+  }, /*#__PURE__*/React.createElement(StyledTaskSheet, null, /*#__PURE__*/React.createElement(StyledTaskMain, null, /*#__PURE__*/React.createElement("div", {
+    className: "task-header"
+  }, /*#__PURE__*/React.createElement(CompleteCheckbox, null), /*#__PURE__*/React.createElement(Header2, {
+    className: "task-title"
+  }, "#", task.id, ": ", task.name)), /*#__PURE__*/React.createElement("div", {
+    className: "metadata"
+  }, /*#__PURE__*/React.createElement(Caption1, {
+    className: "seg",
+    color: "secondary"
+  }, task.projectName), /*#__PURE__*/React.createElement(Caption1, {
+    className: "seg",
+    color: "secondary"
+  }, "Task #", task.id), /*#__PURE__*/React.createElement(Caption1, {
+    className: "seg",
+    color: "secondary"
+  }, "Created from a webhook delivery")), /*#__PURE__*/React.createElement("div", {
+    className: "description"
+  }, /*#__PURE__*/React.createElement(Body2, null, task.description))), /*#__PURE__*/React.createElement(StyledTaskProperties, null, /*#__PURE__*/React.createElement(SheetField, {
+    label: "Task List"
+  }, /*#__PURE__*/React.createElement(SelectTrigger, {
+    className: "field-control"
+  }, "Inbox")), /*#__PURE__*/React.createElement(SheetField, {
+    label: "Assignees"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "assignee-row"
+  }, /*#__PURE__*/React.createElement(RoundAvatar, {
+    $bg: AVATAR_COLORS.purple,
+    $size: 28,
+    $bordered: false
+  }, "IS"), /*#__PURE__*/React.createElement(Body2, null, "Ilija Studen"))), /*#__PURE__*/React.createElement(SheetField, {
+    label: "Start and Due Date"
+  }, /*#__PURE__*/React.createElement(SelectTrigger, {
+    className: "field-control"
+  }, "Not set")))));
 };
 
 /* --- The dialog ---------------------------------------------------------- */
@@ -459,26 +625,26 @@ const LogRow = _ref4 => {
 /** Wider than the default 540px dialog so the log columns have room. */
 const WebhookLogsDialogStyled = styled(Dialog).withConfig({
   displayName: "WebhookLogsDialog__WebhookLogsDialogStyled",
-  componentId: "sc-6ol7f6-3"
+  componentId: "sc-6ol7f6-6"
 })(["&&{width:calc(100vw - 64px);max-width:760px;}"]);
 const DialogTitleBar = styled.div.withConfig({
   displayName: "WebhookLogsDialog__DialogTitleBar",
-  componentId: "sc-6ol7f6-4"
+  componentId: "sc-6ol7f6-7"
 })(["display:flex;align-items:center;justify-content:space-between;gap:16px;.title-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}"]);
 const LogListHeader = styled.div.withConfig({
   displayName: "WebhookLogsDialog__LogListHeader",
-  componentId: "sc-6ol7f6-5"
-})(["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;}.lh-outcomes{width:96px;flex-shrink:0;text-align:right;}"]);
+  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;}"]);
 const EmptyLogs = styled.div.withConfig({
   displayName: "WebhookLogsDialog__EmptyLogs",
-  componentId: "sc-6ol7f6-6"
-})(["padding:40px 0;text-align:center;"]);
-export const WebhookLogsDialog = _ref5 => {
-  let open = _ref5.open,
-    onClose = _ref5.onClose,
-    initialConnectionId = _ref5.initialConnectionId,
-    connectionIds = _ref5.connectionIds,
-    repositoryIds = _ref5.repositoryIds;
+  componentId: "sc-6ol7f6-9"
+})(["display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 0;text-align:center;svg{fill:var(--color-theme-500);}"]);
+export const WebhookLogsDialog = _ref7 => {
+  let open = _ref7.open,
+    onClose = _ref7.onClose,
+    initialConnectionId = _ref7.initialConnectionId,
+    connectionIds = _ref7.connectionIds,
+    repositoryIds = _ref7.repositoryIds;
   const _useState3 = useState(() => {
       const initial = {};
       if (connectionIds && connectionIds.length > 0) {
@@ -493,6 +659,17 @@ export const WebhookLogsDialog = _ref5 => {
     }),
     filters = _useState3[0],
     setFilters = _useState3[1];
+
+  // The task opened from an outcome's "Open Task" link. The dialog stays open
+  // underneath; the sheet layers on top. `lastTask` keeps the content mounted
+  // through the sheet's slide-out so it does not blank out mid-animation.
+  const _useState4 = useState(null),
+    activeTask = _useState4[0],
+    setActiveTask = _useState4[1];
+  const lastTaskRef = useRef(null);
+  if (activeTask) {
+    lastTaskRef.current = activeTask;
+  }
   const connectionsById = useMemo(() => {
     const map = {};
     WEBHOOK_CONNECTIONS.forEach(connection => {
@@ -530,10 +707,14 @@ export const WebhookLogsDialog = _ref5 => {
     }, {
       id: "event_type",
       title: "Event Type",
-      submenu: Array.from(new Set(WEBHOOK_LOGS.map(log => log.eventKind))).map(eventKind => ({
-        id: eventKind,
-        name: EVENT_KIND_LABELS[eventKind]
-      }))
+      submenu: EVENT_TYPE_OPTIONS.map(_ref8 => {
+        let id = _ref8.id,
+          label = _ref8.label;
+        return {
+          id,
+          name: label
+        };
+      })
     }, {
       id: "status",
       title: "Processing Status",
@@ -589,7 +770,7 @@ export const WebhookLogsDialog = _ref5 => {
     }
     setFilters(next);
   }, []);
-  return /*#__PURE__*/React.createElement(WebhookLogsDialogStyled, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WebhookLogsDialogStyled, {
     open: open,
     onClose: onClose,
     enableBackgroundClick: true
@@ -627,9 +808,14 @@ export const WebhookLogsDialog = _ref5 => {
   }, "OUTCOMES")), visibleLogs.map(log => /*#__PURE__*/React.createElement(LogRow, {
     key: log.id,
     log: log,
-    connection: connectionsById[log.connectionId]
-  }))) : /*#__PURE__*/React.createElement(EmptyLogs, null, /*#__PURE__*/React.createElement(Body2, {
+    connection: connectionsById[log.connectionId],
+    onOpenTask: setActiveTask
+  }))) : /*#__PURE__*/React.createElement(EmptyLogs, null, /*#__PURE__*/React.createElement(AccessLogIcon, null), /*#__PURE__*/React.createElement(Body2, {
     color: "tertiary"
-  }, "No webhook logs match the selected filters."))));
+  }, "No webhook logs match the selected filters.")))), /*#__PURE__*/React.createElement(TaskPreviewSheet, {
+    task: activeTask != null ? activeTask : lastTaskRef.current,
+    open: Boolean(activeTask),
+    onClose: () => setActiveTask(null)
+  }));
 };
 //# sourceMappingURL=WebhookLogsDialog.js.map