diff --git a/apps/studio/app/v2/project/[projectRef]/data/tables/[tableId]/layout.tsx b/apps/studio/app/v2/project/[projectRef]/data/tables/[tableId]/layout.tsx index 1b92ee91011..2cfc3421e64 100644 --- a/apps/studio/app/v2/project/[projectRef]/data/tables/[tableId]/layout.tsx +++ b/apps/studio/app/v2/project/[projectRef]/data/tables/[tableId]/layout.tsx @@ -26,7 +26,7 @@ export default function TableDetailLayout({ children }: { children: React.ReactN return (
-
+
{SUB_TABS.map((tab) => { const href = `${base}/${tab.slug}` const isActive = pathname === href || pathname?.startsWith(href + '/') diff --git a/apps/studio/components/grid/components/footer/pagination/Pagination.tsx b/apps/studio/components/grid/components/footer/pagination/Pagination.tsx index 4a1cade3260..b421401bc68 100644 --- a/apps/studio/components/grid/components/footer/pagination/Pagination.tsx +++ b/apps/studio/components/grid/components/footer/pagination/Pagination.tsx @@ -8,7 +8,7 @@ import { isForeignTable, isTable } from 'data/table-editor/table-editor-types' import { useTableRowsCountQuery } from 'data/table-rows/table-rows-count-query' import { useTableRowsQuery } from 'data/table-rows/table-rows-query' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' -import { RoleImpersonationState } from 'lib/role-impersonation' +import type { RoleImpersonationState } from 'lib/role-impersonation' import { AlertCircle, ArrowLeft, ArrowRight, HelpCircle, Loader2 } from 'lucide-react' import { useEffect, useState } from 'react' import { useRoleImpersonationStateSnapshot } from 'state/role-impersonation-state' @@ -54,7 +54,7 @@ type PaginationProps = { export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) => { const { id: _id } = useParams() - const id = _id ? Number(_id) : undefined + const routeTableId = _id ? Number(_id) : undefined const { sorts } = useTableSort() const { filters } = useTableFilter() @@ -63,11 +63,12 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) = const tableEditorSnap = useTableEditorStateSnapshot() const snap = useTableEditorTableStateSnapshot() const roleImpersonationState = useRoleImpersonationStateSnapshot() + const tableId = routeTableId ?? snap.table.id const { data: selectedTable } = useTableEditorQuery({ projectRef: project?.ref, connectionString: project?.connectionString, - id, + id: tableId, }) const isForeignTableSelected = isForeignTable(selectedTable) @@ -90,7 +91,7 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) = } = useTableRowsCountQuery( { projectRef: project?.ref, - tableId: snap.table.id, + tableId, filters, enforceExactCount: snap.enforceExactCount, roleImpersonationState: roleImpersonationState as RoleImpersonationState, @@ -102,19 +103,18 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) = ) const count = data?.count ?? 0 const hasCountData = count >= 0 - const isEstimateCount = data?.is_estimate ?? false const countString = data?.is_estimate ? formatEstimatedCount(count) : count.toLocaleString() const maxPages = Math.ceil(count / tableEditorSnap.rowsPerPage) const totalPages = count > 0 ? maxPages : 1 - const preflightCheck = !tableEditorSnap.tablesToIgnorePreflightCheck.includes(id ?? -1) + const preflightCheck = !tableEditorSnap.tablesToIgnorePreflightCheck.includes(tableId ?? -1) // [Joshen] This is only applicable for foreign tables, as we use the number of rows on the page to determine // if we've reached the last page (and hence disable the next button) const { data: rowsData, isPending: isLoadingRows } = useTableRowsQuery( { projectRef: project?.ref, - tableId: id, + tableId, sorts, filters, page: snap.page, @@ -126,6 +126,11 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) = enabled: isForeignTableSelected && enableForeignRowsQuery, } ) + const isCountQueryEnabled = + !isForeignTableSelected && + typeof project?.ref !== 'undefined' && + typeof tableId !== 'undefined' + const isCountLoading = isCountQueryEnabled && isLoading const isLastPage = (rowsData?.rows ?? []).length < tableEditorSnap.rowsPerPage const onPreviousPage = () => { @@ -173,7 +178,7 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) = const onRowsPerPageChange = (value: string | number) => { const rowsPerPage = Number(value) - tableEditorSnap.setRowsPerPage(isNaN(rowsPerPage) ? 100 : rowsPerPage) + tableEditorSnap.setRowsPerPage(Number.isNaN(rowsPerPage) ? 100 : rowsPerPage) snap.setPage(1) } @@ -188,8 +193,7 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) = if (isError && snap.enforceExactCount && error?.code === 408) { snap.setEnforceExactCount(false) } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isError, snap.enforceExactCount, error?.code]) + }, [isError, snap.enforceExactCount, snap.setEnforceExactCount, error?.code]) // [Joshen] One to revisit if we can consolidate this and the main return statement if (isForeignTableSelected) { @@ -243,7 +247,7 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) = icon={} type="outline" className="px-1.5" - disabled={page <= 1 || isLoading} + disabled={page <= 1 || isCountLoading} onClick={onPreviousPage} /> @@ -284,7 +288,7 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) =
- {isLoading ? ( + {isCountLoading ? (