Fix project card instance size missing (supabase#39616)

joshenlim · web-flow · commit a880031cc0ae · 2025-10-17T23:39:33.000+08:00
* Fix project card instance size missing

* Fix types
diff --git a/apps/studio/components/interfaces/Home/Home.tsx b/apps/studio/components/interfaces/Home/Home.tsx
@@ -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>
diff --git a/apps/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx b/apps/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
@@ -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">
diff --git a/apps/studio/components/interfaces/Home/ProjectList/ProjectList.tsx b/apps/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
@@ -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(
diff --git a/apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx b/apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx
@@ -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>
diff --git a/apps/studio/components/interfaces/HomeNew/TopSection.tsx b/apps/studio/components/interfaces/HomeNew/TopSection.tsx
@@ -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>
diff --git a/apps/studio/components/ui/ComputeBadgeWrapper.tsx b/apps/studio/components/ui/ComputeBadgeWrapper.tsx
@@ -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>
