@burdenoff/microfe-bigconsole 2026.624.1 → 2026.625.1

package/dist/bigconsole/pages/DataSinkViewPage.js

@@ -1,342 +1,367 @@
 import { useDataSinkStore as e } from "../store/dataSinkStore.js";
 import { useAppNavigate as t } from "../contexts/NavigationContext.js";
 import "../contexts/index.js";
-import n from "../hooks/useDataSinkOperations.js";
-import r from "../components/datasink/DataSinkStatusBadge.js";
-import { isNative as i, nativeConfirm as a, nativeImpact as ee, nativeNotify as o } from "../../utils/nativeBridge.js";
-import te from "../hooks/useDataSinkSubscription.js";
-import ne from "../components/datasink/DataSinkDataViewer.js";
-import re from "../components/datasink/DataSinkTableViewer.js";
-import ie from "../components/datasink/LinkedWorkflowsPanel.js";
-import ae from "../components/datasink/LinkedParsersPanel.js";
-import oe from "../components/datasink/WorkflowStatusPanel.js";
-import s from "../components/datasink/ExportDataSinkDialog.js";
-import { memo as c, useCallback as l, useEffect as se, useState as u } from "react";
-import { useParams as d } from "react-router-dom";
-import { AlertCircle as f, ArrowLeft as p, Code as ce, Database as m, Download as le, Edit as h, Eye as g, EyeOff as _, Grid3X3 as v, Loader2 as y, RefreshCw as b, Trash2 as x } from "lucide-react";
-import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
-import { Button as T, Card as E, CardContent as D, CardHeader as O, CardTitle as k } from "@burdenoff/fe-libs/ui";
-import { formatDistanceToNow as A } from "date-fns";
+import ee from "../hooks/useDataSinkOperations.js";
+import n from "../components/datasink/DataSinkStatusBadge.js";
+import { isNative as r, nativeConfirm as i, nativeImpact as te, nativeNotify as a } from "../../utils/nativeBridge.js";
+import ne from "../hooks/useDataSinkSubscription.js";
+import re from "../components/datasink/DataSinkDataViewer.js";
+import ie from "../components/datasink/DataSinkTableViewer.js";
+import o from "../components/datasink/LinkedWorkflowsPanel.js";
+import s from "../components/datasink/LinkedParsersPanel.js";
+import c from "../components/datasink/WorkflowStatusPanel.js";
+import l from "../components/datasink/ExportDataSinkDialog.js";
+import { memo as u, useCallback as d, useEffect as ae, useState as f } from "react";
+import { useParams as p } from "react-router-dom";
+import { AlertCircle as oe, ArrowLeft as m, Code as se, Database as h, Download as g, Edit as _, Eye as v, EyeOff as y, Grid3X3 as b, Loader2 as x, RefreshCw as ce, Trash2 as le } from "lucide-react";
+import { Button as S, Card as ue, CardContent as C, CardHeader as w, CardTitle as T, GlassCard as de, IllustratedEmptyState as fe, NextSteps as pe, PagePurpose as me } from "@burdenoff/fe-libs/ui";
+import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
+import { formatDistanceToNow as k } from "date-fns";
 //#region src/bigconsole/pages/DataSinkViewPage.tsx
