@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/pages/DataParsersPage.js

@@ -1,232 +1,182 @@
 import { useParserStore as e } from "../store/parserStore.js";
 import { useAppNavigate as t } from "../contexts/NavigationContext.js";
 import "../contexts/index.js";
-import n from "../hooks/useParserOperations.js";
-import r from "../hooks/useExportParser.js";
-import { BIGCONSOLE_PERMISSIONS as i } from "../../constants/permissions.js";
-import { isNative as a, nativeConfirm as ee, nativeImpact as te, nativeNotify as o } from "../../utils/nativeBridge.js";
-import ne from "../components/parser/ParserCard.js";
-import re from "../components/parser/ImportParserDialog.js";
-import { memo as s, useCallback as c, useMemo as l, useState as u } from "react";
-import { useParams as ie } from "react-router";
-import { AccessDenied as ae, PermissionButton as oe } from "@burdenoff/fe-libs/shared/components";
-import { usePermissions as se } from "@burdenoff/fe-libs/shared/providers/shell";
-import { AlertCircle as ce, FileCode2 as le, Plus as d, Search as ue, Upload as de, X as f } from "lucide-react";
-import { useI18n as p } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AuroraBackground as fe, Badge as pe, Button as m, CTAOverflowMenu as me, Card as he, CardContent as ge, GlassCard as h, GradientText as _e, IllustratedEmptyState as g, Input as ve, PagePurpose as ye, Select as _, SelectContent as v, SelectItem as y, SelectTrigger as b, SelectValue as x, Spinner as be } from "@burdenoff/fe-libs/ui";
-import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import { Section as n, SectionStack as r } from "../components/common/Section.js";
+import "../components/common/index.js";
+import i from "../hooks/useParserOperations.js";
+import a from "../hooks/useExportParser.js";
+import { BIGCONSOLE_PERMISSIONS as o } from "../../constants/permissions.js";
+import { isNative as s, nativeConfirm as ee, nativeImpact as c, nativeNotify as l } from "../../utils/nativeBridge.js";
+import te from "../components/parser/ParserCard.js";
+import ne from "../components/parser/ImportParserDialog.js";
+import { memo as u, useCallback as d, useMemo as f, useState as p } from "react";
+import { useParams as re } from "react-router";
+import { AccessDenied as ie, PermissionButton as ae } from "@burdenoff/fe-libs/shared/components";
+import { usePermissions as oe } from "@burdenoff/fe-libs/shared/providers/shell";
+import { AlertCircle as se, FileCode2 as ce, Plus as m, Search as le, Upload as ue, X as h } from "lucide-react";
+import { useI18n as de } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AuroraBackground as fe, Badge as g, Button as _, CTAOverflowMenu as pe, GradientText as me, IllustratedEmptyState as v, Input as he, PagePurpose as ge, Select as y, SelectContent as b, SelectItem as x, SelectTrigger as S, SelectValue as C, Spinner as _e } from "@burdenoff/fe-libs/ui";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
 //#region src/bigconsole/pages/DataParsersPage.tsx
