@activecollab/components 2.0.400 → 2.0.401

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

@@ -6,12 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.WebhookLogsDialog = exports.WEBHOOK_REPOSITORIES = exports.WEBHOOK_CONNECTIONS = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _RoundAvatar = require("./RoundAvatar");
+var _tokens = require("./tokens");
 var _Button = require("../../components/Button");
 var _Chip = require("../../components/Chip");
+var _CompleteCheckbox = require("../../components/CompleteCheckbox");
 var _Dialog = require("../../components/Dialog");
 var _Filter = require("../../components/Filter");
 var _IconButton = require("../../components/IconButton");
 var _Icons = require("../../components/Icons");
+var _Label = require("../../components/Label");
+var _SelectTrigger = require("../../components/SelectTrigger");
+var _Sheet = require("../../components/Sheet");
+var _Tooltip = require("../../components/Tooltip");
 var _Typography = require("../../components/Typography");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -46,9 +53,18 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 /**
  * 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.
  */
 
 var WEBHOOK_CONNECTIONS = exports.WEBHOOK_CONNECTIONS = [{
@@ -117,12 +133,38 @@ var WEBHOOK_REPOSITORIES = exports.WEBHOOK_REPOSITORIES = [{
   connectionId: "gl-acme-ce"
 }];
 var 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.
+ */
+var 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"
+}];
 var STATUS_LABELS = {
   received: "Received",
   unhandled: "Unhandled",
@@ -188,9 +230,6 @@ var StatusChip = function StatusChip(_ref) {
     typographyProps: {
       variant: "Caption 1",
       weight: "medium"
-    },
-    style: {
-      borderRadius: 6
     }
   });
 };
@@ -269,7 +308,15 @@ var 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
@@ -277,10 +324,12 @@ var 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
@@ -291,7 +340,9 @@ var 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
@@ -302,7 +353,23 @@ var 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
@@ -310,7 +377,7 @@ var WEBHOOK_LOGS = [{
   id: "log-3",
   connectionId: "gh-activecollab",
   repositoryId: "ac-feather",
-  eventKind: "ping",
+  eventKind: "other",
   status: "unhandled",
   deliveryIdentifier: "1574bddb-75c3-4b1e-8a9c-0d1e2f3a4b5c",
   outcomes: [],
@@ -337,7 +404,15 @@ var 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
@@ -386,7 +461,7 @@ var PayloadPre = _styledComponents.default.pre.withConfig({
 var PayloadWrap = _styledComponents.default.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;}"]);
 var PayloadBlock = function PayloadBlock(_ref3) {
   var payload = _ref3.payload;
   var _useState = (0, _react.useState)(true),
@@ -400,9 +475,12 @@ var PayloadBlock = function PayloadBlock(_ref3) {
     return highlightJson(payload);
   }, [payload]);
   var canToggle = lineCount > PAYLOAD_COLLAPSED_LINES;
-  return /*#__PURE__*/_react.default.createElement(PayloadWrap, null, canToggle ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "payload-toggle"
-  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+  return /*#__PURE__*/_react.default.createElement(PayloadWrap, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "payload-header"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    color: "secondary",
+    weight: "bold"
+  }, "Payload"), canToggle ? /*#__PURE__*/_react.default.createElement(_Button.Button, {
     variant: "text colored",
     size: "small",
     onClick: function onClick() {
@@ -410,7 +488,7 @@ var PayloadBlock = function PayloadBlock(_ref3) {
         return !value;
       });
     }
-  }, collapsed ? "Show More" : "Show Less")) : null, /*#__PURE__*/_react.default.createElement(PayloadPre, {
+  }, collapsed ? "Show More" : "Show Less") : null), /*#__PURE__*/_react.default.createElement(PayloadPre, {
     $collapsed: collapsed && canToggle,
     dangerouslySetInnerHTML: {
       __html: html
@@ -423,11 +501,12 @@ var PayloadBlock = function PayloadBlock(_ref3) {
 var LogRowWrap = _styledComponents.default.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);}"]);
 var LogRow = function LogRow(_ref4) {
   var _connection$name;
   var log = _ref4.log,
-    connection = _ref4.connection;
+    connection = _ref4.connection,
+    onOpenTask = _ref4.onOpenTask;
   var _useState3 = (0, _react.useState)(false),
     _useState4 = _slicedToArray(_useState3, 2),
     open = _useState4[0],
@@ -468,27 +547,116 @@ var LogRow = function LogRow(_ref4) {
   }, "Webhook identifier"), /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
     className: "lr-id",
     color: "tertiary"
-  }, log.deliveryIdentifier)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+  }, log.deliveryIdentifier)), log.outcomes.length > 0 ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
     className: "lr-field-label",
     color: "secondary",
     weight: "bold"
