@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/pages/PipelinesPage.js

@@ -1,358 +1,308 @@
 import { usePipelineStore as e } from "../store/pipelineStore.js";
 import { useAppNavigate as t } from "../contexts/NavigationContext.js";
 import "../contexts/index.js";
-import n from "../hooks/usePipelineOperations.js";
-import { BIGCONSOLE_PERMISSIONS as r } from "../../constants/permissions.js";
-import { isNative as i, nativeNotify as a } from "../../utils/nativeBridge.js";
-import o from "../components/pipeline/PipelineDeleteDialog.js";
-import s from "../components/pipeline/PipelineCard.js";
-import { memo as c, useCallback as l, useMemo as u, useState as d } from "react";
-import { AccessDenied as f, PermissionButton as p } from "@burdenoff/fe-libs/shared/components";
-import { usePermissions as m } from "@burdenoff/fe-libs/shared/providers/shell";
-import { AlertCircle as h, GitBranch as g, Plus as _, Search as v } from "lucide-react";
-import { useI18n as y } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AuroraBackground as b, Button as x, Card as S, CardContent as C, GlassCard as w, GradientText as T, IllustratedEmptyState as E, Input as D, PagePurpose as O, Spinner as k } from "@burdenoff/fe-libs/ui";
-import { jsx as A, jsxs as j } from "react/jsx-runtime";
+import { SECTION_FOCUS_RING as n, sectionSurfaceClasses as r } from "../components/common/sectionStyles.js";
+import { Section as i, SectionStack as a } from "../components/common/Section.js";
+import "../components/common/index.js";
+import o from "../hooks/usePipelineOperations.js";
+import { BIGCONSOLE_PERMISSIONS as s } from "../../constants/permissions.js";
+import { isNative as c, nativeNotify as l } from "../../utils/nativeBridge.js";
+import u from "../components/pipeline/PipelineDeleteDialog.js";
+import d from "../components/pipeline/PipelineCard.js";
+import { memo as f, useCallback as p, useMemo as m, useState as h } from "react";
+import { AccessDenied as g, PermissionButton as _ } from "@burdenoff/fe-libs/shared/components";
+import { usePermissions as v } from "@burdenoff/fe-libs/shared/providers/shell";
+import { AlertCircle as y, GitBranch as b, Plus as x, Search as ee } from "lucide-react";
+import { useI18n as S } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AuroraBackground as C, Button as w, GradientText as T, IllustratedEmptyState as E, Input as D, PagePurpose as te, Spinner as O } from "@burdenoff/fe-libs/ui";
+import { jsx as k, jsxs as A } from "react/jsx-runtime";
 //#region src/bigconsole/pages/PipelinesPage.tsx
