diff --git a/apps/studio/components/interfaces/Connect/ConnectionPanel.tsx b/apps/studio/components/interfaces/Connect/ConnectionPanel.tsx index e3ead1ce7bf..28770152c76 100644 --- a/apps/studio/components/interfaces/Connect/ConnectionPanel.tsx +++ b/apps/studio/components/interfaces/Connect/ConnectionPanel.tsx @@ -20,19 +20,20 @@ import { import { Admonition } from 'ui-patterns' import { ConnectionParameters } from './ConnectionParameters' -interface ConnectionPanelProps { +type IPv4Status = { + type: 'error' | 'success' + title: string + description?: string | ReactNode + links?: { text: string; url: string }[] +} + +interface BaseConnectionPanelProps { type?: 'direct' | 'transaction' | 'session' badge?: string title: string description: string contentFooter?: ReactNode connectionString: string - ipv4Status?: { - type: 'error' | 'success' - title: string - description?: string | ReactNode - links?: { text: string; url: string }[] - } notice?: string[] parameters?: Array<{ key: string @@ -45,6 +46,29 @@ interface ConnectionPanelProps { onCopyCallback: () => void } +// Platform environment requires ipv4Status +interface PlatformConnectionPanelProps extends BaseConnectionPanelProps { + env: 'platform' + ipv4Status: IPv4Status +} + +// CLI and self-hosted environments don't need ipv4Status +interface NonPlatformConnectionPanelProps extends BaseConnectionPanelProps { + env: 'cli' | 'self-hosted' + ipv4Status?: never +} + +// Legacy props for backwards compatibility (infers env from IS_PLATFORM) +interface LegacyConnectionPanelProps extends BaseConnectionPanelProps { + env?: never + ipv4Status?: IPv4Status +} + +type ConnectionPanelProps = + | PlatformConnectionPanelProps + | NonPlatformConnectionPanelProps + | LegacyConnectionPanelProps + const IPv4StatusIcon = ({ className, active }: { className?: string; active: boolean }) => { return (
@@ -103,6 +127,7 @@ export const CodeBlockFileHeader = ({ title }: { title: string }) => { export const ConnectionPanel = ({ type = 'direct', + env, badge, title, description, @@ -119,6 +144,9 @@ export const ConnectionPanel = ({ const { ref: projectRef } = useParams() const state = useDatabaseSelectorStateSnapshot() + // Use explicit env prop if provided, otherwise fall back to IS_PLATFORM check + const isPlatformEnv = env === 'platform' || (env === undefined && IS_PLATFORM) + const { data: poolingInfo } = useSupavisorConfigurationQuery({ projectRef }) const poolingConfiguration = poolingInfo?.find((x) => x.identifier === state.selectedDatabaseId) const isSessionMode = poolingConfiguration?.pool_mode === 'session' @@ -189,7 +217,7 @@ export const ConnectionPanel = ({ )}
- {IS_PLATFORM && ipv4Status && ( + {isPlatformEnv && ipv4Status && (
@@ -219,7 +247,7 @@ export const ConnectionPanel = ({
)} - {IS_PLATFORM && type === 'session' && ( + {isPlatformEnv && type === 'session' && (
@@ -234,7 +262,7 @@ export const ConnectionPanel = ({
)} - {IS_PLATFORM && ipv4Status?.type === 'error' && ( + {isPlatformEnv && ipv4Status?.type === 'error' && ( { const state = useDatabaseSelectorStateSnapshot() // Fetch deployment mode (CLI vs self-hosted) for non-platform environments - const { data: deploymentMode } = useDeploymentModeQuery() + const { data: deploymentMode, isPending: isLoadingDeploymentMode } = useDeploymentModeQuery() const isCliMode = deploymentMode?.is_cli_mode ?? false // Determine which connection methods are available based on environment @@ -196,7 +196,7 @@ export const DatabaseConnectionString = () => { : isSuccessSupavisorConfig const error = poolerError || readReplicasError - const isLoading = isLoadingPoolerConfig || isLoadingReadReplicas + const isLoading = isLoadingPoolerConfig || isLoadingReadReplicas || isLoadingDeploymentMode const isError = isErrorPoolerConfig || isErrorReadReplicas const isSuccess = isSuccessPoolerConfig && isSuccessReadReplicas @@ -434,30 +434,47 @@ export const DatabaseConnectionString = () => {
)}
- {selectedMethod === 'direct' && (IS_PLATFORM || isCliMode) && ( + {selectedMethod === 'direct' && IS_PLATFORM && ( handleCopy(selectedTab, 'direct')} + /> + )} + + {selectedMethod === 'direct' && isCliMode && ( + { {selectedMethod === 'transaction' && IS_PLATFORM && ( { {selectedMethod === 'transaction' && isSelfHosted && ( { {selectedMethod === 'session' && IS_PLATFORM && ( { {selectedMethod === 'session' && isSelfHosted && ( { + const port = process.env.POSTGRES_PORT ? Number(process.env.POSTGRES_PORT) : 5432 + // Validate port is a positive finite integer + if (!Number.isFinite(port) || port <= 0 || !Number.isInteger(port)) { + console.warn(`Invalid POSTGRES_PORT "${process.env.POSTGRES_PORT}", using default 5432`) + return 5432 + } + return port +})() export const POSTGRES_HOST = process.env.POSTGRES_HOST || 'db' export const POSTGRES_DATABASE = process.env.POSTGRES_DB || 'postgres' export const POSTGRES_PASSWORD = process.env.POSTGRES_PASSWORD || 'postgres'