[pull] master from supabase:master

apps/studio/.github/eslint-rule-baselines.json

@@ -87,7 +87,6 @@
       "components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx": 1,
       "components/interfaces/Settings/Database/SSLConfiguration.tsx": 1,
       "components/interfaces/Settings/General/ComplianceConfig/ProjectComplianceMode.tsx": 1,
-      "components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DeployNewReplicaPanel.tsx": 1,
       "components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.tsx": 1,
       "components/interfaces/Settings/Logs/LogTable.tsx": 2,
       "components/interfaces/Settings/Logs/LogsPreviewer.tsx": 2,
@@ -948,7 +947,6 @@
       "components/interfaces/Settings/General/CustomDomainConfig/DNSRecord.tsx": 1,
       "components/interfaces/Settings/General/Infrastructure/PauseProjectButton.tsx": 1,
       "components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx": 1,
-      "components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DeployNewReplicaPanel.tsx": 1,
       "components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DropAllReplicasConfirmationModal.tsx": 1,
       "components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/MapView.tsx": 1,
       "components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx": 1,
@@ -1110,7 +1108,6 @@
       "components/interfaces/Organization/Usage/UsageBarChart.tsx": 1,
       "components/interfaces/ProjectAPIDocs/FirstLevelNav.tsx": 1,
       "components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx": 1,
-      "components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DeployNewReplicaPanel.tsx": 1,
       "components/interfaces/Settings/Logs/LogSelection.tsx": 1,
       "components/interfaces/Settings/Logs/LogTable.tsx": 3,
       "components/interfaces/Settings/Logs/LogsFormatters.tsx": 2,

apps/studio/components/grid/SupabaseGrid.tsx

