@burdenoff/microfe-bigconsole 2026.1004.2 → 2026.1004.4

package/dist/bigconsole/pages/DataSinkViewPage.js

@@ -11,33 +11,34 @@ import { BIGCONSOLE_PERMISSIONS as i } from "../../constants/permissions.js";
 import a from "../components/datasink/DataSinkStatusBadge.js";
 import { isNative as o, nativeConfirm as re, nativeImpact as ie, nativeNotify as s } from "../../utils/nativeBridge.js";
 import ae from "../hooks/useDataSinkSubscription.js";
-import oe from "../components/datasink/DataSinkDataViewer.js";
-import se from "../components/datasink/LinkedWorkflowsPanel.js";
-import ce from "../components/datasink/LinkedParsersPanel.js";
-import le from "../components/datasink/WorkflowStatusPanel.js";
-import ue from "../components/datasink/ExportDataSinkDialog.js";
-import de from "../components/datasink/ImportDataGuideDialog.js";
-import { memo as c, useCallback as l, useEffect as fe, useState as u } from "react";
-import { useParams as pe } from "react-router";
-import { AccessDenied as me, PermissionButton as d } from "@burdenoff/fe-libs/shared/components";
-import { usePermissions as he } from "@burdenoff/fe-libs/shared/providers/shell";
-import { AlertCircle as ge, ArrowLeft as f, Code as _e, Database as p, Download as ve, Edit as ye, Eye as be, EyeOff as xe, Grid3X3 as Se, Loader2 as m, RefreshCw as Ce, Trash2 as we, Upload as h } from "lucide-react";
-import { Button as g, IllustratedEmptyState as Te, NextSteps as Ee, PagePurpose as De } from "@burdenoff/fe-libs/ui";
+import { formatByteSize as oe } from "../utils/format.js";
+import se from "../components/datasink/DataSinkDataViewer.js";
+import ce from "../components/datasink/LinkedWorkflowsPanel.js";
+import le from "../components/datasink/LinkedParsersPanel.js";
+import ue from "../components/datasink/WorkflowStatusPanel.js";
+import de from "../components/datasink/ExportDataSinkDialog.js";
+import fe from "../components/datasink/ImportDataGuideDialog.js";
+import { memo as c, useCallback as l, useEffect as pe, useState as u } from "react";
+import { useParams as me } from "react-router";
+import { AccessDenied as he, PermissionButton as d } from "@burdenoff/fe-libs/shared/components";
+import { usePermissions as ge } from "@burdenoff/fe-libs/shared/providers/shell";
+import { AlertCircle as _e, ArrowLeft as f, Code as ve, Database as p, Download as ye, Edit as be, Eye as xe, EyeOff as Se, Grid3X3 as Ce, Loader2 as m, RefreshCw as we, Trash2 as Te, Upload as h } from "lucide-react";
+import { Button as g, IllustratedEmptyState as Ee, NextSteps as De, PagePurpose as Oe } from "@burdenoff/fe-libs/ui";
 import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