-var M = c(function() {
-	let c = t(), { t: M } = y(), { hasPermission: N, isLoading: P } = m(), F = N(r.PIPELINE_READ), I = N(r.PIPELINE_UPDATE), L = N(r.PIPELINE_DELETE), R = N(r.PIPELINE_TEST), [z, B] = d("all"), V = e((e) => e.searchQuery), H = e((e) => e.setSearchQuery), U = e((e) => e.deleteDialogOpen), W = e((e) => e.currentPipeline), G = e((e) => e.openDeleteDialog), K = e((e) => e.closeDeleteDialog), { loading: q, error: J, pipelines: Y, deletePipeline: X, refetch: Z } = n({ consoleId: "default" }), Q = u(() => {
-		let e = [...Y];
-		if (z !== "all" && (e = e.filter((e) => e.status === z)), V.trim()) {
-			let t = V.toLowerCase();
+var j = f(function() {
+	let f = t(), { t: j } = S(), { hasPermission: M, isLoading: N } = v(), P = M(s.PIPELINE_READ), F = M(s.PIPELINE_UPDATE), I = M(s.PIPELINE_DELETE), L = M(s.PIPELINE_TEST), [R, z] = h("all"), B = e((e) => e.searchQuery), V = e((e) => e.setSearchQuery), H = e((e) => e.deleteDialogOpen), U = e((e) => e.currentPipeline), W = e((e) => e.openDeleteDialog), G = e((e) => e.closeDeleteDialog), { loading: K, error: q, pipelines: J, deletePipeline: Y, refetch: X } = o({ consoleId: "default" }), Z = m(() => {
+		let e = [...J];
+		if (R !== "all" && (e = e.filter((e) => e.status === R)), B.trim()) {
+			let t = B.toLowerCase();
 			e = e.filter((e) => e.name.toLowerCase().includes(t) || e.description?.toLowerCase().includes(t));
 		}
 		return e.sort((e, t) => new Date(t.updatedAt).getTime() - new Date(e.updatedAt).getTime());
 	}, [
-		Y,
-		z,
-		V
-	]), $ = l(() => {
-		c("/pipelines/new");
-	}, [c]), ee = l((e) => {
-		c(`/pipelines/${e}`);
-	}, [c]), te = l((e) => {
-		c(`/pipelines/${e}/edit`);
-	}, [c]), ne = l((e) => {
-		c(`/pipelines/${e}?test=true`);
-	}, [c]), re = l((e) => {
-		let t = Y.find((t) => t.id === e);
-		t && G(t);
-	}, [Y, G]), ie = l(async () => {
-		if (W) {
+		J,
+		R,
+		B
+	]), Q = p(() => {
+		f("/pipelines/new");
+	}, [f]), ne = p((e) => {
+		f(`/pipelines/${e}`);
+	}, [f]), re = p((e) => {
+		f(`/pipelines/${e}/edit`);
+	}, [f]), ie = p((e) => {
+		f(`/pipelines/${e}?test=true`);
+	}, [f]), ae = p((e) => {
+		let t = J.find((t) => t.id === e);
+		t && W(t);
+	}, [J, W]), oe = p(async () => {
+		if (U) {
 			try {
-				await X(W.id), i() && a("success");
+				await Y(U.id), c() && l("success");
 			} catch (e) {
-				throw i() && a("error"), e;
+				throw c() && l("error"), e;
 			}
-			K();
+			G();
 		}
 	}, [
-		W,
-		X,
-		K
-	]), ae = [
+		U,
+		Y,
+		G
+	]), se = p(() => {
+		z("all"), V("");
+	}, [V]), ce = [
 		{
 			value: "all",
-			label: M("bigconsole.pipelines.filters.all", "All")
+			label: j("bigconsole.pipelines.filters.all", "All")
 		},
 		{
 			value: "draft",
-			label: M("bigconsole.pipelines.filters.draft", "Draft")
+			label: j("bigconsole.pipelines.filters.draft", "Draft")
 		},
 		{
 			value: "active",
-			label: M("bigconsole.pipelines.filters.active", "Active")
+			label: j("bigconsole.pipelines.filters.active", "Active")
 		},
 		{
 			value: "inactive",
-			label: M("bigconsole.pipelines.filters.inactive", "Inactive")
+			label: j("bigconsole.pipelines.filters.inactive", "Inactive")
 		},
 		{
 			value: "error",
-			label: M("bigconsole.pipelines.filters.error", "Error")
+			label: j("bigconsole.pipelines.filters.error", "Error")
 		}
 	];
-	return P ? /* @__PURE__ */ A("div", {
+	if (N) return /* @__PURE__ */ k("div", {
 		style: {
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "center",
 			padding: "80px 0"
 		},
-		children: /* @__PURE__ */ A(k, { style: {
+		children: /* @__PURE__ */ k(O, { style: {
 			height: "var(--size-icon-xl)",
 			width: "var(--size-icon-xl)"
 		} })
-	}) : F ? J ? /* @__PURE__ */ A("div", {
-		style: { padding: "var(--space-pagePadding)" },
-		children: /* @__PURE__ */ A(S, {
-			style: {
-				borderColor: "var(--color-status-error-border)",
-				backgroundColor: "var(--color-status-error-bgSubtle)"
-			},
-			children: /* @__PURE__ */ A(C, {
-				style: { padding: "var(--space-pagePadding)" },
-				children: /* @__PURE__ */ j("div", {
+	});
+	if (!P) return /* @__PURE__ */ k(g, {
+		title: j("bigconsole.pipelines.errors.accessDeniedTitle", "Access Denied"),
+		description: j("bigconsole.pipelines.errors.accessDeniedListDescription", "You don't have permission to view pipelines.")
+	});
+	let $ = /* @__PURE__ */ A("header", {
+		className: "relative overflow-hidden border-b border-[var(--color-border-seam)] bg-[image:var(--gradient-gloss-card)]",
+		children: [/* @__PURE__ */ k(C, { intensity: "subtle" }), /* @__PURE__ */ A("div", {
+			className: "flex flex-col gap-form-gap sm:flex-row sm:items-center sm:justify-between",
+			style: { padding: "var(--space-pagePadding)" },
+			children: [/* @__PURE__ */ A("div", {
+				className: "flex min-w-0 items-center gap-form-gap",
+				children: [/* @__PURE__ */ k("span", {
+					"aria-hidden": "true",
+					className: "flex shrink-0 items-center justify-center rounded-card",
 					style: {
-						display: "flex",
-						flexDirection: "column",
-						alignItems: "center",
-						textAlign: "center"
+						height: "var(--size-controlHeight-lg)",
+						width: "var(--size-controlHeight-lg)",
+						backgroundColor: "var(--color-action-primary-bg)"
 					},
-					children: [
-						/* @__PURE__ */ A("div", {
-							style: {
-								padding: "var(--space-controlGap)",
-								borderRadius: "50%",
-								backgroundColor: "var(--color-status-error-bgSubtle)",
-								marginBottom: "var(--space-formGap)"
-							},
-							children: /* @__PURE__ */ A(h, { style: {
-								height: "var(--size-icon-xl)",
-								width: "var(--size-icon-xl)",
-								color: "var(--color-status-error-text)"
-							} })
-						}),
-						/* @__PURE__ */ A("h3", {
-							style: {
-								fontSize: "var(--font-size-body-lg)",
-								fontWeight: "var(--font-weight-medium)",
-								color: "var(--color-status-error-text)",
-								marginBottom: "var(--space-controlGap)"
-							},
-							children: M("bigconsole.pipelines.errors.loadListTitle", "Failed to load Pipelines")
-						}),
-						/* @__PURE__ */ A("p", {
-							style: {
-								fontSize: "var(--font-size-body-sm)",
-								color: "var(--color-text-secondary)",
-								marginBottom: "var(--space-formGap)"
-							},
-							children: J.message
-						}),
-						/* @__PURE__ */ A(x, {
-							size: "sm",
-							onClick: () => Z(),
-							children: M("bigconsole.pipelines.actions.tryAgain", "Try Again")
-						})
-					]
+					children: /* @__PURE__ */ k(b, { style: {
+						height: "var(--size-icon-lg)",
+						width: "var(--size-icon-lg)",
+						color: "var(--color-action-primary-text)"
+					} })
+				}), /* @__PURE__ */ A("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ k("h1", {
+						className: "text-2xl font-bold leading-tight text-text-primary",
+						children: /* @__PURE__ */ k(T, { children: j("bigconsole.pipelines.list.heading", "Pipelines") })
+					}), /* @__PURE__ */ k("p", {
+						className: "text-sm text-text-secondary",
+						children: j("bigconsole.pipelines.list.subtitle", "Create and manage sequential parser chains for data transformation")
+					})]
+				})]
+			}), /* @__PURE__ */ k(_, {
+				permission: s.PIPELINE_CREATE,
+				deniedBehavior: "disable",
+				children: /* @__PURE__ */ A(w, {
+					onClick: Q,
+					className: "w-full shrink-0 min-h-[var(--size-controlHeight-md)] sm:w-auto",
+					children: [/* @__PURE__ */ k(x, { className: "h-icon-sm w-icon-sm" }), j("bigconsole.pipelines.actions.createPipeline", "Create Pipeline")]
+				})
+			})]
+		})]
+	});
+	return q ? /* @__PURE__ */ A("div", {
+		className: "min-h-screen bg-bg-canvas",
+		children: [$, /* @__PURE__ */ k("div", {
+			style: { padding: "var(--space-pagePadding)" },
+			children: /* @__PURE__ */ k(i, {
+				tone: "danger",
+				headingLevel: 2,
+				title: j("bigconsole.pipelines.errors.loadListTitle", "Failed to load Pipelines"),
+				description: q.message,
+				icon: /* @__PURE__ */ k(y, { className: "h-icon-sm w-icon-sm" }),
+				actions: /* @__PURE__ */ k(w, {
+					size: "sm",
+					onClick: () => X(),
+					children: j("bigconsole.pipelines.actions.tryAgain", "Try Again")
+				}),
+				"data-testid": "pipelines-error",
+				children: /* @__PURE__ */ k("p", {
+					className: "text-sm text-text-secondary",
+					children: "Nothing was changed. Retry once the console service is reachable again."
 				})
 			})
-		})
-	}) : /* @__PURE__ */ j("div", {
-		style: {
-			minHeight: "100vh",
-			backgroundColor: "var(--color-bg-canvas)"
-		},
+		})]
+	}) : /* @__PURE__ */ A("div", {
+		className: "min-h-screen bg-bg-canvas",
 		children: [
-			/* @__PURE__ */ j("div", {
-				className: "relative overflow-hidden border-b border-border-seam bg-gloss-card",
-				children: [/* @__PURE__ */ A(b, { intensity: "subtle" }), /* @__PURE__ */ A("div", {
-					style: { padding: "var(--space-pagePadding)" },
-					children: /* @__PURE__ */ j("div", {
-						style: {
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "space-between"
-						},
-						children: [/* @__PURE__ */ j("div", {
-							style: {
-								display: "flex",
-								alignItems: "center",
-								gap: "var(--space-formGap)"
-							},
-							children: [/* @__PURE__ */ A("div", {
-								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__ */ A(g, { style: {
-									height: "var(--size-icon-lg)",
-									width: "var(--size-icon-lg)",
-									color: "var(--color-action-primary-text)"
-								} })
-							}), /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("h1", {
-								style: {
-									fontSize: "var(--font-size-heading-h4)",
-									fontWeight: "var(--font-weight-bold)",
-									margin: 0,
-									color: "var(--color-text-primary)"
-								},
-								children: /* @__PURE__ */ A(T, { children: M("bigconsole.pipelines.list.heading", "Pipelines") })
-							}), /* @__PURE__ */ A("p", {
-								style: {
-									fontSize: "var(--font-size-body-sm)",
-									color: "var(--color-text-secondary)",
-									margin: 0
-								},
-								children: M("bigconsole.pipelines.list.subtitle", "Create and manage sequential parser chains for data transformation")
-							})] })]
-						}), /* @__PURE__ */ A(p, {
-							permission: r.PIPELINE_CREATE,
-							deniedBehavior: "disable",
-							children: /* @__PURE__ */ j(x, {
-								onClick: $,
-								children: [/* @__PURE__ */ A(_, { style: {
-									marginRight: "var(--space-iconGap)",
-									height: "var(--size-icon-sm)",
-									width: "var(--size-icon-sm)"
-								} }), M("bigconsole.pipelines.actions.createPipeline", "Create Pipeline")]
-							})
-						})]
-					})
-				})]
-			}),
-			/* @__PURE__ */ j("div", {
+			$,
+			/* @__PURE__ */ k("div", {
 				style: { padding: "var(--space-pagePadding)" },
-				children: [
-					/* @__PURE__ */ A(O, {
-						className: "mb-[var(--space-sectionGap)]",
-						children: M("bigconsole.pipelines.list.purpose", "Pipelines chain parsers and data sinks into a repeatable flow — they take raw input, run it through your parsers, and route the structured result into a sink. Use them to turn messy logs, files, or API payloads into clean, queryable data your dashboards can use.")
+				children: /* @__PURE__ */ A(a, { children: [
+					/* @__PURE__ */ k(te, {
+						className: "max-w-[75ch]",
+						children: j("bigconsole.pipelines.list.purpose", "Pipelines chain parsers and data sinks into a repeatable flow — they take raw input, run it through your parsers, and route the structured result into a sink. Use them to turn messy logs, files, or API payloads into clean, queryable data your dashboards can use.")
 					}),
-					/* @__PURE__ */ A("div", {
-						style: { marginBottom: "var(--space-formGap)" },
+					/* @__PURE__ */ k("section", {
+						"aria-label": "Filter and search pipelines",
+						"data-testid": "pipelines-toolbar",
+						"data-section-emphasis": "bare",
+						className: r("bare", "neutral", "none"),
 						children: /* @__PURE__ */ A("div", {
-							style: {
-								display: "flex",
-								alignItems: "center",
-								gap: "2px",
-								padding: "4px",
-								backgroundColor: "var(--color-bg-sunken)",
-								borderRadius: "var(--radius-card)",
-								width: "fit-content"
-							},
-							children: ae.map((e) => /* @__PURE__ */ A("button", {
-								type: "button",
-								onClick: () => B(e.value),
-								style: {
-									padding: "var(--space-controlGap) var(--space-formGap)",
-									fontSize: "var(--font-size-body-sm)",
-									fontWeight: "var(--font-weight-medium)",
-									borderRadius: "var(--radius-button)",
-									border: "none",
-									cursor: "pointer",
-									transition: "all 0.2s ease",
-									backgroundColor: z === e.value ? "var(--color-bg-surface)" : "transparent",
-									color: z === e.value ? "var(--color-text-primary)" : "var(--color-text-secondary)",
-									boxShadow: z === e.value ? "0 1px 2px rgba(0,0,0,0.05)" : "none"
-								},
-								children: e.label
-							}, e.value))
-						})
-					}),
-					/* @__PURE__ */ A("div", {
-						style: { marginBottom: "var(--space-sectionGap)" },
-						children: /* @__PURE__ */ j("div", {
-							style: {
-								position: "relative",
-								maxWidth: "400px"
-							},
-							children: [/* @__PURE__ */ A(v, { 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__ */ A(D, {
-								type: "text",
-								placeholder: M("bigconsole.pipelines.list.searchPlaceholder", "Search pipelines..."),
-								value: V,
-								onChange: (e) => H(e.target.value),
-								style: {
-									paddingLeft: "var(--size-controlHeight-md)",
-									height: "var(--size-controlHeight-md)"
-								}
-							})]
-						})
-					}),
-					q && Y.length === 0 && /* @__PURE__ */ A("div", {
-						style: {
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "center",
-							padding: "80px 0"
-						},
-						children: /* @__PURE__ */ j("div", {
-							style: { textAlign: "center" },
-							children: [/* @__PURE__ */ A(k, { style: {
-								height: "var(--size-icon-xl)",
-								width: "var(--size-icon-xl)",
-								margin: "0 auto var(--space-formGap)"
-							} }), /* @__PURE__ */ A("p", {
-								style: {
-									fontSize: "var(--font-size-body-sm)",
-									color: "var(--color-text-muted)"
-								},
-								children: M("bigconsole.pipelines.list.loading", "Loading pipelines...")
+							className: "flex flex-col gap-control-gap md:flex-row md:items-center md:justify-between",
+							children: [/* @__PURE__ */ k("div", {
+								role: "group",
+								"aria-label": "Filter by status",
+								className: "flex min-w-0 max-w-full items-center gap-1 overflow-x-auto rounded-card bg-bg-sunken p-1",
+								children: ce.map((e) => /* @__PURE__ */ k("button", {
+									type: "button",
+									"aria-pressed": R === e.value,
+									onClick: () => z(e.value),
+									className: `shrink-0 whitespace-nowrap rounded-button text-sm font-medium motion-safe:transition-colors ${n}`,
+									style: {
+										minHeight: "var(--size-controlHeight-md)",
+										padding: "0 var(--space-formGap)",
+										border: "none",
+										cursor: "pointer",
+										backgroundColor: R === e.value ? "var(--color-bg-surface)" : "transparent",
+										color: R === e.value ? "var(--color-text-primary)" : "var(--color-text-secondary)",
+										boxShadow: R === e.value ? "var(--shadow-elevation-1)" : "none"
+									},
+									children: e.label
+								}, e.value))
+							}), /* @__PURE__ */ A("div", {
+								className: "relative w-full md:max-w-[320px]",
+								children: [/* @__PURE__ */ k(ee, {
+									"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__ */ k(D, {
+									type: "text",
+									"aria-label": j("bigconsole.pipelines.list.searchPlaceholder", "Search pipelines..."),
+									placeholder: j("bigconsole.pipelines.list.searchPlaceholder", "Search pipelines..."),
+									value: B,
+									onChange: (e) => V(e.target.value),
+									style: {
+										paddingLeft: "var(--size-controlHeight-md)",
+										height: "var(--size-controlHeight-md)"
+									}
+								})]
 							})]
 						})
 					}),
-					!q && Y.length === 0 && /* @__PURE__ */ A(w, {
-						treatment: "insight",
-						className: "border-border-seam",
-						children: /* @__PURE__ */ A(E, {
-							illustration: "empty-data",
-							title: M("bigconsole.pipelines.list.emptyTitle", "No Pipelines yet"),
-							description: M("bigconsole.pipelines.list.emptyDescription", "Create a pipeline to chain parsers together for sequential data transformation. Each stage processes the output of the previous stage."),
-							action: /* @__PURE__ */ A(p, {
-								permission: r.PIPELINE_CREATE,
-								deniedBehavior: "disable",
-								children: /* @__PURE__ */ j(x, {
-									onClick: $,
-									children: [/* @__PURE__ */ A(_, { style: {
-										marginRight: "var(--space-iconGap)",
-										height: "var(--size-icon-sm)",
-										width: "var(--size-icon-sm)"
-									} }), M("bigconsole.pipelines.actions.createPipeline", "Create Pipeline")]
+					/* @__PURE__ */ A(i, {
+						emphasis: "primary",
+						headingLevel: 2,
+						title: "Your pipelines",
+						description: "Open one to review its stages, or run a quick test against sample input.",
+						meta: !K || J.length > 0 ? /* @__PURE__ */ A("span", {
+							className: "rounded-pill bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary",
+							children: [Z.length, Z.length === J.length ? "" : ` of ${J.length}`]
+						}) : null,
+						"data-testid": "pipelines-results",
+						children: [
+							K && J.length === 0 && /* @__PURE__ */ k("div", {
+								className: "flex items-center justify-center py-12",
+								role: "status",
+								children: /* @__PURE__ */ A("div", {
+									className: "text-center",
+									children: [/* @__PURE__ */ k(O, { style: {
+										height: "var(--size-icon-xl)",
+										width: "var(--size-icon-xl)",
+										margin: "0 auto var(--space-formGap)"
+									} }), /* @__PURE__ */ k("p", {
+										className: "text-sm text-text-muted",
+										children: j("bigconsole.pipelines.list.loading", "Loading pipelines...")
+									})]
+								})
+							}),
+							!K && J.length === 0 && /* @__PURE__ */ k("div", {
+								"data-testid": "pipelines-empty",
+								children: /* @__PURE__ */ k(E, {
+									illustration: "empty-data",
+									title: j("bigconsole.pipelines.list.emptyTitle", "No Pipelines yet"),
+									description: j("bigconsole.pipelines.list.emptyDescription", "Create a pipeline to chain parsers together for sequential data transformation. Each stage processes the output of the previous stage."),
+									action: /* @__PURE__ */ k(_, {
+										permission: s.PIPELINE_CREATE,
+										deniedBehavior: "disable",
+										children: /* @__PURE__ */ A(w, {
+											onClick: Q,
+											className: "min-h-[var(--size-controlHeight-md)]",
+											children: [/* @__PURE__ */ k(x, { className: "h-icon-sm w-icon-sm" }), j("bigconsole.pipelines.actions.createPipeline", "Create Pipeline")]
+										})
+									})
 								})
+							}),
+							!K && Z.length === 0 && J.length > 0 && /* @__PURE__ */ k(i, {
+								emphasis: "muted",
+								tone: "info",
+								padding: "compact",
+								headingLevel: 3,
+								title: j("bigconsole.pipelines.list.noResultsTitle", "No matching pipelines"),
+								description: j("bigconsole.pipelines.list.noResultsDescription", "No pipelines match your filters"),
+								actions: /* @__PURE__ */ k(w, {
+									size: "sm",
+									variant: "secondary",
+									onClick: se,
+									children: "Clear filters"
+								}),
+								"data-testid": "pipelines-no-results"
+							}),
+							Z.length > 0 && /* @__PURE__ */ k("div", {
+								className: "grid grid-cols-1 gap-form-gap sm:grid-cols-2 xl:grid-cols-3",
+								children: Z.map((e) => /* @__PURE__ */ k(d, {
+									pipeline: e,
+									onView: ne,
+									onEdit: F ? re : void 0,
+									onTest: L ? ie : void 0,
+									onDelete: I ? ae : void 0
+								}, e.id))
 							})
-						})
-					}),
-					!q && Q.length === 0 && Y.length > 0 && /* @__PURE__ */ A(w, {
-						treatment: "insight",
-						className: "border-border-seam",
-						children: /* @__PURE__ */ A(E, {
-							illustration: "empty-search",
-							title: M("bigconsole.pipelines.list.noResultsTitle", "No matching pipelines"),
-							description: M("bigconsole.pipelines.list.noResultsDescription", "No pipelines match your filters")
-						})
-					}),
-					Q.length > 0 && /* @__PURE__ */ A("div", {
-						style: {
-							display: "grid",
-							gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
-							gap: "var(--space-formGap)"
-						},
-						children: Q.map((e) => /* @__PURE__ */ A(s, {
-							pipeline: e,
-							onView: ee,
-							onEdit: I ? te : void 0,
-							onTest: R ? ne : void 0,
-							onDelete: L ? re : void 0
-						}, e.id))
+						]
 					})
-				]
+				] })
 			}),
-			W && /* @__PURE__ */ A(o, {
-				pipeline: W,
-				isOpen: U,
-				onClose: K,
-				onConfirm: ie
+			U && /* @__PURE__ */ k(u, {
+				pipeline: U,
+				isOpen: H,
+				onClose: G,
+				onConfirm: oe
 			})
 		]
-	}) : /* @__PURE__ */ A(f, {
-		title: M("bigconsole.pipelines.errors.accessDeniedTitle", "Access Denied"),
-		description: M("bigconsole.pipelines.errors.accessDeniedListDescription", "You don't have permission to view pipelines.")
 	});
 });
 //#endregion
-export { M as PipelinesPage, M as default };
+export { j as PipelinesPage, j as default };
 
 //# sourceMappingURL=PipelinesPage.js.map