@declarion/react 0.81.0 → 0.82.0

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

@@ -1,311 +1,390 @@
 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 { IconBtn as r } from "../../primitives/IconBtn.js";
-import { Pill as i } from "../../primitives/Pill.js";
-import { useText as a } from "../../../hooks/useText.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 d } from "../../../hooks/useParams.js";
-import { pageInsetX as f } from "../../../lib/page-inset.js";
-import { EditParamDialog as p, ErrorLine as m, ValuePreview as h, paramSourceName as g, paramTenantEditable as _ } from "../../params/param-editors.js";
-import { useMemo as v, useState as y } from "react";
-import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+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";
 //#region src/components/pages/tenant-params/TenantParamsPage.impl.tsx
-var C = "my_tenant", w = [
+var D = "my_tenant", O = [
 	"yaml",
 	"env",
 	"tenant"
-];
-function T(e) {
+], k = [
+	"21%",
+	"17%",
+	"9%",
+	"7%",
+	"15%",
+	"11%",
+	"20%"
+], A = {
+	...f,
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
+}, j = {
+	...f,
+	whiteSpace: "nowrap",
+	textAlign: "right"
+};
+function M(e) {
 	return e === "tenant" ? "violet" : e === "env" ? "amber" : "slate";
 }
-function E(E) {
-	let k = a(), A = a("errors"), j = e((e) => e.activeTenant?.id) ?? "", M = u("tenant"), [N, P] = y(""), [F, I] = y(""), [L, R] = y(""), [z, B] = y(!1), [V, H] = y(null), { overrideByCode: U, missingParams: W, isLoading: G, error: K, clearError: q, save: J, reset: Y } = d({
-		carrierEntityCode: C,
-		rowId: j
-	}), X = async (e, t) => {
-		await J(e, t) && H((t) => t === e ? null : t);
-	}, Z = v(() => M.data ?? [], [M.data]), Q = v(() => Array.from(new Set(Z.map((e) => e.category).filter(Boolean))).sort(), [Z]), $ = v(() => {
-		let e = N.trim().toLowerCase();
-		return Z.filter((t) => !(F && t.category !== F || L && t.source !== L || z && !U.has(t.code) || e && !`${t.code} ${k(t.name)}`.toLowerCase().includes(e)));
+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)));
 	}, [
-		k,
-		Z,
-		N,
-		F,
-		L,
-		z,
-		U
-	]), ee = M.isLoading || G;
-	return /* @__PURE__ */ S("div", {
-		style: {
-			flex: 1,
-			overflowY: "auto",
-			paddingTop: 14,
-			paddingBottom: 28,
-			...f(20),
-			background: "var(--background)"
-		},
-		children: [/* @__PURE__ */ S("div", {
-			style: {
-				maxWidth: 1100,
-				margin: "0 auto"
-			},
-			children: [
-				/* @__PURE__ */ S("div", {
-					style: { marginBottom: 14 },
-					children: [/* @__PURE__ */ x("h1", {
+		n,
+		Q,
+		M,
+		I,
+		R,
+		B,
+		W
+	]), re = x.isLoading || K, ie = S(Q), $ = ne.map((e) => {
+		let t = W.get(e.code);
+		return {
+			param: e,
+			state: /* @__PURE__ */ T(P, {
+				param: e,
+				override: t
+			}),
+			value: /* @__PURE__ */ T(y, {
+				type: e.type,
+				value: e.value,
+				values: e.values,
+				label: ie(e),
+				maxWidth: "100%"
+			}),
+			actions: /* @__PURE__ */ T(F, {
+				param: e,
+				stored: t !== void 0,
+				onEdit: () => {
+					J(), U(e);
+				},
+				onReset: (e) => void X(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.") }),
+		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", {
+				"data-testid": "tenant-params-filters",
+				style: {
+					display: "flex",
+					gap: 10,
+					flexWrap: "wrap",
+					alignItems: "center"
+				},
+				children: [
+					/* @__PURE__ */ T("div", {
 						style: {
-							margin: 0,
-							fontSize: 20,
-							fontWeight: 600
+							minWidth: 200,
+							flex: 1
 						},
-						children: k("params.title", "Parameters")
-					}), /* @__PURE__ */ x("div", {
+						children: /* @__PURE__ */ T(l, {
+							value: M,
+							onChange: N,
+							placeholder: n("params.search", "Search name or code…")
+						})
+					}),
+					/* @__PURE__ */ T("div", {
+						style: { minWidth: 160 },
+						children: /* @__PURE__ */ T(c, {
+							value: I,
+							options: [{
+								value: "",
+								label: n("params.filter.all_categories", "All categories")
+							}, ...te.map((e) => ({
+								value: e,
+								label: e
+							}))],
+							onChange: L
+						})
+					}),
+					/* @__PURE__ */ T("div", {
+						style: { minWidth: 140 },
+						children: /* @__PURE__ */ T(c, {
+							value: R,
+							options: [{
+								value: "",
+								label: n("params.filter.all_sources", "All sources")
+							}, ...O.map((e) => ({
+								value: e,
+								label: b(n, e)
+							}))],
+							onChange: z
+						})
+					}),
+					/* @__PURE__ */ E("label", {
 						style: {
-							fontSize: 12.5,
-							color: "var(--text-3)",
-							marginTop: 2
+							display: "flex",
+							alignItems: "center",
+							gap: 6,
+							fontSize: 12
 						},
-						children: k("params.tenant.subtitle", "Tenant configuration. Editing a value stores a tenant override; Reset restores the platform default.")
-					})]
-				}),
-				K && /* @__PURE__ */ x("div", {
-					style: { marginBottom: 12 },
-					children: /* @__PURE__ */ x(m, { text: K })
-				}),
-				W && /* @__PURE__ */ x("div", {
-					style: { marginBottom: 12 },
-					children: /* @__PURE__ */ x(m, { text: A("param.overrides_unreadable", "The current parameter overrides could not be read.") })
-				}),
-				/* @__PURE__ */ S("div", {
-					"data-testid": "tenant-params-filters",
+						children: [/* @__PURE__ */ T(o, {
+							value: B,
+							onChange: V
+						}), n("params.filter.overridden_only", "Overridden only")]
+					})
+				]
+			}),
+			re ? /* @__PURE__ */ T("div", {
+				style: {
+					padding: "24px 0",
+					textAlign: "center"
+				},
+				children: /* @__PURE__ */ T(s, { size: 18 })
+			}) : $.length === 0 ? /* @__PURE__ */ T("div", {
+				style: {
+					padding: 16,
+					color: "var(--text-4)",
+					textAlign: "center",
+					fontSize: 12.5
+				},
+				children: n("params.empty", "No parameters match.")
+			}) : v ? /* @__PURE__ */ T("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", {
+					"data-testid": `tenant-param-row-${e.code}`,
 					style: {
+						border: "1px solid var(--border)",
+						borderRadius: "var(--radius-lg)",
+						background: "var(--surface)",
+						padding: "10px 12px",
 						display: "flex",
-						gap: 10,
-						flexWrap: "wrap",
-						alignItems: "center",
-						marginBottom: 12
+						flexDirection: "column",
+						gap: 6,
+						minWidth: 0
 					},
 					children: [
-						/* @__PURE__ */ x("div", {
+						/* @__PURE__ */ E("div", {
 							style: {
-								minWidth: 200,
-								flex: 1
+								display: "flex",
+								alignItems: "center",
+								gap: 8,
+								minWidth: 0
 							},
-							children: /* @__PURE__ */ x(l, {
-								value: N,
-								onChange: P,
-								placeholder: k("params.search", "Search name or code…")
-							})
+							children: [/* @__PURE__ */ T("div", {
+								style: {
+									flex: 1,
+									minWidth: 0,
+									fontSize: 13,
+									fontWeight: 600,
+									color: "var(--text)",
+									overflowWrap: "anywhere"
+								},
+								children: n(e.name) || e.code
+							}), t]
 						}),
-						/* @__PURE__ */ x("div", {
-							style: { minWidth: 160 },
-							children: /* @__PURE__ */ x(c, {
-								value: F,
-								options: [{
-									value: "",
-									label: k("params.filter.all_categories", "All categories")
-								}, ...Q.map((e) => ({
-									value: e,
-									label: e
-								}))],
-								onChange: I
-							})
+						/* @__PURE__ */ T("div", {
+							className: "mono",
+							style: {
+								fontSize: 11.5,
+								color: "var(--text-3)",
+								overflowWrap: "anywhere"
+							},
+							children: e.code
 						}),
-						/* @__PURE__ */ x("div", {
-							style: { minWidth: 140 },
-							children: /* @__PURE__ */ x(c, {
-								value: L,
-								options: [{
-									value: "",
-									label: k("params.filter.all_sources", "All sources")
-								}, ...w.map((e) => ({
-									value: e,
-									label: g(k, e)
-								}))],
-								onChange: R
-							})
+						/* @__PURE__ */ T("div", {
+							style: { minWidth: 0 },
+							children: r
 						}),
-						/* @__PURE__ */ S("label", {
+						/* @__PURE__ */ E("div", {
 							style: {
 								display: "flex",
 								alignItems: "center",
 								gap: 6,
-								fontSize: 12
+								flexWrap: "wrap"
 							},
-							children: [/* @__PURE__ */ x(o, {
-								value: z,
-								onChange: B
-							}), k("params.filter.overridden_only", "Overridden only")]
+							children: [/* @__PURE__ */ T("span", {
+								style: {
+									flex: 1,
+									fontSize: 11.5,
+									color: "var(--text-3)"
+								},
+								children: [e.category, e.type].filter(Boolean).join(" · ")
+							}), i]
 						})
 					]
-				}),
-				ee ? /* @__PURE__ */ x("div", {
+				}, e.code))
+			}) : /* @__PURE__ */ T("div", {
+				"data-testid": "tenant-params-table",
+				style: {
+					border: "1px solid var(--border)",
+					borderRadius: "var(--radius-lg)",
+					background: "var(--surface)",
+					overflow: "hidden"
+				},
+				children: /* @__PURE__ */ E("table", {
 					style: {
-						padding: "24px 0",
-						textAlign: "center"
-					},
-					children: /* @__PURE__ */ x(s, { size: 18 })
-				}) : /* @__PURE__ */ x("div", {
-					style: {
-						border: "1px solid var(--border)",
-						borderRadius: "var(--radius-lg)",
-						overflow: "hidden",
-						background: "var(--surface)"
+						...m,
+						tableLayout: "fixed"
 					},
-					children: /* @__PURE__ */ S("table", {
-						style: {
-							width: "100%",
-							borderCollapse: "collapse",
-							fontSize: 12.5
-						},
-						children: [/* @__PURE__ */ x("thead", { children: /* @__PURE__ */ S("tr", {
-							style: {
-								background: "var(--surface-2)",
-								textAlign: "left"
-							},
+					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__ */ T("th", {
+								style: p,
+								children: n("params.column.code", "Code")
+							}),
+							/* @__PURE__ */ T("th", {
+								style: p,
+								children: n("params.column.category", "Category")
+							}),
+							/* @__PURE__ */ T("th", {
+								style: p,
+								children: n("params.column.type", "Type")
+							}),
+							/* @__PURE__ */ T("th", {
+								style: p,
+								children: n("params.value", "Value")
+							}),
+							/* @__PURE__ */ T("th", {
+								style: p,
+								children: n("params.column.source", "Source")
+							}),
+							/* @__PURE__ */ T("th", { style: p })
+						] }) }),
+						/* @__PURE__ */ T("tbody", { children: $.map(({ param: e, state: t, value: r, actions: i }) => /* @__PURE__ */ E("tr", {
+							"data-testid": `tenant-param-row-${e.code}`,
 							children: [
-								/* @__PURE__ */ x(D, { children: k("params.column.name", "Name") }),
-								/* @__PURE__ */ x(D, { children: k("params.column.code", "Code") }),
-								/* @__PURE__ */ x(D, { children: k("params.column.category", "Category") }),
-								/* @__PURE__ */ x(D, { children: k("params.column.type", "Type") }),
-								/* @__PURE__ */ x(D, { children: k("params.value", "Value") }),
-								/* @__PURE__ */ x(D, { children: k("params.column.source", "Source") }),
-								/* @__PURE__ */ x(D, { children: "" })
-							]
-						}) }), /* @__PURE__ */ x("tbody", { children: $.length === 0 ? /* @__PURE__ */ x("tr", { children: /* @__PURE__ */ x("td", {
-							colSpan: 7,
-							style: {
-								padding: "16px",
-								color: "var(--text-4)",
-								textAlign: "center"
-							},
-							children: k("params.empty", "No parameters match.")
-						}) }) : $.map((e) => {
-							let a = U.get(e.code), o = a !== void 0, s = _(e), c = o && e.source === "tenant";
-							return /* @__PURE__ */ S("tr", {
-								"data-testid": `tenant-param-row-${e.code}`,
-								style: { borderTop: "1px solid var(--divider)" },
-								children: [
-									/* @__PURE__ */ x(O, { children: k(e.name) || e.code }),
-									/* @__PURE__ */ x(O, { children: /* @__PURE__ */ x("span", {
+								/* @__PURE__ */ T("td", {
+									style: A,
+									title: n(e.name) || e.code,
+									children: n(e.name) || e.code
+								}),
+								/* @__PURE__ */ T("td", {
+									style: A,
+									title: e.code,
+									children: /* @__PURE__ */ T("span", {
 										className: "mono",
 										style: { color: "var(--text-3)" },
 										children: e.code
-									}) }),
-									/* @__PURE__ */ x(O, { children: e.category ?? "—" }),
-									/* @__PURE__ */ x(O, { children: e.type }),
-									/* @__PURE__ */ x(O, { children: /* @__PURE__ */ x(h, {
-										type: e.type,
-										value: e.value,
-										values: e.values
-									}) }),
-									/* @__PURE__ */ x(O, { children: /* @__PURE__ */ S("span", {
-										style: {
-											display: "inline-flex",
-											gap: 6,
-											alignItems: "center"
-										},
-										children: [
-											/* @__PURE__ */ x(i, {
-												tone: T(e.source),
-												size: "xs",
-												children: g(k, e.source)
-											}),
-											c && /* @__PURE__ */ x(i, {
-												tone: "violet",
-												size: "xs",
-												dot: !0,
-												children: k("params.overridden", "overridden")
-											}),
-											o && !c && /* @__PURE__ */ x("span", {
-												"data-testid": `tenant-param-not-applied-${e.code}`,
-												title: k("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(a.value),
-													source: g(k, e.source)
-												}),
-												children: /* @__PURE__ */ x(i, {
-													tone: "amber",
-													size: "xs",
-													dot: !0,
-													children: k("params.not_applied", "not applied")
-												})
-											})
-										]
-									}) }),
-									/* @__PURE__ */ x(O, { children: /* @__PURE__ */ x("span", {
-										style: {
-											display: "inline-flex",
-											gap: 6,
-											justifyContent: "flex-end",
-											width: "100%"
-										},
-										children: s ? /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x(n, {
-											size: "xs",
-											icon: /* @__PURE__ */ x(t.edit, { size: 12 }),
-											onClick: () => {
-												q(), H(e);
-											},
-											children: k("params.edit", "Edit")
-										}), o && /* @__PURE__ */ x(r, {
-											icon: /* @__PURE__ */ x(t.refresh, { size: 13 }),
-											title: k("params.reset", "Reset to default"),
-											onClick: () => Y(e)
-										})] }) : /* @__PURE__ */ S("span", {
-											title: k("params.tenant.read_only_hint", "Not editable at tenant scope (its declared scopes do not admit tenant)."),
-											style: {
-												display: "inline-flex",
-												alignItems: "center",
-												gap: 4,
-												color: "var(--text-4)",
-												fontSize: 11
-											},
-											children: [
-												/* @__PURE__ */ x(t.lock, { size: 12 }),
-												" ",
-												k("params.read_only", "read-only")
-											]
-										})
-									}) })
-								]
-							}, e.code);
-						}) })]
-					})
+									})
+								}),
+								/* @__PURE__ */ T("td", {
+									style: A,
+									title: e.category,
+									children: e.category ?? "—"
+								}),
+								/* @__PURE__ */ T("td", {
+									style: A,
+									title: e.type,
+									children: e.type
+								}),
+								/* @__PURE__ */ T("td", {
+									style: A,
+									children: r
+								}),
+								/* @__PURE__ */ T("td", {
+									style: A,
+									children: t
+								}),
+								/* @__PURE__ */ T("td", {
+									style: j,
+									children: i
+								})
+							]
+						}, e.code)) })
+					]
 				})
-			]
-		}), V && /* @__PURE__ */ x(p, {
-			param: V,
-			current: U.get(V.code)?.value ?? V.value,
-			error: K,
-			onCancel: () => {
-				H(null), q();
-			},
-			onSave: (e) => X(V, e)
-		})]
+			}),
+			H && /* @__PURE__ */ T(g, {
+				param: H,
+				current: W.get(H.code)?.value ?? H.value,
+				error: q,
+				onCancel: () => {
+					U(null), J();
+				},
+				onSave: (e) => Z(H, e)
+			})
+		]
 	});
 }