-import { useI18n as Oe } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { useI18n as ke } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 import { formatDistanceToNow as b } from "date-fns";
 //#region src/bigconsole/pages/DataSinkViewPage.tsx
 var x = "focus-visible:ring-inset focus-visible:ring-offset-0", S = c(function() {
-	let { dataSinkId: c } = pe(), S = t(), { t: C } = Oe(), { hasPermission: ke, isLoading: Ae } = he(), je = ke(i.DATASINK_READ), [w, T] = u(!1), [E, D] = u(!1), [O, k] = u(!1), [Me, A] = u(!1), [Ne, j] = u(!1), [M, Pe] = u(null), [N, P] = u(!1), [F, I] = u("table"), [L, Fe] = u(100), [R, Ie] = u(0), [z, B] = u(null), [Le, Re] = u(!1), V = e((e) => c ? e.dataSinks.get(c) : void 0), { loading: ze, error: H, fetchDataSink: U, getDataSinkData: W, refreshDataSink: G, updateDataSink: K, deleteDataSink: q } = ne({ skipFetch: !0 });
+	let { dataSinkId: c } = me(), S = t(), { t: C } = ke(), { hasPermission: Ae, isLoading: je } = ge(), Me = Ae(i.DATASINK_READ), [w, T] = u(!1), [E, D] = u(!1), [O, k] = u(!1), [A, j] = u(!1), [Ne, M] = u(!1), [N, Pe] = u(null), [P, F] = u(!1), [I, L] = u("table"), [R, Fe] = u(100), [z, Ie] = u(0), [B, Le] = u(null), [Re, ze] = u(!1), V = e((e) => c ? e.dataSinks.get(c) : void 0), { loading: Be, error: H, fetchDataSink: U, getDataSinkData: W, refreshDataSink: G, updateDataSink: K, deleteDataSink: q } = ne({ skipFetch: !0 });
 	ae({
 		dataSinkId: c,
 		enabled: !!c
-	}), fe(() => {
+	}), pe(() => {
 		c && U(c);
 	}, [c, U]);
 	let J = l(() => {
 		S("/datasinks");
-	}, [S]), Be = l(() => {
+	}, [S]), Ve = l(() => {
 		S(`/datasinks/${c}/edit`);
 	}, [S, c]), Y = l(async () => {
 		if (c) {
@@ -48,7 +49,7 @@ var x = "focus-visible:ring-inset focus-visible:ring-offset-0", S = c(function()
 				D(!1);
 			}
 		}
-	}, [c, G]), Ve = l(async () => {
+	}, [c, G]), He = l(async () => {
 		if (!c) return;
 		let e = await re({
 			title: C("bigconsole.dataSinks.view.deleteConfirmTitle", "Delete DataSink?"),
@@ -73,15 +74,15 @@ var x = "focus-visible:ring-inset focus-visible:ring-offset-0", S = c(function()
 		C
 	]), X = l(async (e, t) => {
 		if (c) {
-			P(!0);
+			F(!0);
 			try {
 				let n = await W({ id: c }, {
 					limit: t,
 					offset: e
 				});
-				n && (Pe(n.raw || {}), B(typeof n.totalCount == "number" ? n.totalCount : null), Re(!!n.hasMore), Ie(e));
+				n && (Pe(n.raw || {}), Le(typeof n.totalCount == "number" ? n.totalCount : null), ze(!!n.hasMore), Ie(e));
 			} catch {} finally {
-				P(!1);
+				F(!1);
 			}
 		}
 	}, [c, W]), Z = l(async () => {
@@ -90,42 +91,42 @@ var x = "focus-visible:ring-inset focus-visible:ring-offset-0", S = c(function()
 				T(!1);
 				return;
 			}
-			await X(0, L), T(!0);
+			await X(0, R), T(!0);
 		}
 	}, [
 		c,
 		w,
 		X,
-		L
-	]), He = l((e) => {
+		R
+	]), Ue = l((e) => {
 		Fe(e), X(0, e);
 	}, [X]), Q = l(() => {
-		A(!0);
-	}, []), Ue = l(() => {
-		A(!1);
-	}, []), $ = l(() => {
 		j(!0);
 	}, []), We = l(() => {
 		j(!1);
+	}, []), $ = l(() => {
+		M(!0);
 	}, []), Ge = l(() => {
-		j(!1), S(n());
-	}, [S]), Ke = l(async (e) => {
+		M(!1);
+	}, []), Ke = l(() => {
+		M(!1), S(n());
+	}, [S]), qe = l(async (e) => {
 		if (!V || !await K({
 			id: V.id,
 			version: V.version,
 			data: e
 		})) return !1;
 		try {
-			await X(0, L), T(!0);
+			await X(0, R), T(!0);
 		} catch {}
 		return !0;
 	}, [
 		V,
 		K,
 		X,
-		L
+		R
 	]);
-	return ze && !V ? /* @__PURE__ */ v("div", {
+	return Be && !V ? /* @__PURE__ */ v("div", {
 		className: "flex min-h-[240px] items-center justify-center p-card-padding",
 		children: /* @__PURE__ */ v(m, { className: "h-icon-lg w-icon-lg animate-spin text-text-secondary" })
 	}) : H && !V ? /* @__PURE__ */ v("div", {
@@ -135,7 +136,7 @@ var x = "focus-visible:ring-inset focus-visible:ring-offset-0", S = c(function()
 			headingLevel: 2,
 			title: C("bigconsole.dataSinks.view.loadError", "Failed to load DataSink"),
 			description: H.message,
-			icon: /* @__PURE__ */ v(ge, { className: "h-icon-sm w-icon-sm" }),
+			icon: /* @__PURE__ */ v(_e, { className: "h-icon-sm w-icon-sm" }),
 			actions: /* @__PURE__ */ y(g, {
 				onClick: J,
 				variant: "secondary",
@@ -143,7 +144,7 @@ var x = "focus-visible:ring-inset focus-visible:ring-offset-0", S = c(function()
 				children: [/* @__PURE__ */ v(f, { className: "w-4 h-4 mr-2" }), C("bigconsole.dataSinks.view.goBack", "Go back")]
 			})
 		})
-	}) : !Ae && !je ? /* @__PURE__ */ v(me, {
+	}) : !je && !Me ? /* @__PURE__ */ v(he, {
 		title: C("bigconsole.dataSinks.view.accessDeniedTitle", "Access Denied"),
 		description: C("bigconsole.dataSinks.view.accessDeniedDescription", "You don't have permission to view this data sink.")
 	}) : V ? /* @__PURE__ */ y("div", {
@@ -163,10 +164,17 @@ var x = "focus-visible:ring-inset focus-visible:ring-offset-0", S = c(function()
 						}),
 						/* @__PURE__ */ y("div", {
 							className: "flex flex-wrap items-center gap-2",
-							children: [/* @__PURE__ */ v("h1", {
-								className: "text-2xl font-bold text-text-primary",
-								children: V.name || C("bigconsole.dataSinks.view.untitled", "Untitled")
-							}), /* @__PURE__ */ v(a, { status: V.status })]
+							children: [
+								/* @__PURE__ */ v("h1", {
+									className: "text-2xl font-bold text-text-primary",
+									children: V.name || C("bigconsole.dataSinks.view.untitled", "Untitled")
+								}),
+								/* @__PURE__ */ v(a, { status: V.status }),
+								/* @__PURE__ */ y("span", {
+									className: "rounded-pill border border-border-subtle px-2 py-1 text-xs text-text-secondary",
+									children: ["v", V.version]
+								})
+							]
 						}),
 						/* @__PURE__ */ v("p", {
 							className: "mt-1 break-all font-mono text-sm text-text-muted",
@@ -188,7 +196,7 @@ var x = "focus-visible:ring-inset focus-visible:ring-offset-0", S = c(function()
 								disabled: E,
 								variant: "default",
 								size: "default",
-								children: [/* @__PURE__ */ v(Ce, { className: `w-4 h-4 mr-2 ${E ? "animate-spin" : ""}` }), E ? C("bigconsole.dataSinks.view.refreshing", "Refreshing...") : C("bigconsole.dataSinks.view.refresh", "Refresh")]
+								children: [/* @__PURE__ */ v(we, { className: `w-4 h-4 mr-2 ${E ? "animate-spin" : ""}` }), E ? C("bigconsole.dataSinks.view.refreshing", "Refreshing...") : C("bigconsole.dataSinks.view.refresh", "Refresh")]
 							})
 						}),
 						/* @__PURE__ */ y(g, {
@@ -201,37 +209,241 @@ var x = "focus-visible:ring-inset focus-visible:ring-offset-0", S = c(function()
 							onClick: Q,
 							variant: "secondary",
 							size: "default",
-							children: [/* @__PURE__ */ v(ve, { className: "w-4 h-4 mr-2" }), C("bigconsole.dataSinks.view.export", "Export")]
+							children: [/* @__PURE__ */ v(ye, { className: "w-4 h-4 mr-2" }), C("bigconsole.dataSinks.view.export", "Export")]
 						}),
 						/* @__PURE__ */ v(d, {
 							permission: i.DATASINK_UPDATE,
 							deniedBehavior: "disable",
 							children: /* @__PURE__ */ y(g, {
-								onClick: Be,
+								onClick: Ve,
 								variant: "secondary",
 								size: "default",
-								children: [/* @__PURE__ */ v(ye, { className: "w-4 h-4 mr-2" }), C("bigconsole.dataSinks.view.edit", "Edit")]
+								children: [/* @__PURE__ */ v(be, { className: "w-4 h-4 mr-2" }), C("bigconsole.dataSinks.view.edit", "Edit")]
 							})
 						}),
 						/* @__PURE__ */ v(d, {
 							permission: i.DATASINK_DELETE,
 							deniedBehavior: "hide",
 							children: /* @__PURE__ */ y(g, {
-								onClick: Ve,
+								onClick: He,
 								disabled: O,
 								variant: "destructive",
 								size: "default",
-								children: [/* @__PURE__ */ v(we, { className: "w-4 h-4 mr-2" }), O ? C("bigconsole.dataSinks.view.deleting", "Deleting...") : C("bigconsole.dataSinks.view.delete", "Delete")]
+								children: [/* @__PURE__ */ v(Te, { className: "w-4 h-4 mr-2" }), O ? C("bigconsole.dataSinks.view.deleting", "Deleting...") : C("bigconsole.dataSinks.view.delete", "Delete")]
 							})
 						})
 					]
 				})]
 			}),
-			/* @__PURE__ */ v(De, {
+			/* @__PURE__ */ v(Oe, {
 				className: "mb-section-gap",
 				children: C("bigconsole.dataSinks.view.pagePurpose", "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__ */ v(Ee, {
+			/* @__PURE__ */ y(ee, {
+				className: "mt-section-gap",
+				children: [/* @__PURE__ */ y("div", {
+					className: "grid min-w-0 gap-section-gap lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]",
+					children: [/* @__PURE__ */ v(r, {
+						headingLevel: 2,
+						title: C("bigconsole.dataSinks.view.details", "Details"),
+						description: "Cache, refresh and storage settings for this sink.",
+						children: /* @__PURE__ */ y("dl", {
+							className: "divide-y divide-[var(--color-border-subtle)] text-sm",
+							children: [
+								/* @__PURE__ */ y("div", {
+									className: "flex flex-wrap items-center justify-between gap-x-form-gap gap-y-1 py-2 first:pt-0",
+									children: [/* @__PURE__ */ v("dt", {
+										className: "min-w-0 text-text-secondary",
+										children: C("bigconsole.dataSinks.view.status", "Status")
+									}), /* @__PURE__ */ v("dd", { children: /* @__PURE__ */ v(a, {
+										status: V.status,
+										size: "sm"
+									}) })]
+								}),
+								/* @__PURE__ */ y("div", {
+									className: "flex flex-wrap items-center justify-between gap-x-form-gap gap-y-1 py-2",
+									children: [/* @__PURE__ */ v("dt", {
+										className: "min-w-0 text-text-secondary",
+										children: C("bigconsole.dataSinks.view.cacheTtl", "Cache TTL")
+									}), /* @__PURE__ */ v("dd", {
+										className: "font-medium text-text-primary",
+										children: V.ttl ? `${V.ttl}s` : C("bigconsole.dataSinks.view.none", "None")
+									})]
+								}),
+								/* @__PURE__ */ y("div", {
+									className: "flex flex-wrap items-center justify-between gap-x-form-gap gap-y-1 py-2",
+									children: [/* @__PURE__ */ v("dt", {
+										className: "min-w-0 text-text-secondary",
+										children: C("bigconsole.dataSinks.view.refreshType", "Refresh Type")
+									}), /* @__PURE__ */ v("dd", {
+										className: "font-medium capitalize text-text-primary",
+										children: V.refresh?.type || C("bigconsole.dataSinks.view.manual", "Manual")
+									})]
+								}),
+								/* @__PURE__ */ y("div", {
+									className: "flex flex-wrap items-center justify-between gap-x-form-gap gap-y-1 py-2",
+									children: [/* @__PURE__ */ v("dt", {
+										className: "min-w-0 text-text-secondary",
+										children: C("bigconsole.dataSinks.view.size", "Size")
+									}), /* @__PURE__ */ v("dd", {
+										className: "font-medium text-text-primary",
+										children: oe(V.sizeBytes || 0)
+									})]
+								}),
+								/* @__PURE__ */ y("div", {
+									className: "flex flex-wrap items-center justify-between gap-x-form-gap gap-y-1 py-2",
+									children: [/* @__PURE__ */ v("dt", {
+										className: "min-w-0 text-text-secondary",
+										children: C("bigconsole.dataSinks.view.version", "Version")
+									}), /* @__PURE__ */ v("dd", {
+										className: "font-medium text-text-primary",
+										children: V.version || 1
+									})]
+								}),
+								/* @__PURE__ */ y("div", {
+									className: "flex flex-wrap items-center justify-between gap-x-form-gap gap-y-1 py-2",
+									children: [/* @__PURE__ */ v("dt", {
+										className: "min-w-0 text-text-secondary",
+										children: C("bigconsole.dataSinks.view.lastRefreshed", "Last Refreshed")
+									}), /* @__PURE__ */ v("dd", {
+										className: "font-medium text-text-primary",
+										children: V.lastRefreshedAt ? b(new Date(V.lastRefreshedAt), { addSuffix: !0 }) : C("bigconsole.dataSinks.view.never", "Never")
+									})]
+								}),
+								/* @__PURE__ */ y("div", {
+									className: "flex flex-wrap items-center justify-between gap-x-form-gap gap-y-1 py-2 last:pb-0",
+									children: [/* @__PURE__ */ v("dt", {
+										className: "min-w-0 text-text-secondary",
+										children: C("bigconsole.dataSinks.view.created", "Created")
+									}), /* @__PURE__ */ v("dd", {
+										className: "font-medium text-text-primary",
+										children: b(new Date(V.createdAt), { addSuffix: !0 })
+									})]
+								})
+							]
+						})
+					}), /* @__PURE__ */ y(r, {
+						emphasis: "primary",
+						headingLevel: 2,
+						title: C("bigconsole.dataSinks.view.dataPreview", "Data Preview"),
+						description: "The rows this sink is currently serving to dashboards.",
+						icon: /* @__PURE__ */ v(p, { className: "h-icon-sm w-icon-sm" }),
+						actions: /* @__PURE__ */ y(_, { children: [w && /* @__PURE__ */ y("div", {
+							role: "group",
+							"aria-label": C("bigconsole.dataSinks.view.dataPreview", "Data Preview"),
+							className: "flex items-center overflow-hidden rounded-button border border-[var(--color-border-default)]",
+							children: [/* @__PURE__ */ v("button", {
+								type: "button",
+								onClick: () => L("table"),
+								"aria-pressed": I === "table",
+								className: `flex h-control-md w-[var(--size-controlHeight-md)] items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${x} ${I === "table" ? "bg-bg-sunken text-text-primary" : "text-text-secondary hover:text-text-primary"}`,
+								title: C("bigconsole.dataSinks.view.tableView", "Table view"),
+								children: /* @__PURE__ */ v(Ce, { className: "w-4 h-4" })
+							}), /* @__PURE__ */ v("button", {
+								type: "button",
+								onClick: () => L("json"),
+								"aria-pressed": I === "json",
+								className: `flex h-control-md w-[var(--size-controlHeight-md)] items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${x} ${I === "json" ? "bg-bg-sunken text-text-primary" : "text-text-secondary hover:text-text-primary"}`,
+								title: C("bigconsole.dataSinks.view.jsonView", "JSON view"),
+								children: /* @__PURE__ */ v(ve, { className: "w-4 h-4" })
+							})]
+						}), /* @__PURE__ */ v(g, {
+							onClick: Z,
+							disabled: P,
+							variant: w ? "secondary" : "default",
+							size: "sm",
+							children: P ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(m, { className: "w-4 h-4 mr-2 animate-spin" }), C("bigconsole.dataSinks.view.loading", "Loading...")] }) : w ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(Se, { className: "w-4 h-4 mr-2" }), C("bigconsole.dataSinks.view.hideData", "Hide Data")] }) : /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(xe, { className: "w-4 h-4 mr-2" }), C("bigconsole.dataSinks.view.showData", "Show Data")] })
+						})] }),
+						children: [w && N && /* @__PURE__ */ y(_, { children: [v(I === "table" ? te : se, {
+							data: N,
+							maxHeight: "400px"
+						}), B !== null && /* @__PURE__ */ y("div", {
+							className: "mt-form-gap flex flex-wrap items-center justify-between gap-form-gap border-t border-[var(--color-border-subtle)] pt-form-gap",
+							children: [/* @__PURE__ */ y("label", {
+								className: "flex items-center gap-2 text-sm text-text-secondary",
+								children: [/* @__PURE__ */ v("span", { children: C("bigconsole.dataSinks.view.rowsPerPage", "Rows per page") }), /* @__PURE__ */ v("select", {
+									"aria-label": C("bigconsole.dataSinks.view.rowsPerPage", "Rows per page"),
+									className: "h-control-md rounded-input border border-[var(--color-border-default)] bg-bg-canvas px-2 text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+									value: R,
+									onChange: (e) => Ue(Number(e.target.value)),
+									children: [
+										100,
+										500,
+										1e3
+									].map((e) => /* @__PURE__ */ v("option", {
+										value: e,
+										children: e
+									}, e))
+								})]
+							}), /* @__PURE__ */ y("div", {
+								className: "flex flex-wrap items-center gap-control-gap text-sm text-text-secondary",
+								children: [
+									/* @__PURE__ */ v("span", { children: B === 0 ? C("bigconsole.dataSinks.view.zeroRows", "0 rows") : C("bigconsole.dataSinks.view.rowRange", "{{start}}–{{end}} of {{total}}", {
+										start: z + 1,
+										end: Math.min(z + R, B),
+										total: B
+									}) }),
+									/* @__PURE__ */ v(g, {
+										variant: "secondary",
+										size: "sm",
+										disabled: z === 0 || P,
+										onClick: () => void X(Math.max(0, z - R), R),
+										children: C("bigconsole.dataSinks.view.previous", "Previous")
+									}),
+									/* @__PURE__ */ v(g, {
+										variant: "secondary",
+										size: "sm",
+										disabled: !Re || P,
+										onClick: () => void X(z + R, R),
+										children: C("bigconsole.dataSinks.view.next", "Next")
+									})
+								]
+							})]
+						})] }), !w && (V.sizeBytes > 0 || V.data && Object.keys(V.data).length > 0 ? /* @__PURE__ */ y("p", {
+							className: "flex items-center gap-icon-gap text-sm text-text-secondary",
+							children: [/* @__PURE__ */ v(p, {
+								"aria-hidden": "true",
+								className: "h-icon-sm w-icon-sm shrink-0 text-text-muted"
+							}), C("bigconsole.dataSinks.view.showDataHint", "Click \"Show Data\" to preview the cached data.")]
+						}) : /* @__PURE__ */ y("div", {
+							className: "flex flex-col items-center gap-form-gap py-form-gap text-center",
+							children: [
+								/* @__PURE__ */ v(p, {
+									"aria-hidden": "true",
+									className: "h-icon-lg w-icon-lg text-text-muted"
+								}),
+								/* @__PURE__ */ v("p", {
+									className: "text-sm text-text-secondary",
+									children: C("bigconsole.dataSinks.view.noDataYet", "This data sink has no data yet. Upload a CSV or build a workflow to import data.")
+								}),
+								/* @__PURE__ */ y(g, {
+									onClick: $,
+									variant: "default",
+									size: "sm",
+									children: [/* @__PURE__ */ v(h, { className: "w-4 h-4 mr-2" }), C("bigconsole.dataSinks.view.importData", "Import Data")]
+								})
+							]
+						}))]
+					})]
+				}), /* @__PURE__ */ y("div", {
+					className: "grid min-w-0 gap-section-gap md:grid-cols-2",
+					children: [
+						V.fluidGridsWorkflowId && /* @__PURE__ */ v(ue, {
+							workflowId: V.fluidGridsWorkflowId,
+							executionId: V.fluidGridsWorkflowExecutionId || void 0,
+							lastRefreshedAt: V.lastRefreshedAt || void 0,
+							setupState: V.setupState,
+							status: V.status,
+							onRerunWorkflow: Y,
+							disabled: E,
+							isRerunning: E
+						}),
+						/* @__PURE__ */ v(ce, { workflowLinks: V.workflowLinks }),
+						/* @__PURE__ */ v(le, { dataSinkKey: V.key })
+					]
+				})]
+			}),
+			/* @__PURE__ */ v(De, {
 				storageKey: "bigconsole-datasink-view",
 				steps: [
 					{
@@ -260,226 +472,24 @@ var x = "focus-visible:ring-inset focus-visible:ring-offset-0", S = c(function()
 					}
 				]
 			}),
-			/* @__PURE__ */ y(ee, {
-				className: "mt-section-gap",
-				children: [/* @__PURE__ */ y("div", {
-					className: "grid min-w-0 gap-section-gap md:grid-cols-2",
-					children: [
-						/* @__PURE__ */ v(r, {
-							headingLevel: 2,
-							title: C("bigconsole.dataSinks.view.details", "Details"),
-							description: "Cache, refresh and storage settings for this sink.",
-							children: /* @__PURE__ */ y("dl", {
-								className: "divide-y divide-[var(--color-border-subtle)] text-sm",
-								children: [
-									/* @__PURE__ */ y("div", {
-										className: "flex flex-wrap items-center justify-between gap-x-form-gap gap-y-1 py-2 first:pt-0",
-										children: [/* @__PURE__ */ v("dt", {
-											className: "min-w-0 text-text-secondary",
-											children: C("bigconsole.dataSinks.view.status", "Status")
-										}), /* @__PURE__ */ v("dd", { children: /* @__PURE__ */ v(a, {
-											status: V.status,
-											size: "sm"
-										}) })]
-									}),
-									/* @__PURE__ */ y("div", {
-										className: "flex flex-wrap items-center justify-between gap-x-form-gap gap-y-1 py-2",
-										children: [/* @__PURE__ */ v("dt", {
-											className: "min-w-0 text-text-secondary",
-											children: C("bigconsole.dataSinks.view.cacheTtl", "Cache TTL")
-										}), /* @__PURE__ */ v("dd", {
-											className: "font-medium text-text-primary",
-											children: V.ttl ? `${V.ttl}s` : C("bigconsole.dataSinks.view.none", "None")
-										})]
-									}),
-									/* @__PURE__ */ y("div", {
-										className: "flex flex-wrap items-center justify-between gap-x-form-gap gap-y-1 py-2",
-										children: [/* @__PURE__ */ v("dt", {
-											className: "min-w-0 text-text-secondary",
-											children: C("bigconsole.dataSinks.view.refreshType", "Refresh Type")
-										}), /* @__PURE__ */ v("dd", {
-											className: "font-medium capitalize text-text-primary",
-											children: V.refresh?.type || C("bigconsole.dataSinks.view.manual", "Manual")
-										})]
-									}),
-									/* @__PURE__ */ y("div", {
-										className: "flex flex-wrap items-center justify-between gap-x-form-gap gap-y-1 py-2",
-										children: [/* @__PURE__ */ v("dt", {
-											className: "min-w-0 text-text-secondary",
-											children: C("bigconsole.dataSinks.view.size", "Size")
-										}), /* @__PURE__ */ v("dd", {
-											className: "font-medium text-text-primary",
-											children: V.sizeBytes ? `${(V.sizeBytes / 1024).toFixed(2)} KB` : "0 KB"
-										})]
-									}),
-									/* @__PURE__ */ y("div", {
-										className: "flex flex-wrap items-center justify-between gap-x-form-gap gap-y-1 py-2",
-										children: [/* @__PURE__ */ v("dt", {
-											className: "min-w-0 text-text-secondary",
-											children: C("bigconsole.dataSinks.view.version", "Version")
-										}), /* @__PURE__ */ v("dd", {
-											className: "font-medium text-text-primary",
-											children: V.version || 1
-										})]
-									}),
-									/* @__PURE__ */ y("div", {
-										className: "flex flex-wrap items-center justify-between gap-x-form-gap gap-y-1 py-2",
-										children: [/* @__PURE__ */ v("dt", {
-											className: "min-w-0 text-text-secondary",
-											children: C("bigconsole.dataSinks.view.lastRefreshed", "Last Refreshed")
-										}), /* @__PURE__ */ v("dd", {
-											className: "font-medium text-text-primary",
-											children: V.lastRefreshedAt ? b(new Date(V.lastRefreshedAt), { addSuffix: !0 }) : C("bigconsole.dataSinks.view.never", "Never")
-										})]
-									}),
-									/* @__PURE__ */ y("div", {
-										className: "flex flex-wrap items-center justify-between gap-x-form-gap gap-y-1 py-2 last:pb-0",
-										children: [/* @__PURE__ */ v("dt", {
-											className: "min-w-0 text-text-secondary",
-											children: C("bigconsole.dataSinks.view.created", "Created")
-										}), /* @__PURE__ */ v("dd", {
-											className: "font-medium text-text-primary",
-											children: b(new Date(V.createdAt), { addSuffix: !0 })
-										})]
-									})
-								]
-							})
-						}),
-						V.fluidGridsWorkflowId && /* @__PURE__ */ v(le, {
-							workflowId: V.fluidGridsWorkflowId,
-							executionId: V.fluidGridsWorkflowExecutionId || void 0,
-							lastRefreshedAt: V.lastRefreshedAt || void 0,
-							setupState: V.setupState,
-							status: V.status,
-							onRerunWorkflow: Y,
-							disabled: E,
-							isRerunning: E
-						}),
-						/* @__PURE__ */ v(se, { workflowLinks: V.workflowLinks }),
-						/* @__PURE__ */ v(ce, { dataSinkKey: V.key })
-					]
-				}), /* @__PURE__ */ y(r, {
-					emphasis: "primary",
-					headingLevel: 2,
-					title: C("bigconsole.dataSinks.view.dataPreview", "Data Preview"),
-					description: "The rows this sink is currently serving to dashboards.",
-					icon: /* @__PURE__ */ v(p, { className: "h-icon-sm w-icon-sm" }),
-					actions: /* @__PURE__ */ y(_, { children: [w && /* @__PURE__ */ y("div", {
-						role: "group",
-						"aria-label": C("bigconsole.dataSinks.view.dataPreview", "Data Preview"),
-						className: "flex items-center overflow-hidden rounded-button border border-[var(--color-border-default)]",
-						children: [/* @__PURE__ */ v("button", {
-							type: "button",
-							onClick: () => I("table"),
-							"aria-pressed": F === "table",
-							className: `flex h-control-md w-[var(--size-controlHeight-md)] items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${x} ${F === "table" ? "bg-bg-sunken text-text-primary" : "text-text-secondary hover:text-text-primary"}`,
-							title: C("bigconsole.dataSinks.view.tableView", "Table view"),
-							children: /* @__PURE__ */ v(Se, { className: "w-4 h-4" })
-						}), /* @__PURE__ */ v("button", {
-							type: "button",
-							onClick: () => I("json"),
-							"aria-pressed": F === "json",
-							className: `flex h-control-md w-[var(--size-controlHeight-md)] items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${x} ${F === "json" ? "bg-bg-sunken text-text-primary" : "text-text-secondary hover:text-text-primary"}`,
-							title: C("bigconsole.dataSinks.view.jsonView", "JSON view"),
-							children: /* @__PURE__ */ v(_e, { className: "w-4 h-4" })
-						})]
-					}), /* @__PURE__ */ v(g, {
-						onClick: Z,
-						disabled: N,
-						variant: w ? "secondary" : "default",
-						size: "sm",
-						children: N ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(m, { className: "w-4 h-4 mr-2 animate-spin" }), C("bigconsole.dataSinks.view.loading", "Loading...")] }) : w ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(xe, { className: "w-4 h-4 mr-2" }), C("bigconsole.dataSinks.view.hideData", "Hide Data")] }) : /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(be, { className: "w-4 h-4 mr-2" }), C("bigconsole.dataSinks.view.showData", "Show Data")] })
-					})] }),
-					children: [w && M && /* @__PURE__ */ y(_, { children: [v(F === "table" ? te : oe, {
-						data: M,
-						maxHeight: "400px"
-					}), z !== null && /* @__PURE__ */ y("div", {
-						className: "mt-form-gap flex flex-wrap items-center justify-between gap-form-gap border-t border-[var(--color-border-subtle)] pt-form-gap",
-						children: [/* @__PURE__ */ y("label", {
-							className: "flex items-center gap-2 text-sm text-text-secondary",
-							children: [/* @__PURE__ */ v("span", { children: C("bigconsole.dataSinks.view.rowsPerPage", "Rows per page") }), /* @__PURE__ */ v("select", {
-								"aria-label": C("bigconsole.dataSinks.view.rowsPerPage", "Rows per page"),
-								className: "h-control-md rounded-input border border-[var(--color-border-default)] bg-bg-canvas px-2 text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
-								value: L,
-								onChange: (e) => He(Number(e.target.value)),
-								children: [
-									100,
-									500,
-									1e3
-								].map((e) => /* @__PURE__ */ v("option", {
-									value: e,
-									children: e
-								}, e))
-							})]
-						}), /* @__PURE__ */ y("div", {
-							className: "flex flex-wrap items-center gap-control-gap text-sm text-text-secondary",
-							children: [
-								/* @__PURE__ */ v("span", { children: z === 0 ? C("bigconsole.dataSinks.view.zeroRows", "0 rows") : C("bigconsole.dataSinks.view.rowRange", "{{start}}–{{end}} of {{total}}", {
-									start: R + 1,
-									end: Math.min(R + L, z),
-									total: z
-								}) }),
-								/* @__PURE__ */ v(g, {
-									variant: "secondary",
-									size: "sm",
-									disabled: R === 0 || N,
-									onClick: () => void X(Math.max(0, R - L), L),
-									children: C("bigconsole.dataSinks.view.previous", "Previous")
-								}),
-								/* @__PURE__ */ v(g, {
-									variant: "secondary",
-									size: "sm",
-									disabled: !Le || N,
-									onClick: () => void X(R + L, L),
-									children: C("bigconsole.dataSinks.view.next", "Next")
-								})
-							]
-						})]
-					})] }), !w && (V.data && Object.keys(V.data).length > 0 ? /* @__PURE__ */ y("p", {
-						className: "flex items-center gap-icon-gap text-sm text-text-secondary",
-						children: [/* @__PURE__ */ v(p, {
-							"aria-hidden": "true",
-							className: "h-icon-sm w-icon-sm shrink-0 text-text-muted"
-						}), C("bigconsole.dataSinks.view.showDataHint", "Click \"Show Data\" to preview the cached data.")]
-					}) : /* @__PURE__ */ y("div", {
-						className: "flex flex-col items-center gap-form-gap py-form-gap text-center",
-						children: [
-							/* @__PURE__ */ v(p, {
-								"aria-hidden": "true",
-								className: "h-icon-lg w-icon-lg text-text-muted"
-							}),
-							/* @__PURE__ */ v("p", {
-								className: "text-sm text-text-secondary",
-								children: C("bigconsole.dataSinks.view.noDataYet", "This data sink has no data yet. Upload a CSV or build a workflow to import data.")
-							}),
-							/* @__PURE__ */ y(g, {
-								onClick: $,
-								variant: "default",
-								size: "sm",
-								children: [/* @__PURE__ */ v(h, { className: "w-4 h-4 mr-2" }), C("bigconsole.dataSinks.view.importData", "Import Data")]
-							})
-						]
-					}))]
-				})]
-			}),
-			/* @__PURE__ */ v(ue, {
-				isOpen: Me,
+			/* @__PURE__ */ v(de, {
+				isOpen: A,
 				dataSinkId: c || null,
 				dataSinkName: V.name || V.key,
-				onClose: Ue
+				onClose: We
 			}),
-			/* @__PURE__ */ v(de, {
+			/* @__PURE__ */ v(fe, {
 				isOpen: Ne,
 				dataSinkName: V.name || V.key,
-				hasExistingData: !!(V.data && Object.keys(V.data).length > 0),
-				onClose: We,
-				onGoToWorkflows: Ge,
-				onImportCsv: Ke
+				hasExistingData: V.sizeBytes > 0 || !!(V.data && Object.keys(V.data).length > 0),
+				onClose: Ge,
+				onGoToWorkflows: Ke,
+				onImportCsv: qe
 			})
 		]
 	}) : /* @__PURE__ */ v("div", {
 		className: "flex min-h-[240px] items-center justify-center p-card-padding",
-		children: /* @__PURE__ */ v(Te, {
+		children: /* @__PURE__ */ v(Ee, {
 			illustration: "empty-data",
 			title: C("bigconsole.dataSinks.view.notFoundTitle", "DataSink not found"),
 			description: C("bigconsole.dataSinks.view.notFoundDescription", "The DataSink you're looking for doesn't exist or has been deleted."),