diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DeployNewReplicaPanel.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DeployNewReplicaPanel.tsx index 77732fb0719..ee186de22f2 100644 --- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DeployNewReplicaPanel.tsx +++ b/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 diff --git a/apps/studio/components/ui/ComputeBadgeWrapper.tsx b/apps/studio/components/ui/ComputeBadgeWrapper.tsx index 511e9f4ccc6..c8a82d4b10d 100644 --- a/apps/studio/components/ui/ComputeBadgeWrapper.tsx +++ b/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