-function D({ children: e }) {
-	return /* @__PURE__ */ x("th", {
-		style: {
-			padding: "8px 12px",
-			fontWeight: 600,
-			color: "var(--text-2)",
-			fontSize: 11.5
-		},
-		children: e
+function P({ param: e, override: t }) {
+	let n = i();
+	return t !== void 0 && e.source !== "tenant" ? /* @__PURE__ */ T("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)
+		}),
+		children: /* @__PURE__ */ T(r, {
+			tone: "amber",
+			size: "xs",
+			dot: !0,
+			children: n("params.not_applied", "not applied")
+		})
+	}) : /* @__PURE__ */ T(r, {
+		tone: M(e.source),
+		size: "xs",
+		children: b(n, e.source)
 	});
 }
-function O({ children: e }) {
-	return /* @__PURE__ */ x("td", {
+function F({ param: e, stored: r, onEdit: a, onReset: o }) {
+	let s = i();
+	return x(e) ? /* @__PURE__ */ E("span", {
+		style: {
+			display: "inline-flex",
+			flexWrap: "wrap",
+			justifyContent: "flex-end",
+			gap: 6
+		},
+		children: [/* @__PURE__ */ T(n, {
+			size: "xs",
+			icon: /* @__PURE__ */ T(t.edit, { size: 12 }),
+			onClick: a,
+			children: s("params.edit", "Edit")
+		}), r && /* @__PURE__ */ T(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", {
+		title: s("params.tenant.read_only_hint", "Not editable at tenant scope (its declared scopes do not admit tenant)."),
 		style: {
-			padding: "8px 12px",
-			verticalAlign: "middle"
+			display: "inline-flex",
+			alignItems: "center",
+			gap: 4,
+			color: "var(--text-4)",
+			fontSize: 11
 		},
-		children: e
+		children: [
+			/* @__PURE__ */ T(t.lock, { size: 12 }),
+			" ",
+			s("params.read_only", "read-only")
+		]
 	});
 }
 //#endregion
-export { E as TenantParamsPage };
+export { N as TenantParamsPage };