mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 20:05:06 +03:00
Alaister YoungandAlaister Young
421eaedd50
Platform orgs can have very high project cardinality (>1M projects),
making the project count query expensive. This disables the query across
all count-only usages for platform plan orgs.
**Changed:**
- `OrgSelector` — disable query, show "Platform" label instead of count
- `OrganizationCard` — disable query, hide project count for platform
orgs
- `NoProjectsOnPaidOrgInfo` — disable query (component already returned
null for platform orgs)
**Not changed:**
- `TeamSettings` — also uses the count, but the warning it powers is
specifically relevant for orgs with a lot of projects, and it's tucked
away on the team settings page rather than on every page load.
## To test
- On a platform org, verify no `/organizations/{slug}/projects` requests
fire from the org selector, org cards, or billing info
- For regular orgs, verify the project count still displays normally
everywhere
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Organization selector now shows a dedicated "Platform" label for
platform organizations instead of a project count.
* Reduced unnecessary network activity by skipping project fetching when
a platform organization is selected, improving load performance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
import { useIsMFAEnabled } from 'common'
|
|
import { Boxes, Lock } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { Fragment } from 'react'
|
|
import { cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
|
|
|
|
import { ActionCard } from '@/components/ui/ActionCard'
|
|
import PartnerIcon from '@/components/ui/PartnerIcon'
|
|
import { useOrgProjectsInfiniteQuery } from '@/data/projects/org-projects-infinite-query'
|
|
import type { Organization } from '@/types'
|
|
|
|
export const OrganizationCard = ({
|
|
organization,
|
|
href,
|
|
isLink = true,
|
|
className,
|
|
onClick,
|
|
}: {
|
|
organization: Organization
|
|
href?: string
|
|
isLink?: boolean
|
|
className?: string
|
|
onClick?: () => void
|
|
}) => {
|
|
const isUserMFAEnabled = useIsMFAEnabled()
|
|
const isPlatformOrg = organization.plan?.id === 'platform'
|
|
const { data } = useOrgProjectsInfiniteQuery(
|
|
{ slug: organization.slug },
|
|
{ enabled: !isPlatformOrg }
|
|
)
|
|
const numProjects = data?.pages[0].pagination.count ?? 0
|
|
const isMfaRequired = organization.organization_requires_mfa
|
|
|
|
const renderContent = () => (
|
|
<ActionCard
|
|
bgColor="bg border"
|
|
className={cn(
|
|
'flex items-center min-h-[70px] [&>div]:w-full [&>div]:items-center max-h-min',
|
|
className
|
|
)}
|
|
icon={<Boxes size={18} strokeWidth={1} className="text-foreground" />}
|
|
title={organization.name}
|
|
onClick={onClick}
|
|
description={
|
|
<div className="flex items-center justify-between text-xs text-foreground-light font-sans">
|
|
<div className="flex items-center gap-x-1">
|
|
<span>{organization.plan.name} Plan</span>
|
|
{numProjects > 0 && (
|
|
<>
|
|
<span className="text-foreground-lighter">·</span>
|
|
<span>
|
|
{numProjects} project{numProjects > 1 ? 's' : ''}
|
|
</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-x-2">
|
|
<PartnerIcon organization={organization} />
|
|
{isMfaRequired && (
|
|
<Tooltip>
|
|
<TooltipTrigger className="cursor-default">
|
|
<Lock size={12} />
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom" className={!isUserMFAEnabled ? 'w-80' : ''}>
|
|
MFA enforced
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
)}
|
|
</div>
|
|
</div>
|
|
}
|
|
/>
|
|
)
|
|
|
|
if (isLink) {
|
|
return <Link href={href ?? `/org/${organization.slug}`}>{renderContent()}</Link>
|
|
} else {
|
|
return <Fragment>{renderContent()}</Fragment>
|
|
}
|
|
}
|