@lunora/studio 0.0.0 → 1.0.0-alpha.2

package/dist/packem_shared/GlobalDataBrowser-9MhPEfgN.js

@@ -0,0 +1,318 @@
+import { useLunora } from '@lunora/react';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { E as EmptyState } from './empty-state-DY_oe0k6.js';
+import { T as Table, a as TableHeader, b as TableRow, c as TableHead, d as TableBody, e as TableCell } from './table-_RzNvy3R.js';
+import { useAutoRefresh } from './DEFAULT_AUTO_REFRESH_MS-Vxwaxx51.js';
+import { useT } from './createStudioI18n-CgvlmDkN.js';
+import { C as CLOUDFLARE_D1_URL } from './cf-links-BZfRdxSE.js';
+import { e as errorMessage, f as fireAndForget } from './internal-BBZYexre.js';
+import { u as useFacets, T as TableListSidebar, G as GridPagination, D as DataFacets } from './table-list-sidebar-aZHLq70w.js';
+import { G as GridContainer, C as CellValue } from './data-grid-CCh2Couo.js';
+import { jsxDEV } from 'react/jsx-dev-runtime';
+
+const DEFAULT_PAGE_SIZE = 50;
+const NO_TABLES = [];
+const NO_COLUMNS = [];
+const rowKey = (row, index) => {
+  const id = row["_id"];
+  return typeof id === "string" || typeof id === "number" ? String(id) : `row-${index.toString()}`;
+};
+const chipValue = (value) => {
+  if (value === null || value === void 0) {
+    return "∅";
+  }
+  if (value === "") {
+    return "(empty)";
+  }
+  if (typeof value === "object") {
+    return JSON.stringify(value);
+  }
+  return String(value);
+};
+const GlobalDataBrowser = ({
+  initialTable,
+  onSelectTable,
+  pageSize: initialPageSize = DEFAULT_PAGE_SIZE,
+  schemaSwitch
+} = {}) => {
+  const client = useLunora();
+  const t = useT();
+  const [tables, setTables] = useState(null);
+  const [tablesError, setTablesError] = useState(null);
+  const [selectedTable, setSelectedTable] = useState(initialTable ?? null);
+  const [offset, setOffset] = useState(0);
+  const [pageSize, setPageSize] = useState(initialPageSize);
+  const [page, setPage] = useState(null);
+  const [pageError, setPageError] = useState(null);
+  const [filters, setFilters] = useState([]);
+  const filtersRef = useRef(filters);
+  filtersRef.current = filters;
+  const {
+    clearFacets,
+    facets,
+    refetchFacets: refetchFacetsViaHook,
+    toggleFacet
+  } = useFacets();
+  const fetchTables = useCallback(async () => {
+    setTablesError(null);
+    try {
+      setTables(await client.listGlobalTables());
+    } catch (error) {
+      setTables(null);
+      setTablesError(errorMessage(error));
+    }
+  }, [client]);
+  const fetchSeqRef = useRef(0);
+  const fetchPage = useCallback(async (table, nextOffset, limit = pageSize, activeFilters = filtersRef.current) => {
+    fetchSeqRef.current += 1;
+    const seq = fetchSeqRef.current;
+    setPageError(null);
+    try {
+      const result = await client.readGlobalTablePage({
+        filters: activeFilters,
+        limit,
+        offset: nextOffset,
+        table
+      });
+      if (fetchSeqRef.current !== seq) {
+        return;
+      }
+      setPage(result);
+      setOffset(nextOffset);
+    } catch (error_0) {
+      if (fetchSeqRef.current !== seq) {
+        return;
+      }
+      setPage(null);
+      setPageError(errorMessage(error_0));
+    }
+  }, [client, pageSize]);
+  const facetFetcher = (table_0, activeFilters_0) => (column) => client.facetGlobalColumn({
+    column,
+    filters: activeFilters_0,
+    table: table_0
+  });
+  const refetchFacets = (table_1, activeFilters_1) => {
+    refetchFacetsViaHook(facetFetcher(table_1, activeFilters_1));
+  };
+  useEffect(() => {
+    fireAndForget(fetchTables());
+  }, [fetchTables]);
+  useAutoRefresh(() => {
+    fireAndForget(fetchTables());
+    if (selectedTable !== null) {
+      fireAndForget(fetchPage(selectedTable, offset));
+      refetchFacets(selectedTable, filtersRef.current);
+    }
+  }, true);
+  const appliedInitialTable = useRef(void 0);
+  const selectTable = useCallback((table_2) => {
+    setSelectedTable(table_2);
+    appliedInitialTable.current = table_2;
+    setFilters([]);
+    filtersRef.current = [];
+    clearFacets();
+    fireAndForget(fetchPage(table_2, 0, pageSize, []));
+    onSelectTable?.(table_2);
+  }, [clearFacets, fetchPage, onSelectTable, pageSize]);
+  const onToggleFacet = (column_0) => {
+    toggleFacet(column_0, selectedTable === null ? null : facetFetcher(selectedTable, filtersRef.current));
+  };
+  const applyFilters = (next) => {
+    setFilters(next);
+    filtersRef.current = next;
+    if (selectedTable !== null) {
+      fireAndForget(fetchPage(selectedTable, 0, pageSize, next));
+      refetchFacets(selectedTable, next);
+    }
+  };
+  const onFacetFilter = (column_1, value) => {
+    applyFilters([...filtersRef.current.filter((clause) => clause.column !== column_1), {
+      column: column_1,
+      value
+    }]);
+  };
+  const removeFilter = (event) => {
+    const index = Number(event.currentTarget.dataset["index"]);
+    applyFilters(filtersRef.current.filter((_, position) => position !== index));
+  };
+  useEffect(() => {
+    if (initialTable === void 0 || initialTable === "" || appliedInitialTable.current === initialTable) {
+      return;
+    }
+    appliedInitialTable.current = initialTable;
+    const target = initialTable;
+    queueMicrotask(() => {
+      selectTable(target);
+    });
+  }, [initialTable, selectTable]);
+  const goToPage = (nextOffset_0) => {
+    if (selectedTable === null) {
+      return;
+    }
+    fireAndForget(fetchPage(selectedTable, Math.max(0, nextOffset_0)));
+  };
+  const total = page?.total ?? 0;
+  const hasPrevious = offset > 0;
+  const hasNext = page !== null && offset + page.rows.length < total;
+  const rangeStart = page === null || page.rows.length === 0 ? 0 : offset + 1;
+  const rangeEnd = page === null ? 0 : offset + page.rows.length;
+  const reloadTables = () => {
+    fireAndForget(fetchTables());
+  };
+  const goPrevious = () => {
+    goToPage(offset - pageSize);
+  };
+  const goNext = () => {
+    goToPage(offset + pageSize);
+  };
+  const jumpToPage = (targetPage) => {
+    goToPage(Math.max(0, (targetPage - 1) * pageSize));
+  };
+  const changePageSize = (size) => {
+    setPageSize(size);
+    if (selectedTable !== null) {
+      fireAndForget(fetchPage(selectedTable, 0, size));
+    }
+  };
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "flex h-full min-w-0",
+    "data-testid": "lunora-global-data-browser",
+    children: [/* @__PURE__ */ jsxDEV(TableListSidebar, {
+      header: /* @__PURE__ */ jsxDEV("div", {
+        className: "flex shrink-0 flex-col items-stretch gap-2 border-b border-border p-3",
+        children: [schemaSwitch, /* @__PURE__ */ jsxDEV("a", {
+          className: "text-sm text-primary underline-offset-4 hover:underline",
+          "data-testid": "gdb-cf-link",
+          href: CLOUDFLARE_D1_URL,
+          rel: "noreferrer",
+          target: "_blank",
+          children: t("Open in Cloudflare")
+        }, void 0, false)]
+      }, void 0, true),
+      onReload: reloadTables,
+      onSelect: selectTable,
+      prefix: "gdb",
+      selected: selectedTable,
+      tables: tables ?? NO_TABLES
+    }, void 0, false), /* @__PURE__ */ jsxDEV("div", {
+      className: "flex min-w-0 flex-1 flex-col overflow-hidden",
+      children: [tablesError !== null && /* @__PURE__ */ jsxDEV("p", {
+        className: "shrink-0 border-b border-border px-4 py-2 text-sm text-destructive",
+        "data-testid": "gdb-tables-error",
+        role: "alert",
+        children: tablesError
+      }, void 0, false), tables !== null && tables.length === 0 && /* @__PURE__ */ jsxDEV("div", {
+        className: "flex flex-1 items-center justify-center p-6",
+        children: /* @__PURE__ */ jsxDEV(EmptyState, {
+          description: t("Tables marked .global() (D1-backed, region-replicated) will appear here."),
+          icon: /* @__PURE__ */ jsxDEV("svg", {
+            "aria-hidden": "true",
+            fill: "none",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 1.6,
+            viewBox: "0 0 24 24",
+            children: [/* @__PURE__ */ jsxDEV("circle", {
+              cx: "12",
+              cy: "12",
+              r: "9"
+            }, void 0, false), /* @__PURE__ */ jsxDEV("path", {
+              d: "M3 12h18M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18Z"
+            }, void 0, false)]
+          }, void 0, true),
+          testId: "gdb-empty",
+          title: t("No global tables.")
+        }, void 0, false)
+      }, void 0, false), pageError !== null && /* @__PURE__ */ jsxDEV("p", {
+        className: "shrink-0 border-b border-border px-4 py-2 text-sm text-destructive",
+        "data-testid": "gdb-page-error",
+        role: "alert",
+        children: pageError
+      }, void 0, false), tables !== null && tables.length > 0 && page === null && pageError === null && /* @__PURE__ */ jsxDEV("div", {
+        className: "flex flex-1 items-center justify-center p-6",
+        children: /* @__PURE__ */ jsxDEV("p", {
+          className: "text-sm text-muted-foreground",
+          children: t("Select a table to browse its rows.")
+        }, void 0, false)
+      }, void 0, false), page !== null && /* @__PURE__ */ jsxDEV("div", {
+        className: "flex min-h-0 flex-1 flex-col",
+        "data-testid": "gdb-page",
+        children: [filters.length > 0 && /* @__PURE__ */ jsxDEV("div", {
+          className: "flex shrink-0 flex-wrap items-center gap-1.5 border-b border-border px-4 py-2 text-xs",
+          "data-testid": "gdb-filters",
+          children: filters.map((filter, index_0) => /* @__PURE__ */ jsxDEV("span", {
+            className: "inline-flex items-center gap-1 rounded border border-border bg-muted px-1.5 py-0.5",
+            "data-testid": "gdb-filter-chip",
+            children: [/* @__PURE__ */ jsxDEV("span", {
+              className: "font-medium text-foreground",
+              children: filter.column
+            }, void 0, false), /* @__PURE__ */ jsxDEV("span", {
+              className: "text-muted-foreground",
+              children: "="
+            }, void 0, false), /* @__PURE__ */ jsxDEV("span", {
+              className: "font-mono text-foreground",
+              children: chipValue(filter.value)
+            }, void 0, false), /* @__PURE__ */ jsxDEV("button", {
+              "aria-label": t("Remove filter"),
+              className: "ml-0.5 text-muted-foreground hover:text-foreground",
+              "data-index": index_0,
+              "data-testid": "gdb-filter-remove",
+              onClick: removeFilter,
+              type: "button",
+              children: "✕"
+            }, void 0, false)]
+          }, `${filter.column}:${chipValue(filter.value)}`, true))
+        }, void 0, false), /* @__PURE__ */ jsxDEV(GridContainer, {
+          layout: "fill",
+          children: /* @__PURE__ */ jsxDEV("div", {
+            className: "min-h-0 flex-1 overflow-auto",
+            children: /* @__PURE__ */ jsxDEV(Table, {
+              "data-testid": "gdb-rows",
+              children: [/* @__PURE__ */ jsxDEV(TableHeader, {
+                children: /* @__PURE__ */ jsxDEV(TableRow, {
+                  children: page.columns.map((column_2) => /* @__PURE__ */ jsxDEV(TableHead, {
+                    children: column_2
+                  }, column_2, false))
+                }, void 0, false)
+              }, void 0, false), /* @__PURE__ */ jsxDEV(TableBody, {
+                children: page.rows.map((row, rowIndex) => /* @__PURE__ */ jsxDEV(TableRow, {
+                  "data-testid": "gdb-row",
+                  children: page.columns.map((column_3) => /* @__PURE__ */ jsxDEV(TableCell, {
+                    className: "max-w-xs truncate font-mono text-xs",
+                    children: /* @__PURE__ */ jsxDEV(CellValue, {
+                      value: row[column_3]
+                    }, void 0, false)
+                  }, column_3, false))
+                }, rowKey(row, rowIndex), false))
+              }, void 0, false)]
+            }, void 0, true)
+          }, void 0, false)
+        }, void 0, false), /* @__PURE__ */ jsxDEV("div", {
+          className: "flex shrink-0 items-center border-t border-border px-4 py-2",
+          children: /* @__PURE__ */ jsxDEV(GridPagination, {
+            hasNext,
+            hasPrevious,
+            onJumpToPage: jumpToPage,
+            onNext: goNext,
+            onPageSizeChange: changePageSize,
+            onPrevious: goPrevious,
+            pageSize,
+            prefix: "gdb",
+            rangeEnd,
+            rangeStart,
+            total
+          }, void 0, false)
+        }, void 0, false)]
+      }, void 0, true)]
+    }, void 0, true), /* @__PURE__ */ jsxDEV(DataFacets, {
+      columns: page?.columns ?? NO_COLUMNS,
+      facets,
+      onFacetFilter,
+      onToggleFacet
+    }, void 0, false)]
+  }, void 0, true);
+};
+
+export { GlobalDataBrowser };