@burdenoff/microfe-bigconsole 2026.805.2 → 2026.812.1

package/dist/bigconsole/components/widgets/webhook-config/WebhookConfigPanel.js

@@ -1,32 +1,30 @@
 import e from "../../../hooks/useEventWebhooks.js";
 import { memo as t, useCallback as n, useState as r } from "react";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useI18n as i } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/webhook-config/WebhookConfigPanel.tsx
-var s = {
+var c = {
 	container: {
-		padding: "16px",
-		backgroundColor: "var(--color-bg-surface)",
-		borderRadius: "8px"
+		display: "flex",
+		flexDirection: "column",
+		gap: "var(--space-formGap)",
+		minWidth: 0
 	},
 	header: {
 		display: "flex",
-		justifyContent: "space-between",
+		flexWrap: "wrap",
+		justifyContent: "flex-end",
 		alignItems: "center",
-		marginBottom: "16px"
-	},
-	title: {
-		fontSize: "16px",
-		fontWeight: 600,
-		color: "var(--color-text-primary)",
-		margin: 0
+		gap: "var(--space-controlGap)"
 	},
 	addButton: {
-		padding: "8px 16px",
+		minHeight: "var(--size-controlHeight-md)",
+		padding: "0 var(--space-formGap)",
 		backgroundColor: "var(--color-action-primary-bg)",
-		color: "var(--color-text-inverse)",
+		color: "var(--color-action-primary-text)",
 		border: "none",
-		borderRadius: "6px",
-		fontSize: "14px",
+		borderRadius: "var(--radius-button)",
+		fontSize: "var(--font-size-body-sm)",
 		fontWeight: 500,
 		cursor: "pointer"
 	},
@@ -36,26 +34,33 @@ var s = {
 		gap: "12px"
 	},
 	webhookCard: {
-		padding: "16px",
-		backgroundColor: "var(--color-bg-subtle)",
-		borderRadius: "8px",
-		border: "1px solid var(--color-border-subtle)"
+		padding: "var(--space-cardPadding)",
+		backgroundColor: "var(--color-bg-sunken)",
+		borderRadius: "var(--radius-card)",
+		border: "1px solid var(--color-border-subtle)",
+		minWidth: 0
 	},
 	webhookHeader: {
 		display: "flex",
+		flexWrap: "wrap",
 		justifyContent: "space-between",
 		alignItems: "flex-start",
-		marginBottom: "8px"
+		gap: "var(--space-iconGap)",
+		marginBottom: "8px",
+		minWidth: 0
 	},
 	webhookTitle: {
 		display: "flex",
+		flexWrap: "wrap",
 		alignItems: "center",
-		gap: "8px"
+		gap: "8px",
+		minWidth: 0
 	},
 	webhookName: {
-		fontSize: "14px",
+		fontSize: "var(--font-size-body-sm)",
 		fontWeight: 600,
-		color: "var(--color-text-primary)"
+		color: "var(--color-text-primary)",
+		wordBreak: "break-word"
 	},
 	statusBadge: {
 		padding: "2px 8px",
@@ -72,26 +77,28 @@ var s = {
 		color: "var(--color-status-warning-text)"
 	},
 	webhookDetails: {
-		fontSize: "13px",
-		color: "var(--color-text-muted)",
+		fontSize: "var(--font-size-body-sm)",
+		color: "var(--color-text-secondary)",
 		marginBottom: "4px"
 	},
 	webhookUrl: {
-		fontSize: "12px",
-		color: "var(--color-text-placeholder)",
-		fontFamily: "monospace",
+		fontSize: "var(--font-size-body-sm)",
+		color: "var(--color-text-muted)",
+		fontFamily: "var(--font-family-mono)",
 		wordBreak: "break-all"
 	},
 	webhookActions: {
 		display: "flex",
+		flexWrap: "wrap",
 		gap: "8px",
 		marginTop: "12px"
 	},
 	actionButton: {
-		padding: "6px 12px",
-		fontSize: "12px",
+		minHeight: "var(--size-controlHeight-md)",
+		padding: "0 12px",
+		fontSize: "var(--font-size-body-sm)",
 		fontWeight: 500,
-		borderRadius: "4px",
+		borderRadius: "var(--radius-button)",
 		border: "none",
 		cursor: "pointer"
 	},
@@ -113,14 +120,24 @@ var s = {
 	},
 	emptyState: {
 		textAlign: "center",
-		padding: "32px",
-		color: "var(--color-text-placeholder)"
+		padding: "var(--space-pagePadding) var(--space-formGap)",
+		color: "var(--color-text-secondary)",
+		backgroundColor: "var(--color-status-info-bgSubtle)",
+		border: "1px solid var(--color-status-info-border)",
+		borderRadius: "var(--radius-card)"
+	},
+	emptyTitle: {
+		fontSize: "var(--font-size-body-sm)",
+		fontWeight: 600,
+		color: "var(--color-status-info-text)",
+		margin: 0
 	},
 	form: {
-		padding: "16px",
-		backgroundColor: "var(--color-bg-subtle)",
-		borderRadius: "8px",
-		marginBottom: "16px"
+		padding: "var(--space-cardPadding)",
+		backgroundColor: "var(--color-bg-sunken)",
+		border: "1px solid var(--color-border-subtle)",
+		borderRadius: "var(--radius-card)",
+		minWidth: 0
 	},
 	formGroup: { marginBottom: "12px" },
 	label: {
@@ -132,54 +149,64 @@ var s = {
 	},
 	input: {
 		width: "100%",
+		minHeight: "var(--size-controlHeight-md)",
 		padding: "8px 12px",
-		fontSize: "14px",
-		border: "1px solid var(--color-border-default)",
-		borderRadius: "6px",
+		fontSize: "var(--font-size-body-sm)",
+		color: "var(--color-text-primary)",
+		backgroundColor: "var(--color-bg-surface)",
+		border: "1px solid var(--color-border-subtle)",
+		borderRadius: "var(--radius-input)",
 		boxSizing: "border-box"
 	},
 	select: {
 		width: "100%",
+		minHeight: "var(--size-controlHeight-md)",
 		padding: "8px 12px",
-		fontSize: "14px",
-		border: "1px solid var(--color-border-default)",
-		borderRadius: "6px",
+		fontSize: "var(--font-size-body-sm)",
+		color: "var(--color-text-primary)",
+		border: "1px solid var(--color-border-subtle)",
+		borderRadius: "var(--radius-input)",
 		boxSizing: "border-box",
 		backgroundColor: "var(--color-bg-surface)"
 	},
 	textarea: {
 		width: "100%",
 		padding: "8px 12px",
-		fontSize: "14px",
-		border: "1px solid var(--color-border-default)",
-		borderRadius: "6px",
+		fontSize: "var(--font-size-body-sm)",
+		color: "var(--color-text-primary)",
+		backgroundColor: "var(--color-bg-surface)",
+		border: "1px solid var(--color-border-subtle)",
+		borderRadius: "var(--radius-input)",
 		boxSizing: "border-box",
-		fontFamily: "monospace",
+		fontFamily: "var(--font-family-mono)",
 		minHeight: "80px",
 		resize: "vertical"
 	},
 	formActions: {
 		display: "flex",
+		flexWrap: "wrap",
 		gap: "8px",
 		justifyContent: "flex-end",
-		marginTop: "16px"
+		marginTop: "var(--space-formGap)"
 	},
 	cancelButton: {
-		padding: "8px 16px",
-		backgroundColor: "var(--color-bg-sunken)",
+		minHeight: "var(--size-controlHeight-md)",
+		padding: "0 var(--space-formGap)",
+		backgroundColor: "var(--color-bg-surface)",
 		color: "var(--color-text-primary)",
-		border: "none",
-		borderRadius: "6px",
-		fontSize: "14px",
+		border: "1px solid var(--color-border-subtle)",
+		borderRadius: "var(--radius-button)",
+		fontSize: "var(--font-size-body-sm)",
 		cursor: "pointer"
 	},
 	saveButton: {
-		padding: "8px 16px",
+		minHeight: "var(--size-controlHeight-md)",
+		padding: "0 var(--space-formGap)",
 		backgroundColor: "var(--color-action-primary-bg)",
-		color: "var(--color-text-inverse)",
+		color: "var(--color-action-primary-text)",
 		border: "none",
-		borderRadius: "6px",
-		fontSize: "14px",
+		borderRadius: "var(--radius-button)",
+		fontSize: "var(--font-size-body-sm)",
 		fontWeight: 500,
 		cursor: "pointer"
 	},
@@ -202,299 +229,306 @@ var s = {
 		color: "var(--color-text-placeholder)",
 		marginTop: "4px"
 	}
-}, c = t(function({ webhook: e, dashboardId: t, widgetId: n, onSave: i, onCancel: c, loading: l }) {
-	let [u, d] = r(e?.eventPattern || "widget:*:clicked"), [f, p] = r(e?.webhookUrl || ""), [m, h] = r(e?.method || "POST"), [g, _] = r(e?.headers ? JSON.stringify(e.headers, null, 2) : "");
-	return /* @__PURE__ */ o("form", {
-		style: s.form,
+}, l = t(function({ webhook: e, dashboardId: t, widgetId: n, onSave: a, onCancel: l, loading: u }) {
+	let { t: d } = i(), [f, p] = r(e?.eventPattern || "widget:*:clicked"), [m, h] = r(e?.webhookUrl || ""), [g, _] = r(e?.method || "POST"), [v, y] = r(e?.headers ? JSON.stringify(e.headers, null, 2) : "");
+	return /* @__PURE__ */ s("form", {
+		style: c.form,
 		onSubmit: async (r) => {
 			r.preventDefault();
-			let a;
-			if (g.trim()) try {
-				a = JSON.parse(g);
+			let i;
+			if (v.trim()) try {
+				i = JSON.parse(v);
 			} catch {
-				alert("Invalid JSON in headers field");
+				alert(d("bigconsole.widget.webhookConfig.invalidJson", "Invalid JSON in headers field"));
 				return;
 			}
-			e ? await i({
+			e ? await a({
 				id: e.id,
-				eventPattern: u,
-				webhookUrl: f,
-				method: m,
-				headers: a || null
-			}) : await i({
+				eventPattern: f,
+				webhookUrl: m,
+				method: g,
+				headers: i || null
+			}) : await a({
 				dashboardId: t,
 				widgetId: n,
-				eventPattern: u,
-				webhookUrl: f,
-				method: m,
-				headers: a
+				eventPattern: f,
+				webhookUrl: m,
+				method: g,
+				headers: i
 			});
 		},
 		children: [
-			/* @__PURE__ */ o("div", {
-				style: s.formGroup,
+			/* @__PURE__ */ s("div", {
+				style: c.formGroup,
 				children: [
-					/* @__PURE__ */ a("label", {
-						style: s.label,
-						children: "Event Pattern *"
+					/* @__PURE__ */ o("label", {
+						style: c.label,
+						children: d("bigconsole.widget.webhookConfig.eventPatternLabel", "Event Pattern *")
 					}),
-					/* @__PURE__ */ a("input", {
+					/* @__PURE__ */ o("input", {
 						type: "text",
-						value: u,
-						onChange: (e) => d(e.target.value),
+						value: f,
+						onChange: (e) => p(e.target.value),
 						placeholder: "widget:*:clicked",
-						style: s.input,
+						style: c.input,
 						required: !0
 					}),
-					/* @__PURE__ */ a("p", {
-						style: s.helpText,
-						children: "Use * as wildcard. Examples: widget:*:clicked, *:submit, button:save:*"
+					/* @__PURE__ */ o("p", {
+						style: c.helpText,
+						children: d("bigconsole.widget.webhookConfig.eventPatternHelp", "Use * as wildcard. Examples: widget:*:clicked, *:submit, button:save:*")
 					})
 				]
 			}),
-			/* @__PURE__ */ o("div", {
-				style: s.formGroup,
-				children: [/* @__PURE__ */ a("label", {
-					style: s.label,
-					children: "Webhook URL *"
-				}), /* @__PURE__ */ a("input", {
+			/* @__PURE__ */ s("div", {
+				style: c.formGroup,
+				children: [/* @__PURE__ */ o("label", {
+					style: c.label,
+					children: d("bigconsole.widget.webhookConfig.webhookUrlLabel", "Webhook URL *")
+				}), /* @__PURE__ */ o("input", {
 					type: "url",
-					value: f,
-					onChange: (e) => p(e.target.value),
+					value: m,
+					onChange: (e) => h(e.target.value),
 					placeholder: "https://your-api.com/webhooks/bigconsole",
-					style: s.input,
+					style: c.input,
 					required: !0
 				})]
 			}),
-			/* @__PURE__ */ o("div", {
-				style: s.formGroup,
-				children: [/* @__PURE__ */ a("label", {
-					style: s.label,
-					children: "HTTP Method"
-				}), /* @__PURE__ */ o("select", {
-					value: m,
-					onChange: (e) => h(e.target.value),
-					style: s.select,
+			/* @__PURE__ */ s("div", {
+				style: c.formGroup,
+				children: [/* @__PURE__ */ o("label", {
+					style: c.label,
+					children: d("bigconsole.widget.webhookConfig.httpMethodLabel", "HTTP Method")
+				}), /* @__PURE__ */ s("select", {
+					value: g,
+					onChange: (e) => _(e.target.value),
+					style: c.select,
 					children: [
-						/* @__PURE__ */ a("option", {
+						/* @__PURE__ */ o("option", {
 							value: "POST",
 							children: "POST"
 						}),
-						/* @__PURE__ */ a("option", {
+						/* @__PURE__ */ o("option", {
 							value: "PUT",
 							children: "PUT"
 						}),
-						/* @__PURE__ */ a("option", {
+						/* @__PURE__ */ o("option", {
 							value: "PATCH",
 							children: "PATCH"
 						}),
-						/* @__PURE__ */ a("option", {
+						/* @__PURE__ */ o("option", {
 							value: "GET",
 							children: "GET"
 						}),
-						/* @__PURE__ */ a("option", {
+						/* @__PURE__ */ o("option", {
 							value: "DELETE",
 							children: "DELETE"
 						})
 					]
 				})]
 			}),
-			/* @__PURE__ */ o("div", {
-				style: s.formGroup,
-				children: [/* @__PURE__ */ a("label", {
-					style: s.label,
-					children: "Custom Headers (JSON)"
-				}), /* @__PURE__ */ a("textarea", {
-					value: g,
-					onChange: (e) => _(e.target.value),
+			/* @__PURE__ */ s("div", {
+				style: c.formGroup,
+				children: [/* @__PURE__ */ o("label", {
+					style: c.label,
+					children: d("bigconsole.widget.webhookConfig.customHeadersLabel", "Custom Headers (JSON)")
+				}), /* @__PURE__ */ o("textarea", {
+					value: v,
+					onChange: (e) => y(e.target.value),
 					placeholder: "{\n  \"Authorization\": \"Bearer your-token\"\n}",
-					style: s.textarea
+					style: c.textarea
 				})]
 			}),
-			/* @__PURE__ */ o("div", {
-				style: s.formActions,
-				children: [/* @__PURE__ */ a("button", {
+			/* @__PURE__ */ s("div", {
+				style: c.formActions,
+				children: [/* @__PURE__ */ o("button", {
 					type: "button",
-					onClick: c,
-					style: s.cancelButton,
-					children: "Cancel"
-				}), /* @__PURE__ */ a("button", {
+					onClick: l,
+					style: c.cancelButton,
+					children: d("bigconsole.widget.webhookConfig.cancel", "Cancel")
+				}), /* @__PURE__ */ o("button", {
 					type: "submit",
-					disabled: l,
-					style: s.saveButton,
-					children: l ? "Saving..." : e ? "Update Webhook" : "Create Webhook"
+					disabled: u,
+					style: c.saveButton,
+					children: u ? d("bigconsole.widget.webhookConfig.saving", "Saving...") : e ? d("bigconsole.widget.webhookConfig.updateWebhook", "Update Webhook") : d("bigconsole.widget.webhookConfig.createWebhook", "Create Webhook")
 				})]
 			})
 		]
 	});
-}), l = t(function({ webhook: e, onEdit: t, onDelete: n, onToggle: r, onTest: c, testResult: l, testing: u }) {
-	return /* @__PURE__ */ o("div", {
-		style: s.webhookCard,
+}), u = t(function({ webhook: e, onEdit: t, onDelete: n, onToggle: r, onTest: l, testResult: u, testing: d }) {
+	let { t: f } = i();
+	return /* @__PURE__ */ s("div", {
+		style: c.webhookCard,
 		children: [
-			/* @__PURE__ */ a("div", {
-				style: s.webhookHeader,
-				children: /* @__PURE__ */ o("div", {
-					style: s.webhookTitle,
-					children: [
-						/* @__PURE__ */ a("span", {
-							style: { fontSize: "16px" },
-							children: "📡"
-						}),
-						/* @__PURE__ */ a("span", {
-							style: s.webhookName,
-							children: e.eventPattern
-						}),
-						/* @__PURE__ */ a("span", {
-							style: {
-								...s.statusBadge,
-								...e.isActive ? s.activeBadge : s.inactiveBadge
-							},
-							children: e.isActive ? "Active" : "Inactive"
-						})
-					]
+			/* @__PURE__ */ o("div", {
+				style: c.webhookHeader,
+				children: /* @__PURE__ */ s("div", {
+					style: c.webhookTitle,
+					children: [/* @__PURE__ */ o("span", {
+						style: c.webhookName,
+						children: e.eventPattern
+					}), /* @__PURE__ */ o("span", {
+						style: {
+							...c.statusBadge,
+							...e.isActive ? c.activeBadge : c.inactiveBadge
+						},
+						children: e.isActive ? f("bigconsole.widget.webhookConfig.active", "Active") : f("bigconsole.widget.webhookConfig.inactive", "Inactive")
+					})]
 				})
 			}),
-			/* @__PURE__ */ o("div", {
-				style: s.webhookDetails,
-				children: ["Method: ", /* @__PURE__ */ a("strong", { children: e.method })]
+			/* @__PURE__ */ s("div", {
+				style: c.webhookDetails,
+				children: [
+					f("bigconsole.widget.webhookConfig.methodLabel", "Method:"),
+					" ",
+					/* @__PURE__ */ o("strong", { children: e.method })
+				]
 			}),
-			/* @__PURE__ */ a("div", {
-				style: s.webhookUrl,
+			/* @__PURE__ */ o("div", {
+				style: c.webhookUrl,
 				children: e.webhookUrl
 			}),
-			l && /* @__PURE__ */ a("div", {
+			u && /* @__PURE__ */ o("div", {
+				role: "status",
 				style: {
-					...s.testResult,
-					...l.success ? s.testSuccess : s.testFailure
+					...c.testResult,
+					...u.success ? c.testSuccess : c.testFailure
 				},
-				children: l.success ? /* @__PURE__ */ o(i, { children: [
-					"✅ Test successful! Status: ",
-					l.statusCode,
-					", Latency: ",
-					l.latencyMs,
-					"ms"
-				] }) : /* @__PURE__ */ o(i, { children: ["❌ Test failed: ", l.errorMessage || "Unknown error"] })
+				children: u.success ? /* @__PURE__ */ o(a, { children: f("bigconsole.widget.webhookConfig.testSuccess", "Test successful! Status: {{statusCode}}, Latency: {{latencyMs}}ms", {
+					statusCode: u.statusCode ?? "",
+					latencyMs: u.latencyMs ?? ""
+				}) }) : /* @__PURE__ */ o(a, { children: f("bigconsole.widget.webhookConfig.testFailure", "Test failed: {{error}}", { error: u.errorMessage || f("bigconsole.widget.webhookConfig.unknownError", "Unknown error") }) })
 			}),
-			/* @__PURE__ */ o("div", {
-				style: s.webhookActions,
+			/* @__PURE__ */ s("div", {
+				style: c.webhookActions,
 				children: [
-					/* @__PURE__ */ a("button", {
+					/* @__PURE__ */ o("button", {
 						onClick: t,
 						style: {
-							...s.actionButton,
-							...s.editButton
+							...c.actionButton,
+							...c.editButton
 						},
-						children: "Edit"
+						children: f("bigconsole.widget.webhookConfig.edit", "Edit")
 					}),
-					/* @__PURE__ */ a("button", {
-						onClick: c,
-						disabled: u,
+					/* @__PURE__ */ o("button", {
+						onClick: l,
+						disabled: d,
 						style: {
-							...s.actionButton,
-							...s.testButton
+							...c.actionButton,
+							...c.testButton
 						},
-						children: u ? "Testing..." : "Test"
+						children: d ? f("bigconsole.widget.webhookConfig.testing", "Testing...") : f("bigconsole.widget.webhookConfig.test", "Test")
 					}),
-					/* @__PURE__ */ a("button", {
+					/* @__PURE__ */ o("button", {
 						onClick: r,
 						style: {
-							...s.actionButton,
-							...s.toggleButton
+							...c.actionButton,
+							...c.toggleButton
 						},
-						children: e.isActive ? "Disable" : "Enable"
+						children: e.isActive ? f("bigconsole.widget.webhookConfig.disable", "Disable") : f("bigconsole.widget.webhookConfig.enable", "Enable")
 					}),
-					/* @__PURE__ */ a("button", {
+					/* @__PURE__ */ o("button", {
 						onClick: n,
 						style: {
-							...s.actionButton,
-							...s.deleteButton
+							...c.actionButton,
+							...c.deleteButton
 						},
-						children: "Delete"
+						children: f("bigconsole.widget.webhookConfig.delete", "Delete")
 					})
 				]
 			})
 		]
 	});
-}), u = t(function({ dashboardId: t, widgetId: i, onWebhookCreated: u, onWebhookDeleted: d }) {
-	let [f, p] = r(!1), [m, h] = r(null), [g, _] = r({}), [v, y] = r(null), { webhooks: b, loading: x, createWebhook: S, updateWebhook: C, deleteWebhook: w, toggleWebhook: T, testWebhook: E } = e({
+}), d = t(function({ dashboardId: t, widgetId: a, onWebhookCreated: d, onWebhookDeleted: f }) {
+	let { t: p } = i(), [m, h] = r(!1), [g, _] = r(null), [v, y] = r({}), [b, x] = r(null), { webhooks: S, loading: C, createWebhook: w, updateWebhook: T, deleteWebhook: E, toggleWebhook: D, testWebhook: O } = e({
 		dashboardId: t,
-		widgetId: i
-	}), D = n(async (e) => {
-		if ("id" in e) await C(e) && (h(null), p(!1));
+		widgetId: a
+	}), k = n(async (e) => {
+		if ("id" in e) await T(e) && (_(null), h(!1));
 		else {
-			let t = await S(e);
-			t && (p(!1), u?.(t));
+			let t = await w(e);
+			t && (h(!1), d?.(t));
 		}
 	}, [
-		S,
-		C,
-		u
-	]), O = n(async (e) => {
-		confirm("Are you sure you want to delete this webhook?") && await w(e) && d?.(e);
-	}, [w, d]), k = n(async (e) => {
-		await T(e.id, !e.isActive);
-	}, [T]), A = n(async (e) => {
-		y(e);
-		let t = await E(e);
-		_((n) => ({
+		w,
+		T,
+		d
+	]), A = n(async (e) => {
+		confirm(p("bigconsole.widget.webhookConfig.deleteConfirm", "Are you sure you want to delete this webhook?")) && await E(e) && f?.(e);
+	}, [
+		E,
+		f,
+		p
+	]), j = n(async (e) => {
+		await D(e.id, !e.isActive);
+	}, [D]), M = n(async (e) => {
+		x(e);
+		let t = await O(e);
+		y((n) => ({
 			...n,
 			[e]: t
-		})), y(null);
-	}, [E]), j = n((e) => {
-		h(e), p(!0);
-	}, []), M = n(() => {
-		p(!1), h(null);
+		})), x(null);
+	}, [O]), N = n((e) => {
+		_(e), h(!0);
+	}, []), P = n(() => {
+		h(!1), _(null);
 	}, []);
-	return /* @__PURE__ */ o("div", {
-		style: s.container,
+	return /* @__PURE__ */ s("div", {
+		style: c.container,
+		"data-testid": "webhook-config-panel",
 		children: [
-			/* @__PURE__ */ o("div", {
-				style: s.header,
-				children: [/* @__PURE__ */ a("h3", {
-					style: s.title,
-					children: "Webhook Configuration"
-				}), !f && /* @__PURE__ */ a("button", {
-					onClick: () => p(!0),
-					style: s.addButton,
-					children: "+ Add Webhook"
-				})]
+			!m && /* @__PURE__ */ o("div", {
+				style: c.header,
+				children: /* @__PURE__ */ o("button", {
+					type: "button",
+					onClick: () => h(!0),
+					style: c.addButton,
+					children: p("bigconsole.widget.webhookConfig.addWebhook", "+ Add Webhook")
+				})
 			}),
-			f && /* @__PURE__ */ a(c, {
-				webhook: m || void 0,
+			m && /* @__PURE__ */ o(l, {
+				webhook: g || void 0,
 				dashboardId: t,
-				widgetId: i,
-				onSave: D,
-				onCancel: M,
-				loading: x
+				widgetId: a,
+				onSave: k,
+				onCancel: P,
+				loading: C
 			}),
-			x && b.length === 0 ? /* @__PURE__ */ a("div", {
-				style: s.emptyState,
-				children: "Loading..."
-			}) : b.length === 0 ? /* @__PURE__ */ o("div", {
-				style: s.emptyState,
-				children: [/* @__PURE__ */ a("p", { children: "No webhooks configured" }), /* @__PURE__ */ a("p", {
+			C && S.length === 0 ? /* @__PURE__ */ o("div", {
+				style: c.emptyState,
+				role: "status",
+				children: /* @__PURE__ */ o("p", {
+					style: c.emptyTitle,
+					children: p("bigconsole.widget.webhookConfig.loading", "Loading...")
+				})
+			}) : S.length === 0 ? /* @__PURE__ */ s("div", {
+				style: c.emptyState,
+				role: "status",
+				children: [/* @__PURE__ */ o("p", {
+					style: c.emptyTitle,
+					children: p("bigconsole.widget.webhookConfig.noWebhooks", "No webhooks configured")
+				}), /* @__PURE__ */ o("p", {
 					style: {
-						fontSize: "13px",
+						fontSize: "var(--font-size-body-sm)",
 						marginTop: "8px"
 					},
-					children: "Add a webhook to receive events when actions are triggered."
+					children: p("bigconsole.widget.webhookConfig.noWebhooksHelp", "Add a webhook to receive events when actions are triggered.")
 				})]
-			}) : /* @__PURE__ */ a("div", {
-				style: s.webhookList,
-				children: b.map((e) => /* @__PURE__ */ a(l, {
+			}) : /* @__PURE__ */ o("div", {
+				style: c.webhookList,
+				children: S.map((e) => /* @__PURE__ */ o(u, {
 					webhook: e,
-					onEdit: () => j(e),
-					onDelete: () => O(e.id),
-					onToggle: () => k(e),
-					onTest: () => A(e.id),
-					testResult: g[e.id],
-					testing: v === e.id
+					onEdit: () => N(e),
+					onDelete: () => A(e.id),
+					onToggle: () => j(e),
+					onTest: () => M(e.id),
+					testResult: v[e.id],
+					testing: b === e.id
 				}, e.id))
 			})
 		]
 	});
 });
 //#endregion
-export { u as default };
+export { d as default };
 
 //# sourceMappingURL=WebhookConfigPanel.js.map