Swap to use paginated projects endpoint (supabase#38192)

Author: joshenlim

apps/studio/components/interfaces/Account/AuditLogs.tsx

@@ -29,7 +29,8 @@ const AuditLogs = () => {
     projects: [], // project_ref[]
   })
 
-  const { data: projects } = useProjectsQuery()
+  const { data: projectsData } = useProjectsQuery()
+  const projects = projectsData?.projects ?? []
   const { data: organizations } = useOrganizationsQuery()
   const { data, error, isLoading, isSuccess, isError, isRefetching, refetch } =
     useProfileAuditLogsQuery(

apps/studio/components/interfaces/App/CommandMenu/OrgProjectSwitcher.tsx

@@ -1,10 +1,10 @@
-import { Forward, Wrench, Building } from 'lucide-react'
+import { Building, Forward, Wrench } from 'lucide-react'
 import { useMemo } from 'react'
 
-import { useProjectsQuery } from 'data/projects/projects-query'
+import { IS_PLATFORM } from 'common'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
+import { useProjectsQuery } from 'data/projects/projects-query'
 import { PageType, useRegisterCommands, useRegisterPage, useSetPage } from 'ui-patterns/CommandMenu'
-import { IS_PLATFORM } from 'common'
 import { COMMAND_MENU_SECTIONS } from './CommandMenu.utils'
 
 const PROJECT_SWITCHER_PAGE_NAME = 'Switch project'
@@ -13,10 +13,10 @@ const ORGANIZATION_SWITCHER_PAGE_NAME = 'Configure organization'
 export function useProjectSwitchCommand() {
   const setPage = useSetPage()
 
-  const { data: _projects } = useProjectsQuery({ enabled: IS_PLATFORM })
+  const { data } = useProjectsQuery({ enabled: IS_PLATFORM })
   const projects = useMemo(
-    () => (_projects ?? []).map(({ name, ref }) => ({ name, ref })),
-    [_projects]
+    () => (data?.projects ?? []).map(({ name, ref }) => ({ name, ref })),
+    [data]
   )
 
   useRegisterPage(

apps/studio/components/interfaces/App/RouteValidationWrapper.tsx

@@ -77,9 +77,10 @@ const RouteValidationWrapper = ({ children }: PropsWithChildren<{}>) => {
     }
   }, [orgsInitialized])
 
-  const { data: projects, isSuccess: projectsInitialized } = useProjectsQuery({
+  const { data, isSuccess: projectsInitialized } = useProjectsQuery({
     enabled: isLoggedIn,
   })
+  const projects = data?.projects ?? []
   const projectsRef = useLatest(projects)
 
   useEffect(() => {

apps/studio/components/interfaces/Billing/NoProjectsOnPaidOrgInfo.tsx

@@ -1,16 +1,17 @@
 import { useProjectsQuery } from 'data/projects/projects-query'
+import Link from 'next/link'
 import type { Organization } from 'types'
 import { Admonition } from 'ui-patterns'
-import Link from 'next/link'
 
 interface NoProjectsOnPaidOrgInfoProps {
   organization?: Organization
 }
 
 export const NoProjectsOnPaidOrgInfo = ({ organization }: NoProjectsOnPaidOrgInfoProps) => {
-  const { data: allProjects } = useProjectsQuery({})
+  const { data } = useProjectsQuery({})
   const projectCount =
-    allProjects?.filter((project) => project.organization_id === organization?.id).length ?? 0
+    (data?.projects ?? []).filter((project) => project.organization_id === organization?.id)
+      .length ?? 0
 
   if (
     projectCount > 0 ||

apps/studio/components/interfaces/Home/ProjectList/ProjectList.tsx

@@ -35,12 +35,14 @@ export const ProjectList = ({
   const organization = organization_ ?? selectedOrganization
 
   const {
-    data: allProjects = [],
+    data,
     isLoading: isLoadingProjects,
     isSuccess: isSuccessProjects,
     isError: isErrorProjects,
     error: projectsError,
   } = useProjectsQuery()
+  const allProjects = data?.projects ?? []
+
   const {
     isLoading: _isLoadingPermissions,
     isError: isErrorPermissions,

apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationConnection.tsx

@@ -34,8 +34,10 @@ const IntegrationConnectionItem = forwardRef<HTMLLIElement, IntegrationConnectio
     const { data: org } = useSelectedOrganizationQuery()
 
     const { type, connection } = props
-    const { data: projects } = useProjectsQuery()
-    const project = projects?.find((project) => project.ref === connection.supabase_project_ref)
+    const { data } = useProjectsQuery()
+    const project = (data?.projects ?? []).find(
+      (project) => project.ref === connection.supabase_project_ref
+    )
     const isBranchingEnabled = project?.is_branch_enabled === true
 
     const [isOpen, setIsOpen] = useState(false)

apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationPanels.tsx

@@ -149,8 +149,10 @@ const IntegrationConnection = forwardRef<HTMLLIElement, IntegrationConnectionPro
     { connection, type, actions, showNode = true, orientation = 'horizontal', className, ...props },
     ref
   ) => {
-    const { data: projects } = useProjectsQuery()
-    const project = projects?.find((project) => project.ref === connection.supabase_project_ref)
+    const { data } = useProjectsQuery()
+    const project = (data?.projects ?? []).find(
+      (project) => project.ref === connection.supabase_project_ref
+    )
 
     return (
       <li
@@ -236,8 +238,10 @@ const IntegrationConnection = forwardRef<HTMLLIElement, IntegrationConnectionPro
 
 const IntegrationConnectionOption = forwardRef<HTMLLIElement, IntegrationConnectionProps>(
   ({ connection, type, ...props }, ref) => {
-    const { data: projects } = useProjectsQuery()
-    const project = projects?.find((project) => project.ref === connection.supabase_project_ref)
+    const { data } = useProjectsQuery()
+    const project = (data?.projects ?? []).find(
+      (project) => project.ref === connection.supabase_project_ref
+    )
 
     return (
       <li

apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx

@@ -7,11 +7,11 @@ import Link from 'next/link'
 import { useEffect, useState } from 'react'
 
 import { LogDetailsPanel } from 'components/interfaces/AuditLogs'
+import { LogsDatePicker } from 'components/interfaces/Settings/Logs/Logs.DatePickers'
 import { ScaffoldContainerLegacy } from 'components/layouts/Scaffold'
 import Table from 'components/to-be-cleaned/Table'
 import AlertError from 'components/ui/AlertError'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
-import { DatePicker } from 'components/ui/DatePicker'
 import { FilterPopover } from 'components/ui/FilterPopover'
 import NoPermission from 'components/ui/NoPermission'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
@@ -31,7 +31,6 @@ import {
   Button,
   WarningIcon,
 } from 'ui'
-import { LogsDatePicker } from 'components/interfaces/Settings/Logs/Logs.DatePickers'
 
 // [Joshen considerations]
 // - Maybe fix the height of the table to the remaining height of the viewport, so that the search input is always visible
@@ -55,7 +54,8 @@ const AuditLogs = () => {
 
   const canReadAuditLogs = useCheckPermissions(PermissionAction.READ, 'notifications')
 
-  const { data: projects } = useProjectsQuery()
+  const { data: projectsData } = useProjectsQuery()
+  const projects = projectsData?.projects ?? []
   const { data: organizations } = useOrganizationsQuery()
   const { data: members } = useOrganizationMembersQuery({ slug })
   const { data: rolesData } = useOrganizationRolesV2Query({ slug })

apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx

@@ -20,18 +20,18 @@ import type { OrgPlan } from 'data/subscriptions/types'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
+import { MANAGED_BY } from 'lib/constants/infrastructure'
 import { formatCurrency } from 'lib/helpers'
 import { plans as subscriptionsPlans } from 'shared-data/plans'
 import { useOrgSettingsPageStateSnapshot } from 'state/organization-settings'
+import { Organization } from 'types/base'
 import { Button, SidePanel, cn } from 'ui'
 import DowngradeModal from './DowngradeModal'
 import { EnterpriseCard } from './EnterpriseCard'
 import { ExitSurveyModal } from './ExitSurveyModal'
 import MembersExceedLimitModal from './MembersExceedLimitModal'
 import { SubscriptionPlanUpdateDialog } from './SubscriptionPlanUpdateDialog'
 import UpgradeSurveyModal from './UpgradeModal'
-import { MANAGED_BY } from 'lib/constants/infrastructure'
-import { Organization } from 'types/base'
 
 const getPartnerManagedResourceCta = (selectedOrganization: Organization) => {
   if (selectedOrganization.managed_by === MANAGED_BY.VERCEL_MARKETPLACE) {
@@ -64,8 +64,8 @@ const PlanUpdateSidePanel = () => {
     PermissionAction.BILLING_WRITE,
     'stripe.subscriptions'
   )
-  const { data: allProjects } = useProjectsQuery()
-  const orgProjects = (allProjects || []).filter(
+  const { data: projectsData } = useProjectsQuery()
+  const orgProjects = (projectsData?.projects ?? []).filter(
     (it) => it.organization_id === selectedOrganization?.id
   )
 

apps/studio/components/interfaces/Organization/CloudMarketplace/AwsMarketplaceLinkExistingOrg.tsx

@@ -1,3 +1,12 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { RadioGroupCard, RadioGroupCardItem } from '@ui/components/radio-group-card'
+import { cn } from '@ui/lib/utils'
+import { Boxes, ChevronRight } from 'lucide-react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useMemo, useState } from 'react'
+import { SubmitHandler, useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import {
   Button,
   Collapsible_Shadcn_,
@@ -7,31 +16,22 @@ import {
   FormField_Shadcn_,
   Skeleton,
 } from 'ui'
-import { RadioGroupCard, RadioGroupCardItem } from '@ui/components/radio-group-card'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
-import { cn } from '@ui/lib/utils'
-import { ActionCard } from '../../../ui/ActionCard'
-import { Boxes, ChevronRight } from 'lucide-react'
+import { z } from 'zod'
+import { useOrganizationLinkAwsMarketplaceMutation } from '../../../../data/organizations/organization-link-aws-marketplace-mutation'
+import { useProjectsQuery } from '../../../../data/projects/projects-query'
+import { Organization } from '../../../../types'
 import {
   ScaffoldSection,
   ScaffoldSectionContent,
   ScaffoldSectionDetail,
 } from '../../../layouts/Scaffold'
+import { ActionCard } from '../../../ui/ActionCard'
 import { ButtonTooltip } from '../../../ui/ButtonTooltip'
-import { z } from 'zod'
-import { SubmitHandler, useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useMemo, useState } from 'react'
-import { Organization } from '../../../../types'
-import { useProjectsQuery } from '../../../../data/projects/projects-query'
-import { useOrganizationLinkAwsMarketplaceMutation } from '../../../../data/organizations/organization-link-aws-marketplace-mutation'
-import { toast } from 'sonner'
-import AwsMarketplaceOnboardingSuccessModal from './AwsMarketplaceOnboardingSuccessModal'
-import NewAwsMarketplaceOrgModal from './NewAwsMarketplaceOrgModal'
-import { useRouter } from 'next/router'
 import AwsMarketplaceAutoRenewalWarning from './AwsMarketplaceAutoRenewalWarning'
+import AwsMarketplaceOnboardingSuccessModal from './AwsMarketplaceOnboardingSuccessModal'
 import { CloudMarketplaceOnboardingInfo } from './cloud-marketplace-query'
-import Link from 'next/link'
+import NewAwsMarketplaceOrgModal from './NewAwsMarketplaceOrgModal'
 
 interface Props {
   organizations?: Organization[] | undefined
@@ -92,7 +92,8 @@ const AwsMarketplaceLinkExistingOrg = ({
     return { orgsLinkable: linkable, orgsNotLinkable: notLinkable }
   }, [sortedOrganizations, onboardingInfo?.organization_linking_eligibility])
 
-  const { data: projects = [] } = useProjectsQuery()
+  const { data } = useProjectsQuery()
+  const projects = data?.projects ?? []
 
   const [isNotLinkableOrgListOpen, setIsNotLinkableOrgListOpen] = useState(false)
   const [orgLinkedSuccessfully, setOrgLinkedSuccessfully] = useState(false)