connect dialog: add shared pooler to transaction pooler (supabase#39981)

fix shared pooler in transaction pooler + add link to docs in connect dialog

Author: fsansalvadore

apps/studio/components/interfaces/Connect/Connect.tsx

@@ -353,7 +353,7 @@ export const Connect = () => {
             {connectionTypes.length === 1 ? ` via ${connectionTypes[0].label.toLowerCase()}` : null}
           </DialogTitle>
           <DialogDescription>
-            Get the connection strings and environment variables for your app
+            Get the connection strings and environment variables for your app.
           </DialogDescription>
         </DialogHeader>
 

apps/studio/components/interfaces/Connect/ConnectionPanel.tsx

@@ -15,6 +15,7 @@ import {
   Collapsible_Shadcn_,
   CollapsibleContent_Shadcn_,
   CollapsibleTrigger_Shadcn_,
+  Separator,
   WarningIcon,
 } from 'ui'
 import { Admonition } from 'ui-patterns'
@@ -25,6 +26,7 @@ interface ConnectionPanelProps {
   badge?: string
   title: string
   description: string
+  contentFooter?: ReactNode
   connectionString: string
   ipv4Status: {
     type: 'error' | 'success'
@@ -105,6 +107,7 @@ export const ConnectionPanel = ({
   badge,
   title,
   description,
+  contentFooter,
   connectionString,
   ipv4Status,
   notice,
@@ -123,16 +126,24 @@ export const ConnectionPanel = ({
 
   const links = ipv4Status.links ?? []
 
+  const isTransactionDedicatedPooler = type === 'transaction' && badge === 'Dedicated Pooler'
+
   return (
     <div className="relative text-sm flex flex-col gap-5 lg:grid lg:grid-cols-12 w-full">
       <div className="col-span-4 flex flex-col">
         <div className="flex items-center gap-x-2 mb-2">
           <h1 className="text-sm">{title}</h1>
-          {!!badge && <Badge>{badge}</Badge>}
+          {!!badge && !isTransactionDedicatedPooler && <Badge>{badge}</Badge>}
         </div>
         <p className="text-sm text-foreground-light mb-4">{description}</p>
+        {contentFooter}
       </div>
       <div className="col-span-8 flex flex-col gap-2">
+        {isTransactionDedicatedPooler && (
+          <div className="text-xs flex items-center text-foreground-light">
+            Using the Dedicated Pooler:
+          </div>
+        )}
         <div className="flex flex-col -space-y-px">
           {fileTitle && <CodeBlockFileHeader title={fileTitle} />}
           {type === 'transaction' && isSessionMode ? (
@@ -177,7 +188,6 @@ export const ConnectionPanel = ({
               {parameters.length > 0 && <ConnectionParameters parameters={parameters} />}
             </>
           )}
-          {children}
         </div>
         <div className="flex flex-col -space-y-px w-full">
           {IS_PLATFORM && (
@@ -278,6 +288,8 @@ export const ConnectionPanel = ({
             </Collapsible_Shadcn_>
           )}
         </div>
+        {isTransactionDedicatedPooler && <Separator className="w-full" />}
+        {children}
       </div>
     </div>
   )

apps/studio/components/interfaces/Connect/ConnectionParameters.tsx

@@ -28,7 +28,7 @@ export const ConnectionParameters = ({ parameters }: ConnectionParametersProps)
     <Collapsible_Shadcn_ open={isOpen} onOpenChange={setIsOpen} className="group -space-y-px">
       <CollapsibleTrigger_Shadcn_
         asChild
-        className="w-full justify-start rounded-t-none !last:rounded-b group-data-[state=open]:rounded-b-none border-light px-3"
+        className="w-full justify-start rounded-t-none !last:rounded-b group-data-[state=open]:rounded-b-none data-[state=open]:border-light border-light px-3"
       >
         <Button
           type="default"

apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx

@@ -1,6 +1,7 @@
-import { ChevronDown, GlobeIcon, InfoIcon } from 'lucide-react'
+import { BookOpen, ChevronDown, ChevronRight, ExternalLink } from 'lucide-react'
 import { parseAsString, useQueryState } from 'nuqs'
 import { HTMLAttributes, ReactNode, useEffect, useMemo, useState } from 'react'
+import Link from 'next/link'
 
 import { useParams } from 'common'
 import { getAddons } from 'components/interfaces/Billing/Subscription/Subscription.utils'
@@ -19,6 +20,7 @@ import { pluckObjectFields } from 'lib/helpers'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
 import {
   Badge,
+  Button,
   CodeBlock,
   CollapsibleContent_Shadcn_,
   CollapsibleTrigger_Shadcn_,
@@ -30,6 +32,7 @@ import {
   SelectValue_Shadcn_,
   Select_Shadcn_,
   Separator,
+  TextLink,
   cn,
 } from 'ui'
 import { Admonition } from 'ui-patterns'
@@ -275,55 +278,69 @@ export const DatabaseConnectionString = () => {
 
   return (
     <div className="flex flex-col">
-      <div
-        className={cn(
-          'flex flex-col md:flex-row items-stretch md:items-center gap-2 md:gap-3',
-          DIALOG_PADDING_X
-        )}
-      >
-        <div className="flex">
-          <span className="flex items-center text-foreground-lighter px-3 rounded-lg rounded-r-none text-xs border border-button border-r-0">
-            Type
-          </span>
-          <Select_Shadcn_ value={selectedTab} onValueChange={handleTabChange}>
-            <SelectTrigger_Shadcn_ size="small" className="w-auto rounded-l-none">
-              <SelectValue_Shadcn_ />
-            </SelectTrigger_Shadcn_>
-            <SelectContent_Shadcn_>
-              {DATABASE_CONNECTION_TYPES.map((type) => (
-                <SelectItem_Shadcn_ key={type.id} value={type.id}>
-                  {type.label}
-                </SelectItem_Shadcn_>
-              ))}
-            </SelectContent_Shadcn_>
-          </Select_Shadcn_>
-        </div>
-        <DatabaseSelector
-          portal={false}
-          buttonProps={{ size: 'small' }}
-          onSelectId={handleDatabaseChange}
-        />
-        <div className="flex">
-          <span className="flex items-center text-foreground-lighter px-3 rounded-lg rounded-r-none text-xs border border-button border-r-0">
-            Method
-          </span>
-          <Select_Shadcn_ value={selectedMethod} onValueChange={handleMethodChange}>
-            <SelectTrigger_Shadcn_ size="small" className="w-auto rounded-l-none">
-              <SelectValue_Shadcn_ size="tiny">
-                {connectionStringMethodOptions[selectedMethod].label}
-              </SelectValue_Shadcn_>
-            </SelectTrigger_Shadcn_>
-            <SelectContent_Shadcn_ className="max-w-sm">
-              {Object.keys(connectionStringMethodOptions).map((method) => (
-                <ConnectionStringMethodSelectItem
-                  key={method}
-                  method={method as ConnectionStringMethod}
-                  poolerBadge={poolerBadge}
-                />
-              ))}
-            </SelectContent_Shadcn_>
-          </Select_Shadcn_>
+      <div className={cn('w-full flex flex-col items-start gap-2 lg:gap-3', DIALOG_PADDING_X)}>
+        <div className="flex w-full flex-col md:flex-row items-stretch md:items-center gap-2 md:gap-3">
+          <div className="flex">
+            <span className="w-1/2 md:w-auto flex items-center text-foreground-lighter px-3 rounded-lg rounded-r-none text-xs border border-button border-r-0">
+              Type
+            </span>
+            <Select_Shadcn_ value={selectedTab} onValueChange={handleTabChange}>
+              <SelectTrigger_Shadcn_ size="small" className="w-full md:w-auto rounded-l-none">
+                <SelectValue_Shadcn_ />
+              </SelectTrigger_Shadcn_>
+              <SelectContent_Shadcn_>
+                {DATABASE_CONNECTION_TYPES.map((type) => (
+                  <SelectItem_Shadcn_ key={type.id} value={type.id}>
+                    {type.label}
+                  </SelectItem_Shadcn_>
+                ))}
+              </SelectContent_Shadcn_>
+            </Select_Shadcn_>
+          </div>
+          <DatabaseSelector
+            portal={false}
+            buttonProps={{
+              size: 'small',
+              className: 'w-full justify-between pr-2.5 [&_svg]:h-4',
+            }}
+            className="w-full md:w-auto [&>span]:w-1/2 [&>span]:md:w-auto"
+            onSelectId={handleDatabaseChange}
+          />
+          <div className="flex">
+            <span className="w-1/2 md:w-auto flex items-center text-foreground-lighter px-3 rounded-lg rounded-r-none text-xs border border-button border-r-0">
+              Method
+            </span>
+            <Select_Shadcn_ value={selectedMethod} onValueChange={handleMethodChange}>
+              <SelectTrigger_Shadcn_ size="small" className="w-full md:w-auto rounded-l-none">
+                <SelectValue_Shadcn_ size="tiny">
+                  {connectionStringMethodOptions[selectedMethod].label}
+                </SelectValue_Shadcn_>
+              </SelectTrigger_Shadcn_>
+              <SelectContent_Shadcn_ className="max-w-sm">
+                {Object.keys(connectionStringMethodOptions).map((method) => (
+                  <ConnectionStringMethodSelectItem
+                    key={method}
+                    method={method as ConnectionStringMethod}
+                    poolerBadge={method === 'transaction' ? poolerBadge : undefined}
+                  />
+                ))}
+              </SelectContent_Shadcn_>
+            </Select_Shadcn_>
+          </div>
         </div>
+        <p className="text-xs inline-flex items-center gap-1 text-foreground-lighter">
+          <BookOpen size={12} strokeWidth={1.5} className="-mb-px" /> Learn how to connect to your
+          Postgres databases.
+          <Link
+            href="https://supabase.com/docs/guides/database/connecting-to-postgres"
+            className="underline transition hover:text-foreground inline-flex items-center gap-1"
+            target="_blank"
+            rel="noreferrer"
+            title="Read docs"
+          >
+            Read docs <ExternalLink size={12} strokeWidth={1.5} />
+          </Link>
+        </p>
       </div>
 
       {isLoading && (
@@ -458,7 +475,49 @@ export const DatabaseConnectionString = () => {
                     { ...CONNECTION_PARAMETERS.pool_mode, value: 'transaction' },
                   ]}
                   onCopyCallback={() => handleCopy(selectedTab, 'transaction_pooler')}
-                />
+                >
+                  {!sharedPoolerPreferred && !ipv4Addon && (
+                    <Collapsible_Shadcn_ className="group">
+                      <CollapsibleTrigger_Shadcn_
+                        asChild
+                        className="w-full justify-start !last:rounded-b group-data-[state=open]:rounded-b-none border-light px-3"
+                      >
+                        <Button
+                          type="default"
+                          size="large"
+                          iconRight={
+                            <ChevronDown className="transition group-data-[state=open]:rotate-180" />
+                          }
+                          className="text-foreground !bg-dash-sidebar justify-between"
+                        >
+                          <div className="text-xs flex items-center py-2 px-1">
+                            <span>Using the Shared Pooler</span>
+                            <Badge variant={'brand'} size={'small'} className="ml-2">
+                              IPv4 compatible
+                            </Badge>
+                          </div>
+                        </Button>
+                      </CollapsibleTrigger_Shadcn_>
+                      <CollapsibleContent_Shadcn_ className="bg-dash-sidebar rounded-b border text-xs">
+                        <CodeBlock
+                          wrapperClassName={cn(
+                            '[&_pre]:border-x-0 [&_pre]:border-t-0 [&_pre]:px-4 [&_pre]:py-3',
+                            '[&_pre]:rounded-t-none'
+                          )}
+                          language={lang}
+                          value={supavisorConnectionStrings['pooler'][selectedTab]}
+                          className="[&_code]:text-[12px] [&_code]:text-foreground"
+                          hideLineNumbers
+                          onCopyCallback={() => handleCopy(selectedTab, 'transaction_pooler')}
+                        />
+                        <p className="px-3 py-2 text-foreground-light">
+                          Only recommended when your network does not support IPv6. Added latency
+                          compared to dedicated pooler.
+                        </p>
+                      </CollapsibleContent_Shadcn_>
+                    </Collapsible_Shadcn_>
+                  )}
+                </ConnectionPanel>
               )}
 
               {selectedMethod === 'session' && IS_PLATFORM && (
@@ -587,14 +646,30 @@ const ConnectionStringMethodSelectItem = ({
   poolerBadge,
 }: {
   method: ConnectionStringMethod
-  poolerBadge: string
-}) => (
-  <SelectItem_Shadcn_ value={method} className="[&>span:first-child]:top-3.5">
-    <div className="flex flex-col w-full py-1">
-      <div>{connectionStringMethodOptions[method].label}</div>
-      <div className="text-foreground-lighter text-xs">
-        {connectionStringMethodOptions[method].description}
+  poolerBadge?: string
+}) => {
+  const badges: ReactNode[] = []
+
+  if (method !== 'direct') {
+    badges.push(<Badge className="flex gap-x-1">Shared Pooler</Badge>)
+  }
+  if (poolerBadge === 'Dedicated Pooler') {
+    badges.push(<Badge className="flex gap-x-1">{poolerBadge}</Badge>)
+  }
+
+  return (
+    <SelectItem_Shadcn_ value={method} className="[&>span:first-child]:top-3.5">
+      <div className="flex flex-col w-full py-1">
+        <div className="flex gap-x-2 items-center">
+          {connectionStringMethodOptions[method].label}
+        </div>
+        <div className="text-foreground-lighter text-xs">
+          {connectionStringMethodOptions[method].description}
+        </div>
+        <div className="flex items-center gap-0.5 flex-wrap mt-1.5">
+          {badges.map((badge) => badge)}
+        </div>
       </div>
-    </div>
-  </SelectItem_Shadcn_>
-)
+    </SelectItem_Shadcn_>
+  )
+}

apps/studio/components/ui/DatabaseSelector.tsx

@@ -38,6 +38,7 @@ interface DatabaseSelectorProps {
   onSelectId?: (id: string) => void // Optional callback
   onCreateReplicaClick?: () => void
   portal?: boolean
+  className?: string
 }
 
 const DatabaseSelector = ({
@@ -48,6 +49,7 @@ const DatabaseSelector = ({
   buttonProps,
   onCreateReplicaClick = noop,
   portal = true,
+  className,
 }: DatabaseSelectorProps) => {
   const router = useRouter()
   const { ref: projectRef } = useParams()
@@ -79,7 +81,7 @@ const DatabaseSelector = ({
   return (
     <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
       <PopoverTrigger_Shadcn_ asChild>
-        <div className="flex cursor-pointer">
+        <div className={cn('flex cursor-pointer', className)}>
           <span className="flex items-center text-foreground-lighter px-3 rounded-lg rounded-r-none text-xs border border-button border-r-0">
             Source
           </span>