@declarion/react 0.86.0 → 0.88.0

package/dist-lib/components/pages/tenant-params/TenantParamsPage.impl.js

@@ -1,25 +1,26 @@
 import { useAuthStore as e } from "../../../stores/auth.js";
-import { Icon as t } from "../../primitives/Icons.js";
-import { Btn as n } from "../../primitives/Btn.js";
-import { Pill as r } from "../../primitives/Pill.js";
-import { useText as i } from "../../../hooks/useText.js";
-import { useResponsiveMode as a } from "../../../hooks/useResponsiveMode.js";
-import { BoolToggle as o } from "../../primitives/BoolToggle.js";
-import { Spinner as s } from "../../primitives/Spinner.js";
-import { Select as c, TextInput as l } from "../../primitives/Fields.js";
-import { useAllParams as u, useCarrierParamOverrides as ee } from "../../../hooks/useParams.js";
-import { PageHeader as d } from "../../chrome/PageHeader.js";
-import { dataTableCellStyle as f, dataTableHeadCellStyle as p, dataTableStyle as m } from "../../primitives/dataTableStyles.js";
-import { PageShell as h } from "../../chrome/PageShell.js";
-import { EditParamDialog as g, ErrorLine as _, ResetParamControl as v, ValuePreview as y, paramSourceName as b, paramTenantEditable as x, useParamRefLabels as S } from "../../params/param-editors.js";
-import { useMemo as C, useState as w } from "react";
-import { jsx as T, jsxs as E } from "react/jsx-runtime";
+import { useSchema as t } from "../../../hooks/useSchema.js";
+import { Icon as n } from "../../primitives/Icons.js";
+import { Btn as r } from "../../primitives/Btn.js";
+import { Pill as i } from "../../primitives/Pill.js";
+import { useText as a } from "../../../hooks/useText.js";
+import { useResponsiveMode as o } from "../../../hooks/useResponsiveMode.js";
+import { BoolToggle as s } from "../../primitives/BoolToggle.js";
+import { Spinner as c } from "../../primitives/Spinner.js";
+import { Select as l, TextInput as u } from "../../primitives/Fields.js";
+import { useAllParams as d, useCarrierParamOverrides as ee } from "../../../hooks/useParams.js";
+import { PageHeader as f } from "../../chrome/PageHeader.js";
+import { dataTableCellStyle as p, dataTableHeadCellStyle as m, dataTableStyle as h } from "../../primitives/dataTableStyles.js";
+import { PageShell as g } from "../../chrome/PageShell.js";
+import { EditParamDialog as te, ErrorLine as _, ResetParamControl as v, ValuePreview as ne, paramSourceName as y, paramTenantEditable as b, useParamRefLabels as x } from "../../params/param-editors.js";
+import { useMemo as S, useState as C } from "react";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
 //#region src/components/pages/tenant-params/TenantParamsPage.impl.tsx