-  }, "Outcomes"), log.outcomes.length > 0 ? /*#__PURE__*/_react.default.createElement("ul", {
+  }, "Outcomes"), /*#__PURE__*/_react.default.createElement("ul", {
     className: "lr-outcome-list"
   }, log.outcomes.map(function (outcome, index) {
     return /*#__PURE__*/_react.default.createElement("li", {
-      key: index
+      key: index,
+      className: "lr-outcome"
     }, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
       color: "tertiary"
-    }, outcome));
-  })) : /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
-    color: "tertiary"
-  }, "No outcomes were recorded for this webhook.")), log.payload ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
-    className: "lr-field-label",
-    color: "secondary",
-    weight: "bold"
-  }, "Payload"), /*#__PURE__*/_react.default.createElement(PayloadBlock, {
+    }, outcome.summary), outcome.task ? /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+      title: "See the task without closing the log"
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      type: "button",
+      className: "lr-open-task",
+      onClick: function onClick() {
+        return onOpenTask(outcome.task);
+      }
+    }, "Open Task")) : null);
+  }))) : null, log.payload ? /*#__PURE__*/_react.default.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.   */
+
+var StyledTaskSheet = _styledComponents.default.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;}"], _tokens.LG);
+var StyledTaskMain = _styledComponents.default.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);}"], _tokens.LG);
+var StyledTaskProperties = _styledComponents.default.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;}"], _tokens.LG);
+var SheetField = function SheetField(_ref5) {
+  var label = _ref5.label,
+    children = _ref5.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "field"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "field-label"
+  }, /*#__PURE__*/_react.default.createElement(_Label.Label, {
+    size: "small"
+  }, label)), children);
+};
+var TaskPreviewSheet = function TaskPreviewSheet(_ref6) {
+  var task = _ref6.task,
+    open = _ref6.open,
+    onClose = _ref6.onClose;
+  if (!task) {
+    return null;
+  }
+  var controls = [{
+    tooltip: "Close",
+    disabled: false,
+    onClick: onClose,
+    icon: /*#__PURE__*/_react.default.createElement(_Icons.CancelCrossIcon, null),
+    className: ""
+  }];
+  return /*#__PURE__*/_react.default.createElement(_Sheet.Sheet, {
+    open: open,
+    onClose: onClose,
+    controls: controls,
+    position: "right",
+    animation: "right",
+    mode: "stretch"
+  }, /*#__PURE__*/_react.default.createElement(StyledTaskSheet, null, /*#__PURE__*/_react.default.createElement(StyledTaskMain, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "task-header"
+  }, /*#__PURE__*/_react.default.createElement(_CompleteCheckbox.CompleteCheckbox, null), /*#__PURE__*/_react.default.createElement(_Typography.Header2, {
+    className: "task-title"
+  }, "#", task.id, ": ", task.name)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "metadata"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    className: "seg",
+    color: "secondary"
+  }, task.projectName), /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    className: "seg",
+    color: "secondary"
+  }, "Task #", task.id), /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    className: "seg",
+    color: "secondary"
+  }, "Created from a webhook delivery")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "description"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Body2, null, task.description))), /*#__PURE__*/_react.default.createElement(StyledTaskProperties, null, /*#__PURE__*/_react.default.createElement(SheetField, {
+    label: "Task List"
+  }, /*#__PURE__*/_react.default.createElement(_SelectTrigger.SelectTrigger, {
+    className: "field-control"
+  }, "Inbox")), /*#__PURE__*/_react.default.createElement(SheetField, {
+    label: "Assignees"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "assignee-row"
+  }, /*#__PURE__*/_react.default.createElement(_RoundAvatar.RoundAvatar, {
+    $bg: _tokens.AVATAR_COLORS.purple,
+    $size: 28,
+    $bordered: false
+  }, "IS"), /*#__PURE__*/_react.default.createElement(_Typography.Body2, null, "Ilija Studen"))), /*#__PURE__*/_react.default.createElement(SheetField, {
+    label: "Start and Due Date"
+  }, /*#__PURE__*/_react.default.createElement(_SelectTrigger.SelectTrigger, {
+    className: "field-control"
+  }, "Not set")))));
 };
 
 /* --- The dialog ---------------------------------------------------------- */
