@activecollab/components 2.0.346 → 2.0.348

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

@@ -0,0 +1,585 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WebhookLogsDialog = exports.WEBHOOK_CONNECTIONS = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Button = require("../../components/Button");
+var _Chip = require("../../components/Chip");
+var _Dialog = require("../../components/Dialog");
+var _Filter = require("../../components/Filter");
+var _IconButton = require("../../components/IconButton");
+var _Icons = require("../../components/Icons");
+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); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+/**
+ * "Webhook Logs" — the VCS webhook delivery log, shown as a wide dialog with a
+ * filterable, expandable list. Extracted into `shared/` so it can be opened
+ * from more than one surface (the Apps & Integrations Repositories page and the
+ * project "..." menu on the Project Repos story).
+ *
+ * Mirrors the app's webhook log model:
+ *   `vcs_webhook_logs`    → connection_id, event_type, processing_status
+ *                           (received / unhandled / skipped / processed /
+ *                           failed / duplicate), delivery_identifier, payload,
+ *                           created_on
+ *   `vcs_webhook_outcomes` → one row per outcome, each with a localized summary
+ *
+ * The status is derived from the outcomes server-side; here we render the
+ * stored value and map it to a palette colour. The connection glyph is the
+ * provider icon (GitHub / GitLab, Git for anything else).
+ */
+
+/**
+ * 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.
+ */
+
+var WEBHOOK_CONNECTIONS = exports.WEBHOOK_CONNECTIONS = [{
+  id: "gh-activecollab",
+  name: "ActiveCollab",
+  service: "github"
+}, {
+  id: "gh-abstergo",
+  name: "Abstergo Ltd.",
+  service: "github"
+}, {
+  id: "gh-binford",
+  name: "Binford & Co.",
+  service: "github"
+}, {
+  id: "gl-platform",
+  name: "Platform",
+  service: "gitlab"
+}, {
+  id: "gl-content",
+  name: "Content",
+  service: "gitlab"
+}, {
+  id: "gl-acme-ce",
+  name: "Acme Community",
+  service: "gitlab"
+}];
+var EVENT_KIND_LABELS = {
+  issue: "Issue",
+  push: "Push",
+  merge_request: "Merge request",
+  repository: "Repository",
+  ping: "Ping"
+};
+var STATUS_LABELS = {
+  received: "Received",
+  unhandled: "Unhandled",
+  skipped: "Skipped",
+  processed: "Processed",
+  failed: "Failed",
+  duplicate: "Duplicate"
+};
+
+/**
+ * Status → palette colour, chosen so the colour matches the meaning:
+ *   processed → green (success), failed → coral (error),
+ *   skipped → orange (warning), received → sky-blue (in progress),
+ *   unhandled → silver (neutral / no handler matched),
+ *   duplicate → purple (replayed delivery, dropped before processing).
+ */
+var STATUS_COLORS = {
+  processed: {
+    bg: "var(--color-green-pale)",
+    fg: "var(--color-green-pale-darker)"
+  },
+  failed: {
+    bg: "var(--color-coral)",
+    fg: "var(--color-coral-darker)"
+  },
+  skipped: {
+    bg: "var(--color-orange)",
+    fg: "var(--color-orange-darker)"
+  },
+  received: {
+    bg: "var(--color-blue-sky)",
+    fg: "var(--color-blue-sky-darker)"
+  },
+  unhandled: {
+    bg: "var(--color-gray-silver)",
+    fg: "var(--color-gray-silver-darker)"
+  },
+  duplicate: {
+    bg: "var(--color-purple)",
+    fg: "var(--color-purple-darker)"
+  }
+};
+
+/** Provider glyph for a connection: GitHub / GitLab, Git for anything else. */
+var connectionIcon = function connectionIcon(service) {
+  if (service === "github") {
+    return _Icons.GitHubIcon;
+  }
+  if (service === "gitlab") {
+    return _Icons.GitLabIcon;
+  }
+  return _Icons.GitIcon;
+};
+var StatusChip = function StatusChip(_ref) {
+  var status = _ref.status;
+  var _STATUS_COLORS$status = STATUS_COLORS[status],
+    bg = _STATUS_COLORS$status.bg,
+    fg = _STATUS_COLORS$status.fg;
+  return /*#__PURE__*/_react.default.createElement(_Chip.Chip, {
+    label: STATUS_LABELS[status],
+    backgroundColor: bg,
+    color: fg,
+    typographyProps: {
+      variant: "Caption 1",
+      weight: "medium"
+    },
+    style: {
+      borderRadius: 6
+    }
+  });
+};
+
+/* --- Mock log data (newest first is enforced by sorting on receivedAt) --- */
+
+var PAYLOAD_ISSUE_OPENED = JSON.stringify({
+  action: "opened",
+  issue: {
+    id: 2002934201,
+    number: 42,
+    title: "Webhook delivery retries are not logged",
+    state: "open",
+    html_url: "https://github.com/activecollab/feather/issues/42",
+    labels: [{
+      name: "bug"
+    }, {
+      name: "vcs"
+    }],
+    user: {
+      login: "octocat",
+      id: 583231
+    }
+  },
+  repository: {
+    id: 776611234,
+    full_name: "activecollab/feather",
+    private: true
+  },
+  sender: {
+    login: "octocat",
+    id: 583231
+  }
+}, null, 2);
+var PAYLOAD_MERGE_REQUEST = JSON.stringify({
+  object_kind: "merge_request",
+  event_type: "merge_request",
+  user: {
+    id: 41,
+    name: "Jane Doe",
+    username: "jdoe"
+  },
+  project: {
+    id: 1801,
+    path_with_namespace: "content/handbook"
+  },
+  object_attributes: {
+    iid: 318,
+    title: "Add changelog for 8.2",
+    state: "merged",
+    action: "merge",
+    source_branch: "changelog-8-2",
+    target_branch: "main"
+  }
+}, null, 2);
+var PAYLOAD_PUSH = JSON.stringify({
+  ref: "refs/heads/main",
+  before: "9b2c1f0e",
+  after: "f4a7d3c1",
+  commits: [{
+    id: "f4a7d3c1",
+    message: "Fix typo in webhook log repository",
+    author: {
+      name: "Marko",
+      email: "marko@example.com"
+    }
+  }],
+  repository: {
+    full_name: "activecollab/feather"
+  }
+}, null, 2);
+var WEBHOOK_LOGS = [{
+  id: "log-7",
+  connectionId: "gh-activecollab",
+  eventKind: "issue",
+  status: "processed",
+  deliveryIdentifier: "d3b07384-d9a0-4c9b-8f1e-2a6f1b9c4e21",
+  outcomes: ["Created task #1842 from issue #42"],
+  payload: PAYLOAD_ISSUE_OPENED,
+  receivedOn: "Jun 29, 2026 · 14:32",
+  receivedAt: 1751207520
+}, {
+  id: "log-6",
+  connectionId: "gl-content",
+  eventKind: "merge_request",
+  status: "skipped",
+  deliveryIdentifier: "b1946ac9-2f3a-4c0d-9b7e-1d2c3e4f5a6b",
+  outcomes: ["Skipped: merge request has no linked issue"],
+  payload: PAYLOAD_MERGE_REQUEST,
+  receivedOn: "Jun 29, 2026 · 11:08",
+  receivedAt: 1751195280
+}, {
+  id: "log-5",
+  connectionId: "gh-activecollab",
+  eventKind: "issue",
+  status: "failed",
+  deliveryIdentifier: "9c1185a5-c5e9-4e3f-8a1b-7d6e5f4c3b2a",
+  outcomes: ["Failed at task creation: project not found"],
+  payload: PAYLOAD_ISSUE_OPENED,
+  receivedOn: "Jun 28, 2026 · 18:54",
+  receivedAt: 1751136840
+}, {
+  id: "log-4",
+  connectionId: "gl-content",
+  eventKind: "push",
+  status: "processed",
+  deliveryIdentifier: "f7c3bc1d-8c5a-4b2e-9f0a-1b2c3d4e5f60",
+  outcomes: ["Created task #1839 from issue #311", "Created task #1840 from issue #312"],
+  payload: PAYLOAD_PUSH,
+  receivedOn: "Jun 28, 2026 · 09:21",
+  receivedAt: 1751102460
+}, {
+  id: "log-3",
+  connectionId: "gh-activecollab",
+  eventKind: "ping",
+  status: "unhandled",
+  deliveryIdentifier: "1574bddb-75c3-4b1e-8a9c-0d1e2f3a4b5c",
+  outcomes: [],
+  payload: JSON.stringify({
+    zen: "Keep it logically awesome.",
+    hook_id: 552012
+  }, null, 2),
+  receivedOn: "Jun 27, 2026 · 16:05",
+  receivedAt: 1751040300
+}, {
+  id: "log-2",
+  connectionId: "gl-content",
+  eventKind: "issue",
+  status: "received",
+  deliveryIdentifier: "0716d970-2b9e-4a1d-9c3f-5e6a7b8c9d01",
+  outcomes: [],
+  receivedOn: "Jun 27, 2026 · 08:47",
+  receivedAt: 1751013420
+}, {
+  id: "log-1",
+  connectionId: "gh-activecollab",
+  eventKind: "issue",
+  status: "processed",
+  deliveryIdentifier: "fa3ebd6742c360b2d9652b7f78d9bd7d",
+  outcomes: ["Created task #1804 from issue #29"],
+  payload: PAYLOAD_ISSUE_OPENED,
+  receivedOn: "Jun 26, 2026 · 13:12",
+  receivedAt: 1750943520
+}, {
+  id: "log-1-replay",
+  connectionId: "gh-activecollab",
+  eventKind: "issue",
+  status: "duplicate",
+  deliveryIdentifier: "fa3ebd6742c360b2d9652b7f78d9bd7d",
+  outcomes: [],
+  payload: PAYLOAD_ISSUE_OPENED,
+  receivedOn: "Jun 26, 2026 · 13:18",
+  receivedAt: 1750943880
+}];
+
+/* --- Lightweight, Prism-style JSON syntax highlighter -------------------- */
+/* design-system has no `prismjs` dependency (it's an app dependency), so for  */
+/* this throwaway mock we tokenize JSON ourselves and colour the tokens with   */
+/* the same token classes Prism uses, styled via PayloadPre below.             */
+
+var escapeHtml = function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+};
+var highlightJson = function highlightJson(json) {
+  return escapeHtml(json).replace(/("(?:\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(?:true|false)\b|\bnull\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g, function (match) {
+    var cls = "tok-number";
+    if (/^"/.test(match)) {
+      cls = /:$/.test(match) ? "tok-key" : "tok-string";
+    } else if (/true|false/.test(match)) {
+      cls = "tok-boolean";
+    } else if (/null/.test(match)) {
+      cls = "tok-null";
+    }
+    return "<span class=\"".concat(cls, "\">").concat(match, "</span>");
+  });
+};
+var PAYLOAD_COLLAPSED_LINES = 6;
+var PayloadPre = _styledComponents.default.pre.withConfig({
+  displayName: "WebhookLogsDialog__PayloadPre",
+  componentId: "sc-6ol7f6-0"
+})(["margin:0;padding:12px 14px;border:1px solid var(--color-theme-400);border-radius:6px;background-color:var(--color-theme-200);color:var(--color-theme-800);font-family:\"SFMono-Regular\",Consolas,\"Liberation Mono\",Menlo,monospace;font-size:12px;line-height:18px;overflow-x:auto;white-space:pre;position:relative;", " .tok-key{color:var(--color-coral-lighter);}.tok-string{color:var(--color-green-pale-lighter);}.tok-number{color:var(--color-orange-lighter);}.tok-boolean{color:var(--color-blue-sky-lighter);}.tok-null{color:var(--color-purple-lighter);}"], function (_ref2) {
+  var $collapsed = _ref2.$collapsed;
+  return $collapsed ? "max-height: ".concat(PAYLOAD_COLLAPSED_LINES * 18 + 24, "px;\n         overflow-y: hidden;") : "";
+});
+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;}"]);
+var PayloadBlock = function PayloadBlock(_ref3) {
+  var payload = _ref3.payload;
+  var _useState = (0, _react.useState)(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    collapsed = _useState2[0],
+    setCollapsed = _useState2[1];
+  var lineCount = (0, _react.useMemo)(function () {
+    return payload.split("\n").length;
+  }, [payload]);
+  var html = (0, _react.useMemo)(function () {
+    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, {
+    variant: "text colored",
+    size: "small",
+    onClick: function onClick() {
+      return setCollapsed(function (value) {
+        return !value;
+      });
+    }
+  }, collapsed ? "Show More" : "Show Less")) : null, /*#__PURE__*/_react.default.createElement(PayloadPre, {
+    $collapsed: collapsed && canToggle,
+    dangerouslySetInnerHTML: {
+      __html: html
+    }
+  }));
+};
+
+/* --- A single, expandable log row ---------------------------------------- */
+
+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;}"]);
+var LogRow = function LogRow(_ref4) {
+  var _connection$name;
+  var log = _ref4.log,
+    connection = _ref4.connection;
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    open = _useState4[0],
+    setOpen = _useState4[1];
+  var ConnIcon = connectionIcon(connection === null || connection === void 0 ? void 0 : connection.service);
+  return /*#__PURE__*/_react.default.createElement(LogRowWrap, null, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "lr-summary",
+    "aria-expanded": open,
+    onClick: function onClick() {
+      return setOpen(function (value) {
+        return !value;
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icons.CollapseExpandSingleIcon, {
+    className: open ? "lr-expand open" : "lr-expand"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "lr-conn"
+  }, /*#__PURE__*/_react.default.createElement(ConnIcon, null), /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+    className: "lr-conn-name",
+    weight: "bold"
+  }, (_connection$name = connection === null || connection === void 0 ? void 0 : connection.name) !== null && _connection$name !== void 0 ? _connection$name : "Unknown")), /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+    className: "lr-event",
+    color: "tertiary"
+  }, EVENT_KIND_LABELS[log.eventKind]), /*#__PURE__*/_react.default.createElement("span", {
+    className: "lr-status"
+  }, /*#__PURE__*/_react.default.createElement(StatusChip, {
+    status: log.status
+  })), /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    className: "lr-outcomes",
+    color: "tertiary"
+  }, log.outcomes.length > 0 ? "".concat(log.outcomes.length, " ").concat(log.outcomes.length === 1 ? "outcome" : "outcomes") : "")), open ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "lr-detail"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    className: "lr-field-label",
+    color: "secondary",
+    weight: "bold"
+  }, "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, {
+    className: "lr-field-label",
+    color: "secondary",
+    weight: "bold"
+  }, "Outcomes"), log.outcomes.length > 0 ? /*#__PURE__*/_react.default.createElement("ul", {
+    className: "lr-outcome-list"
+  }, log.outcomes.map(function (outcome, index) {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: index
+    }, /*#__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, {
+    payload: log.payload
+  })) : null) : null);
+};
+
+/* --- The dialog ---------------------------------------------------------- */
+
+/** 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"
+})(["&&{width:calc(100vw - 64px);max-width:760px;}"]);
+var DialogTitleBar = _styledComponents.default.div.withConfig({
+  displayName: "WebhookLogsDialog__DialogTitleBar",
+  componentId: "sc-6ol7f6-4"
+})(["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;}"]);
+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;
+  var _useState5 = (0, _react.useState)(function () {
+      if (connectionIds && connectionIds.length > 0) {
+        return {
+          connection: connectionIds
+        };
+      }
+      if (initialConnectionId) {
+        return {
+          connection: [initialConnectionId]
+        };
+      }
+      return {};
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    filters = _useState6[0],
+    setFilters = _useState6[1];
+  var connectionsById = (0, _react.useMemo)(function () {
+    var map = {};
+    WEBHOOK_CONNECTIONS.forEach(function (connection) {
+      map[connection.id] = connection;
+    });
+    return map;
+  }, []);
+  var filterData = (0, _react.useMemo)(function () {
+    return [{
+      id: "connection",
+      title: "Connection",
+      submenu: WEBHOOK_CONNECTIONS.map(function (connection) {
+        return {
+          id: connection.id,
+          name: connection.name
+        };
+      })
+    }, {
+      id: "event_type",
+      title: "Event Type",
+      submenu: Array.from(new Set(WEBHOOK_LOGS.map(function (log) {
+        return log.eventKind;
+      }))).map(function (eventKind) {
+        return {
+          id: eventKind,
+          name: EVENT_KIND_LABELS[eventKind]
+        };
+      })
+    }, {
+      id: "status",
+      title: "Processing Status",
+      submenu: Object.keys(STATUS_LABELS).map(function (status) {
+        return {
+          id: status,
+          name: STATUS_LABELS[status]
+        };
+      })
+    }];
+  }, []);
+  var visibleLogs = (0, _react.useMemo)(function () {
+    var _filters$connection, _filters$event_type, _filters$status;
+    var byConnection = (_filters$connection = filters.connection) !== null && _filters$connection !== void 0 ? _filters$connection : [];
+    var byEvent = (_filters$event_type = filters.event_type) !== null && _filters$event_type !== void 0 ? _filters$event_type : [];
+    var byStatus = (_filters$status = filters.status) !== null && _filters$status !== void 0 ? _filters$status : [];
+    return WEBHOOK_LOGS.filter(function (log) {
+      if (byConnection.length && !byConnection.includes(log.connectionId)) {
+        return false;
+      }
+      if (byEvent.length && !byEvent.includes(log.eventKind)) {
+        return false;
+      }
+      if (byStatus.length && !byStatus.includes(log.status)) {
+        return false;
+      }
+      return true;
+    }).sort(function (a, b) {
+      return b.receivedAt - a.receivedAt;
+    });
+  }, [filters]);
+  return /*#__PURE__*/_react.default.createElement(WebhookLogsDialogStyled, {
+    open: open,
+    onClose: onClose,
+    enableBackgroundClick: true
+  }, /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.Title, {
+    disableDefaultHeading: true
+  }, /*#__PURE__*/_react.default.createElement(DialogTitleBar, null, /*#__PURE__*/_react.default.createElement(_Typography.Header3, null, "Webhook Logs"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "title-actions"
+  }, /*#__PURE__*/_react.default.createElement(_Filter.Filter, {
+    data: filterData,
+    selected: filters,
+    label: "Filter",
+    clearAllText: "Clear All",
+    noResultText: "No results",
+    emptyFilterText: "No filters to show",
+    onChange: setFilters
+  }), /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+    variant: "text gray",
+    onClick: onClose
+  }, /*#__PURE__*/_react.default.createElement(_Icons.CancelCrossIcon, null))))), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.ContentDivider, null), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.Content, null, visibleLogs.length > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(LogListHeader, null, /*#__PURE__*/_react.default.createElement(_Typography.Caption2, {
+    className: "lh-conn",
+    color: "secondary",
+    weight: "bold"
+  }, "CONNECTION"), /*#__PURE__*/_react.default.createElement(_Typography.Caption2, {
+    className: "lh-event",
+    color: "secondary",
+    weight: "bold"
+  }, "EVENT TYPE"), /*#__PURE__*/_react.default.createElement(_Typography.Caption2, {
+    className: "lh-status",
+    color: "secondary",
+    weight: "bold"
+  }, "STATUS"), /*#__PURE__*/_react.default.createElement(_Typography.Caption2, {
+    className: "lh-outcomes",
+    color: "secondary",
+    weight: "bold"
+  }, "OUTCOMES")), visibleLogs.map(function (log) {
+    return /*#__PURE__*/_react.default.createElement(LogRow, {
+      key: log.id,
+      log: log,
+      connection: connectionsById[log.connectionId]
+    });
+  })) : /*#__PURE__*/_react.default.createElement(EmptyLogs, null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+    color: "tertiary"
+  }, "No webhook logs match the selected filters."))));
+};
+//# sourceMappingURL=WebhookLogsDialog.js.map