+ {displayName} +
++ {typeof type === "string" ? type : "-"} +
); }, }, + // Region column { - accessorKey: "type", + accessorKey: "region", header: ({ column }) => ( -+ {typeof region === "string" ? region : "-"} +
); }, }, + // Service column { accessorKey: "service", header: ({ column }) => ( -+ {typeof service === "string" ? service : "-"} +
); }, }, + // Actions column { - accessorKey: "provider", - header: ({ column }) => ( -- Loading resource details... -
-+ Loading finding details... +
+
+ {metadataCopied ? (
+
{JSON.stringify(parsedMetadata, null, 2)}
+
Loading findings...
- Total failed findings: {failedFindings.length} -
- {failedFindings.map((finding: ResourceFinding, index: number) => { - const { attributes: findingAttrs, id } = finding; - - // Handle cases where finding might not have all attributes - if (!findingAttrs) { - return ( -- Finding {id} - No attributes available -
-- No failed findings found for this resource. -
+ <> +{value}
+
+ - {description} -
- )} - {children} -- {label} +
+ {label} {highlight && ( NEW diff --git a/ui/components/ui/table/data-table-pagination.tsx b/ui/components/ui/table/data-table-pagination.tsx index a7fc143fc3..6ba2d9a158 100644 --- a/ui/components/ui/table/data-table-pagination.tsx +++ b/ui/components/ui/table/data-table-pagination.tsx @@ -24,6 +24,18 @@ import { MetaDataProps } from "@/types"; interface DataTablePaginationProps { metadata?: MetaDataProps; disableScroll?: boolean; + /** Prefix for URL params to avoid conflicts (e.g., "findings" -> "findingsPage") */ + paramPrefix?: string; + + /* + * Controlled mode: Use these props to manage pagination via React state + * instead of URL params. Useful for tables in drawers/modals to avoid + * triggering page re-renders when paginating. + */ + controlledPage?: number; + controlledPageSize?: number; + onPageChange?: (page: number) => void; + onPageSizeChange?: (pageSize: number) => void; } const NAV_BUTTON_STYLES = { @@ -35,18 +47,44 @@ const NAV_BUTTON_STYLES = { export function DataTablePagination({ metadata, disableScroll = false, + paramPrefix = "", + controlledPage, + controlledPageSize, + onPageChange, + onPageSizeChange, }: DataTablePaginationProps) { const pathname = usePathname(); const searchParams = useSearchParams(); const router = useRouter(); - const initialPageSize = searchParams.get("pageSize") ?? "50"; + + // Determine if we're in controlled mode + const isControlled = controlledPage !== undefined && onPageChange; + + // Determine param names based on prefix + const pageParam = paramPrefix ? `${paramPrefix}Page` : "page"; + const pageSizeParam = paramPrefix ? `${paramPrefix}PageSize` : "pageSize"; + + const initialPageSize = isControlled + ? String(controlledPageSize ?? 10) + : (searchParams.get(pageSizeParam) ?? "10"); const [selectedPageSize, setSelectedPageSize] = useState(initialPageSize); if (!metadata) return null; - const { currentPage, totalPages, totalEntries, itemsPerPageOptions } = - getPaginationInfo(metadata); + const { + currentPage: metaCurrentPage, + totalPages, + totalEntries, + itemsPerPageOptions, + } = getPaginationInfo(metadata); + + // For controlled mode, use controlled values; for prefixed, read from URL; otherwise use metadata + const currentPage = isControlled + ? controlledPage + : paramPrefix + ? parseInt(searchParams.get(pageParam) || "1", 10) + : metaCurrentPage; const createPageUrl = (pageNumber: number | string) => { const params = new URLSearchParams(searchParams); @@ -60,7 +98,7 @@ export function DataTablePagination({ return `${pathname}?${params.toString()}`; } - params.set("page", pageNumber.toString()); + params.set(pageParam, pageNumber.toString()); // Ensure that scanId, id and version are preserved if (scanId) params.set("scanId", scanId); @@ -70,6 +108,20 @@ export function DataTablePagination({ return `${pathname}?${params.toString()}`; }; + // Handle page navigation for controlled mode + const handlePageChange = (pageNumber: number) => { + if (isControlled) { + onPageChange(pageNumber); + } else { + const url = createPageUrl(pageNumber); + if (disableScroll) { + router.push(url, { scroll: false }); + } else { + router.push(url); + } + } + }; + const isFirstPage = currentPage === 1; const isLastPage = currentPage === totalPages; @@ -87,6 +139,12 @@ export function DataTablePagination({ onValueChange={(value) => { setSelectedPageSize(value); + if (isControlled) { + onPageSizeChange?.(parseInt(value, 10)); + onPageChange(1); // Reset to first page + return; + } + const params = new URLSearchParams(searchParams); // Preserve all important parameters @@ -94,8 +152,8 @@ export function DataTablePagination({ const id = searchParams.get("id"); const version = searchParams.get("version"); - params.set("pageSize", value); - params.set("page", "1"); + params.set(pageSizeParam, value); + params.set(pageParam, "1"); // Ensure that scanId, id and version are preserved if (scanId) params.set("scanId", scanId); @@ -137,82 +195,145 @@ export function DataTablePagination({ Page {currentPage} of {totalPages}