[pull] master from supabase:master

apps/design-system/app/(app)/docs/[[...slug]]/page.tsx

@@ -1,5 +1,5 @@
 import { Mdx } from '@/components/mdx-components'
-import { DocsPager } from '@/components/pager'
+import { DocsPager, getBreadcrumbSegments } from '@/components/pager'
 import { SourcePanel } from '@/components/source-panel'
 import { DashboardTableOfContents } from '@/components/toc'
 import { siteConfig } from '@/config/site'
@@ -12,6 +12,7 @@ import '@/styles/mdx.css'
 import { allDocs } from 'contentlayer/generated'
 import { ChevronRight } from 'lucide-react'
 import type { Metadata } from 'next'
+import Link from 'next/link'
 import { notFound } from 'next/navigation'
 import Balancer from 'react-wrap-balancer'
 import { ScrollArea, Separator } from 'ui'
@@ -83,15 +84,39 @@ export default async function DocPage(props: DocPageProps) {
   }
 
   const toc = await getTableOfContents(doc.body.raw)
+  const breadcrumbSegments = getBreadcrumbSegments(doc)
 
   return (
     <div className="relative xl:grid xl:grid-cols-[1fr_160px] gap-4 px-6 py-6 lg:py-8">
       <div className="mx-auto w-full min-w-0 max-w-4xl flex-1">
-        <div className="mb-4 flex items-center space-x-1 text-sm text-foreground-muted">
-          <div className="overflow-hidden text-ellipsis whitespace-nowrap">Docs</div>
-          <ChevronRight className="h-4 w-4 text-foreground-muted" />
-          <div className="text-foreground-lighter">{doc.title}</div>
-        </div>
+        <nav
+          className="mb-4 flex items-center space-x-1 text-sm text-foreground-lighter"
+          aria-label="Breadcrumb"
+        >
+          {breadcrumbSegments.map((segment, index) => (
+            <span key={segment.title} className="flex items-center gap-1">
+              {index > 0 && <ChevronRight className="h-4 w-4 shrink-0 text-foreground-muted" />}
+              {segment.href ? (
+                <Link
+                  href={segment.href}
+                  className="overflow-hidden text-ellipsis whitespace-nowrap hover:text-foreground transition-colors"
+                >
+                  {segment.title}
+                </Link>
+              ) : (
+                <span className="overflow-hidden text-ellipsis whitespace-nowrap text-foreground-lighter">
+                  {segment.title}
+                </span>
+              )}
+            </span>
+          ))}
+          {breadcrumbSegments.length > 0 && (
+            <ChevronRight className="h-4 w-4 shrink-0 text-foreground-muted/50" />
+          )}
+          <span className="overflow-hidden text-ellipsis whitespace-nowrap text-foreground-muted">
+            {doc.title}
+          </span>
+        </nav>
         <div className="space-y-2 mb-5">
           <h1 className="scroll-m-20 text-4xl tracking-tight">{doc.title}</h1>
           {doc.description && (

apps/design-system/components/pager.tsx

@@ -71,3 +71,27 @@ export function flatten(links: NavItemWithChildren[]): NavItem[] {
     }, [])
     .filter((link) => !link?.disabled)
 }
+
+export interface BreadcrumbSegment {
+  title: string
+  href?: string
+}
+
+export function getBreadcrumbSegments(doc: Doc): BreadcrumbSegment[] {
+  const segments: BreadcrumbSegment[] = [{ title: 'Docs', href: '/docs' }]
+
+  for (const section of docsConfig.sidebarNav) {
+    const flatItems = flatten(section.items ?? [])
+    const inSection = flatItems.some((item) => item.href === doc.slug)
+    if (!inSection || !section.title) continue
+
+    const sectionLanding = flatItems.find((item) => item.priority) ?? flatItems[0]
+    const isOnLanding = sectionLanding?.href === doc.slug
+    if (sectionLanding?.href && !isOnLanding) {
+      segments.push({ title: section.title, href: sectionLanding.href })
+    }
+    break
+  }
+
+  return segments
+}

apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx

@@ -1,29 +1,28 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { Check } from 'lucide-react'
-import { useTheme } from 'next-themes'
-import { useQueryState } from 'nuqs'
-import { useEffect, useState } from 'react'
-import ReactMarkdown from 'react-markdown'
-import { toast } from 'sonner'
-
 import { useParams } from 'common'
 import { Markdown } from 'components/interfaces/Markdown'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { DocsButton } from 'components/ui/DocsButton'
 import { ResourceItem } from 'components/ui/Resource/ResourceItem'
 import type { components } from 'data/api'
 import { useAuthConfigUpdateMutation } from 'data/auth/auth-config-update-mutation'
-import { useProjectSettingsV2Query } from 'data/config/project-settings-v2-query'
-import { useCustomDomainsQuery } from 'data/custom-domains/custom-domains-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { BASE_PATH } from 'lib/constants'
+import { Check } from 'lucide-react'
+import { useTheme } from 'next-themes'
+import { useQueryState } from 'nuqs'
+import { useEffect, useState } from 'react'
+import ReactMarkdown from 'react-markdown'
+import { toast } from 'sonner'
 import { Button, Form, Input, Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle } from 'ui'
 import { Admonition } from 'ui-patterns'
+
 import { NO_REQUIRED_CHARACTERS } from '../Auth.constants'
 import { AuthAlert } from './AuthAlert'
 import type { Provider } from './AuthProvidersForm.types'
 import FormField from './FormField'
+import { useProjectApiUrl } from '@/data/config/project-endpoint-query'
 
 interface ProviderFormProps {
   config: components['schemas']['GoTrueConfigResponse']
@@ -42,6 +41,8 @@ export const ProviderForm = ({ config, provider, isActive }: ProviderFormProps)
   const [open, setOpen] = useState(false)
   const { mutate: updateAuthConfig, isPending: isUpdatingConfig } = useAuthConfigUpdateMutation()
 
+  const { data: endpoint } = useProjectApiUrl({ projectRef })
+
   const { can: canUpdateConfig } = useAsyncCheckPermissions(
     PermissionAction.UPDATE,
     'custom_config_gotrue'
@@ -67,12 +68,6 @@ export const ProviderForm = ({ config, provider, isActive }: ProviderFormProps)
   }
 
   const isFreePlan = organization?.plan.id === 'free'
-  const { data: settings } = useProjectSettingsV2Query({ projectRef })
-  const protocol = settings?.app_config?.protocol ?? 'https'
-  const endpoint = settings?.app_config?.endpoint
-  const apiUrl = `${protocol}://${endpoint}`
-
-  const { data: customDomainData } = useCustomDomainsQuery({ projectRef })
 
   const INITIAL_VALUES = (() => {
     const initialValues: { [x: string]: string | boolean } = {}
@@ -247,11 +242,7 @@ export const ProviderForm = ({ config, provider, isActive }: ProviderFormProps)
                           readOnly
                           disabled
                           label="Callback URL (for OAuth)"
-                          value={
-                            customDomainData?.customDomain?.status === 'active'
-                              ? `https://${customDomainData.customDomain?.hostname}/auth/v1/callback`
-                              : `${apiUrl}/auth/v1/callback`
-                          }
+                          value={`${endpoint}/auth/v1/callback`}
                           descriptionText={
                             <Markdown
                               content={provider.misc.helper}

apps/studio/components/interfaces/Auth/OAuthApps/CreateOrUpdateOAuthAppSheet.tsx

@@ -7,7 +7,7 @@ import type {
 import { useParams } from 'common'
 import { InlineLink } from 'components/ui/InlineLink'
 import Panel from 'components/ui/Panel'
-import { useProjectEndpointQuery } from 'data/config/project-endpoint-query'
+import { useProjectApiUrl } from 'data/config/project-endpoint-query'
 import { useOAuthServerAppCreateMutation } from 'data/oauth-server-apps/oauth-server-app-create-mutation'
 import { useOAuthServerAppRegenerateSecretMutation } from 'data/oauth-server-apps/oauth-server-app-regenerate-secret-mutation'
 import { useOAuthServerAppUpdateMutation } from 'data/oauth-server-apps/oauth-server-app-update-mutation'
@@ -111,7 +111,7 @@ export const CreateOrUpdateOAuthAppSheet = ({
     control: form.control,
   })
 
-  const { data: endpointData } = useProjectEndpointQuery({ projectRef })
+  const { hostEndpoint: clientEndpoint } = useProjectApiUrl({ projectRef })
 
   const { mutate: createOAuthApp, isPending: isCreating } = useOAuthServerAppCreateMutation({
     onSuccess: (data) => {
@@ -201,8 +201,8 @@ export const CreateOrUpdateOAuthAppSheet = ({
 
       updateOAuthApp({
         projectRef,
+        clientEndpoint,
         clientId: appToEdit.client_id,
-        clientEndpoint: endpointData?.endpoint,
         ...payload,
       })
     } else {
@@ -216,7 +216,7 @@ export const CreateOrUpdateOAuthAppSheet = ({
 
       createOAuthApp({
         projectRef,
-        clientEndpoint: endpointData?.endpoint,
+        clientEndpoint,
         ...payload,
       })
     }
@@ -234,8 +234,8 @@ export const CreateOrUpdateOAuthAppSheet = ({
   const handleConfirmRegenerate = () => {
     regenerateSecret({
       projectRef,
+      clientEndpoint,
       clientId: appToEdit?.client_id,
-      clientEndpoint: endpointData?.endpoint,
     })
   }
 

apps/studio/components/interfaces/Auth/OAuthApps/DeleteOAuthAppModal.tsx

@@ -1,6 +1,6 @@
 import type { OAuthClient } from '@supabase/supabase-js'
 import { useParams } from 'common'
-import { useProjectEndpointQuery } from 'data/config/project-endpoint-query'
+import { useProjectApiUrl } from 'data/config/project-endpoint-query'
 import type { OAuthServerAppDeleteVariables } from 'data/oauth-server-apps/oauth-server-app-delete-mutation'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 
@@ -21,12 +21,13 @@ export const DeleteOAuthAppModal = ({
 }: DeleteOAuthAppModalProps) => {
   const { ref: projectRef } = useParams()
 
-  const { data: endpointData } = useProjectEndpointQuery({ projectRef })
+  const { hostEndpoint: clientEndpoint } = useProjectApiUrl({ projectRef })
+
   const onConfirmDeleteApp = () => {
     onDelete({
       projectRef,
+      clientEndpoint,
       clientId: selectedApp?.client_id,
-      clientEndpoint: endpointData?.endpoint,
     })
   }
 

apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx

@@ -4,7 +4,7 @@ import AlertError from 'components/ui/AlertError'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { FilterPopover } from 'components/ui/FilterPopover'
 import { useAuthConfigQuery } from 'data/auth/auth-config-query'
-import { useProjectEndpointQuery } from 'data/config/project-endpoint-query'
+import { useProjectApiUrl } from 'data/config/project-endpoint-query'
 import { useOAuthServerAppDeleteMutation } from 'data/oauth-server-apps/oauth-server-app-delete-mutation'
 import { useOAuthServerAppRegenerateSecretMutation } from 'data/oauth-server-apps/oauth-server-app-regenerate-secret-mutation'
 import { useOAuthServerAppsQuery } from 'data/oauth-server-apps/oauth-server-apps-query'
@@ -75,7 +75,7 @@ export const OAuthAppsList = () => {
   const [filteredClientTypes, setFilteredClientTypes] = useState<string[]>([])
   const [filterString, setFilterString] = useState<string>('')
 
-  const { data: endpointData } = useProjectEndpointQuery({ projectRef })
+  const { hostEndpoint: clientEndpoint } = useProjectApiUrl({ projectRef })
   const {
     data,
     error,
@@ -457,8 +457,8 @@ export const OAuthAppsList = () => {
         onConfirm={() => {
           regenerateSecret({
             projectRef,
+            clientEndpoint,
             clientId: selectedApp?.client_id,
-            clientEndpoint: endpointData?.endpoint,
           })
           setShowRegenerateDialog(false)
         }}

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

@@ -1,12 +1,12 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
+import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { AlertCircle, ExternalLink, Loader2 } from 'lucide-react'
 import Link from 'next/link'
 import type { ReactNode } from 'react'
-
-import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { Button } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
+
 import type { projectKeys } from './Connect.types'
 
 function KeyRow({ label, value }: { label: ReactNode; value: string }) {
@@ -63,7 +63,6 @@ export function ApiKeysTabContent({ projectKeys }: { projectKeys: projectKeys })
         value={projectKeys.anonKey ?? ''}
       />
 
-      {/* Footer */}
       <div className="gap-5 lg:grid lg:grid-cols-12">
         <div className="col-start-5 col-span-8 pl-2 flex items-center justify-between">
           <p className="text-xs text-foreground-lighter">For secret keys, see API settings.</p>

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

@@ -5,7 +5,6 @@ import { DatabaseConnectionString } from 'components/interfaces/Connect/Database
 import { McpTabContent } from 'components/interfaces/Connect/McpTabContent'
 import Panel from 'components/ui/Panel'
 import { getKeys, useAPIKeysQuery } from 'data/api-keys/api-keys-query'
-import { useProjectSettingsV2Query } from 'data/config/project-settings-v2-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { BASE_PATH } from 'lib/constants'
@@ -35,6 +34,7 @@ import { CONNECTION_TYPES, ConnectionType, FRAMEWORKS, MOBILES, ORMS } from './C
 import { getContentFilePath, inferConnectTabFromParentKey } from './Connect.utils'
 import { ConnectDropdown } from './ConnectDropdown'
 import { ConnectTabContent } from './ConnectTabContent'
+import { useProjectApiUrl } from '@/data/config/project-endpoint-query'
 
 export const Connect = () => {
   const router = useRouter()
@@ -97,7 +97,8 @@ export const Connect = () => {
       ?.children.find((child) => child.key === selectedChild)?.children[0]?.key || ''
   )
 
-  const { data: settings } = useProjectSettingsV2Query({ projectRef }, { enabled: open })
+  const { data: resolvedEndpoint } = useProjectApiUrl({ projectRef })
+
   const { can: canReadAPIKeys } = useAsyncCheckPermissions(
     PermissionAction.READ,
     'service_api_keys'
@@ -216,22 +217,12 @@ export const Connect = () => {
     : { anonKey: null, publishableKey: null }
 
   const projectKeys = useMemo(() => {
-    const protocol = settings?.app_config?.protocol ?? 'https'
-    const endpoint = settings?.app_config?.endpoint ?? ''
-    const apiHost = canReadAPIKeys ? `${protocol}://${endpoint ?? '-'}` : ''
-
     return {
-      apiUrl: apiHost ?? null,
+      apiUrl: resolvedEndpoint ?? null,
       anonKey: anonKey?.api_key ?? null,
       publishableKey: publishableKey?.api_key ?? null,
     }
-  }, [
-    settings?.app_config?.protocol,
-    settings?.app_config?.endpoint,
-    canReadAPIKeys,
-    anonKey?.api_key,
-    publishableKey?.api_key,
-  ])
+  }, [resolvedEndpoint, anonKey?.api_key, publishableKey?.api_key])
 
   const filePath = getContentFilePath({
     connectionObject,

apps/studio/components/interfaces/ConnectSheet/ConnectSheet.tsx

@@ -1,7 +1,6 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { getKeys, useAPIKeysQuery } from 'data/api-keys/api-keys-query'
-import { useProjectSettingsV2Query } from 'data/config/project-settings-v2-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { parseAsBoolean, parseAsString, useQueryState } from 'nuqs'
 import { useMemo } from 'react'
@@ -11,9 +10,12 @@ import type { ProjectKeys } from './Connect.types'
 import { ConnectConfigSection, ModeSelector } from './ConnectConfigSection'
 import { ConnectStepsSection } from './ConnectStepsSection'
 import { useConnectState } from './useConnectState'
+import { useProjectApiUrl } from '@/data/config/project-endpoint-query'
 import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
 
 export const ConnectSheet = () => {
+  const { ref: projectRef } = useParams()
+
   const {
     projectConnectionShowAppFrameworks: showAppFrameworks,
     projectConnectionShowMobileFrameworks: showMobileFrameworks,
@@ -40,9 +42,8 @@ export const ConnectSheet = () => {
   const { state, activeFields, resolvedSteps, schema, getFieldOptions, setMode, updateField } =
     useConnectState()
 
-  // Project keys for step components
-  const { ref: projectRef } = useParams()
-  const { data: settings } = useProjectSettingsV2Query({ projectRef }, { enabled: showConnect })
+  const { data: endpoint = '' } = useProjectApiUrl({ projectRef }, { enabled: showConnect })
+
   const { can: canReadAPIKeys } = useAsyncCheckPermissions(
     PermissionAction.READ,
     'service_api_keys'
@@ -53,22 +54,12 @@ export const ConnectSheet = () => {
     : { anonKey: null, publishableKey: null }
 
   const projectKeys: ProjectKeys = useMemo(() => {
-    const protocol = settings?.app_config?.protocol ?? 'https'
-    const endpoint = settings?.app_config?.endpoint ?? ''
-    const apiHost = canReadAPIKeys ? `${protocol}://${endpoint ?? '-'}` : ''
-
     return {
-      apiUrl: apiHost ?? null,
+      apiUrl: endpoint,
       anonKey: anonKey?.api_key ?? null,
       publishableKey: publishableKey?.api_key ?? null,
     }
-  }, [
-    settings?.app_config?.protocol,
-    settings?.app_config?.endpoint,
-    canReadAPIKeys,
-    anonKey?.api_key,
-    publishableKey?.api_key,
-  ])
+  }, [endpoint, anonKey?.api_key, publishableKey?.api_key])
 
   const availableModeIds = useMemo(() => {
     const modes: string[] = []