@@ -496,26 +664,26 @@ var LogRow = function LogRow(_ref4) {
 /** Wider than the default 540px dialog so the log columns have room. */
 var WebhookLogsDialogStyled = (0, _styledComponents.default)(_Dialog.Dialog).withConfig({
   displayName: "WebhookLogsDialog__WebhookLogsDialogStyled",
-  componentId: "sc-6ol7f6-3"
+  componentId: "sc-6ol7f6-6"
 })(["&&{width:calc(100vw - 64px);max-width:760px;}"]);
 var DialogTitleBar = _styledComponents.default.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;}"]);
 var LogListHeader = _styledComponents.default.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;}"]);
 var EmptyLogs = _styledComponents.default.div.withConfig({
   displayName: "WebhookLogsDialog__EmptyLogs",
-  componentId: "sc-6ol7f6-6"
-})(["padding:40px 0;text-align:center;"]);
-var WebhookLogsDialog = exports.WebhookLogsDialog = function WebhookLogsDialog(_ref5) {
-  var 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);}"]);
+var WebhookLogsDialog = exports.WebhookLogsDialog = function WebhookLogsDialog(_ref7) {
+  var open = _ref7.open,
+    onClose = _ref7.onClose,
+    initialConnectionId = _ref7.initialConnectionId,
+    connectionIds = _ref7.connectionIds,
+    repositoryIds = _ref7.repositoryIds;
   var _useState5 = (0, _react.useState)(function () {
       var initial = {};
       if (connectionIds && connectionIds.length > 0) {
@@ -531,6 +699,18 @@ var WebhookLogsDialog = exports.WebhookLogsDialog = function WebhookLogsDialog(_
     _useState6 = _slicedToArray(_useState5, 2),
     filters = _useState6[0],
     setFilters = _useState6[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.
+  var _useState7 = (0, _react.useState)(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    activeTask = _useState8[0],
+    setActiveTask = _useState8[1];
+  var lastTaskRef = (0, _react.useRef)(null);
+  if (activeTask) {
+    lastTaskRef.current = activeTask;
+  }
   var connectionsById = (0, _react.useMemo)(function () {
     var map = {};
     WEBHOOK_CONNECTIONS.forEach(function (connection) {
@@ -574,12 +754,12 @@ var WebhookLogsDialog = exports.WebhookLogsDialog = function WebhookLogsDialog(_
     }, {
       id: "event_type",
       title: "Event Type",
-      submenu: Array.from(new Set(WEBHOOK_LOGS.map(function (log) {
-        return log.eventKind;
-      }))).map(function (eventKind) {
+      submenu: EVENT_TYPE_OPTIONS.map(function (_ref8) {
+        var id = _ref8.id,
+          label = _ref8.label;
         return {
-          id: eventKind,
-          name: EVENT_KIND_LABELS[eventKind]
+          id,
+          name: label
         };
       })
     }, {
@@ -647,7 +827,7 @@ var WebhookLogsDialog = exports.WebhookLogsDialog = function WebhookLogsDialog(_
     }
     setFilters(next);
   }, []);
-  return /*#__PURE__*/_react.default.createElement(WebhookLogsDialogStyled, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(WebhookLogsDialogStyled, {
     open: open,
     onClose: onClose,
     enableBackgroundClick: true
@@ -686,10 +866,17 @@ var WebhookLogsDialog = exports.WebhookLogsDialog = function WebhookLogsDialog(_
     return /*#__PURE__*/_react.default.createElement(LogRow, {
       key: log.id,
       log: log,
-      connection: connectionsById[log.connectionId]
+      connection: connectionsById[log.connectionId],
+      onOpenTask: setActiveTask
     });
-  })) : /*#__PURE__*/_react.default.createElement(EmptyLogs, null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+  })) : /*#__PURE__*/_react.default.createElement(EmptyLogs, null, /*#__PURE__*/_react.default.createElement(_Icons.AccessLogIcon, null), /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
     color: "tertiary"
-  }, "No webhook logs match the selected filters."))));
+  }, "No webhook logs match the selected filters.")))), /*#__PURE__*/_react.default.createElement(TaskPreviewSheet, {
+    task: activeTask !== null && activeTask !== void 0 ? activeTask : lastTaskRef.current,
+    open: Boolean(activeTask),
+    onClose: function onClose() {
+      return setActiveTask(null);
+    }
+  }));
 };
 //# sourceMappingURL=WebhookLogsDialog.js.map