@burdenoff/microfe-bigconsole 2026.805.1 → 2026.805.2

package/dist/bigconsole/components/widgets/ActionConfigDialog.js

@@ -1,9 +1,11 @@
-import { memo as e, useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
-import { ChevronDown as ee, ChevronRight as te, Pencil as ne, Plus as re, Zap as ie } from "lucide-react";
-import { Button as ae, Checkbox as a, Dialog as oe, DialogContent as se, DialogDescription as ce, DialogFooter as le, DialogHeader as ue, DialogTitle as de, Input as o, Select as s, SelectContent as c, SelectItem as l, SelectTrigger as u, SelectValue as d, Spinner as fe, Textarea as pe } from "@burdenoff/fe-libs/ui";
+import { BIGCONSOLE_PERMISSIONS as e } from "../../../constants/permissions.js";
+import { memo as t, useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
+import { PermissionButton as ee } from "@burdenoff/fe-libs/shared/components";
+import { ChevronDown as te, ChevronRight as ne, Pencil as re, Plus as ie, Zap as ae } from "lucide-react";
+import { Button as oe, Checkbox as se, Dialog as ce, DialogContent as le, DialogDescription as ue, DialogFooter as de, DialogHeader as fe, DialogTitle as pe, Input as o, Select as s, SelectContent as c, SelectItem as l, SelectTrigger as u, SelectValue as d, Spinner as me, Textarea as he } from "@burdenoff/fe-libs/ui";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/ActionConfigDialog.tsx
-var me = [{
+var ge = [{
 	value: "WEBHOOK",
 	label: "Call a webhook / my API",
 	hint: "Sends an HTTP request to the URL below every time the button is clicked."
@@ -11,13 +13,13 @@ var me = [{
 	value: "EMIT",
 	label: "Just emit an event (advanced)",
 	hint: "Emits widget:<name>:clicked. Wire it up yourself in the Webhooks/Events section."
-}], he = [
+}], _e = [
 	"POST",
 	"GET",
 	"PUT",
 	"PATCH",
 	"DELETE"
-], ge = [
+], ve = [
 	{
 		value: "PRIMARY",
 		label: "Primary",
@@ -43,7 +45,7 @@ var me = [{
 		label: "Danger",
 		color: "var(--color-action-danger-bg)"
 	}
-], _e = [
+], ye = [
 	{
 		value: "",
 		label: "No icon"
@@ -120,19 +122,19 @@ var h = {
 	border: "1px solid var(--color-border)",
 	boxShadow: "var(--shadow-elevation-3)",
 	borderRadius: "var(--radius-button)"
-}, v = e(function({ isOpen: e, action: v, initialWebhook: y, isLoading: b = !1, saveError: ve, onClose: ye, onSave: be }) {
-	let x = !!v, S = r(null), C = r(!1), [w, T] = i(""), [E, D] = i(""), [O, k] = i(!1), [A, j] = i("PRIMARY"), [M, N] = i(""), [P, F] = i("WEBHOOK"), [I, L] = i(""), [R, z] = i("POST"), [B, V] = i(!1), [H, U] = i(!1), [xe, Se] = i(!1), [W, G] = i(!1), [K, q] = i("Confirm Action"), [J, Y] = i("Are you sure you want to proceed?"), [Ce, X] = i("Confirm"), [we, Z] = i("Cancel"), [Q, $] = i(null);
-	n(() => {
-		if (!e) return;
-		C.current = !1, L(""), z("POST"), v ? (T(v.label), D(v.name), k(!1), j(v.style), N(v.icon || ""), V(v.disabled), U(v.hidden), F("EMIT"), G(!!v.confirmation), v.confirmation ? (q(v.confirmation.title), Y(v.confirmation.message), X(v.confirmation.confirmLabel || "Confirm"), Z(v.confirmation.cancelLabel || "Cancel")) : (q("Confirm Action"), Y("Are you sure you want to proceed?"), X("Confirm"), Z("Cancel"))) : (T(""), D(""), k(!1), j("PRIMARY"), N(""), F("WEBHOOK"), V(!1), U(!1), G(!1), q("Confirm Action"), Y("Are you sure you want to proceed?"), X("Confirm"), Z("Cancel")), Se(!1), $(null);
-		let t = requestAnimationFrame(() => requestAnimationFrame(() => S.current?.focus()));
-		return () => cancelAnimationFrame(t);
-	}, [e, v]), n(() => {
-		!e || !y || C.current || (F("WEBHOOK"), L(y.url), z(y.method));
-	}, [e, y]);
-	let Te = t((e) => {
+}, v = t(function({ isOpen: t, action: v, initialWebhook: y, isLoading: b = !1, saveError: be, onClose: xe, onSave: Se }) {
+	let x = !!v, S = i(null), C = i(!1), [w, T] = a(""), [E, D] = a(""), [O, k] = a(!1), [A, j] = a("PRIMARY"), [M, N] = a(""), [P, F] = a("WEBHOOK"), [I, L] = a(""), [R, z] = a("POST"), [B, V] = a(!1), [H, U] = a(!1), [Ce, we] = a(!1), [W, G] = a(!1), [Te, K] = a("Confirm Action"), [Ee, q] = a("Are you sure you want to proceed?"), [J, Y] = a("Confirm"), [X, Z] = a("Cancel"), [Q, $] = a(null);
+	r(() => {
+		if (!t) return;
+		C.current = !1, L(""), z("POST"), v ? (T(v.label), D(v.name), k(!1), j(v.style), N(v.icon || ""), V(v.disabled), U(v.hidden), F("EMIT"), G(!!v.confirmation), v.confirmation ? (K(v.confirmation.title), q(v.confirmation.message), Y(v.confirmation.confirmLabel || "Confirm"), Z(v.confirmation.cancelLabel || "Cancel")) : (K("Confirm Action"), q("Are you sure you want to proceed?"), Y("Confirm"), Z("Cancel"))) : (T(""), D(""), k(!1), j("PRIMARY"), N(""), F("WEBHOOK"), V(!1), U(!1), G(!1), K("Confirm Action"), q("Are you sure you want to proceed?"), Y("Confirm"), Z("Cancel")), we(!1), $(null);
+		let e = requestAnimationFrame(() => requestAnimationFrame(() => S.current?.focus()));
+		return () => cancelAnimationFrame(e);
+	}, [t, v]), r(() => {
+		!t || !y || C.current || (F("WEBHOOK"), L(y.url), z(y.method));
+	}, [t, y]);
+	let De = n((e) => {
 		T(e), O || D(m(e)), Q && $(null);
-	}, [O, Q]), Ee = t((e) => {
+	}, [O, Q]), Oe = n((e) => {
 		e.preventDefault();
 		let t = w.trim();
 		if (!t) {
@@ -156,15 +158,15 @@ var h = {
 			}
 		}
 		let r = W ? {
-			title: K.trim() || "Confirm Action",
-			message: J.trim() || "Are you sure?",
-			confirmLabel: Ce.trim() || "Confirm",
-			cancelLabel: we.trim() || "Cancel"
+			title: Te.trim() || "Confirm Action",
+			message: Ee.trim() || "Are you sure?",
+			confirmLabel: J.trim() || "Confirm",
+			cancelLabel: X.trim() || "Cancel"
 		} : void 0, i = P === "WEBHOOK" ? {
 			url: I.trim(),
 			method: R
 		} : null;
-		be(x && v ? {
+		Se(x && v ? {
 			id: v.id,
 			name: n,
 			label: t,
@@ -196,23 +198,23 @@ var h = {
 		B,
 		H,
 		W,
-		K,
+		Te,
+		Ee,
 		J,
-		Ce,
-		we,
+		X,
 		x,
 		v,
-		be
-	]), De = (e) => ge.find((t) => t.value === e)?.color || "var(--color-action-primary-bg)", Oe = me.find((e) => e.value === P);
-	return /* @__PURE__ */ f(oe, {
-		open: e,
-		onOpenChange: (e) => !e && !b && ye(),
-		children: /* @__PURE__ */ p(se, {
+		Se
+	]), ke = (e) => ve.find((t) => t.value === e)?.color || "var(--color-action-primary-bg)", Ae = ge.find((e) => e.value === P);
+	return /* @__PURE__ */ f(ce, {
+		open: t,
+		onOpenChange: (e) => !e && !b && xe(),
+		children: /* @__PURE__ */ p(le, {
 			style: {
 				maxWidth: "500px",
 				padding: 0
 			},
-			children: [/* @__PURE__ */ f(ue, {
+			children: [/* @__PURE__ */ f(fe, {
 				style: { padding: "var(--space-pagePadding) var(--space-pagePadding) 0" },
 				children: /* @__PURE__ */ p("div", {
 					style: {
@@ -231,12 +233,12 @@ var h = {
 							backgroundColor: "var(--color-action-primary-bg)",
 							boxShadow: "var(--shadow-elevation-2)"
 						},
-						children: f(x ? ne : ie, { style: {
+						children: f(x ? re : ae, { style: {
 							height: "var(--size-icon-lg)",
 							width: "var(--size-icon-lg)",
 							color: "var(--color-action-primary-text)"
 						} })
-					}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f(de, {
+					}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f(pe, {
 						style: {
 							fontSize: "var(--font-size-heading-h4)",
 							fontWeight: "var(--font-weight-bold)",
@@ -244,7 +246,7 @@ var h = {
 							margin: 0
 						},
 						children: x ? "Edit Button" : "Add Button"
-					}), /* @__PURE__ */ f(ce, {
+					}), /* @__PURE__ */ f(ue, {
 						style: {
 							fontSize: "var(--font-size-body-sm)",
 							color: "var(--color-text-secondary)",
@@ -254,7 +256,7 @@ var h = {
 					})] })]
 				})
 			}), /* @__PURE__ */ p("form", {
-				onSubmit: Ee,
+				onSubmit: Oe,
 				children: [/* @__PURE__ */ p("div", {
 					style: {
 						padding: "var(--space-pagePadding)",
@@ -262,7 +264,7 @@ var h = {
 						overflowY: "auto"
 					},
 					children: [
-						(Q || ve) && /* @__PURE__ */ f("div", {
+						(Q || be) && /* @__PURE__ */ f("div", {
 							style: {
 								padding: "var(--space-controlGap)",
 								backgroundColor: "var(--color-status-error-bgSubtle)",
@@ -276,7 +278,7 @@ var h = {
 									color: "var(--color-status-error-text)",
 									margin: 0
 								},
-								children: Q || ve
+								children: Q || be
 							})
 						}),
 						/* @__PURE__ */ p("div", {
@@ -292,7 +294,7 @@ var h = {
 								/* @__PURE__ */ f(o, {
 									ref: S,
 									value: w,
-									onChange: (e) => Te(e.target.value),
+									onChange: (e) => De(e.target.value),
 									placeholder: "e.g., Refresh Data, Export CSV",
 									disabled: b,
 									style: {
@@ -328,7 +330,7 @@ var h = {
 									children: /* @__PURE__ */ f(d, {})
 								}), /* @__PURE__ */ f(c, {
 									style: _,
-									children: ge.map((e) => /* @__PURE__ */ f(l, {
+									children: ve.map((e) => /* @__PURE__ */ f(l, {
 										value: e.value,
 										children: e.label
 									}, e.value))
@@ -351,7 +353,7 @@ var h = {
 										..._,
 										maxHeight: "200px"
 									},
-									children: _e.map((e) => /* @__PURE__ */ f(l, {
+									children: ye.map((e) => /* @__PURE__ */ f(l, {
 										value: e.value || "none",
 										children: e.label
 									}, e.value || "none"))
@@ -381,7 +383,7 @@ var h = {
 									fontSize: "var(--font-size-body-sm)",
 									fontWeight: "var(--font-weight-medium)",
 									borderRadius: "var(--radius-button)",
-									backgroundColor: De(A),
+									backgroundColor: ke(A),
 									color: "var(--color-action-primary-text)",
 									border: "none",
 									cursor: "default"
@@ -410,15 +412,15 @@ var h = {
 										children: /* @__PURE__ */ f(d, {})
 									}), /* @__PURE__ */ f(c, {
 										style: _,
-										children: me.map((e) => /* @__PURE__ */ f(l, {
+										children: ge.map((e) => /* @__PURE__ */ f(l, {
 											value: e.value,
 											children: e.label
 										}, e.value))
 									})]
 								}),
-								Oe && /* @__PURE__ */ f("p", {
+								Ae && /* @__PURE__ */ f("p", {
 									style: g,
-									children: Oe.hint
+									children: Ae.hint
 								})
 							]
 						}),
@@ -469,7 +471,7 @@ var h = {
 											children: /* @__PURE__ */ f(d, {})
 										}), /* @__PURE__ */ f(c, {
 											style: _,
-											children: he.map((e) => /* @__PURE__ */ f(l, {
+											children: _e.map((e) => /* @__PURE__ */ f(l, {
 												value: e,
 												children: e
 											}, e))
@@ -509,7 +511,7 @@ var h = {
 									cursor: "pointer",
 									marginBottom: "var(--space-formGap)"
 								},
-								children: [/* @__PURE__ */ f(a, {
+								children: [/* @__PURE__ */ f(se, {
 									checked: W,
 									onCheckedChange: (e) => G(e === !0),
 									disabled: b
@@ -540,8 +542,8 @@ var h = {
 										},
 										children: "Dialog Title"
 									}), /* @__PURE__ */ f(o, {
-										value: K,
-										onChange: (e) => q(e.target.value),
+										value: Te,
+										onChange: (e) => K(e.target.value),
 										disabled: b,
 										style: {
 											height: "var(--size-controlHeight-sm)",
@@ -557,9 +559,9 @@ var h = {
 											marginBottom: "var(--space-controlGap)"
 										},
 										children: "Message"
-									}), /* @__PURE__ */ f(pe, {
-										value: J,
-										onChange: (e) => Y(e.target.value),
+									}), /* @__PURE__ */ f(he, {
+										value: Ee,
+										onChange: (e) => q(e.target.value),
 										rows: 2,
 										disabled: b,
 										style: {
@@ -583,8 +585,8 @@ var h = {
 											},
 											children: "Confirm Button"
 										}), /* @__PURE__ */ f(o, {
-											value: Ce,
-											onChange: (e) => X(e.target.value),
+											value: J,
+											onChange: (e) => Y(e.target.value),
 											disabled: b,
 											style: {
 												height: "var(--size-controlHeight-sm)",
@@ -600,7 +602,7 @@ var h = {
 											},
 											children: "Cancel Button"
 										}), /* @__PURE__ */ f(o, {
-											value: we,
+											value: X,
 											onChange: (e) => Z(e.target.value),
 											disabled: b,
 											style: {
@@ -619,7 +621,7 @@ var h = {
 							},
 							children: [/* @__PURE__ */ p("button", {
 								type: "button",
-								onClick: () => Se((e) => !e),
+								onClick: () => we((e) => !e),
 								style: {
 									display: "flex",
 									alignItems: "center",
@@ -632,11 +634,11 @@ var h = {
 									fontWeight: "var(--font-weight-semibold)",
 									color: "var(--color-text-primary)"
 								},
-								children: [f(xe ? ee : te, { style: {
+								children: [f(Ce ? te : ne, { style: {
 									height: "14px",
 									width: "14px"
 								} }), "Advanced"]
-							}), xe && /* @__PURE__ */ p("div", {
+							}), Ce && /* @__PURE__ */ p("div", {
 								style: {
 									marginTop: "var(--space-formGap)",
 									display: "flex",
@@ -688,7 +690,7 @@ var h = {
 											gap: "var(--space-controlGap)",
 											cursor: "pointer"
 										},
-										children: [/* @__PURE__ */ f(a, {
+										children: [/* @__PURE__ */ f(se, {
 											checked: B,
 											onCheckedChange: (e) => V(e === !0),
 											disabled: b
@@ -706,7 +708,7 @@ var h = {
 											gap: "var(--space-controlGap)",
 											cursor: "pointer"
 										},
-										children: [/* @__PURE__ */ f(a, {
+										children: [/* @__PURE__ */ f(se, {
 											checked: H,
 											onCheckedChange: (e) => U(e === !0),
 											disabled: b
@@ -722,7 +724,7 @@ var h = {
 							})]
 						})
 					]
-				}), /* @__PURE__ */ p(le, {
+				}), /* @__PURE__ */ p(de, {
 					style: {
 						padding: "var(--space-formGap) var(--space-pagePadding)",
 						borderTop: "1px solid var(--color-border)",
@@ -731,40 +733,44 @@ var h = {
 						justifyContent: "flex-end",
 						gap: "var(--space-controlGap)"
 					},
-					children: [/* @__PURE__ */ f(ae, {
+					children: [/* @__PURE__ */ f(oe, {
 						type: "button",
 						variant: "outline",
-						onClick: ye,
+						onClick: xe,
 						disabled: b,
 						style: { height: "var(--size-controlHeight-md)" },
 						children: "Cancel"
-					}), /* @__PURE__ */ f(ae, {
-						type: "submit",
-						disabled: b || !w.trim(),
-						style: {
-							height: "var(--size-controlHeight-md)",
-							backgroundColor: "var(--color-action-primary-bg)"
-						},
-						children: b ? /* @__PURE__ */ p("span", {
-							style: {
-								display: "flex",
-								alignItems: "center",
-								gap: "var(--space-iconGap)"
-							},
-							children: [/* @__PURE__ */ f(fe, { style: {
-								height: "var(--size-icon-sm)",
-								width: "var(--size-icon-sm)"
-							} }), "Saving..."]
-						}) : /* @__PURE__ */ p("span", {
+					}), /* @__PURE__ */ f(ee, {
+						permission: x ? e.WIDGET_ACTION_UPDATE : e.WIDGET_ACTION_CREATE,
+						deniedBehavior: "disable",
+						children: /* @__PURE__ */ f(oe, {
+							type: "submit",
+							disabled: b || !w.trim(),
 							style: {
-								display: "flex",
-								alignItems: "center",
-								gap: "var(--space-iconGap)"
+								height: "var(--size-controlHeight-md)",
+								backgroundColor: "var(--color-action-primary-bg)"
 							},
-							children: [f(x ? ne : re, { style: {
-								height: "var(--size-icon-sm)",
-								width: "var(--size-icon-sm)"
-							} }), x ? "Update Button" : "Add Button"]
+							children: b ? /* @__PURE__ */ p("span", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: "var(--space-iconGap)"
+								},
+								children: [/* @__PURE__ */ f(me, { style: {
+									height: "var(--size-icon-sm)",
+									width: "var(--size-icon-sm)"
+								} }), "Saving..."]
+							}) : /* @__PURE__ */ p("span", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: "var(--space-iconGap)"
+								},
+								children: [f(x ? re : ie, { style: {
+									height: "var(--size-icon-sm)",
+									width: "var(--size-icon-sm)"
+								} }), x ? "Update Button" : "Add Button"]
+							})
 						})
 					})]
 				})]