dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 09:25:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix project card instance size missing (#39616)

Browse Source 
* Fix project card instance size missing

* Fix types
This commit is contained in:
Joshen Lim authored and GitHub committed 2025-10-17 23:39:33 +08:00
1 parent a8c6f773e8
commit a880031cc0
6 files changed
+45 -44
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/studio/components/interfaces/Home/Home.tsx
+4 -6
View File
@@ -133,12 +133,10 @@ export const Home = () => {
)}
{showInstanceSize && (
<ComputeBadgeWrapper
project={{
ref: project?.ref,
organization_slug: organization?.slug,
cloud_provider: project?.cloud_provider,
infra_compute_size: project?.infra_compute_size,
}}
projectRef={project?.ref}
slug={organization?.slug}
cloudProvider={project?.cloud_provider}
computeSize={project?.infra_compute_size}
/>
)}
</div>
apps/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
+9 -2
View File
@@ -5,7 +5,7 @@ import CardButton from 'components/ui/CardButton'
import { ComputeBadgeWrapper } from 'components/ui/ComputeBadgeWrapper'
import type { IntegrationProjectConnection } from 'data/integrations/integrations.types'
import { ProjectIndexPageLink } from 'data/prefetchers/project.$ref'
import { OrgProject } from 'data/projects/org-projects-infinite-query'
import { getComputeSize, OrgProject } from 'data/projects/org-projects-infinite-query'
import type { ResourceWarning } from 'data/usage/resource-warnings-query'
import { useCustomContent } from 'hooks/custom-content/useCustomContent'
import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
@@ -14,6 +14,7 @@ import { inferProjectStatus } from './ProjectCard.utils'
import { ProjectCardStatus } from './ProjectCardStatus'
export interface ProjectCardProps {
slug?: string
project: OrgProject
rewriteHref?: string
githubIntegration?: IntegrationProjectConnection
@@ -22,6 +23,7 @@ export interface ProjectCardProps {
}
export const ProjectCard = ({
slug,
project,
rewriteHref,
githubIntegration,
@@ -56,7 +58,12 @@ export const ProjectCard = ({
<span className="text-sm text-foreground-light">{desc}</span>
<div className="flex items-center gap-x-1.5">
{project.status !== 'INACTIVE' && projectHomepageShowInstanceSize && (
<ComputeBadgeWrapper project={project} />
<ComputeBadgeWrapper
slug={slug}
projectRef={project.ref}
cloudProvider={project.cloud_provider}
computeSize={getComputeSize(project)}
/>
)}
{isVercelIntegrated && (
<div className="w-fit p-1 border rounded-md flex items-center text-black dark:text-white">
apps/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
+1
View File
@@ -241,6 +241,7 @@ export const ProjectList = ({ organization: organization_, rewriteHref }: Projec
{sortedProjects?.map((project) => (
<ProjectCard
key={project.ref}
slug={slug}
project={project}
rewriteHref={rewriteHref ? rewriteHref(project.ref) : undefined}
resourceWarnings={resourceWarnings?.find(
apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx
+5 -7
View File
@@ -4,7 +4,7 @@ import InlineSVG from 'react-inlinesvg'
import { ComputeBadgeWrapper } from 'components/ui/ComputeBadgeWrapper'
import type { IntegrationProjectConnection } from 'data/integrations/integrations.types'
import { OrgProject } from 'data/projects/org-projects-infinite-query'
import { getComputeSize, OrgProject } from 'data/projects/org-projects-infinite-query'
import type { ResourceWarning } from 'data/usage/resource-warnings-query'
import { BASE_PATH } from 'lib/constants'
import { Organization } from 'types'
@@ -96,12 +96,10 @@ export const ProjectTableRow = ({
<div className="w-fit">
{project.status !== 'INACTIVE' ? (
<ComputeBadgeWrapper
project={{
ref: project.ref,
organization_slug: organization?.slug,
cloud_provider: infraInformation?.cloud_provider,
infra_compute_size: infraInformation?.infra_compute_size,
}}
slug={organization?.slug}
projectRef={project.ref}
cloudProvider={project.cloud_provider}
computeSize={getComputeSize(project)}
/>
) : (
<span className="text-xs text-foreground-light">-</span>
apps/studio/components/interfaces/HomeNew/TopSection.tsx
+5 -7
View File
@@ -7,12 +7,12 @@ import { ComputeBadgeWrapper } from 'components/ui/ComputeBadgeWrapper'
import { InlineLink } from 'components/ui/InlineLink'
import { ProjectUpgradeFailedBanner } from 'components/ui/ProjectUpgradeFailedBanner'
import { useBranchesQuery } from 'data/branches/branches-query'
import { useProjectDetailQuery } from 'data/projects/project-detail-query'
import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
import { useIsOrioleDb, useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
import { DOCS_URL, PROJECT_STATUS } from 'lib/constants'
import { Badge, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
import { InstanceConfiguration } from '../Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration'
import { useProjectDetailQuery } from 'data/projects/project-detail-query'
export const TopSection = () => {
const isOrioleDb = useIsOrioleDb()
@@ -85,12 +85,10 @@ export const TopSection = () => {
</Tooltip>
)}
<ComputeBadgeWrapper
project={{
ref: project?.ref,
organization_slug: organization?.slug,
cloud_provider: project?.cloud_provider,
infra_compute_size: project?.infra_compute_size,
}}
projectRef={project?.ref}
slug={organization?.slug}
cloudProvider={project?.cloud_provider}
computeSize={project?.infra_compute_size}
/>
</div>
</div>
apps/studio/components/ui/ComputeBadgeWrapper.tsx
+21 -22
View File
@@ -2,7 +2,7 @@ import Link from 'next/link'
import { useState } from 'react'
import { getAddons } from 'components/interfaces/Billing/Subscription/Subscription.utils'
import { InfraInstanceSize } from 'components/interfaces/DiskManagement/DiskManagement.types'
import { ProjectDetail } from 'data/projects/project-detail-query'
import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
import { ProjectAddonVariantMeta } from 'data/subscriptions/types'
@@ -22,27 +22,28 @@ const Row = ({ label, stat }: { label: string; stat: React.ReactNode | string })
}
interface ComputeBadgeWrapperProps {
project: {
ref?: string
organization_slug?: string
cloud_provider?: string
infra_compute_size?: InfraInstanceSize
}
slug?: string
projectRef?: string
cloudProvider?: string
computeSize?: ProjectDetail['infra_compute_size']
}
export const ComputeBadgeWrapper = ({ project }: ComputeBadgeWrapperProps) => {
export const ComputeBadgeWrapper = ({
slug,
projectRef,
cloudProvider,
computeSize,
}: ComputeBadgeWrapperProps) => {
// handles the state of the hover card
// once open it will fetch the addons
const [open, setOpenState] = useState(false)
// returns hardcoded values for infra
const cpuArchitecture = getCloudProviderArchitecture(project.cloud_provider)
const cpuArchitecture = getCloudProviderArchitecture(cloudProvider)
// fetches addons
const { data: addons, isLoading: isLoadingAddons } = useProjectAddonsQuery(
{
projectRef: project.ref,
},
{ projectRef },
{ enabled: open }
)
const selectedAddons = addons?.selected_addons ?? []
@@ -51,7 +52,7 @@ export const ComputeBadgeWrapper = ({ project }: ComputeBadgeWrapperProps) => {
const computeInstanceMeta = computeInstance?.variant?.meta
const meta = (
computeInstanceMeta === undefined && project.infra_compute_size === 'micro'
computeInstanceMeta === undefined && computeSize === 'micro'
? INSTANCE_MICRO_SPECS
: computeInstanceMeta
) as ProjectAddonVariantMeta
@@ -62,26 +63,24 @@ export const ComputeBadgeWrapper = ({ project }: ComputeBadgeWrapperProps) => {
const highestComputeAvailable = availableCompute?.[availableCompute.length - 1].identifier
const isHighestCompute =
project?.infra_compute_size === highestComputeAvailable?.replace('ci_', '')
const isHighestCompute = computeSize === highestComputeAvailable?.replace('ci_', '')
const { data, isLoading: isLoadingSubscriptions } = useOrgSubscriptionQuery(
{ orgSlug: project?.organization_slug },
{ orgSlug: slug },
{ enabled: open }
)
const isEligibleForFreeUpgrade =
data?.plan.id !== 'free' && project?.infra_compute_size === 'nano'
const isEligibleForFreeUpgrade = data?.plan.id !== 'free' && computeSize === 'nano'
const isLoading = isLoadingAddons || isLoadingSubscriptions
if (!project?.infra_compute_size) return null
if (!computeSize) return null
return (
<HoverCard onOpenChange={() => setOpenState(!open)} openDelay={280}>
<HoverCardTrigger asChild className="group" onClick={(e) => e.stopPropagation()}>
<div>
<ComputeBadge infraComputeSize={project.infra_compute_size} />
<ComputeBadge infraComputeSize={computeSize} />
</div>
</HoverCardTrigger>
<HoverCardContent
@@ -94,7 +93,7 @@ export const ComputeBadgeWrapper = ({ project }: ComputeBadgeWrapperProps) => {
<Separator />
<div className="p-3 px-5 flex flex-row gap-4">
<div>
<ComputeBadge infraComputeSize={project?.infra_compute_size} />
<ComputeBadge infraComputeSize={computeSize} />
</div>
<div className="flex flex-col gap-4">
{isLoading ? (
@@ -145,7 +144,7 @@ export const ComputeBadgeWrapper = ({ project }: ComputeBadgeWrapperProps) => {
</div>
<div>
<Button asChild type="default" htmlType="button" role="button">
<Link href={`/project/${project?.ref}/settings/compute-and-disk`}>
<Link href={`/project/${projectRef}/settings/compute-and-disk`}>
Upgrade compute
</Link>
</Button>