-var D = "my_tenant", O = [
+var E = "my_tenant", D = [
 	"yaml",
 	"env",
 	"tenant"
-], k = [
+], O = [
 	"21%",
 	"17%",
 	"9%",
@@ -27,67 +28,77 @@ var D = "my_tenant", O = [
 	"15%",
 	"11%",
 	"20%"
-], A = {
-	...f,
+], k = {
+	...p,
 	overflow: "hidden",
 	textOverflow: "ellipsis",
 	whiteSpace: "nowrap"
-}, j = {
-	...f,
+}, re = {
+	...p,
 	whiteSpace: "nowrap",
 	textAlign: "right"
 };
-function M(e) {
+function A(e) {
 	return e === "tenant" ? "violet" : e === "env" ? "amber" : "slate";
 }
-function N(t) {
-	let n = i(), r = i("errors"), f = e((e) => e.activeTenant?.id) ?? "", { isPhone: v } = a(), x = u("tenant"), [M, N] = w(""), [I, L] = w(""), [R, z] = w(""), [B, V] = w(!1), [H, U] = w(null), { overrideByCode: W, missingParams: G, isLoading: K, error: q, clearError: J, save: Y, reset: X } = ee({
-		carrierEntityCode: D,
-		rowId: f
-	}), Z = async (e, t) => {
-		await Y(e, t) && U((t) => t === e ? null : t);
-	}, Q = C(() => x.data ?? [], [x.data]), te = C(() => Array.from(new Set(Q.map((e) => e.category).filter(Boolean))).sort(), [Q]), ne = C(() => {
-		let e = M.trim().toLowerCase();
-		return Q.filter((t) => !(I && t.category !== I || R && t.source !== R || B && !W.has(t.code) || e && !`${t.code} ${n(t.name)}`.toLowerCase().includes(e)));
-	}, [
-		n,
+function j(n) {
+	let r = a(), i = a("errors"), p = e((e) => e.activeTenant?.id) ?? "", { isPhone: v } = o(), b = d("tenant"), [A, j] = C(""), [P, F] = C(""), [I, L] = C(""), [R, z] = C(!1), [B, V] = C(null), { overrideByCode: H, missingParams: U, isLoading: W, error: G, clearError: K, save: q, reset: J } = ee({
+		carrierEntityCode: E,
+		rowId: p
+	}), Y = async (e, t) => {
+		await q(e, t) && V((t) => t === e ? null : t);
+	}, X = S(() => b.data ?? [], [b.data]), { data: Z } = t(), Q = S(() => {
+		let e = new Map((Z?.enums?.parameter_category?.values ?? []).map((e) => [e.code, r(e.name) || e.code]));
+		return (t) => t ? e.get(t) ?? t : "";
+	}, [Z, r]), ie = S(() => Array.from(new Set(X.map((e) => e.category).filter(Boolean))).map((e) => ({
+		value: e,
+		label: Q(e)
+	})).sort((e, t) => e.label.localeCompare(t.label, r.language)), [
+		X,
 		Q,
-		M,
+		r.language
+	]), ae = S(() => {
+		let e = A.trim().toLowerCase();
+		return X.filter((t) => !(P && t.category !== P || I && t.source !== I || R && !H.has(t.code) || e && !`${t.code} ${r(t.name)}`.toLowerCase().includes(e))).sort((e, t) => (r(e.name) || e.code).localeCompare(r(t.name) || t.code, r.language) || e.code.localeCompare(t.code));
+	}, [
+		r,
+		X,
+		A,
+		P,
 		I,
 		R,
-		B,
-		W
-	]), re = x.isLoading || K, ie = S(Q), $ = ne.map((e) => {
-		let t = W.get(e.code);
+		H
+	]), oe = b.isLoading || W, se = x(X), $ = ae.map((e) => {
+		let t = H.get(e.code);
 		return {
 			param: e,
-			state: /* @__PURE__ */ T(P, {
+			state: /* @__PURE__ */ w(M, {
 				param: e,
 				override: t
 			}),
-			value: /* @__PURE__ */ T(y, {
+			value: /* @__PURE__ */ w(ne, {
 				type: e.type,
 				value: e.value,
 				values: e.values,
-				label: ie(e),
+				label: se(e),
 				maxWidth: "100%"
 			}),
-			actions: /* @__PURE__ */ T(F, {
+			actions: /* @__PURE__ */ w(N, {
 				param: e,
 				stored: t !== void 0,
 				onEdit: () => {
-					J(), U(e);
+					K(), V(e);
 				},
-				onReset: (e) => void X(e)
+				onReset: (e) => void J(e)
 			})
 		};
 	});
-	return /* @__PURE__ */ E(h, {
-		header: /* @__PURE__ */ T(d, { description: n("params.tenant.subtitle", "Tenant configuration. Editing a value stores a tenant override; Reset restores the platform default.") }),
+	return /* @__PURE__ */ T(g, {
+		header: /* @__PURE__ */ w(f, { description: r("params.tenant.subtitle", "Tenant configuration. Editing a value stores a tenant override; Reset restores the platform default.") }),
 		children: [
-			q && /* @__PURE__ */ T(_, { text: q }),
-			G && /* @__PURE__ */ T(_, { text: r("param.overrides_unreadable", "The current parameter overrides could not be read.") }),
-			/* @__PURE__ */ E("div", {
+			G && /* @__PURE__ */ w(_, { text: G }),
+			U && /* @__PURE__ */ w(_, { text: i("param.overrides_unreadable", "The current parameter overrides could not be read.") }),
+			/* @__PURE__ */ T("div", {
 				"data-testid": "tenant-params-filters",
 				style: {
 					display: "flex",
@@ -96,81 +107,78 @@ function N(t) {
 					alignItems: "center"
 				},
 				children: [
-					/* @__PURE__ */ T("div", {
+					/* @__PURE__ */ w("div", {
 						style: {
 							minWidth: 200,
 							flex: 1
 						},
-						children: /* @__PURE__ */ T(l, {
-							value: M,
-							onChange: N,
-							placeholder: n("params.search", "Search name or code…")
+						children: /* @__PURE__ */ w(u, {
+							value: A,
+							onChange: j,
+							placeholder: r("params.search", "Search name or code…")
 						})
 					}),
-					/* @__PURE__ */ T("div", {
+					/* @__PURE__ */ w("div", {
 						style: { minWidth: 160 },
-						children: /* @__PURE__ */ T(c, {
-							value: I,
+						children: /* @__PURE__ */ w(l, {
+							value: P,
 							options: [{
 								value: "",
-								label: n("params.filter.all_categories", "All categories")
-							}, ...te.map((e) => ({
-								value: e,
-								label: e
-							}))],
-							onChange: L
+								label: r("params.filter.all_categories", "All categories")
+							}, ...ie],
+							onChange: F
 						})
 					}),
-					/* @__PURE__ */ T("div", {
+					/* @__PURE__ */ w("div", {
 						style: { minWidth: 140 },
-						children: /* @__PURE__ */ T(c, {
-							value: R,
+						children: /* @__PURE__ */ w(l, {
+							value: I,
 							options: [{
 								value: "",
-								label: n("params.filter.all_sources", "All sources")
-							}, ...O.map((e) => ({
+								label: r("params.filter.all_sources", "All sources")
+							}, ...D.map((e) => ({
 								value: e,
-								label: b(n, e)
+								label: y(r, e)
 							}))],
-							onChange: z
+							onChange: L
 						})
 					}),
-					/* @__PURE__ */ E("label", {
+					/* @__PURE__ */ T("label", {
 						style: {
 							display: "flex",
 							alignItems: "center",
 							gap: 6,
 							fontSize: 12
 						},
-						children: [/* @__PURE__ */ T(o, {
-							value: B,
-							onChange: V
-						}), n("params.filter.overridden_only", "Overridden only")]
+						children: [/* @__PURE__ */ w(s, {
+							value: R,
+							onChange: z
+						}), r("params.filter.overridden_only", "Overridden only")]
 					})
 				]
 			}),
-			re ? /* @__PURE__ */ T("div", {
+			oe ? /* @__PURE__ */ w("div", {
 				style: {
 					padding: "24px 0",
 					textAlign: "center"
 				},
-				children: /* @__PURE__ */ T(s, { size: 18 })
-			}) : $.length === 0 ? /* @__PURE__ */ T("div", {
+				children: /* @__PURE__ */ w(c, { size: 18 })
+			}) : $.length === 0 ? /* @__PURE__ */ w("div", {
 				style: {
 					padding: 16,
 					color: "var(--text-4)",
 					textAlign: "center",
 					fontSize: 12.5
 				},
-				children: n("params.empty", "No parameters match.")
-			}) : v ? /* @__PURE__ */ T("div", {
+				children: r("params.empty", "No parameters match.")
+			}) : v ? /* @__PURE__ */ w("div", {
 				"data-testid": "tenant-params-cards",
 				style: {
 					display: "flex",
 					flexDirection: "column",
 					gap: 8
 				},
-				children: $.map(({ param: e, state: t, value: r, actions: i }) => /* @__PURE__ */ E("div", {
+				children: $.map(({ param: e, state: t, value: n, actions: i }) => /* @__PURE__ */ T("div", {
 					"data-testid": `tenant-param-row-${e.code}`,
 					style: {
 						border: "1px solid var(--border)",
@@ -183,14 +191,14 @@ function N(t) {
 						minWidth: 0
 					},
 					children: [
-						/* @__PURE__ */ E("div", {
+						/* @__PURE__ */ T("div", {
 							style: {
 								display: "flex",
 								alignItems: "center",
 								gap: 8,
 								minWidth: 0
 							},
-							children: [/* @__PURE__ */ T("div", {
+							children: [/* @__PURE__ */ w("div", {
 								style: {
 									flex: 1,
 									minWidth: 0,
@@ -199,10 +207,10 @@ function N(t) {
 									color: "var(--text)",
 									overflowWrap: "anywhere"
 								},
-								children: n(e.name) || e.code
+								children: r(e.name) || e.code
 							}), t]
 						}),
-						/* @__PURE__ */ T("div", {
+						/* @__PURE__ */ w("div", {
 							className: "mono",
 							style: {
 								fontSize: 11.5,
@@ -211,29 +219,29 @@ function N(t) {
 							},
 							children: e.code
 						}),
-						/* @__PURE__ */ T("div", {
+						/* @__PURE__ */ w("div", {
 							style: { minWidth: 0 },
-							children: r
+							children: n
 						}),
-						/* @__PURE__ */ E("div", {
+						/* @__PURE__ */ T("div", {
 							style: {
 								display: "flex",
 								alignItems: "center",
 								gap: 6,
 								flexWrap: "wrap"
 							},
-							children: [/* @__PURE__ */ T("span", {
+							children: [/* @__PURE__ */ w("span", {
 								style: {
 									flex: 1,
 									fontSize: 11.5,
 									color: "var(--text-3)"
 								},
-								children: [e.category, e.type].filter(Boolean).join(" · ")
+								children: [Q(e.category), e.type].filter(Boolean).join(" · ")
 							}), i]
 						})
 					]
 				}, e.code))
-			}) : /* @__PURE__ */ T("div", {
+			}) : /* @__PURE__ */ w("div", {
 				"data-testid": "tenant-params-table",
 				style: {
 					border: "1px solid var(--border)",
@@ -241,77 +249,77 @@ function N(t) {
 					background: "var(--surface)",
 					overflow: "hidden"
 				},
-				children: /* @__PURE__ */ E("table", {
+				children: /* @__PURE__ */ T("table", {
 					style: {
-						...m,
+						...h,
 						tableLayout: "fixed"
 					},
 					children: [
-						/* @__PURE__ */ T("colgroup", { children: k.map((e, t) => /* @__PURE__ */ T("col", { style: { width: e } }, t)) }),
-						/* @__PURE__ */ T("thead", { children: /* @__PURE__ */ E("tr", { children: [
-							/* @__PURE__ */ T("th", {
-								style: p,
-								children: n("params.column.name", "Name")
+						/* @__PURE__ */ w("colgroup", { children: O.map((e, t) => /* @__PURE__ */ w("col", { style: { width: e } }, t)) }),
+						/* @__PURE__ */ w("thead", { children: /* @__PURE__ */ T("tr", { children: [
+							/* @__PURE__ */ w("th", {
+								style: m,
+								children: r("params.column.name", "Name")
 							}),
-							/* @__PURE__ */ T("th", {
-								style: p,
-								children: n("params.column.code", "Code")
+							/* @__PURE__ */ w("th", {
+								style: m,
+								children: r("params.column.code", "Code")
 							}),
-							/* @__PURE__ */ T("th", {
-								style: p,
-								children: n("params.column.category", "Category")
+							/* @__PURE__ */ w("th", {
+								style: m,
+								children: r("params.column.category", "Category")
 							}),
-							/* @__PURE__ */ T("th", {
-								style: p,
-								children: n("params.column.type", "Type")
+							/* @__PURE__ */ w("th", {
+								style: m,
+								children: r("params.column.type", "Type")
 							}),
-							/* @__PURE__ */ T("th", {
-								style: p,
-								children: n("params.value", "Value")
+							/* @__PURE__ */ w("th", {
+								style: m,
+								children: r("params.value", "Value")
 							}),
-							/* @__PURE__ */ T("th", {
-								style: p,
-								children: n("params.column.source", "Source")
+							/* @__PURE__ */ w("th", {
+								style: m,
+								children: r("params.column.source", "Source")
 							}),
-							/* @__PURE__ */ T("th", { style: p })
+							/* @__PURE__ */ w("th", { style: m })
 						] }) }),
-						/* @__PURE__ */ T("tbody", { children: $.map(({ param: e, state: t, value: r, actions: i }) => /* @__PURE__ */ E("tr", {
+						/* @__PURE__ */ w("tbody", { children: $.map(({ param: e, state: t, value: n, actions: i }) => /* @__PURE__ */ T("tr", {
 							"data-testid": `tenant-param-row-${e.code}`,
 							children: [
-								/* @__PURE__ */ T("td", {
-									style: A,
-									title: n(e.name) || e.code,
-									children: n(e.name) || e.code
+								/* @__PURE__ */ w("td", {
+									style: k,
+									title: r(e.name) || e.code,
+									children: r(e.name) || e.code
 								}),
-								/* @__PURE__ */ T("td", {
-									style: A,
+								/* @__PURE__ */ w("td", {
+									style: k,
 									title: e.code,
-									children: /* @__PURE__ */ T("span", {
+									children: /* @__PURE__ */ w("span", {
 										className: "mono",
 										style: { color: "var(--text-3)" },
 										children: e.code
 									})
 								}),
-								/* @__PURE__ */ T("td", {
-									style: A,
+								/* @__PURE__ */ w("td", {
+									style: k,
 									title: e.category,
-									children: e.category ?? "—"
+									children: Q(e.category) || "—"
 								}),
-								/* @__PURE__ */ T("td", {
-									style: A,
+								/* @__PURE__ */ w("td", {
+									style: k,
 									title: e.type,
 									children: e.type
 								}),
-								/* @__PURE__ */ T("td", {
-									style: A,
-									children: r
+								/* @__PURE__ */ w("td", {
+									style: k,
+									children: n
 								}),
-								/* @__PURE__ */ T("td", {
-									style: A,
+								/* @__PURE__ */ w("td", {
+									style: k,
 									children: t
 								}),
-								/* @__PURE__ */ T("td", {
-									style: j,
+								/* @__PURE__ */ w("td", {
+									style: re,
 									children: i
 								})
 							]
@@ -319,58 +327,58 @@ function N(t) {
 					]
 				})
 			}),
-			H && /* @__PURE__ */ T(g, {
-				param: H,
-				current: W.get(H.code)?.value ?? H.value,
-				error: q,
+			B && /* @__PURE__ */ w(te, {
+				param: B,
+				current: H.get(B.code)?.value ?? B.value,
+				error: G,
 				onCancel: () => {
-					U(null), J();
+					V(null), K();
 				},
-				onSave: (e) => Z(H, e)
+				onSave: (e) => Y(B, e)
 			})
 		]
 	});
 }
-function P({ param: e, override: t }) {
-	let n = i();
-	return t !== void 0 && e.source !== "tenant" ? /* @__PURE__ */ T("span", {
+function M({ param: e, override: t }) {
+	let n = a();
+	return t !== void 0 && e.source !== "tenant" ? /* @__PURE__ */ w("span", {
 		"data-testid": `tenant-param-not-applied-${e.code}`,
 		title: n("params.tenant.not_applied_hint", "This tenant is set to {value}, and it no longer satisfies the parameter's declaration. Source of the value in effect: {source}. Reset to remove it, or edit it to a value the declaration accepts.", {
 			value: JSON.stringify(t.value),
-			source: b(n, e.source)
+			source: y(n, e.source)
 		}),
-		children: /* @__PURE__ */ T(r, {
+		children: /* @__PURE__ */ w(i, {
 			tone: "amber",
 			size: "xs",
 			dot: !0,
 			children: n("params.not_applied", "not applied")
 		})
-	}) : /* @__PURE__ */ T(r, {
-		tone: M(e.source),
+	}) : /* @__PURE__ */ w(i, {
+		tone: A(e.source),
 		size: "xs",
-		children: b(n, e.source)
+		children: y(n, e.source)
 	});
 }
-function F({ param: e, stored: r, onEdit: a, onReset: o }) {
-	let s = i();
-	return x(e) ? /* @__PURE__ */ E("span", {
+function N({ param: e, stored: t, onEdit: i, onReset: o }) {
+	let s = a();
+	return b(e) ? /* @__PURE__ */ T("span", {
 		style: {
 			display: "inline-flex",
 			flexWrap: "wrap",
 			justifyContent: "flex-end",
 			gap: 6
 		},
-		children: [/* @__PURE__ */ T(n, {
+		children: [/* @__PURE__ */ w(r, {
 			size: "xs",
-			icon: /* @__PURE__ */ T(t.edit, { size: 12 }),
-			onClick: a,
+			icon: /* @__PURE__ */ w(n.edit, { size: 12 }),
+			onClick: i,
 			children: s("params.edit", "Edit")
-		}), r && /* @__PURE__ */ T(v, {
+		}), t && /* @__PURE__ */ w(v, {
 			param: e,
 			description: s("params.reset_confirm.tenant_description", "The value this tenant set is removed, and the platform default applies again."),
 			onReset: o
 		})]
-	}) : /* @__PURE__ */ E("span", {
+	}) : /* @__PURE__ */ T("span", {
 		title: s("params.tenant.read_only_hint", "Not editable at tenant scope (its declared scopes do not admit tenant)."),
 		style: {
 			display: "inline-flex",
@@ -380,11 +388,11 @@ function F({ param: e, stored: r, onEdit: a, onReset: o }) {
 			fontSize: 11
 		},
 		children: [
-			/* @__PURE__ */ T(t.lock, { size: 12 }),
+			/* @__PURE__ */ w(n.lock, { size: 12 }),
 			" ",
 			s("params.read_only", "read-only")
 		]
 	});
 }
 //#endregion
-export { N as TenantParamsPage };
+export { j as TenantParamsPage };