From 4812ffa0f7d1fa295abfa08c01a8406d23065076 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Tue, 5 May 2026 14:01:56 +0800
Subject: [PATCH] Add admonition RE ipv4 addon for connect if direct connection
 selected (#45511)

## Context

Adds an admonition in the Connect sheet to inform users about the IPv4
addon if direct connection is selected and project doesn't have the IPv4
addon

Decided to place it below the copy prompt CTA since it's technically a
secondary action (users with IPv6 networks wouldn't need this)

<img width="755" height="707" alt="image"
src="https://github.com/user-attachments/assets/f1d29a56-db5f-4807-9545-a862434fea8f"
/>


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

* **New Features**
* Displays contextual guidance in direct connection mode when the IPv4
add-on is not enabled, including quick-access links to configure IPv4
settings and to open IPv4 documentation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
---
 .../ConnectSheet/ConnectStepsSection.tsx      | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.tsx b/apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.tsx
index d084a131340..5e2995765c1 100644
--- a/apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.tsx
@@ -1,6 +1,9 @@
 import { useParams } from 'common'
 import dynamic from 'next/dynamic'
+import Link from 'next/link'
 import { useMemo, useRef } from 'react'
+import { Button } from 'ui'
+import { Admonition } from 'ui-patterns'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 
 import type {
@@ -14,11 +17,13 @@ import { ConnectSheetStep } from './ConnectSheetStep'
 import { CopyPromptAdmonition } from './CopyPromptAdmonition'
 import { getConnectionStrings } from './DatabaseSettings.utils'
 import { getAddons } from '@/components/interfaces/Billing/Subscription/Subscription.utils'
+import { DocsButton } from '@/components/ui/DocsButton'
 import { useProjectSettingsV2Query } from '@/data/config/project-settings-v2-query'
 import { usePgbouncerConfigQuery } from '@/data/database/pgbouncer-config-query'
 import { useSupavisorConfigurationQuery } from '@/data/database/supavisor-configuration-query'
 import { useProjectAddonsQuery } from '@/data/subscriptions/project-addons-query'
 import { useCheckEntitlements } from '@/hooks/misc/useCheckEntitlements'
+import { DOCS_URL } from '@/lib/constants'
 import { pluckObjectFields } from '@/lib/helpers'
 
 interface ConnectStepsSectionProps {
@@ -145,9 +150,25 @@ function StepContent({
 }
 
 export function ConnectStepsSection({ steps, state, projectKeys }: ConnectStepsSectionProps) {
+  const { ref } = useParams()
   const stepsContainerRef = useRef<HTMLDivElement | null>(null)
   const connectionStringPooler = useConnectionStringPooler()
 
+  const { data: ipv4Addon } = useProjectAddonsQuery(
+    { projectRef: ref },
+    {
+      select: (data) => {
+        const selectedAddons = data?.selected_addons ?? []
+        return selectedAddons.find((addon) => addon.type === 'ipv4')
+      },
+    }
+  )
+  const showIpv4AddonNotice =
+    state.mode === 'direct' &&
+    !ipv4Addon &&
+    (state.connectionMethod === 'direct' ||
+      (state.connectionMethod === 'transaction' && !state.useSharedPooler))
+
   if (steps.length === 0) return null
 
   return (
@@ -157,6 +178,20 @@ export function ConnectStepsSection({ steps, state, projectKeys }: ConnectStepsS
 
         <CopyPromptAdmonition stepsContainerRef={stepsContainerRef} />
 
+        {showIpv4AddonNotice && (
+          <Admonition
+            type="default"
+            title={`${state.connectionMethod === 'direct' ? 'Direct connections use' : 'Transaction pooler uses'} IPv6 by default`}
+            description="Enable the dedicated IPv4 address add-on to connect from IPv4-only networks"
+            actions={[
+              <Button asChild key="addon" type="default">
+                <Link href={`/project/${ref}/settings/addons?panel=ipv4`}>Enable IPv4 add-on</Link>
+              </Button>,
+              <DocsButton key="docs" href={`${DOCS_URL}/guides/platform/ipv4-address`} />,
+            ]}
+          />
+        )}
+
         <div className="mt-6" ref={stepsContainerRef}>
           {steps.map((step, index) => (
             <ConnectSheetStep