62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T53eb,"use client"; import { DataTableInfinite } from "@/components/data-table/data-table-infinite"; import type { DataTableFilterField, SheetField, } from "@/components/data-table/types"; import { useTableManifest } from "@/hooks/use-table-manifest"; import type { UseTableManifestOptions } from "@/hooks/use-table-manifest"; import { applyFacets, createDataTableQueryOptions, getFacetedMinMaxValues, getFacetedUniqueValues, getMetaPage, refreshDataTableQuery, REQUEST_PARAMS, type BaseChartSchema, type PaginationStrategy, type Transport, } from "@/lib/data-table"; import { useNuqsAdapter } from "@/lib/store/adapters/nuqs"; import { schemaToNuqsParsers } from "@/lib/store/adapters/nuqs/parser-bridge"; import { useFilterState } from "@/lib/store/hooks/useFilterState"; import { DataTableStoreProvider } from "@/lib/store/provider/DataTableStoreProvider"; import { field } from "@/lib/store/schema"; import type { SchemaDefinition } from "@/lib/store/schema/types"; import { applyRenderers, createRowAccessors, createTableSchema, generateColumns, generateFilterFields, generateFilterSchema, generateSheetFields, getDefaultColumnVisibility, type RendererOverrides, type SchemaJSON, type TableChartConfig, type TableManifest, } from "@/lib/table-schema"; import type { DataTableFeatures } from "@/lib/table/features"; import { useInfiniteQuery, useQueryClient, type FetchPreviousPageOptions, } from "@tanstack/react-query"; import type { ColumnDef } from "@tanstack/react-table"; import * as React from "react"; /** * A data table that renders from an endpoint rather than from local code. * * Point it at a manifest URL and a list URL and it draws the columns, the * filters, the sheet and the counts — none of which it knows anything about at * build time. Row actions are the host's to draw: the manifest carries their * descriptors, and `extraColumns` and `floatingBarSlot` are where the actions * block's column and bulk bar go. * * ## Why two components * * The URL-state adapter's parsers are derived from the schema, and * `useNuqsAdapter(schema, …)` needs one at first render. A hook cannot be * called conditionally, so the manifest has to resolve one level above * everything built from it. `DataTableRemote` resolves it; `RemoteTable` is * mounted only once it has, and so has a stable hook order for its whole life. * * Remounting on a schema change is deliberate rather than incidental: table * state (sorting, visibility, filters) is keyed by column, and carrying it * across a schema swap resurrects state for columns that no longer exist. */ type RemoteRow = Record; export type DataTableRemoteProps = { /** `GET`s a `TableManifest`. See `createTableManifestHandler`. */ manifestEndpoint: string; /** `GET`s rows. Defaults to `manifestEndpoint` with `/schema` stripped. */ dataEndpoint?: string; /** Base URL, headers, credentials, response parsing. */ transport?: Transport; /** Defaults to a bidirectional timestamp cursor. */ // eslint-disable-next-line @typescript-eslint/no-explicit-any pagination?: PaginationStrategy; /** * Serializes filter state into a query string for the data endpoint. * * Optional: a serializer written ahead of time has to be built from a schema, * and a table pointed at an endpoint does not have one until the manifest * arrives. Left out, one is derived from the manifest — see * `createRemoteSearchParamsSerializer`. */ searchParamsSerializer?: (search: Record) => string; /** A build-time snapshot or a server prefetch — skips the manifest round trip. */ initialManifest?: TableManifest; manifestOptions?: Omit; /** * Renderer closures to attach by column key. * * A schema crossing the wire carries named displays (`badge`, `bar`, * `status-code`, …) but not closures, so this is how an app draws the one or * two columns the named set does not cover while every other column stays * declarative. See `applyRenderers`. */ renderers?: RendererOverrides; /** * Columns appended after the manifest's. * * For a column that is not data: a row-actions menu * (`createActionsColumn()` from the actions block), or a cell computed across * several columns. A manifest describes columns of data, so these are the * host's. Keep the array stable — a module constant — or the table rebuilds * its columns on every render. */ extraColumns?: ColumnDef[]; /** * Visibility defaults applied over the manifest's, by column id. This is how * an extra column ships hidden until enabled from the view options. */ defaultColumnVisibility?: Record; /** Distinguishes this table's URL state and query cache from another's. */ tableId?: string; /** Rendered while the manifest is in flight. */ loadingSlot?: React.ReactNode; /** Rendered when the manifest could not be loaded. */ errorSlot?: (error: Error) => React.ReactNode; className?: string; } & RemoteSlots; /** * What a slot can be built from once the manifest has resolved. * * The host renders `DataTableRemote` before any of this exists, so a slot that * needs it — a command palette parsing against the filter schema, a live button * that pages backwards — is a function of this context rather than a node. */ export type RemoteSlotContext = { manifest: TableManifest; /** The URL-state schema derived from the manifest's columns. */ filterSchema: SchemaDefinition; tableId: string; /** Reload the list from "now". See `refreshDataTableQuery`. */ refresh: () => Promise; /** Only when the endpoint declares `backwardPagination`. */ fetchPreviousPage?: (options?: FetchPreviousPageOptions) => Promise; }; type RemoteSlot = | React.ReactNode | ((context: RemoteSlotContext) => React.ReactNode); /** Host-supplied pieces the manifest cannot describe. */ export type RemoteSlots = { commandSlot?: RemoteSlot; toolbarActions?: RemoteSlot; footerSlot?: React.ReactNode; floatingBarSlot?: React.ReactNode; /** * Given the chart points and the manifest's chart config, when the endpoint * says it has a chart. Not rendered at all when it does not. */ chartSlot?: ( chartData: BaseChartSchema[], config: TableChartConfig | undefined, ) => React.ReactNode; sheetSlot?: ( fields: SheetField[], context: RemoteSlotContext, ) => React.ReactNode; /** Per-row styling, which no manifest field describes. */ getRowClassName?: Parameters< typeof DataTableInfinite >[0]["getRowClassName"]; }; /** `/api/logs/schema` → `/api/logs`; anything else is returned unchanged. */ export function defaultDataEndpoint(manifestEndpoint: string): string { return manifestEndpoint.replace(/\/schema\/?$/, "") || "/"; } /** A value outside the schema: a page param the pagination strategy added. */ function serializeLoose(value: unknown): string | null { if (value instanceof Date) { const time = value.getTime(); return Number.isNaN(time) ? null : String(time); } if ( typeof value === "string" || typeof value === "number" || typeof value === "boolean" ) { return String(value); } return null; } /** * A search-params serializer for a schema that is only known at runtime. * * Schema keys go through the same parsers the URL state uses, so the endpoint * sees exactly what the address bar shows (`?latency=100-3000`, * `?sort=date.desc`). Keys outside the schema are the pagination strategy's — * `cursor`, `direction`, `offset`, `size` — and are written as plain values, * with a `Date` as epoch milliseconds. An allow-list serializer would drop them * and every page would be the first page. * * `null`, `undefined` and `[]` are omitted, which is what * `createDataTableQueryOptions` relies on to clear a key. */ export function createRemoteSearchParamsSerializer( schema: SchemaDefinition, ): (search: Record) => string { const parsers = schemaToNuqsParsers(schema) as Record< string, { serialize?: (value: unknown) => string } | undefined >; return (search) => { const params = new URLSearchParams(); for (const [key, value] of Object.entries(search)) { if (value === null || value === undefined) continue; if (Array.isArray(value) && value.length === 0) continue; const parser = Object.hasOwn(parsers, key) ? parsers[key] : undefined; let serialized: string | null; try { serialized = parser?.serialize ? parser.serialize(value) : serializeLoose(value); } catch { // A value the parser cannot write is not a filter the endpoint could // have read either. continue; } if (serialized === null || serialized === "") continue; params.set(key, serialized); } const query = params.toString(); return query ? `?${query}` : ""; }; } const RESERVED_PARAMS: ReadonlySet = new Set( Object.values(REQUEST_PARAMS), ); /** * Drop the filter of any column whose key is a reserved request parameter. * * A filter is written to the URL and to the request under its column key, and * `cursor`, `direction`, `size`, `sort`, `uuid` and `live` already mean * something there. A filterable column named `uuid` would share its parameter * with the open row: the control would render and never apply. The column * itself stays — it is only the filter that has nowhere to live — and the * collision is reported rather than left to be discovered. * * `pageParamKeys` are the pagination strategy's own: `offset` for * `offsetPagination`, or whatever a custom strategy named its cursor. They are * cleared from the cache key and rewritten per page, so a filter under one of * them would be overwritten before it reached the endpoint. */ export function withoutReservedFilters( schema: SchemaJSON, warn: (message: string) => void = () => {}, pageParamKeys: readonly string[] = [], ): SchemaJSON { let changed = false; const columns = schema.columns.map((column) => { const reserved = RESERVED_PARAMS.has(column.key) || pageParamKeys.includes(column.key); if (!column.filter || !reserved) return column; changed = true; warn( `Dropped the filter on column ${JSON.stringify(column.key)}: the key is a reserved request parameter`, ); return { ...column, filter: null }; }); return changed ? { ...schema, columns } : schema; } /** * State the table writes that is not a column filter: the sort, the row whose * detail is open, and live mode. They share the URL with the filters, so they * are part of the same schema, and they are left out wherever the filters are * read back as filters. */ const VIEW_STATE_KEYS = ["sort", "uuid", "live"] as const; /** The filter state without the view state, as TanStack column filters. */ export function toColumnFilters( search: Record, ): { id: string; value: unknown }[] { return Object.entries(search) .filter(([id]) => !(VIEW_STATE_KEYS as readonly string[]).includes(id)) .map(([id, value]) => ({ id, value })) .filter(({ value }) => { if (value === null || value === undefined) return false; if (Array.isArray(value) && value.length === 0) return false; return true; }); } export function DataTableRemote({ manifestEndpoint, initialManifest, manifestOptions, loadingSlot, errorSlot, ...props }: DataTableRemoteProps) { const query = useTableManifest(manifestEndpoint, { ...manifestOptions, ...(initialManifest ? { initialManifest } : {}), }); if (query.error) { return <>{errorSlot?.(query.error) ?? null}; } if (!query.data) { return <>{loadingSlot ?? null}; } return ( ); } /** * A cheap identity for "is this the same schema". * * Deliberately not the HTTP ETag: that covers the whole manifest, including * capability and action changes, and remounting on those would throw away the * user's sorting for no reason. Only the column set can strand table state. */ export function schemaIdentity(manifest: TableManifest): string { return manifest.schema.columns.map((column) => column.key).join("|"); } type RemoteTableProps = Omit< DataTableRemoteProps, "initialManifest" | "manifestOptions" | "loadingSlot" | "errorSlot" > & { manifest: TableManifest }; function RemoteTable({ manifest, manifestEndpoint, dataEndpoint, transport, pagination, searchParamsSerializer, renderers, extraColumns, defaultColumnVisibility: visibilityOverrides, tableId = "remote", ...slots }: RemoteTableProps) { const pageParamKeys = pagination?.pageParamKeys; const definition = React.useMemo(() => { const { definition: base } = createTableSchema.fromJSON( withoutReservedFilters( manifest.schema, (message) => console.warn(`[data-table-remote] ${message}`), pageParamKeys, ), ); return renderers ? applyRenderers(base, renderers) : base; }, [manifest.schema, renderers, pageParamKeys]); const columns = React.useMemo( () => [...generateColumns(definition), ...(extraColumns ?? [])], [definition, extraColumns], ); const filterFields = React.useMemo( () => generateFilterFields(definition), [definition], ); const sheetFields = React.useMemo( () => generateSheetFields(definition), [definition], ); const defaultColumnVisibility = React.useMemo( () => ({ ...getDefaultColumnVisibility(definition), ...manifest.defaults?.columnVisibility, ...visibilityOverrides, }), [definition, manifest.defaults?.columnVisibility, visibilityOverrides], ); // Spliced in before the schema is created so `defaults` cannot disagree with // `definition` — the same ordering the builder needs. // // `uuid` is where a row click writes the detail row when the table has a // select column, and `live` is the live-mode toggle. Neither is a column, so // neither is in the manifest, and state written to a key the URL adapter has // no parser for is dropped: without them the sheet never opens and a live // button has nothing to flip. `live` is only declared when the endpoint can // page backwards, which is the only way live mode gets new rows. const backwardPagination = manifest.capabilities.backwardPagination; const filterSchema = React.useMemo( () => generateFilterSchema(definition, { sort: field.sort(), uuid: field.string(), ...(backwardPagination ? { live: field.boolean().default(false) } : {}), }), [definition, backwardPagination], ); const derivedSerializer = React.useMemo( () => createRemoteSearchParamsSerializer(filterSchema.definition), [filterSchema], ); const serializer = searchParamsSerializer ?? derivedSerializer; const adapter = useNuqsAdapter(filterSchema.definition, { id: tableId }); const queryOptions = React.useMemo( () => createDataTableQueryOptions({ queryKeyPrefix: tableId, apiEndpoint: dataEndpoint ?? defaultDataEndpoint(manifestEndpoint), searchParamsSerializer: serializer, ...(transport ? { transport } : {}), ...(pagination ? { pagination } : {}), }), [ tableId, dataEndpoint, manifestEndpoint, serializer, transport, pagination, ], ); return ( ); } type RemoteTableQueryProps = RemoteSlots & { manifest: TableManifest; columns: ReturnType>; filterFields: DataTableFilterField[]; sheetFields: SheetField[]; defaultColumnVisibility: Record; filterSchema: SchemaDefinition; queryOptions: ReturnType< typeof createDataTableQueryOptions >; tableId: string; className?: string; }; function RemoteTableQuery({ manifest, columns, filterFields, sheetFields, defaultColumnVisibility, filterSchema, queryOptions, tableId, commandSlot, toolbarActions, chartSlot, sheetSlot, getRowClassName, ...slots }: RemoteTableQueryProps) { const search = useFilterState>(); const { capabilities } = manifest; const { data, isFetching, isLoading, fetchNextPage, hasNextPage, fetchPreviousPage, } = useInfiniteQuery(queryOptions(search)); const queryClient = useQueryClient(); // Not the bare `refetch`: after live mode has prepended pages that restarts // from a "prev" cursor and wipes the list. const refresh = React.useCallback( () => refreshDataTableQuery(queryClient, queryOptions(search)), [queryClient, queryOptions, search], ); const flatData = React.useMemo( () => data?.pages?.flatMap((page) => page.data ?? []) ?? [], [data?.pages], ); // Not the last page: with `backwardPagination`, live mode prepends via // `fetchPreviousPage`, so the page carrying meta is not at a fixed index. // `getMetaPage` locates it from React Query's page params and falls back to // the last page when meta skipping is off. const metaPage = getMetaPage(data); const facets = capabilities.facets ? metaPage?.meta?.facets : undefined; const chartData = capabilities.chart ? metaPage?.meta?.chartData : undefined; const accessors = React.useMemo( () => createRowAccessors(manifest), [manifest], ); const dynamicFilterFields = React.useMemo( () => applyFacets(filterFields, facets), [filterFields, facets], ); const defaultColumnFilters = React.useMemo( () => toColumnFilters(search), [search], ); const context = React.useMemo( () => ({ manifest, filterSchema, tableId, refresh, ...(capabilities.backwardPagination ? { fetchPreviousPage } : {}), }), [ manifest, filterSchema, tableId, refresh, capabilities.backwardPagination, fetchPreviousPage, ], ); const renderSlot = (slot: RemoteSlot | undefined) => typeof slot === "function" ? slot(context) : slot; const hasSelectColumn = manifest.schema.columns.some( (column) => column.kind === "select", ); const sort = (search.sort ?? manifest.defaults?.sort) as | { id: string; desc: boolean } | null | undefined; return ( columns={columns} data={flatData} filterFields={dynamicFilterFields} defaultColumnFilters={defaultColumnFilters} defaultColumnSorting={sort ? [sort] : undefined} // Restores the open row from a shared link. Only where the selection // *is* the open row: with a select column the sheet reads `uuid` itself, // and seeding the selection would tick that row's checkbox instead. defaultRowSelection={ !hasSelectColumn && typeof search.uuid === "string" ? { [search.uuid]: true } : undefined } defaultColumnVisibility={defaultColumnVisibility} // A count the server said it does not compute is left undefined rather // than rendered as a confident zero. totalRows={ capabilities.totalRowCount ? metaPage?.meta?.totalRowCount : undefined } filterRows={ capabilities.filterRowCount ? metaPage?.meta?.filterRowCount : undefined } totalRowsFetched={flatData.length} isFetching={isFetching} isLoading={isLoading} hasNextPage={hasNextPage} fetchNextPage={fetchNextPage} // Backwards paging is what live mode is built on. Without it the button // is not rendered at all, rather than rendered and inert. {...(capabilities.backwardPagination ? { fetchPreviousPage } : {})} getRowId={accessors.getRowId} {...(getRowClassName ? { getRowClassName } : {})} // When the server cannot facet, these fall through to the table's own // faceting over the rows already loaded. {...(capabilities.facets ? { getFacetedUniqueValues: getFacetedUniqueValues(facets), getFacetedMinMaxValues: getFacetedMinMaxValues(facets), } : {})} {...(chartData && chartSlot ? { chartSlot: chartSlot(chartData, manifest.chart) } : {})} {...(sheetSlot ? { sheetSlot: sheetSlot(sheetFields, context) } : {})} {...(commandSlot ? { commandSlot: renderSlot(commandSlot) } : {})} {...(toolbarActions ? { toolbarActions: renderSlot(toolbarActions) } : {})} tableId={tableId} {...slots} /> ); } 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@tanstack/react-query@^5.101.4",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Freact-query","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tanstack/react-query@^5.101.4"}]]}]}],["$","li","@tanstack/react-table@^9.2.3",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Freact-table","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tanstack/react-table@^9.2.3"}]]}]}],["$","li","nuqs@^2.3.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/nuqs","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"nuqs@^2.3.0"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","registryDependencies":["https://data-table.openstatus.dev/r/data-table.json","https://data-table.openstatus.dev/r/data-table-schema.json","https://data-table.openstatus.dev/r/data-table-query.json","https://data-table.openstatus.dev/r/data-table-nuqs.json"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"src/components/data-table/data-table-remote/index.ts","content":"export {\n DataTableRemote,\n type DataTableRemoteProps,\n type RemoteSlotContext,\n type RemoteSlots,\n} from \"./data-table-remote\";\nexport {\n createRemoteSearchParamsSerializer,\n defaultDataEndpoint,\n schemaIdentity,\n toColumnFilters,\n withoutReservedFilters,\n} from \"./data-table-remote\";\n","type":"registry:component"},{"path":"src/components/data-table/data-table-remote/data-table-remote.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]