-var j = c(function() {
-	let { dataSinkId: c } = d(), j = t(), [M, N] = u(!1), [P, F] = u(!1), [I, L] = u(!1), [R, z] = u(!1), [B, V] = u(null), [H, U] = u(!1), [W, G] = u("table"), K = e((e) => c ? e.dataSinks.get(c) : void 0), { loading: ue, error: q, fetchDataSink: J, getDataSinkData: Y, refreshDataSink: X, deleteDataSink: Z } = n({ skipFetch: !0 });
-	te({
-		dataSinkId: c,
-		enabled: !!c
-	}), se(() => {
-		c && J(c);
-	}, [c, J]);
-	let Q = l(() => {
-		j("/datasinks");
-	}, [j]), de = l(() => {
-		j(`/datasinks/${c}/edit`);
-	}, [j, c]), $ = l(async () => {
-		if (c) {
-			F(!0);
+var A = u(function() {
+	let { dataSinkId: u } = p(), A = t(), [j, M] = f(!1), [N, P] = f(!1), [F, I] = f(!1), [L, R] = f(!1), [z, he] = f(null), [B, V] = f(!1), [H, U] = f("table"), W = e((e) => u ? e.dataSinks.get(u) : void 0), { loading: ge, error: G, fetchDataSink: K, getDataSinkData: q, refreshDataSink: J, deleteDataSink: Y } = ee({ skipFetch: !0 });
+	ne({
+		dataSinkId: u,
+		enabled: !!u
+	}), ae(() => {
+		u && K(u);
+	}, [u, K]);
+	let X = d(() => {
+		A("/datasinks");
+	}, [A]), _e = d(() => {
+		A(`/datasinks/${u}/edit`);
+	}, [A, u]), Z = d(async () => {
+		if (u) {
+			P(!0);
 			try {
-				await X({ id: c });
+				await J({ id: u });
 			} catch {} finally {
-				F(!1);
+				P(!1);
 			}
 		}
-	}, [c, X]), fe = l(async () => {
-		if (!c) return;
-		let e = await a({
+	}, [u, J]), ve = d(async () => {
+		if (!u) return;
+		let e = await i({
 			title: "Delete DataSink?",
 			message: "Are you sure you want to delete this DataSink?",
 			okButtonTitle: "Delete",
 			cancelButtonTitle: "Cancel"
 		});
 		if (e === null ? window.confirm("Are you sure you want to delete this DataSink?") : e) {
-			ee("medium"), L(!0);
+			te("medium"), I(!0);
 			try {
-				await Z(c), i() && o("success"), j("/datasinks");
+				await Y(u), r() && a("success"), A("/datasinks");
 			} catch {
-				i() && o("error");
+				r() && a("error");
 			} finally {
-				L(!1);
+				I(!1);
 			}
 		}
 	}, [
-		c,
-		Z,
-		j
-	]), pe = l(async () => {
-		if (c) {
-			if (M) {
-				N(!1);
+		u,
+		Y,
+		A
+	]), Q = d(async () => {
+		if (u) {
+			if (j) {
+				M(!1);
 				return;
 			}
-			U(!0);
+			V(!0);
 			try {
-				let e = await Y({ id: c });
-				e && V(e.raw || {}), N(!0);
+				let e = await q({ id: u });
+				e && he(e.raw || {}), M(!0);
 			} catch {} finally {
-				U(!1);
+				V(!1);
 			}
 		}
 	}, [
-		c,
-		M,
-		Y
-	]), me = l(() => {
-		z(!0);
-	}, []), he = l(() => {
-		z(!1);
+		u,
+		j,
+		q
+	]), $ = d(() => {
+		R(!0);
+	}, []), ye = d(() => {
+		R(!1);
 	}, []);
-	return ue && !K ? /* @__PURE__ */ C("div", {
+	return ge && !W ? /* @__PURE__ */ D("div", {
 		className: "flex items-center justify-center min-h-[400px]",
-		children: /* @__PURE__ */ C(y, { className: "w-8 h-8 text-text-secondary animate-spin" })
-	}) : q ? /* @__PURE__ */ C("div", {
+		children: /* @__PURE__ */ D(x, { className: "w-8 h-8 text-text-secondary animate-spin" })
+	}) : G ? /* @__PURE__ */ D("div", {
 		className: "flex items-center justify-center min-h-[400px] p-card-padding",
-		children: /* @__PURE__ */ w("div", {
+		children: /* @__PURE__ */ O("div", {
 			className: "text-center",
 			children: [
-				/* @__PURE__ */ C(f, { className: "w-12 h-12 text-state-error mx-auto mb-spacing-md" }),
-				/* @__PURE__ */ C("p", {
+				/* @__PURE__ */ D(oe, { className: "w-12 h-12 text-state-error mx-auto mb-spacing-md" }),
+				/* @__PURE__ */ D("p", {
 					className: "text-state-error text-body-sm font-medium mb-spacing-sm",
 					children: "Failed to load DataSink"
 				}),
-				/* @__PURE__ */ C("p", {
+				/* @__PURE__ */ D("p", {
 					className: "text-text-tertiary text-body-xs mb-spacing-lg",
-					children: q.message
+					children: G.message
 				}),
-				/* @__PURE__ */ w(T, {
-					onClick: Q,
+				/* @__PURE__ */ O(S, {
+					onClick: X,
 					variant: "ghost",
 					size: "sm",
-					children: [/* @__PURE__ */ C(p, { className: "w-4 h-4 mr-2" }), "Go back"]
+					children: [/* @__PURE__ */ D(m, { className: "w-4 h-4 mr-2" }), "Go back"]
 				})
 			]
 		})
-	}) : K ? /* @__PURE__ */ w("div", {
+	}) : W ? /* @__PURE__ */ O("div", {
 		className: "p-card-padding space-y-spacing-lg",
 		children: [
-			/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ O("div", {
 				className: "flex flex-col sm:flex-row sm:items-start sm:justify-between gap-spacing-md",
-				children: [/* @__PURE__ */ w("div", {
+				children: [/* @__PURE__ */ O("div", {
 					className: "flex-1",
 					children: [
-						/* @__PURE__ */ w(T, {
-							onClick: Q,
+						/* @__PURE__ */ O(S, {
+							onClick: X,
 							variant: "ghost",
 							size: "sm",
 							className: "mb-spacing-md",
-							children: [/* @__PURE__ */ C(p, { className: "w-4 h-4 mr-2" }), "Back to DataSinks"]
+							children: [/* @__PURE__ */ D(m, { className: "w-4 h-4 mr-2" }), "Back to DataSinks"]
 						}),
-						/* @__PURE__ */ w("div", {
+						/* @__PURE__ */ O("div", {
 							className: "flex items-center gap-spacing-sm flex-wrap",
-							children: [/* @__PURE__ */ C("h1", {
+							children: [/* @__PURE__ */ D("h1", {
 								className: "text-heading-h1 font-bold text-text-primary",
-								children: K.name || "Untitled"
-							}), /* @__PURE__ */ C(r, { status: K.status })]
+								children: W.name || "Untitled"
+							}), /* @__PURE__ */ D(n, { status: W.status })]
 						}),
-						/* @__PURE__ */ C("p", {
+						/* @__PURE__ */ D("p", {
 							className: "text-body-sm text-text-tertiary font-mono mt-spacing-xs",
-							children: K.key
+							children: W.key
 						}),
-						K.description && /* @__PURE__ */ C("p", {
+						W.description && /* @__PURE__ */ D("p", {
 							className: "text-body-sm text-text-secondary mt-spacing-sm",
-							children: K.description
+							children: W.description
 						})
 					]
-				}), /* @__PURE__ */ w("div", {
+				}), /* @__PURE__ */ O("div", {
 					className: "flex items-center gap-spacing-sm flex-wrap",
 					children: [
-						/* @__PURE__ */ w(T, {
-							onClick: $,
-							disabled: P,
+						/* @__PURE__ */ O(S, {
+							onClick: Z,
+							disabled: N,
 							variant: "secondary",
 							size: "default",
-							children: [/* @__PURE__ */ C(b, { className: `w-4 h-4 mr-2 ${P ? "animate-spin" : ""}` }), P ? "Refreshing..." : "Refresh"]
+							children: [/* @__PURE__ */ D(ce, { className: `w-4 h-4 mr-2 ${N ? "animate-spin" : ""}` }), N ? "Refreshing..." : "Refresh"]
 						}),
-						/* @__PURE__ */ w(T, {
-							onClick: me,
+						/* @__PURE__ */ O(S, {
+							onClick: $,
 							variant: "secondary",
 							size: "default",
-							children: [/* @__PURE__ */ C(le, { className: "w-4 h-4 mr-2" }), "Export"]
+							children: [/* @__PURE__ */ D(g, { className: "w-4 h-4 mr-2" }), "Export"]
 						}),
-						/* @__PURE__ */ w(T, {
-							onClick: de,
+						/* @__PURE__ */ O(S, {
+							onClick: _e,
 							variant: "secondary",
 							size: "default",
-							children: [/* @__PURE__ */ C(h, { className: "w-4 h-4 mr-2" }), "Edit"]
+							children: [/* @__PURE__ */ D(_, { className: "w-4 h-4 mr-2" }), "Edit"]
 						}),
-						/* @__PURE__ */ w(T, {
-							onClick: fe,
-							disabled: I,
+						/* @__PURE__ */ O(S, {
+							onClick: ve,
+							disabled: F,
 							variant: "destructive",
 							size: "default",
-							children: [/* @__PURE__ */ C(x, { className: "w-4 h-4 mr-2" }), I ? "Deleting..." : "Delete"]
+							children: [/* @__PURE__ */ D(le, { className: "w-4 h-4 mr-2" }), F ? "Deleting..." : "Delete"]
 						})
 					]
 				})]
 			}),
-			/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ D(me, { children: "A data sink is a structured store that holds your processed data and serves it to dashboards. From here you can inspect its schema and stats, preview the cached rows, refresh it from its linked workflow, or export it." }),
+			/* @__PURE__ */ D(pe, {
+				storageKey: "bigconsole-datasink-view",
+				steps: [
+					{
+						id: "preview",
+						label: "Preview the data",
+						description: "Open the cached rows to confirm the sink holds what you expect.",
+						onClick: Q
+					},
+					{
+						id: "refresh",
+						label: "Refresh from source",
+						description: "Re-run the linked workflow to pull the latest data.",
+						onClick: Z
+					},
+					{
+						id: "build-dashboard",
+						label: "Visualize it on a dashboard",
+						description: "Add widgets that query this sink to see your data live.",
+						onClick: () => A("/dashboards")
+					},
+					{
+						id: "export",
+						label: "Export the data",
+						description: "Download the contents for use elsewhere.",
+						onClick: $
+					}
+				]
+			}),
+			/* @__PURE__ */ O("div", {
 				className: "grid gap-spacing-lg md:grid-cols-2",
 				children: [
-					/* @__PURE__ */ w(E, { children: [/* @__PURE__ */ C(O, { children: /* @__PURE__ */ C(k, { children: "Details" }) }), /* @__PURE__ */ C(D, { children: /* @__PURE__ */ w("dl", {
-						className: "space-y-spacing-md text-body-sm",
-						children: [
-							/* @__PURE__ */ w("div", {
-								className: "flex justify-between items-center",
-								children: [/* @__PURE__ */ C("dt", {
-									className: "text-text-secondary",
-									children: "Status"
-								}), /* @__PURE__ */ C("dd", { children: /* @__PURE__ */ C(r, { status: K.status }) })]
-							}),
-							/* @__PURE__ */ w("div", {
-								className: "flex justify-between items-center",
-								children: [/* @__PURE__ */ C("dt", {
-									className: "text-text-secondary",
-									children: "Cache TTL"
-								}), /* @__PURE__ */ C("dd", {
-									className: "text-text-primary font-medium",
-									children: K.ttl ? `${K.ttl}s` : "None"
-								})]
-							}),
-							/* @__PURE__ */ w("div", {
-								className: "flex justify-between items-center",
-								children: [/* @__PURE__ */ C("dt", {
-									className: "text-text-secondary",
-									children: "Refresh Type"
-								}), /* @__PURE__ */ C("dd", {
-									className: "text-text-primary font-medium capitalize",
-									children: K.refresh?.type || "Manual"
-								})]
-							}),
-							/* @__PURE__ */ w("div", {
-								className: "flex justify-between items-center",
-								children: [/* @__PURE__ */ C("dt", {
-									className: "text-text-secondary",
-									children: "Size"
-								}), /* @__PURE__ */ C("dd", {
-									className: "text-text-primary font-medium",
-									children: K.sizeBytes ? `${(K.sizeBytes / 1024).toFixed(2)} KB` : "0 KB"
-								})]
-							}),
-							/* @__PURE__ */ w("div", {
-								className: "flex justify-between items-center",
-								children: [/* @__PURE__ */ C("dt", {
-									className: "text-text-secondary",
-									children: "Version"
-								}), /* @__PURE__ */ C("dd", {
-									className: "text-text-primary font-medium",
-									children: K.version || 1
-								})]
-							}),
-							/* @__PURE__ */ w("div", {
-								className: "flex justify-between items-center",
-								children: [/* @__PURE__ */ C("dt", {
-									className: "text-text-secondary",
-									children: "Last Refreshed"
-								}), /* @__PURE__ */ C("dd", {
-									className: "text-text-primary font-medium",
-									children: K.lastRefreshedAt ? A(new Date(K.lastRefreshedAt), { addSuffix: !0 }) : "Never"
-								})]
-							}),
-							/* @__PURE__ */ w("div", {
-								className: "flex justify-between items-center",
-								children: [/* @__PURE__ */ C("dt", {
-									className: "text-text-secondary",
-									children: "Created"
-								}), /* @__PURE__ */ C("dd", {
-									className: "text-text-primary font-medium",
-									children: A(new Date(K.createdAt), { addSuffix: !0 })
-								})]
-							})
-						]
-					}) })] }),
-					K.fluidGridsWorkflowId && /* @__PURE__ */ C(oe, {
-						workflowId: K.fluidGridsWorkflowId,
-						executionId: K.fluidGridsWorkflowExecutionId || void 0,
-						lastRefreshedAt: K.lastRefreshedAt || void 0,
-						setupState: K.setupState,
-						status: K.status,
-						onRerunWorkflow: $,
-						disabled: P,
-						isRerunning: P
+					/* @__PURE__ */ O(de, {
+						treatment: "glass",
+						glow: !0,
+						children: [/* @__PURE__ */ D(w, { children: /* @__PURE__ */ D(T, { children: "Details" }) }), /* @__PURE__ */ D(C, { children: /* @__PURE__ */ O("dl", {
+							className: "space-y-spacing-md text-body-sm",
+							children: [
+								/* @__PURE__ */ O("div", {
+									className: "flex justify-between items-center",
+									children: [/* @__PURE__ */ D("dt", {
+										className: "text-text-secondary",
+										children: "Status"
+									}), /* @__PURE__ */ D("dd", { children: /* @__PURE__ */ D(n, { status: W.status }) })]
+								}),
+								/* @__PURE__ */ O("div", {
+									className: "flex justify-between items-center",
+									children: [/* @__PURE__ */ D("dt", {
+										className: "text-text-secondary",
+										children: "Cache TTL"
+									}), /* @__PURE__ */ D("dd", {
+										className: "text-text-primary font-medium",
+										children: W.ttl ? `${W.ttl}s` : "None"
+									})]
+								}),
+								/* @__PURE__ */ O("div", {
+									className: "flex justify-between items-center",
+									children: [/* @__PURE__ */ D("dt", {
+										className: "text-text-secondary",
+										children: "Refresh Type"
+									}), /* @__PURE__ */ D("dd", {
+										className: "text-text-primary font-medium capitalize",
+										children: W.refresh?.type || "Manual"
+									})]
+								}),
+								/* @__PURE__ */ O("div", {
+									className: "flex justify-between items-center",
+									children: [/* @__PURE__ */ D("dt", {
+										className: "text-text-secondary",
+										children: "Size"
+									}), /* @__PURE__ */ D("dd", {
+										className: "text-text-primary font-medium",
+										children: W.sizeBytes ? `${(W.sizeBytes / 1024).toFixed(2)} KB` : "0 KB"
+									})]
+								}),
+								/* @__PURE__ */ O("div", {
+									className: "flex justify-between items-center",
+									children: [/* @__PURE__ */ D("dt", {
+										className: "text-text-secondary",
+										children: "Version"
+									}), /* @__PURE__ */ D("dd", {
+										className: "text-text-primary font-medium",
+										children: W.version || 1
+									})]
+								}),
+								/* @__PURE__ */ O("div", {
+									className: "flex justify-between items-center",
+									children: [/* @__PURE__ */ D("dt", {
+										className: "text-text-secondary",
+										children: "Last Refreshed"
+									}), /* @__PURE__ */ D("dd", {
+										className: "text-text-primary font-medium",
+										children: W.lastRefreshedAt ? k(new Date(W.lastRefreshedAt), { addSuffix: !0 }) : "Never"
+									})]
+								}),
+								/* @__PURE__ */ O("div", {
+									className: "flex justify-between items-center",
+									children: [/* @__PURE__ */ D("dt", {
+										className: "text-text-secondary",
+										children: "Created"
+									}), /* @__PURE__ */ D("dd", {
+										className: "text-text-primary font-medium",
+										children: k(new Date(W.createdAt), { addSuffix: !0 })
+									})]
+								})
+							]
+						}) })]
+					}),
+					W.fluidGridsWorkflowId && /* @__PURE__ */ D(c, {
+						workflowId: W.fluidGridsWorkflowId,
+						executionId: W.fluidGridsWorkflowExecutionId || void 0,
+						lastRefreshedAt: W.lastRefreshedAt || void 0,
+						setupState: W.setupState,
+						status: W.status,
+						onRerunWorkflow: Z,
+						disabled: N,
+						isRerunning: N
 					}),
-					/* @__PURE__ */ C(ie, { workflowLinks: K.workflowLinks }),
-					/* @__PURE__ */ C(ae, { dataSinkKey: K.key })
+					/* @__PURE__ */ D(o, { workflowLinks: W.workflowLinks }),
+					/* @__PURE__ */ D(s, { dataSinkKey: W.key })
 				]
 			}),
-			/* @__PURE__ */ w(E, { children: [
-				/* @__PURE__ */ w(O, {
+			/* @__PURE__ */ O(ue, { children: [
+				/* @__PURE__ */ O(w, {
 					className: "flex flex-row items-center justify-between space-y-0",
-					children: [/* @__PURE__ */ w(k, {
+					children: [/* @__PURE__ */ O(T, {
 						className: "flex items-center gap-spacing-sm",
-						children: [/* @__PURE__ */ C(m, { className: "w-4 h-4 text-text-secondary" }), "Data Preview"]
-					}), /* @__PURE__ */ w("div", {
+						children: [/* @__PURE__ */ D(h, { className: "w-4 h-4 text-text-secondary" }), "Data Preview"]
+					}), /* @__PURE__ */ O("div", {
 						className: "flex items-center gap-2",
-						children: [M && /* @__PURE__ */ w("div", {
+						children: [j && /* @__PURE__ */ O("div", {
 							className: "flex items-center border border-border-default rounded-md overflow-hidden",
-							children: [/* @__PURE__ */ C("button", {
+							children: [/* @__PURE__ */ D("button", {
 								type: "button",
-								onClick: () => G("table"),
-								className: `p-1.5 ${W === "table" ? "bg-bg-muted text-text-primary" : "text-text-secondary hover:text-text-primary"}`,
+								onClick: () => U("table"),
+								className: `p-1.5 ${H === "table" ? "bg-bg-sunken text-text-primary" : "text-text-secondary hover:text-text-primary"}`,
 								title: "Table view",
-								children: /* @__PURE__ */ C(v, { className: "w-4 h-4" })
-							}), /* @__PURE__ */ C("button", {
+								children: /* @__PURE__ */ D(b, { className: "w-4 h-4" })
+							}), /* @__PURE__ */ D("button", {
 								type: "button",
-								onClick: () => G("json"),
-								className: `p-1.5 ${W === "json" ? "bg-bg-muted text-text-primary" : "text-text-secondary hover:text-text-primary"}`,
+								onClick: () => U("json"),
+								className: `p-1.5 ${H === "json" ? "bg-bg-sunken text-text-primary" : "text-text-secondary hover:text-text-primary"}`,
 								title: "JSON view",
-								children: /* @__PURE__ */ C(ce, { className: "w-4 h-4" })
+								children: /* @__PURE__ */ D(se, { className: "w-4 h-4" })
 							})]
-						}), /* @__PURE__ */ C(T, {
-							onClick: pe,
-							disabled: H,
-							variant: M ? "secondary" : "default",
+						}), /* @__PURE__ */ D(S, {
+							onClick: Q,
+							disabled: B,
+							variant: j ? "secondary" : "default",
 							size: "sm",
-							children: H ? /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(y, { className: "w-4 h-4 mr-2 animate-spin" }), "Loading..."] }) : M ? /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(_, { className: "w-4 h-4 mr-2" }), "Hide Data"] }) : /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(g, { className: "w-4 h-4 mr-2" }), "Show Data"] })
+							children: B ? /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D(x, { className: "w-4 h-4 mr-2 animate-spin" }), "Loading..."] }) : j ? /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D(y, { className: "w-4 h-4 mr-2" }), "Hide Data"] }) : /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D(v, { className: "w-4 h-4 mr-2" }), "Show Data"] })
 						})]
 					})]
 				}),
-				M && B && /* @__PURE__ */ C(D, { children: C(W === "table" ? re : ne, {
-					data: B,
+				j && z && /* @__PURE__ */ D(C, { children: D(H === "table" ? ie : re, {
+					data: z,
 					maxHeight: "400px"
 				}) }),
-				!M && /* @__PURE__ */ w(D, {
+				!j && /* @__PURE__ */ O(C, {
 					className: "text-center p-spacing-xl",
-					children: [/* @__PURE__ */ C(m, { className: "w-10 h-10 text-text-tertiary mx-auto mb-spacing-md" }), /* @__PURE__ */ C("p", {
+					children: [/* @__PURE__ */ D(h, { className: "w-10 h-10 text-text-tertiary mx-auto mb-spacing-md" }), /* @__PURE__ */ D("p", {
 						className: "text-body-sm text-text-secondary",
 						children: "Click \"Show Data\" to preview the cached data."
 					})]
 				})
 			] }),
-			/* @__PURE__ */ C(s, {
-				isOpen: R,
-				dataSinkId: c || null,
-				dataSinkName: K.name || K.key,
-				onClose: he
+			/* @__PURE__ */ D(l, {
+				isOpen: L,
+				dataSinkId: u || null,
+				dataSinkName: W.name || W.key,
+				onClose: ye
 			})
 		]
-	}) : /* @__PURE__ */ C("div", {
+	}) : /* @__PURE__ */ D("div", {
 		className: "flex items-center justify-center min-h-[400px] p-card-padding",
-		children: /* @__PURE__ */ w("div", {
-			className: "text-center",
-			children: [
-				/* @__PURE__ */ C(m, { className: "w-12 h-12 text-text-tertiary mx-auto mb-spacing-md" }),
-				/* @__PURE__ */ C("p", {
-					className: "text-text-primary text-heading-h3 font-medium mb-spacing-sm",
-					children: "DataSink not found"
-				}),
-				/* @__PURE__ */ C("p", {
-					className: "text-text-secondary text-body-sm mb-spacing-lg",
-					children: "The DataSink you're looking for doesn't exist or has been deleted."
-				}),
-				/* @__PURE__ */ w(T, {
-					onClick: Q,
-					variant: "default",
-					size: "default",
-					children: [/* @__PURE__ */ C(p, { className: "w-4 h-4 mr-2" }), "Go back to DataSinks"]
-				})
-			]
+		children: /* @__PURE__ */ D(fe, {
+			illustration: "empty-data",
+			title: "DataSink not found",
+			description: "The DataSink you're looking for doesn't exist or has been deleted.",
+			action: /* @__PURE__ */ O(S, {
+				onClick: X,
+				variant: "default",
+				size: "default",
+				children: [/* @__PURE__ */ D(m, { className: "w-4 h-4 mr-2" }), "Go back to DataSinks"]
+			})
 		})
 	});
 });
 //#endregion
-export { j as DataSinkViewPage, j as default };
+export { A as DataSinkViewPage, A as default };
 
 //# sourceMappingURL=DataSinkViewPage.js.map