[pull] master from supabase:master

apps/studio/components/interfaces/Auth/Users/UsersSearch.tsx

@@ -11,6 +11,9 @@ import {
   SelectSeparator_Shadcn_,
   SelectTrigger_Shadcn_,
   SelectValue_Shadcn_,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
 } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
 
@@ -62,9 +65,17 @@ export const UsersSearch = ({
               Phone number
             </SelectItem_Shadcn_>
             <SelectSeparator_Shadcn_ />
-            <SelectItem_Shadcn_ value="freeform" className="text-xs">
-              All columns
-            </SelectItem_Shadcn_>
+            <Tooltip>
+              <TooltipTrigger>
+                <SelectItem_Shadcn_ value="freeform" className="text-xs">
+                  Unified search
+                </SelectItem_Shadcn_>
+              </TooltipTrigger>
+              <TooltipContent side="right" className="w-64 text-center">
+                Search by all columns at once, including mid-string search. May impact database
+                performance if you have many users.
+              </TooltipContent>
+            </Tooltip>
           </SelectGroup_Shadcn_>
         </SelectContent_Shadcn_>
       </Select_Shadcn_>

apps/studio/components/interfaces/Connect/Connect.constants.ts

@@ -356,3 +356,32 @@ export const CONNECTION_TYPES = [
 export const PGBOUNCER_ENABLED_BUT_NO_IPV4_ADDON_TEXT =
   'Purchase IPv4 add-on or use Shared Pooler if on a IPv4 network'
 export const IPV4_ADDON_TEXT = 'Connections are IPv4 proxied with IPv4 add-on'
+
+export type ConnectionStringMethod = 'direct' | 'transaction' | 'session'
+
+export const connectionStringMethodOptions: Record<
+  ConnectionStringMethod,
+  { value: string; label: string; description: string; badge: string }
+> = {
+  direct: {
+    value: 'direct',
+    label: 'Direct connection',
+    description:
+      'Ideal for applications with persistent and long-lived connections, such as those running on virtual machines or long-standing containers.',
+    badge: 'IPv4 Compatible',
+  },
+  transaction: {
+    value: 'transaction',
+    label: 'Transaction pooler',
+    description:
+      'Ideal for stateless applications like serverless functions where each interaction with Postgres is brief and isolated.',
+    badge: 'IPv4 Compatible',
+  },
+  session: {
+    value: 'session',
+    label: 'Session pooler',
+    description:
+      'Only recommended as an alternative to Direct Connection, when connecting via an IPv4 network.',
+    badge: 'IPv4 Only',
+  },
+}

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

@@ -87,6 +87,9 @@ export const Connect = () => {
   const [queryFramework, setQueryFramework] = useQueryState('framework', parseAsString)
   const [queryUsing, setQueryUsing] = useQueryState('using', parseAsString)
   const [queryWith, setQueryWith] = useQueryState('with', parseAsString)
+  const [_, setQueryType] = useQueryState('type', parseAsString)
+  const [__, setQuerySource] = useQueryState('source', parseAsString)
+  const [___, setQueryMethod] = useQueryState('method', parseAsString)
 
   const [connectionObject, setConnectionObject] = useState<ConnectionType[]>(FRAMEWORKS)
   const [selectedParent, setSelectedParent] = useState(connectionObject[0].key) // aka nextjs
@@ -242,13 +245,20 @@ export const Connect = () => {
     selectedGrandchild,
   })
 
+  const resetQueryStates = () => {
+    setQueryFramework(null)
+    setQueryUsing(null)
+    setQueryWith(null)
+    setQueryType(null)
+    setQuerySource(null)
+    setQueryMethod(null)
+  }
+
   const handleDialogChange = (open: boolean) => {
     if (!open) {
       setShowConnect(null)
       setTab(null)
-      setQueryFramework(null)
-      setQueryUsing(null)
-      setQueryWith(null)
+      resetQueryStates()
     } else {
       setShowConnect(open)
     }
@@ -311,8 +321,8 @@ export const Connect = () => {
           <span>Connect</span>
         </Button>
       </DialogTrigger>
-      <DialogContent className={cn('sm:max-w-5xl p-0')} centered={false}>
-        <DialogHeader className={DIALOG_PADDING_X}>
+      <DialogContent className={cn('sm:max-w-5xl p-0 rounded-lg')} centered={false}>
+        <DialogHeader className={cn('text-left', DIALOG_PADDING_X)}>
           <DialogTitle>
             Connect to your project
             {connectionTypes.length === 1 ? ` via ${connectionTypes[0].label.toLowerCase()}` : null}
@@ -322,7 +332,13 @@ export const Connect = () => {
           </DialogDescription>
         </DialogHeader>
 
-        <Tabs_Shadcn_ defaultValue={tab} onValueChange={(value) => handleConnectionType(value)}>
+        <Tabs_Shadcn_
+          defaultValue={tab}
+          onValueChange={(value) => {
+            resetQueryStates()
+            handleConnectionType(value)
+          }}
+        >
           {connectionTypes.length > 1 ? (
             <TabsList_Shadcn_ className={cn('flex overflow-x-scroll gap-x-4', DIALOG_PADDING_X)}>
               {connectionTypes.map((type) => (