@burdenoff/microfe-bigconsole 2026.805.2 → 2026.812.1

package/dist/bigconsole/pages/DataParsersPage.js

@@ -1,51 +1,54 @@
 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 s from "../components/parser/ImportParserDialog.js";
-import { memo as c, useCallback as l, useMemo as re, 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 { AuroraBackground as fe, Badge as pe, Button as p, CTAOverflowMenu as m, Card as me, CardContent as he, GlassCard as h, GradientText as ge, IllustratedEmptyState as g, Input as _, PagePurpose as v, Select as y, SelectContent as b, SelectItem as x, SelectTrigger as S, SelectValue as C, Spinner as _e } from "@burdenoff/fe-libs/ui";
+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 ve = [
-	{
-		value: "all",
-		label: "All Types"
-	},
-	{
-		value: "jq",
-		label: "JQ"
-	},
-	{
-		value: "jsonata",
-		label: "JSONata"
-	}
-], ye = [
-	{
-		value: "all",
-		label: "All Status"
-	},
-	{
-		value: "active",
-		label: "Active"
-	},
-	{
-		value: "inactive",
-		label: "Inactive"
-	}
-], E = "default", D = c(function() {
-	let c = t(), { consoleId: D } = ie(), { hasPermission: O, isLoading: k } = se(), A = O(i.PARSER_READ), j = O(i.PARSER_CREATE), M = O(i.PARSER_UPDATE), N = O(i.PARSER_DELETE), P = D || E, 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), [be, V] = u(!1), [xe, H] = u(null), [Se, U] = u(!1), { loading: W, error: G, parsers: K, deleteParser: q, refetch: J } = n({
+var ve = "default", E = u(function() {
+	let u = t(), { consoleId: E } = re(), { t: D } = de(), ye = f(() => [
+		{
+			value: "all",
+			label: D("bigconsole.parsers.filters.allTypes", "All Types")
+		},
+		{
+			value: "jq",
+			label: D("bigconsole.parsers.filters.jq", "JQ")
+		},
+		{
+			value: "jsonata",
+			label: D("bigconsole.parsers.filters.jsonata", "JSONata")
+		}
+	], [D]), be = f(() => [
+		{
+			value: "all",
+			label: D("bigconsole.parsers.filters.allStatus", "All Status")
+		},
+		{
+			value: "active",
+			label: D("bigconsole.parsers.filters.active", "Active")
+		},
+		{
+			value: "inactive",
+			label: D("bigconsole.parsers.filters.inactive", "Inactive")
+		}
+	], [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: Y, loading: Ce } = r(), X = re(() => K ? K.filter((e) => {
+	}), { 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);
@@ -57,108 +60,71 @@ var ve = [
 		F,
 		I,
 		L
-	]), we = l((e) => {
+	]), we = d((e) => {
 		R(e === "all" ? null : e);
-	}, [R]), Te = l((e) => {
+	}, [R]), Te = d((e) => {
 		z(e === "all" ? null : e);
-	}, [z]), Ee = l((e) => {
+	}, [z]), Ee = d((e) => {
 		B(e.target.value);
-	}, [B]), Z = l(() => {
-		c(D ? `/dashboards/${D}/parsers/new` : "/parsers/new");
-	}, [c, D]), De = l((e) => {
-		c(D ? `/dashboards/${D}/parsers/${e}` : `/parsers/${e}`);
-	}, [c, D]), Oe = l((e) => {
-		c(D ? `/dashboards/${D}/parsers/${e}/edit` : `/parsers/${e}/edit`);
-	}, [c, D]), ke = l(async (e) => {
+	}, [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: "Delete parser?",
-			message: "Are you sure you want to delete this parser?",
-			okButtonTitle: "Delete",
-			cancelButtonTitle: "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("Are you sure you want to delete this parser?") : t) {
-			te("medium"), V(!0), H(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 q(e), a() && o("success");
+				await q(e), s() && l("success");
 			} catch {
-				a() && o("error");
+				s() && l("error");
 			} finally {
 				V(!1), H(null);
 			}
 		}
-	}, [q]), Q = l(() => {
+	}, [q, D]), Q = d(() => {
 		R(null), z(null), B("");
 	}, [
 		R,
 		z,
 		B
-	]), Ae = l(async (e) => {
+	]), Ae = d(async (e) => {
 		let t = K.find((t) => t.id === e);
 		t && await Y(e, t.name);
-	}, [K, Y]), je = l(() => {
+	}, [K, Y]), je = d(() => {
 		U(!0);
-	}, []), Me = l((e, t, n) => {
+	}, []), 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__ */ w(me, {
-			style: {
-				borderColor: "var(--color-status-error-border)",
-				backgroundColor: "var(--color-status-error-bgSubtle)"
-			},
-			children: /* @__PURE__ */ w(he, {
-				style: { padding: "var(--space-pagePadding)" },
-				children: /* @__PURE__ */ T("div", {
-					style: {
-						display: "flex",
-						flexDirection: "column",
-						alignItems: "center",
-						textAlign: "center"
-					},
-					children: [
-						/* @__PURE__ */ w("div", {
-							style: {
-								padding: "var(--space-controlGap)",
-								borderRadius: "50%",
-								backgroundColor: "var(--color-status-error-bgSubtle)",
-								marginBottom: "var(--space-formGap)"
-							},
-							children: /* @__PURE__ */ w(ce, { style: {
-								height: "var(--size-icon-xl)",
-								width: "var(--size-icon-xl)",
-								color: "var(--color-status-error-text)"
-							} })
-						}),
-						/* @__PURE__ */ w("h3", {
-							style: {
-								fontSize: "var(--font-size-body-lg)",
-								fontWeight: "var(--font-weight-medium)",
-								color: "var(--color-status-error-text)",
-								marginBottom: "var(--space-controlGap)"
-							},
-							children: "Failed to load Parsers"
-						}),
-						/* @__PURE__ */ w("p", {
-							style: {
-								fontSize: "var(--font-size-body-sm)",
-								color: "var(--color-text-secondary)",
-								marginBottom: "var(--space-formGap)"
-							},
-							children: G.message
-						}),
-						/* @__PURE__ */ w(p, {
-							size: "sm",
-							onClick: () => J(),
-							children: "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__ */ w(ae, {
-		title: "Access Denied",
-		description: "You don't have permission to view parsers."
+	}) : !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",
@@ -166,66 +132,51 @@ var ve = [
 		},
 		children: [
 			/* @__PURE__ */ T("div", {
-				className: "relative overflow-hidden border-b border-border-seam bg-gloss-card",
+				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__ */ T("div", {
-						style: {
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "space-between"
-						},
+						className: "flex flex-wrap items-center justify-between gap-form-gap",
 						children: [/* @__PURE__ */ T("div", {
-							style: {
-								display: "flex",
-								alignItems: "center",
-								gap: "var(--space-formGap)"
-							},
+							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__ */ w(le, { style: {
+								children: /* @__PURE__ */ w(ce, { style: {
 									height: "var(--size-icon-lg)",
 									width: "var(--size-icon-lg)",
 									color: "var(--color-action-primary-text)"
 								} })
-							}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("h1", {
-								style: {
-									fontSize: "var(--font-size-heading-h4)",
-									fontWeight: "var(--font-weight-bold)",
-									margin: 0,
-									color: "var(--color-text-primary)"
-								},
-								children: /* @__PURE__ */ w(ge, { children: "Data Parsers" })
-							}), /* @__PURE__ */ w("p", {
-								style: {
-									fontSize: "var(--font-size-body-sm)",
-									color: "var(--color-text-secondary)",
-									margin: 0
-								},
-								children: "Transform and process data with JQ or JSONata expressions"
-							})] })]
-						}), /* @__PURE__ */ w(m, {
+							}), /* @__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: "Create Parser",
+								label: D("bigconsole.parsers.actions.create", "Create Parser"),
 								onSelect: Z,
-								icon: /* @__PURE__ */ w(d, { style: {
+								icon: /* @__PURE__ */ w(m, { style: {
 									marginRight: "var(--space-iconGap)",
 									height: "var(--size-icon-sm)",
 									width: "var(--size-icon-sm)"
 								} })
 							} : void 0,
 							actions: j ? [{
-								label: "Import",
+								label: D("bigconsole.parsers.actions.import", "Import"),
 								onSelect: je,
-								icon: /* @__PURE__ */ w(de, { style: {
+								icon: /* @__PURE__ */ w(ue, { style: {
 									height: "var(--size-icon-sm)",
 									width: "var(--size-icon-sm)"
 								} })
@@ -234,167 +185,161 @@ var ve = [
 					})
 				})]
 			}),
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ w("div", {
 				style: { padding: "var(--space-pagePadding)" },
-				children: [
-					/* @__PURE__ */ w(v, {
-						className: "mb-[var(--space-sectionGap)]",
-						children: "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."
+				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.")
 					}),
-					/* @__PURE__ */ T("div", {
-						style: {
-							display: "flex",
-							alignItems: "center",
-							gap: "var(--space-controlGap)",
-							marginBottom: "var(--space-sectionGap)",
-							flexWrap: "wrap"
-						},
-						children: [
-							/* @__PURE__ */ T("div", {
-								style: {
-									position: "relative",
-									maxWidth: "400px",
-									flex: 1
-								},
-								children: [/* @__PURE__ */ w(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__ */ w(_, {
-									type: "text",
-									placeholder: "Search parsers...",
-									value: L || "",
-									onChange: Ee,
-									style: {
-										paddingLeft: "var(--size-controlHeight-md)",
-										height: "var(--size-controlHeight-md)"
-									}
-								})]
-							}),
-							/* @__PURE__ */ T(y, {
-								value: F || "all",
-								onValueChange: we,
-								children: [/* @__PURE__ */ w(S, {
-									style: { width: "150px" },
-									children: /* @__PURE__ */ w(C, { placeholder: "All Types" })
-								}), /* @__PURE__ */ w(b, { children: ve.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, {
-									style: { width: "150px" },
-									children: /* @__PURE__ */ w(C, { placeholder: "All Status" })
-								}), /* @__PURE__ */ w(b, { children: ye.map((e) => /* @__PURE__ */ w(x, {
-									value: e.value,
-									children: e.label
-								}, e.value)) })]
-							}),
-							$ && /* @__PURE__ */ T(p, {
-								variant: "ghost",
-								size: "sm",
-								onClick: Q,
-								children: [/* @__PURE__ */ w(f, { style: {
-									marginRight: "var(--space-iconGap)",
-									height: "var(--size-icon-sm)",
-									width: "var(--size-icon-sm)"
-								} }), "Clear Filters"]
-							}),
-							/* @__PURE__ */ T(pe, {
-								variant: "secondary",
-								style: { marginLeft: "auto" },
-								children: [
-									X.length,
-									" ",
-									X.length === 1 ? "Parser" : "Parsers"
-								]
-							})
-						]
-					}),
-					W && /* @__PURE__ */ w("div", {
-						style: {
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "center",
-							padding: "80px 0"
-						},
+					/* @__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", {
-							style: { textAlign: "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", {
-								style: {
-									fontSize: "var(--font-size-body-sm)",
-									color: "var(--color-text-muted)"
-								},
-								children: "Loading parsers..."
-							})]
-						})
-					}),
-					!W && X.length === 0 && !$ && /* @__PURE__ */ w(h, {
-						treatment: "insight",
-						className: "border-border-seam",
-						children: /* @__PURE__ */ w(g, {
-							illustration: "empty-data",
-							title: "No Parsers yet",
-							description: "Create your first parser to start transforming data with JQ or JSONata.",
-							action: /* @__PURE__ */ w(oe, {
-								permission: i.PARSER_CREATE,
-								deniedBehavior: "disable",
-								children: /* @__PURE__ */ T(p, {
-									onClick: Z,
-									children: [/* @__PURE__ */ w(d, { style: {
+							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)"
-									} }), "Create Parser"]
+									} }), D("bigconsole.parsers.filters.clear", "Clear Filters")]
 								})
-							})
+							]
 						})
 					}),
-					!W && X.length === 0 && $ && /* @__PURE__ */ w(h, {
-						treatment: "insight",
-						className: "border-border-seam",
-						children: /* @__PURE__ */ w(g, {
-							illustration: "empty-search",
-							title: "No matching parsers",
-							description: "No parsers match your filters",
-							action: /* @__PURE__ */ w(p, {
-								variant: "ghost",
-								size: "sm",
-								onClick: Q,
-								children: "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))
 							})
-						})
-					}),
-					!W && X.length > 0 && /* @__PURE__ */ w("div", {
-						style: {
-							display: "grid",
-							gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
-							gap: "var(--space-formGap)"
-						},
-						children: X.map((e) => /* @__PURE__ */ w(ne, {
-							parser: e,
-							onView: De,
-							onEdit: M ? Oe : void 0,
-							onExport: Ae,
-							onDelete: N ? ke : void 0,
-							isDeleting: be && xe === e.id
-						}, e.id))
+						]
 					})
-				]
+				] })
 			}),
-			/* @__PURE__ */ w(s, {
-				isOpen: Se,
+			/* @__PURE__ */ w(ne, {
+				isOpen: Ce,
 				onClose: () => U(!1),
 				consoleId: P,
 				onSuccess: Me
@@ -403,6 +348,6 @@ var ve = [
 	});
 });
 //#endregion
-export { D as DataParsersPage, D as default };
+export { E as DataParsersPage, E as default };
 
 //# sourceMappingURL=DataParsersPage.js.map