diff --git a/apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.tsx b/apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.tsx index d084a13134..5e2995765c 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(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 + {showIpv4AddonNotice && ( + + Enable IPv4 add-on + , + , + ]} + /> + )} +
{steps.map((step, index) => (