-var xe = "default", w = s(function() {
-	let s = t(), { consoleId: w } = ie(), { t: T } = p(), E = l(() => [
+var ve = "default", E = u(function() {
+	let u = t(), { consoleId: E } = re(), { t: D } = de(), ye = f(() => [
 		{
 			value: "all",
-			label: T("bigconsole.parsers.filters.allTypes", "All Types")
+			label: D("bigconsole.parsers.filters.allTypes", "All Types")
 		},
 		{
 			value: "jq",
-			label: T("bigconsole.parsers.filters.jq", "JQ")
+			label: D("bigconsole.parsers.filters.jq", "JQ")
 		},
 		{
 			value: "jsonata",
-			label: T("bigconsole.parsers.filters.jsonata", "JSONata")
+			label: D("bigconsole.parsers.filters.jsonata", "JSONata")
 		}
-	], [T]), D = l(() => [
+	], [D]), be = f(() => [
 		{
 			value: "all",
-			label: T("bigconsole.parsers.filters.allStatus", "All Status")
+			label: D("bigconsole.parsers.filters.allStatus", "All Status")
 		},
 		{
 			value: "active",
-			label: T("bigconsole.parsers.filters.active", "Active")
+			label: D("bigconsole.parsers.filters.active", "Active")
 		},
 		{
 			value: "inactive",
-			label: T("bigconsole.parsers.filters.inactive", "Inactive")
+			label: D("bigconsole.parsers.filters.inactive", "Inactive")
 		}
-	], [T]), { hasPermission: O, isLoading: k } = se(), A = O(i.PARSER_READ), j = O(i.PARSER_CREATE), M = O(i.PARSER_UPDATE), Se = O(i.PARSER_DELETE), N = w || xe, P = e((e) => e.typeFilter), F = e((e) => e.statusFilter), I = e((e) => e.searchQuery), L = e((e) => e.setTypeFilter), R = e((e) => e.setStatusFilter), z = e((e) => e.setSearchQuery), [Ce, B] = u(!1), [we, V] = u(null), [Te, H] = u(!1), { loading: U, error: W, parsers: G, deleteParser: K, refetch: q } = n({
-		consoleId: N,
+	], [D]), { hasPermission: O, isLoading: k } = oe(), A = O(o.PARSER_READ), j = O(o.PARSER_CREATE), M = O(o.PARSER_UPDATE), N = O(o.PARSER_DELETE), P = E || ve, F = e((e) => e.typeFilter), I = e((e) => e.statusFilter), L = e((e) => e.searchQuery), R = e((e) => e.setTypeFilter), z = e((e) => e.setStatusFilter), B = e((e) => e.setSearchQuery), [xe, V] = p(!1), [Se, H] = p(null), [Ce, U] = p(!1), { loading: W, error: G, parsers: K, deleteParser: q, refetch: J } = i({
+		consoleId: P,
 		skipFetch: !1
-	}), { downloadParser: J, loading: Ee } = r(), Y = l(() => G ? G.filter((e) => {
-		if (P && e.type !== P || F && e.status !== F) return !1;
-		if (I) {
-			let t = I.toLowerCase(), n = e.name?.toLowerCase().includes(t), r = e.description?.toLowerCase().includes(t), i = e.inputSinkKey?.toLowerCase().includes(t), a = e.outputKey?.toLowerCase().includes(t);
+	}), { downloadParser: Y } = a(), X = f(() => K ? K.filter((e) => {
+		if (F && e.type !== F || I && e.status !== I) return !1;
+		if (L) {
+			let t = L.toLowerCase(), n = e.name?.toLowerCase().includes(t), r = e.description?.toLowerCase().includes(t), i = e.inputSinkKey?.toLowerCase().includes(t), a = e.outputKey?.toLowerCase().includes(t);
 			if (!n && !r && !i && !a) return !1;
 		}
 		return !0;
 	}) : [], [
-		G,
-		P,
+		K,
 		F,
-		I
-	]), De = c((e) => {
-		L(e === "all" ? null : e);
-	}, [L]), Oe = c((e) => {
+		I,
+		L
+	]), we = d((e) => {
 		R(e === "all" ? null : e);
-	}, [R]), ke = c((e) => {
-		z(e.target.value);
-	}, [z]), X = c(() => {
-		s(w ? `/dashboards/${w}/parsers/new` : "/parsers/new");
-	}, [s, w]), Z = c((e) => {
-		s(w ? `/dashboards/${w}/parsers/${e}` : `/parsers/${e}`);
-	}, [s, w]), Ae = c((e) => {
-		s(w ? `/dashboards/${w}/parsers/${e}/edit` : `/parsers/${e}/edit`);
-	}, [s, w]), je = c(async (e) => {
+	}, [R]), Te = d((e) => {
+		z(e === "all" ? null : e);
+	}, [z]), Ee = d((e) => {
+		B(e.target.value);
+	}, [B]), Z = d(() => {
+		u(E ? `/dashboards/${E}/parsers/new` : "/parsers/new");
+	}, [u, E]), De = d((e) => {
+		u(E ? `/dashboards/${E}/parsers/${e}` : `/parsers/${e}`);
+	}, [u, E]), Oe = d((e) => {
+		u(E ? `/dashboards/${E}/parsers/${e}/edit` : `/parsers/${e}/edit`);
+	}, [u, E]), ke = d(async (e) => {
 		let t = await ee({
-			title: T("bigconsole.parsers.confirmDelete.title", "Delete parser?"),
-			message: T("bigconsole.parsers.confirmDelete.message", "Are you sure you want to delete this parser?"),
-			okButtonTitle: T("bigconsole.parsers.actions.delete", "Delete"),
-			cancelButtonTitle: T("bigconsole.parsers.actions.cancel", "Cancel")
+			title: D("bigconsole.parsers.confirmDelete.title", "Delete parser?"),
+			message: D("bigconsole.parsers.confirmDelete.message", "Are you sure you want to delete this parser?"),
+			okButtonTitle: D("bigconsole.parsers.actions.delete", "Delete"),
+			cancelButtonTitle: D("bigconsole.parsers.actions.cancel", "Cancel")
 		});
-		if (t === null ? window.confirm(T("bigconsole.parsers.confirmDelete.message", "Are you sure you want to delete this parser?")) : t) {
-			te("medium"), B(!0), V(e);
+		if (t === null ? window.confirm(D("bigconsole.parsers.confirmDelete.message", "Are you sure you want to delete this parser?")) : t) {
+			c("medium"), V(!0), H(e);
 			try {
-				await K(e), a() && o("success");
+				await q(e), s() && l("success");
 			} catch {
-				a() && o("error");
+				s() && l("error");
 			} finally {
-				B(!1), V(null);
+				V(!1), H(null);
 			}
 		}
-	}, [K, T]), Q = c(() => {
-		L(null), R(null), z("");
+	}, [q, D]), Q = d(() => {
+		R(null), z(null), B("");
 	}, [
-		L,
 		R,
-		z
-	]), Me = c(async (e) => {
-		let t = G.find((t) => t.id === e);
-		t && await J(e, t.name);
-	}, [G, J]), Ne = c(() => {
-		H(!0);
-	}, []), Pe = c((e, t, n) => {
-		q();
-	}, [q]), $ = P !== null || F !== null || (I?.length ?? 0) > 0;
-	return W ? /* @__PURE__ */ S("div", {
+		z,
+		B
+	]), Ae = d(async (e) => {
+		let t = K.find((t) => t.id === e);
+		t && await Y(e, t.name);
+	}, [K, Y]), je = d(() => {
+		U(!0);
+	}, []), Me = d((e, t, n) => {
+		J();
+	}, [J]), $ = F !== null || I !== null || (L?.length ?? 0) > 0;
+	return G ? /* @__PURE__ */ w("div", {
 		style: { padding: "var(--space-pagePadding)" },
-		children: /* @__PURE__ */ S(he, {
-			style: {
-				borderColor: "var(--color-status-error-border)",
-				backgroundColor: "var(--color-status-error-bgSubtle)"
-			},
-			children: /* @__PURE__ */ S(ge, {
-				style: { padding: "var(--space-pagePadding)" },
-				children: /* @__PURE__ */ C("div", {
-					style: {
-						display: "flex",
-						flexDirection: "column",
-						alignItems: "center",
-						textAlign: "center"
-					},
-					children: [
-						/* @__PURE__ */ S("div", {
-							style: {
-								padding: "var(--space-controlGap)",
-								borderRadius: "50%",
-								backgroundColor: "var(--color-status-error-bgSubtle)",
-								marginBottom: "var(--space-formGap)"
-							},
-							children: /* @__PURE__ */ S(ce, { style: {
-								height: "var(--size-icon-xl)",
-								width: "var(--size-icon-xl)",
-								color: "var(--color-status-error-text)"
-							} })
-						}),
-						/* @__PURE__ */ S("h3", {
-							style: {
-								fontSize: "var(--font-size-body-lg)",
-								fontWeight: "var(--font-weight-medium)",
-								color: "var(--color-status-error-text)",
-								marginBottom: "var(--space-controlGap)"
-							},
-							children: T("bigconsole.parsers.errors.loadFailed", "Failed to load Parsers")
-						}),
-						/* @__PURE__ */ S("p", {
-							style: {
-								fontSize: "var(--font-size-body-sm)",
-								color: "var(--color-text-secondary)",
-								marginBottom: "var(--space-formGap)"
-							},
-							children: W.message
-						}),
-						/* @__PURE__ */ S(m, {
-							size: "sm",
-							onClick: () => q(),
-							children: T("bigconsole.parsers.actions.tryAgain", "Try Again")
-						})
-					]
-				})
+		children: /* @__PURE__ */ w(n, {
+			tone: "danger",
+			headingLevel: 2,
+			title: D("bigconsole.parsers.errors.loadFailed", "Failed to load Parsers"),
+			description: "The parser list could not be fetched. Retry, or check that the BigConsole service is reachable.",
+			icon: /* @__PURE__ */ w(se, { className: "h-icon-md w-icon-md text-[var(--color-status-error-text)]" }),
+			actions: /* @__PURE__ */ w(_, {
+				size: "sm",
+				onClick: () => J(),
+				children: D("bigconsole.parsers.actions.tryAgain", "Try Again")
+			}),
+			"data-testid": "parsers-error",
+			children: /* @__PURE__ */ w("p", {
+				className: "font-mono text-xs break-words text-text-secondary",
+				children: G.message
 			})
 		})
-	}) : !k && !A ? /* @__PURE__ */ S(ae, {
-		title: T("bigconsole.parsers.accessDenied.title", "Access Denied"),
-		description: T("bigconsole.parsers.accessDenied.list", "You don't have permission to view parsers.")
-	}) : /* @__PURE__ */ C("div", {
+	}) : !k && !A ? /* @__PURE__ */ w(ie, {
+		title: D("bigconsole.parsers.accessDenied.title", "Access Denied"),
+		description: D("bigconsole.parsers.accessDenied.list", "You don't have permission to view parsers.")
+	}) : /* @__PURE__ */ T("div", {
 		style: {
 			minHeight: "100vh",
 			backgroundColor: "var(--color-bg-canvas)"
 		},
 		children: [
-			/* @__PURE__ */ C("div", {
-				className: "relative overflow-hidden border-b border-border-seam bg-gloss-card",
-				children: [/* @__PURE__ */ S(fe, { intensity: "subtle" }), /* @__PURE__ */ S("div", {
+			/* @__PURE__ */ T("div", {
+				className: "relative overflow-hidden border-b border-[var(--color-border-seam)] bg-[image:var(--gradient-gloss-card)]",
+				children: [/* @__PURE__ */ w(fe, { intensity: "subtle" }), /* @__PURE__ */ w("div", {
+					className: "relative",
 					style: { padding: "var(--space-pagePadding)" },
-					children: /* @__PURE__ */ C("div", {
-						style: {
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "space-between"
-						},
-						children: [/* @__PURE__ */ C("div", {
-							style: {
-								display: "flex",
-								alignItems: "center",
-								gap: "var(--space-formGap)"
-							},
-							children: [/* @__PURE__ */ S("div", {
+					children: /* @__PURE__ */ T("div", {
+						className: "flex flex-wrap items-center justify-between gap-form-gap",
+						children: [/* @__PURE__ */ T("div", {
+							className: "flex min-w-0 items-center gap-form-gap",
+							children: [/* @__PURE__ */ w("div", {
+								className: "flex shrink-0 items-center justify-center",
 								style: {
-									display: "flex",
 									height: "var(--size-controlHeight-lg)",
 									width: "var(--size-controlHeight-lg)",
-									alignItems: "center",
-									justifyContent: "center",
 									borderRadius: "var(--radius-card)",
 									backgroundColor: "var(--color-action-primary-bg)"
 								},
-								children: /* @__PURE__ */ S(le, { style: {
+								children: /* @__PURE__ */ w(ce, { style: {
 									height: "var(--size-icon-lg)",
 									width: "var(--size-icon-lg)",
 									color: "var(--color-action-primary-text)"
 								} })
-							}), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("h1", {
-								style: {
-									fontSize: "var(--font-size-heading-h4)",
-									fontWeight: "var(--font-weight-bold)",
-									margin: 0,
-									color: "var(--color-text-primary)"
-								},
-								children: /* @__PURE__ */ S(_e, { children: T("bigconsole.parsers.list.title", "Data Parsers") })
-							}), /* @__PURE__ */ S("p", {
-								style: {
-									fontSize: "var(--font-size-body-sm)",
-									color: "var(--color-text-secondary)",
-									margin: 0
-								},
-								children: T("bigconsole.parsers.list.subtitle", "Transform and process data with JQ or JSONata expressions")
-							})] })]
-						}), /* @__PURE__ */ S(me, {
+							}), /* @__PURE__ */ T("div", {
+								className: "min-w-0",
+								children: [/* @__PURE__ */ w("h1", {
+									className: "m-0 text-2xl font-bold text-text-primary sm:text-3xl",
+									children: /* @__PURE__ */ w(me, { children: D("bigconsole.parsers.list.title", "Data Parsers") })
+								}), /* @__PURE__ */ w("p", {
+									className: "m-0 text-sm text-text-secondary",
+									children: D("bigconsole.parsers.list.subtitle", "Transform and process data with JQ or JSONata expressions")
+								})]
+							})]
+						}), /* @__PURE__ */ w(pe, {
 							primary: j ? {
-								label: T("bigconsole.parsers.actions.create", "Create Parser"),
-								onSelect: X,
-								icon: /* @__PURE__ */ S(d, { style: {
+								label: D("bigconsole.parsers.actions.create", "Create Parser"),
+								onSelect: Z,
+								icon: /* @__PURE__ */ w(m, { style: {
 									marginRight: "var(--space-iconGap)",
 									height: "var(--size-icon-sm)",
 									width: "var(--size-icon-sm)"
 								} })
 							} : void 0,
 							actions: j ? [{
-								label: T("bigconsole.parsers.actions.import", "Import"),
-								onSelect: Ne,
-								icon: /* @__PURE__ */ S(de, { style: {
+								label: D("bigconsole.parsers.actions.import", "Import"),
+								onSelect: je,
+								icon: /* @__PURE__ */ w(ue, { style: {
 									height: "var(--size-icon-sm)",
 									width: "var(--size-icon-sm)"
 								} })
@@ -235,171 +185,169 @@ var xe = "default", w = s(function() {
 					})
 				})]
 			}),
-			/* @__PURE__ */ C("div", {
+			/* @__PURE__ */ w("div", {
 				style: { padding: "var(--space-pagePadding)" },
-				children: [
-					/* @__PURE__ */ S(ye, {
-						className: "mb-[var(--space-sectionGap)]",
-						children: T("bigconsole.parsers.list.purpose", "Parsers define how raw input — log lines, CSVs, JSON, or arbitrary text — is read and mapped into structured fields. Build a parser once, test it against a sample, then reuse it across pipelines so every source lands in a consistent, queryable shape.")
-					}),
-					/* @__PURE__ */ C("div", {
-						style: {
-							display: "flex",
-							alignItems: "center",
-							gap: "var(--space-controlGap)",
-							marginBottom: "var(--space-sectionGap)",
-							flexWrap: "wrap"
-						},
-						children: [
-							/* @__PURE__ */ C("div", {
-								style: {
-									position: "relative",
-									maxWidth: "400px",
-									flex: 1
-								},
-								children: [/* @__PURE__ */ S(ue, { style: {
-									position: "absolute",
-									left: "var(--space-controlGap)",
-									top: "50%",
-									transform: "translateY(-50%)",
-									height: "var(--size-icon-sm)",
-									width: "var(--size-icon-sm)",
-									color: "var(--color-text-muted)"
-								} }), /* @__PURE__ */ S(ve, {
-									type: "text",
-									placeholder: T("bigconsole.parsers.list.searchPlaceholder", "Search parsers..."),
-									value: I || "",
-									onChange: ke,
-									style: {
-										paddingLeft: "var(--size-controlHeight-md)",
-										height: "var(--size-controlHeight-md)"
-									}
-								})]
-							}),
-							/* @__PURE__ */ C(_, {
-								value: P || "all",
-								onValueChange: De,
-								children: [/* @__PURE__ */ S(b, {
-									style: { width: "150px" },
-									children: /* @__PURE__ */ S(x, { placeholder: T("bigconsole.parsers.filters.allTypes", "All Types") })
-								}), /* @__PURE__ */ S(v, { children: E.map((e) => /* @__PURE__ */ S(y, {
-									value: e.value,
-									children: e.label
-								}, e.value)) })]
-							}),
-							/* @__PURE__ */ C(_, {
-								value: F || "all",
-								onValueChange: Oe,
-								children: [/* @__PURE__ */ S(b, {
-									style: { width: "150px" },
-									children: /* @__PURE__ */ S(x, { placeholder: T("bigconsole.parsers.filters.allStatus", "All Status") })
-								}), /* @__PURE__ */ S(v, { children: D.map((e) => /* @__PURE__ */ S(y, {
-									value: e.value,
-									children: e.label
-								}, e.value)) })]
-							}),
-							$ && /* @__PURE__ */ C(m, {
-								variant: "ghost",
-								size: "sm",
-								onClick: Q,
-								children: [/* @__PURE__ */ S(f, { style: {
-									marginRight: "var(--space-iconGap)",
-									height: "var(--size-icon-sm)",
-									width: "var(--size-icon-sm)"
-								} }), T("bigconsole.parsers.filters.clear", "Clear Filters")]
-							}),
-							/* @__PURE__ */ S(pe, {
-								variant: "secondary",
-								style: { marginLeft: "auto" },
-								children: Y.length === 1 ? T("bigconsole.parsers.list.countSingular", "{{count}} Parser", { count: Y.length }) : T("bigconsole.parsers.list.countPlural", "{{count}} Parsers", { count: Y.length })
-							})
-						]
+				children: /* @__PURE__ */ T(r, { children: [
+					/* @__PURE__ */ w(ge, {
+						className: "max-w-[80ch]",
+						children: D("bigconsole.parsers.list.purpose", "Parsers define how raw input — log lines, CSVs, JSON, or arbitrary text — is read and mapped into structured fields. Build a parser once, test it against a sample, then reuse it across pipelines so every source lands in a consistent, queryable shape.")
 					}),
-					U && /* @__PURE__ */ S("div", {
-						style: {
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "center",
-							padding: "80px 0"
-						},
-						children: /* @__PURE__ */ C("div", {
-							style: { textAlign: "center" },
-							children: [/* @__PURE__ */ S(be, { style: {
-								height: "var(--size-icon-xl)",
-								width: "var(--size-icon-xl)",
-								margin: "0 auto var(--space-formGap)"
-							} }), /* @__PURE__ */ S("p", {
-								style: {
-									fontSize: "var(--font-size-body-sm)",
-									color: "var(--color-text-muted)"
-								},
-								children: T("bigconsole.parsers.list.loading", "Loading parsers...")
-							})]
-						})
-					}),
-					!U && Y.length === 0 && !$ && /* @__PURE__ */ S(h, {
-						treatment: "insight",
-						className: "border-border-seam",
-						children: /* @__PURE__ */ S(g, {
-							illustration: "empty-data",
-							title: T("bigconsole.parsers.list.emptyTitle", "No Parsers yet"),
-							description: T("bigconsole.parsers.list.emptyDescription", "Create your first parser to start transforming data with JQ or JSONata."),
-							action: /* @__PURE__ */ S(oe, {
-								permission: i.PARSER_CREATE,
-								deniedBehavior: "disable",
-								children: /* @__PURE__ */ C(m, {
-									onClick: X,
-									children: [/* @__PURE__ */ S(d, { style: {
+					/* @__PURE__ */ w(n, {
+						emphasis: "muted",
+						padding: "compact",
+						headingLevel: 2,
+						title: "Find a parser",
+						headerClassName: "mb-control-gap",
+						"data-testid": "parser-filters",
+						children: /* @__PURE__ */ T("div", {
+							className: "flex flex-wrap items-center gap-control-gap",
+							children: [
+								/* @__PURE__ */ T("div", {
+									className: "relative w-full min-w-0 flex-1 sm:max-w-[400px]",
+									children: [/* @__PURE__ */ w(le, {
+										"aria-hidden": "true",
+										style: {
+											position: "absolute",
+											left: "var(--space-controlGap)",
+											top: "50%",
+											transform: "translateY(-50%)",
+											height: "var(--size-icon-sm)",
+											width: "var(--size-icon-sm)",
+											color: "var(--color-text-muted)"
+										}
+									}), /* @__PURE__ */ w(he, {
+										type: "text",
+										"aria-label": D("bigconsole.parsers.list.searchPlaceholder", "Search parsers..."),
+										placeholder: D("bigconsole.parsers.list.searchPlaceholder", "Search parsers..."),
+										value: L || "",
+										onChange: Ee,
+										className: "min-h-control-md",
+										style: {
+											paddingLeft: "var(--size-controlHeight-md)",
+											height: "var(--size-controlHeight-md)"
+										}
+									})]
+								}),
+								/* @__PURE__ */ T(y, {
+									value: F || "all",
+									onValueChange: we,
+									children: [/* @__PURE__ */ w(S, {
+										"aria-label": "Filter by parser type",
+										className: "min-h-control-md w-full sm:w-[150px]",
+										children: /* @__PURE__ */ w(C, { placeholder: D("bigconsole.parsers.filters.allTypes", "All Types") })
+									}), /* @__PURE__ */ w(b, { children: ye.map((e) => /* @__PURE__ */ w(x, {
+										value: e.value,
+										children: e.label
+									}, e.value)) })]
+								}),
+								/* @__PURE__ */ T(y, {
+									value: I || "all",
+									onValueChange: Te,
+									children: [/* @__PURE__ */ w(S, {
+										"aria-label": "Filter by status",
+										className: "min-h-control-md w-full sm:w-[150px]",
+										children: /* @__PURE__ */ w(C, { placeholder: D("bigconsole.parsers.filters.allStatus", "All Status") })
+									}), /* @__PURE__ */ w(b, { children: be.map((e) => /* @__PURE__ */ w(x, {
+										value: e.value,
+										children: e.label
+									}, e.value)) })]
+								}),
+								$ && /* @__PURE__ */ T(_, {
+									variant: "ghost",
+									size: "sm",
+									onClick: Q,
+									className: "min-h-control-md",
+									children: [/* @__PURE__ */ w(h, { style: {
 										marginRight: "var(--space-iconGap)",
 										height: "var(--size-icon-sm)",
 										width: "var(--size-icon-sm)"
-									} }), T("bigconsole.parsers.actions.create", "Create Parser")]
+									} }), D("bigconsole.parsers.filters.clear", "Clear Filters")]
 								})
-							})
+							]
 						})
 					}),
-					!U && Y.length === 0 && $ && /* @__PURE__ */ S(h, {
-						treatment: "insight",
-						className: "border-border-seam",
-						children: /* @__PURE__ */ S(g, {
-							illustration: "empty-search",
-							title: T("bigconsole.parsers.list.noMatchTitle", "No matching parsers"),
-							description: T("bigconsole.parsers.list.noMatchDescription", "No parsers match your filters"),
-							action: /* @__PURE__ */ S(m, {
-								variant: "ghost",
-								size: "sm",
-								onClick: Q,
-								children: T("bigconsole.parsers.filters.clear", "Clear Filters")
+					/* @__PURE__ */ T(n, {
+						emphasis: "primary",
+						padding: "compact",
+						headingLevel: 2,
+						title: "Parsers",
+						description: "Open a parser to review its expression, or use the actions on a card to edit, export or delete it.",
+						meta: /* @__PURE__ */ w(g, {
+							variant: "secondary",
+							children: X.length === 1 ? D("bigconsole.parsers.list.countSingular", "{{count}} Parser", { count: X.length }) : D("bigconsole.parsers.list.countPlural", "{{count}} Parsers", { count: X.length })
+						}),
+						"data-testid": "parser-results",
+						children: [
+							W && /* @__PURE__ */ w("div", {
+								className: "flex items-center justify-center py-12 sm:py-16",
+								children: /* @__PURE__ */ T("div", {
+									className: "text-center",
+									children: [/* @__PURE__ */ w(_e, { style: {
+										height: "var(--size-icon-xl)",
+										width: "var(--size-icon-xl)",
+										margin: "0 auto var(--space-formGap)"
+									} }), /* @__PURE__ */ w("p", {
+										className: "text-sm text-text-muted",
+										children: D("bigconsole.parsers.list.loading", "Loading parsers...")
+									})]
+								})
+							}),
+							!W && X.length === 0 && !$ && /* @__PURE__ */ w(v, {
+								illustration: "empty-data",
+								title: D("bigconsole.parsers.list.emptyTitle", "No Parsers yet"),
+								description: D("bigconsole.parsers.list.emptyDescription", "Create your first parser to start transforming data with JQ or JSONata."),
+								action: /* @__PURE__ */ w(ae, {
+									permission: o.PARSER_CREATE,
+									deniedBehavior: "disable",
+									children: /* @__PURE__ */ T(_, {
+										onClick: Z,
+										children: [/* @__PURE__ */ w(m, { style: {
+											marginRight: "var(--space-iconGap)",
+											height: "var(--size-icon-sm)",
+											width: "var(--size-icon-sm)"
+										} }), D("bigconsole.parsers.actions.create", "Create Parser")]
+									})
+								})
+							}),
+							!W && X.length === 0 && $ && /* @__PURE__ */ w(v, {
+								illustration: "empty-search",
+								title: D("bigconsole.parsers.list.noMatchTitle", "No matching parsers"),
+								description: D("bigconsole.parsers.list.noMatchDescription", "No parsers match your filters"),
+								action: /* @__PURE__ */ w(_, {
+									variant: "ghost",
+									size: "sm",
+									onClick: Q,
+									children: D("bigconsole.parsers.filters.clear", "Clear Filters")
+								})
+							}),
+							!W && X.length > 0 && /* @__PURE__ */ w("ul", {
+								className: "grid list-none grid-cols-[repeat(auto-fill,minmax(min(100%,18rem),1fr))] gap-form-gap p-0",
+								children: X.map((e) => /* @__PURE__ */ w("li", {
+									className: "min-w-0",
+									children: /* @__PURE__ */ w(te, {
+										parser: e,
+										onView: De,
+										onEdit: M ? Oe : void 0,
+										onExport: Ae,
+										onDelete: N ? ke : void 0,
+										isDeleting: xe && Se === e.id
+									})
+								}, e.id))
 							})
-						})
-					}),
-					!U && Y.length > 0 && /* @__PURE__ */ S("div", {
-						style: {
-							display: "grid",
-							gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
-							gap: "var(--space-formGap)"
-						},
-						children: Y.map((e) => /* @__PURE__ */ S(ne, {
-							parser: e,
-							onView: Z,
-							onEdit: M ? Ae : void 0,
-							onExport: Me,
-							onDelete: Se ? je : void 0,
-							isDeleting: Ce && we === e.id
-						}, e.id))
+						]
 					})
-				]
+				] })
 			}),
-			/* @__PURE__ */ S(re, {
-				isOpen: Te,
-				onClose: () => H(!1),
-				consoleId: N,
-				onSuccess: Pe
+			/* @__PURE__ */ w(ne, {
+				isOpen: Ce,
+				onClose: () => U(!1),
+				consoleId: P,
+				onSuccess: Me
 			})
 		]
 	});
 });
 //#endregion
-export { w as DataParsersPage, w as default };
+export { E as DataParsersPage, E as default };
 
 //# sourceMappingURL=DataParsersPage.js.map