more links

apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DeployNewReplicaPanel.tsx

@@ -72,6 +72,7 @@ const DeployNewReplicaPanel = ({
   const project = useSelectedProject()
   const org = useSelectedOrganization()
   const diskManagementV2 = useFlag('diskManagementV2')
+  const diskAndComputeFormEnabled = useFlag('diskAndComputeForm')
 
   const { data } = useReadReplicasQuery({ projectRef })
   const { data: addons, isSuccess } = useProjectAddonsQuery({ projectRef })
@@ -304,7 +305,9 @@ const DeployNewReplicaPanel = ({
                     href={
                       isFreePlan
                         ? `/org/${org?.slug}/billing?panel=subscriptionPlan`
-                        : `/project/${projectRef}/settings/addons?panel=computeInstance`
+                        : diskAndComputeFormEnabled
+                          ? `/project/${projectRef}/settings/compute-and-disk`
+                          : `/project/${projectRef}/settings/addons?panel=computeInstance`
                     }
                   >
                     {isFreePlan ? 'Upgrade to Pro' : 'Change compute size'}
@@ -411,7 +414,9 @@ const DeployNewReplicaPanel = ({
                         href={
                           isFreePlan
                             ? `/org/${org?.slug}/billing?panel=subscriptionPlan`
-                            : `/project/${projectRef}/settings/addons?panel=computeInstance`
+                            : diskAndComputeFormEnabled
+                              ? `/project/${projectRef}/settings/compute-and-disk`
+                              : `/project/${projectRef}/settings/addons?panel=computeInstance`
                         }
                       >
                         Upgrade compute size

apps/studio/components/ui/ComputeBadgeWrapper.tsx

@@ -11,6 +11,7 @@ import { INSTANCE_MICRO_SPECS } from 'lib/constants'
 import { Button, HoverCard, HoverCardContent, HoverCardTrigger, Separator } from 'ui'
 import { ComputeBadge } from 'ui-patterns/ComputeBadge'
 import ShimmeringLoader from './ShimmeringLoader'
+import { useFlag } from 'hooks/ui/useFlag'
 
 const Row = ({ label, stat }: { label: string; stat: React.ReactNode | string }) => {
   return (
@@ -36,6 +37,8 @@ export const ComputeBadgeWrapper = ({ project }: ComputeBadgeWrapperProps) => {
   // once open it will fetch the addons
   const [open, setOpenState] = useState(false)
 
+  const diskAndComputeFormEnabled = useFlag('diskAndComputeForm')
+
   // returns hardcoded values for infra
   const cpuArchitecture = getCloudProviderArchitecture(project.cloud_provider)
 
@@ -66,7 +69,11 @@ export const ComputeBadgeWrapper = ({ project }: ComputeBadgeWrapperProps) => {
     e.preventDefault()
     e.stopPropagation()
 
-    router.push(`/project/${project?.ref}/settings/addons?panel=computeInstance`)
+    if (diskAndComputeFormEnabled) {
+      router.push(`/project/${project?.ref}/settings/compute-and-disk`)
+    } else {
+      router.push(`/project/${project?.ref}/settings/addons?panel=computeInstance`)
+    }
   }
 
   const highestComputeAvailable = availableCompute?.[availableCompute.length - 1].identifier