From 79b2eeb8b28049123f9da118a741e32e04eaa5ae Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Sat, 11 Jul 2026 02:34:16 +1000
Subject: [PATCH] fix(studio): make replica pricing learn more an inline link
 (#47825)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## What kind of change does this PR introduce?

Bug fix / polish

## What is the current behavior?

On the add-destination sheet for read replicas, “Learn more” sits as a
stray sibling next to the cost copy.

## What is the new behavior?

Cost copy and “Learn more” are one paragraph, with the link inline and
styled like `InlineLink` (underline, pointer cursor, hover colour):

> New replica will cost an additional $16.25/month. Learn more

| Before | After |
| --- | --- |
| <img width="1258" height="120" alt="CleanShot 2026-07-10 at 12 21
21@2x"
src="https://github.com/user-attachments/assets/bb47461e-e856-4cf2-b81a-f8e9aa9ebf75"
/> | <img width="1256" height="114" alt="CleanShot 2026-07-10 at 12 23
48@2x"
src="https://github.com/user-attachments/assets/094332be-ad2e-4782-94ac-08c8775a4665"
/> |

_Note that the grey icon square is being fixed separately in
https://github.com/supabase/supabase/pull/47794._

## To test

On the staging preview, open Database → Replication → Add destination →
Read replica, and check the footer cost line in light and dark mode —
“Learn more” should sit inline, show a pointer cursor, and change colour
on hover.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Summary by CodeRabbit

* **New Features**
* Added estimated monthly pricing to the read replica pricing dialog
trigger (“additional {cost}/month”).

* **UI Improvements**
* Moved the pricing/cost impact messaging from the form footer to the
pricing dialog area.
* Refined the “Learn more” link/button styling and layout for a cleaner
presentation.



<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../ReadReplicaPricingDialog.tsx               | 18 ++++++++++++------
 .../DestinationPanel/ReadReplicaForm/index.tsx |  9 ++-------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaPricingDialog.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaPricingDialog.tsx
index 4b47819f797..a6e643e5660 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaPricingDialog.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaPricingDialog.tsx
@@ -25,17 +25,23 @@ import { DOCS_URL } from '@/lib/constants'
 
 export const ReadReplicaPricingDialog = () => {
   const { data: project } = useSelectedProjectQuery()
-  const { compute, disk, iops, throughput } = useGetReplicaCost()
+  const { totalCost, compute, disk, iops, throughput } = useGetReplicaCost()
 
   const showNewDiskManagementUI = project?.cloud_provider === 'AWS'
 
   return (
     <Dialog>
-      <DialogTrigger asChild>
-        <button className={cn(InlineLinkClassName, 'text-sm text-foreground-light')}>
-          Learn more
-        </button>
-      </DialogTrigger>
+      <p className="text-sm">
+        New replica will cost an additional <span translate="no">{totalCost}/month</span>.{' '}
+        <DialogTrigger asChild>
+          <button
+            type="button"
+            className={cn(InlineLinkClassName, 'cursor-pointer text-foreground-light')}
+          >
+            Learn more
+          </button>
+        </DialogTrigger>
+      </p>
       <DialogContent
         size={showNewDiskManagementUI ? 'medium' : 'small'}
         aria-describedby={undefined}
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/index.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/index.tsx
index b4599471110..e5e89e08a2d 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/index.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/index.tsx
@@ -18,7 +18,6 @@ import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { ReadReplicaEligibilityWarnings } from './ReadReplicaEligibilityWarnings'
 import { ReadReplicaPricingDialog } from './ReadReplicaPricingDialog'
 import { useCheckEligibilityDeployReplica } from './useCheckEligibilityDeployReplica'
-import { useGetReplicaCost } from './useGetReplicaCost'
 import { AVAILABLE_REPLICA_REGIONS } from '@/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.constants'
 import { Region, useReadReplicaSetUpMutation } from '@/data/read-replicas/replica-setup-mutation'
 import { useReadReplicasQuery } from '@/data/read-replicas/replicas-query'
@@ -36,7 +35,6 @@ export const ReadReplicaForm = ({ onSuccess, onClose }: ReadReplicaFormProps) =>
   const [defaultRegion] = Object.entries(AWS_REGIONS).find(
     ([_, name]) => name === AWS_REGIONS_DEFAULT
   ) ?? ['ap-southeast-1']
-  const { totalCost } = useGetReplicaCost()
   const { can: canDeployReplica } = useCheckEligibilityDeployReplica()
 
   const [selectedRegion, setSelectedRegion] = useState<string>(defaultRegion)
@@ -112,12 +110,9 @@ export const ReadReplicaForm = ({ onSuccess, onClose }: ReadReplicaFormProps) =>
           </Select>
         </FormItemLayout>
       </SheetSection>
-      <SheetFooter className="justify-between!">
-        <div className="flex items-center gap-x-4">
+      <SheetFooter className="justify-between! gap-x-6">
+        <div className="flex items-center gap-x-3">
           <InfoIcon className="h-5 w-5" />
-          <p className="text-sm">
-            New replica will cost an additional <span translate="no">{totalCost}/month</span>
-          </p>
           <ReadReplicaPricingDialog />
         </div>