@@ -77,7 +77,6 @@ export const SupabaseGrid = ({
   } = useTableRowsQuery(
     {
       projectRef: project?.ref,
-      connectionString: project?.connectionString,
       tableId,
       sorts,
       filters,

apps/studio/components/grid/components/footer/pagination/Pagination.tsx

@@ -9,7 +9,7 @@ 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 { ArrowLeft, ArrowRight, HelpCircle, Loader2 } from 'lucide-react'
+import { AlertCircle, ArrowLeft, ArrowRight, HelpCircle, Loader2 } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { useRoleImpersonationStateSnapshot } from 'state/role-impersonation-state'
 import { useTableEditorStateSnapshot } from 'state/table-editor'
@@ -90,7 +90,6 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) =
   } = useTableRowsCountQuery(
     {
       projectRef: project?.ref,
-      connectionString: project?.connectionString,
       tableId: snap.table.id,
       filters,
       enforceExactCount: snap.enforceExactCount,
@@ -102,6 +101,8 @@ 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
@@ -113,7 +114,6 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) =
   const { data: rowsData, isPending: isLoadingRows } = useTableRowsQuery(
     {
       projectRef: project?.ref,
-      connectionString: project?.connectionString,
       tableId: id,
       sorts,
       filters,
@@ -144,12 +144,10 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) =
   }
 
   const onNextPage = () => {
-    if (page < maxPages) {
-      if (snap.selectedRows.size >= 1) {
-        setIsConfirmNextModalOpen(true)
-      } else {
-        goToNextPage()
-      }
+    if (snap.selectedRows.size >= 1) {
+      setIsConfirmNextModalOpen(true)
+    } else {
+      goToNextPage()
     }
   }
 
@@ -176,27 +174,14 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) =
   const onRowsPerPageChange = (value: string | number) => {
     const rowsPerPage = Number(value)
     tableEditorSnap.setRowsPerPage(isNaN(rowsPerPage) ? 100 : rowsPerPage)
+    snap.setPage(1)
   }
 
   // keep input value in-sync with actual page
   useEffect(() => {
     setValue(String(page))
   }, [page])
 
-  useEffect(() => {
-    if (!isForeignTableSelected && page && page > totalPages) {
-      snap.setPage(totalPages)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isForeignTableSelected, page, totalPages])
-
-  useEffect(() => {
-    if (id !== undefined) {
-      snap.setEnforceExactCount(rowsCountEstimate !== null && rowsCountEstimate <= THRESHOLD_COUNT)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [id])
-
   useEffect(() => {
     // If the count query encountered a timeout error with exact count
     // turn off the exact count to rely on approximate
@@ -206,6 +191,7 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) =
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isError, snap.enforceExactCount, error?.code])
 
+  // [Joshen] One to revisit if we can consolidate this and the main return statement
   if (isForeignTableSelected) {
     return (
       <div className="flex items-center gap-x-2">
@@ -251,102 +237,107 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) =
 
   return (
     <div className="flex items-center gap-x-4">
-      {isLoading && (
-        <div className="flex items-center gap-x-2">
-          <Loader2 size={12} className="animate-spin" />
-          <p className="text-xs text-foreground-light">Loading records count...</p>
-        </div>
-      )}
+      <div className="flex items-center gap-x-2">
+        <Button
+          aria-label="Previous page"
+          icon={<ArrowLeft />}
+          type="outline"
+          className="px-1.5"
+          disabled={page <= 1 || isLoading}
+          onClick={onPreviousPage}
+        />
 
-      {isSuccess && (
-        <>
-          <div className="flex items-center gap-x-2">
-            <Button
-              aria-label="Previous page"
-              icon={<ArrowLeft />}
-              type="outline"
-              className="px-1.5"
-              disabled={page <= 1 || isLoading}
-              onClick={onPreviousPage}
-            />
-            <p className="text-xs text-foreground-light">Page</p>
-            <Input
-              className="w-12"
-              size="tiny"
-              min={1}
-              max={maxPages}
-              value={value}
-              onChange={(e) => setValue(e.target.value)}
-              onKeyDown={(e) => {
-                const parsedValue = Number(value)
-                if (
-                  (e.code === 'Enter' || e.code === 'NumpadEnter') &&
-                  !Number.isNaN(parsedValue) &&
-                  parsedValue >= 1 &&
-                  parsedValue <= maxPages
-                ) {
-                  onPageChange(parsedValue)
-                }
-              }}
-            />
+        <p className="text-xs text-foreground-light">Page</p>
+
+        <Input
+          className="w-12"
+          size="tiny"
+          min={1}
+          max={isSuccess ? maxPages : undefined}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={(e) => {
+            const parsedValue = Number(value)
+            if (
+              (e.code === 'Enter' || e.code === 'NumpadEnter') &&
+              !Number.isNaN(parsedValue) &&
+              parsedValue >= 1
+            ) {
+              onPageChange(parsedValue)
+            }
+          }}
+        />
+
+        {isSuccess && hasCountData && (
+          <p className="text-xs text-foreground-light">of {totalPages.toLocaleString()}</p>
+        )}
+
+        <Button
+          aria-label="Next page"
+          icon={<ArrowRight />}
+          type="outline"
+          className="px-1.5"
+          disabled={isLastPage}
+          onClick={onNextPage}
+        />
 
-            <p className="text-xs text-foreground-light">of {totalPages.toLocaleString()}</p>
+        <RowCountSelector onRowsPerPageChange={onRowsPerPageChange} />
+      </div>
 
+      {isLoading ? (
+        <Button type="text" className="w-7" icon={<Loader2 size={12} className="animate-spin" />} />
+      ) : isError ? (
+        <Tooltip>
+          <TooltipTrigger asChild>
             <Button
-              aria-label="Next page"
-              icon={<ArrowRight />}
-              type="outline"
-              className="px-1.5"
-              disabled={page >= maxPages || isLoading}
-              onClick={onNextPage}
+              size="tiny"
+              type="text"
+              className="w-7"
+              loading={isFetching}
+              icon={<AlertCircle />}
             />
-
-            <RowCountSelector onRowsPerPageChange={onRowsPerPageChange} />
-          </div>
-
-          {!isForeignTableSelected && (
-            <div className="flex items-center gap-x-2">
-              <p className="text-xs text-foreground-light">
-                {`${countString} ${count === 0 || count > 1 ? `records` : 'record'}`}{' '}
-                {data.is_estimate ? '(estimated)' : ''}
-              </p>
-
-              {data.is_estimate && (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      size="tiny"
-                      type="text"
-                      className="px-1.5"
-                      loading={isFetching}
-                      icon={<HelpCircle />}
-                      onClick={() => {
-                        // Show warning if either NOT a table entity, or table rows estimate is beyond threshold
-                        if (rowsCountEstimate === null || count > THRESHOLD_COUNT) {
-                          setIsConfirmFetchExactCountModalOpen(true)
-                        } else snap.setEnforceExactCount(true)
-                      }}
-                    />
-                  </TooltipTrigger>
-                  <TooltipContent side="top" className="w-72">
-                    This is an estimated value as your table has more than{' '}
-                    {THRESHOLD_COUNT.toLocaleString()} rows. <br />
-                    <span className="text-brand">
-                      Click to retrieve the exact count of the table.
-                    </span>
-                  </TooltipContent>
-                </Tooltip>
-              )}
-            </div>
+          </TooltipTrigger>
+          <TooltipContent side="top">Failed to retrieve count: {error?.message}</TooltipContent>
+        </Tooltip>
+      ) : !isForeignTableSelected ? (
+        <div className="flex items-center gap-x-2">
+          {hasCountData && (
+            <p className="text-xs text-foreground-light">
+              {`${countString} ${count === 0 || count > 1 ? `records` : 'record'}`}{' '}
+              {data.is_estimate ? '(estimated)' : ''}
+            </p>
           )}
-        </>
-      )}
 
-      {isError && (
-        <p className="text-sm text-foreground-light">
-          Error fetching records count. Please refresh the page.
-        </p>
-      )}
+          {data.is_estimate && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  size="tiny"
+                  type="text"
+                  className="w-7"
+                  loading={isFetching}
+                  icon={<HelpCircle />}
+                  onClick={() => {
+                    // Show warning if either NOT a table entity, or table rows estimate is beyond threshold
+                    if (rowsCountEstimate === null || count === -1 || count > THRESHOLD_COUNT) {
+                      setIsConfirmFetchExactCountModalOpen(true)
+                    } else {
+                      snap.setEnforceExactCount(true)
+                    }
+                  }}
+                />
+              </TooltipTrigger>
+              <TooltipContent side="top" className="w-72">
+                {hasCountData
+                  ? `This is an estimated value as your table has more than ${THRESHOLD_COUNT.toLocaleString()} rows.`
+                  : `Count not automatically loaded as your table has more than ${THRESHOLD_COUNT.toLocaleString()} rows.`}{' '}
+                <br />
+                <span className="text-brand">Click to retrieve the exact count of the table.</span>
+              </TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+      ) : null}
 
       <ConfirmationModal
         visible={isConfirmPreviousModalOpen}

apps/studio/components/grid/components/formatter/ReferenceRecordPeek.tsx

@@ -39,7 +39,6 @@ export const ReferenceRecordPeek = ({ table, column, value }: ReferenceRecordPee
   } = useTableRowsQuery(
     {
       projectRef: project?.ref,
-      connectionString: project?.connectionString,
       tableId: table.id,
       filters: [{ column, operator: '=', value }],
       page: 1,

apps/studio/components/grid/components/grid/Grid.tsx

@@ -113,7 +113,6 @@ export const Grid = memo(
 
       const { data } = useForeignKeyConstraintsQuery({
         projectRef: project?.ref,
-        connectionString: project?.connectionString,
         schema: table?.schema ?? undefined,
       })
 

apps/studio/components/grid/components/header/Header.tsx

@@ -245,7 +245,6 @@ const RowHeader = ({ tableQueriesEnabled = true }: RowHeaderProps) => {
   const { data } = useTableRowsQuery(
     {
       projectRef: project?.ref,
-      connectionString: project?.connectionString,
       tableId: snap.table.id,
       sorts,
       filters,
@@ -260,7 +259,6 @@ const RowHeader = ({ tableQueriesEnabled = true }: RowHeaderProps) => {
   const { data: countData } = useTableRowsCountQuery(
     {
       projectRef: project?.ref,
-      connectionString: project?.connectionString,
       tableId: snap.table.id,
       filters,
       enforceExactCount: snap.enforceExactCount,

apps/studio/components/grid/components/header/HeaderNew.tsx

@@ -246,7 +246,6 @@ const RowHeader = ({ tableQueriesEnabled = true }: RowHeaderProps) => {
   const { data } = useTableRowsQuery(
     {
       projectRef: project?.ref,
-      connectionString: project?.connectionString,
       tableId: snap.table.id,
       sorts,
       filters,
@@ -261,7 +260,6 @@ const RowHeader = ({ tableQueriesEnabled = true }: RowHeaderProps) => {
   const { data: countData } = useTableRowsCountQuery(
     {
       projectRef: project?.ref,
-      connectionString: project?.connectionString,
       tableId: snap.table.id,
       filters,
       enforceExactCount: snap.enforceExactCount,

apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx

@@ -10,16 +10,16 @@ import { isEqual } from 'lodash'
 import { ChevronDown, List } from 'lucide-react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
-  type RoleImpersonationState,
   useRoleImpersonationStateSnapshot,
+  type RoleImpersonationState,
 } from 'state/role-impersonation-state'
 import { useTableEditorTableStateSnapshot } from 'state/table-editor-table'
 import {
   Button,
+  Popover_Shadcn_,
   PopoverContent_Shadcn_,
   PopoverSeparator_Shadcn_,
   PopoverTrigger_Shadcn_,
-  Popover_Shadcn_,
 } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 
@@ -72,7 +72,6 @@ export const SortPopoverPrimitive = ({
   const { data: countData } = useTableRowsCountQuery(
     {
       projectRef: project?.ref,
-      connectionString: project?.connectionString,
       tableId: snap.table.id,
       filters,
       enforceExactCount: snap.enforceExactCount,