fix(studio): resolve worker snippet URLs from the project endpoint

apps/studio/components/interfaces/Workers/WorkerSnippetTabs.tsx

@@ -1,8 +1,10 @@
+import { useParams } from 'common'
 import { useState } from 'react'
 import { cn } from 'ui'
 
 import { buildWorkerSnippets, type WorkerSnippetInput } from './workerSnippets'
 import CopyButton from '@/components/ui/CopyButton'
+import { useProjectSettingsV2Query } from '@/data/config/project-settings-v2-query'
 
 export type WorkerSnippetTab = 'ai' | 'config' | 'cli' | 'curl' | 'js' | 'python'
 
@@ -16,7 +18,7 @@ const TAB_LABEL: Record<WorkerSnippetTab, string> = {
 }
 
 interface WorkerSnippetTabsProps {
-  input: WorkerSnippetInput
+  input: Omit<WorkerSnippetInput, 'endpoint' | 'protocol'>
   tabs?: WorkerSnippetTab[]
   className?: string
 }
@@ -26,9 +28,15 @@ export const WorkerSnippetTabs = ({
   tabs = ['cli', 'curl'],
   className,
 }: WorkerSnippetTabsProps) => {
+  const { ref } = useParams()
   const [active, setActive] = useState<WorkerSnippetTab>(tabs[0])
 
-  const snippets = buildWorkerSnippets(input)
+  const { data: settings } = useProjectSettingsV2Query({ projectRef: ref }, { enabled: !!ref })
+  const snippets = buildWorkerSnippets({
+    ...input,
+    endpoint: settings?.app_config?.endpoint,
+    protocol: settings?.app_config?.protocol,
+  })
   const snippetByTab: Record<WorkerSnippetTab, string> = {
     ai: snippets.aiPrompt,
     config: snippets.configToml,

apps/studio/components/interfaces/Workers/workerSnippets.ts

@@ -1,10 +1,12 @@
-import { workerGatewayUrl } from './Workers.constants'
+import { workerUrl } from './Workers.constants'
 import type { WorkerAccess } from './Workers.types'
 import { formatRuntime, formatSize } from './Workers.utils'
 import { CLI_NAME, PRODUCT_NAME } from '@/lib/constants/workers'
 
 export interface WorkerSnippetInput {
   name: string
+  endpoint: string | undefined
+  protocol?: string
   runtime: string | undefined
   size: string
   access: WorkerAccess
@@ -20,7 +22,7 @@ export interface WorkerSnippets {
   python: string
 }
 
-export const EXAMPLE_WORKER: WorkerSnippetInput = {
+export const EXAMPLE_WORKER: Omit<WorkerSnippetInput, 'endpoint' | 'protocol'> = {
   name: 'my-worker',
   runtime: 'node',
   size: '2gb-1vcpu',
@@ -34,6 +36,9 @@ export function buildWorkerSnippets(input: WorkerSnippetInput): WorkerSnippets {
   const name = safeName(input.name)
   const runtime = input.runtime ?? 'node'
 
+  const url =
+    workerUrl({ endpoint: input.endpoint, protocol: input.protocol, name }) ?? '[YOUR WORKER URL]'
+
   const cli = [
     `supabase ${CLI_NAME} new ${name} --runtime ${runtime}`,
     `supabase ${CLI_NAME} push ${name}`,
@@ -56,14 +61,13 @@ export function buildWorkerSnippets(input: WorkerSnippetInput): WorkerSnippets {
       : `  -H 'Authorization: Bearer [YOUR SERVICE ROLE KEY]' \\`
 
   const curl = [
-    `curl -L -X POST '${workerGatewayUrl(name)}' \\`,
+    `curl -L -X POST '${url}' \\`,
     authHeader,
     `  -H 'Content-Type: application/json' \\`,
     `  --data '{"name":"world"}'`,
   ].join('\n')
 
   const keyPlaceholder = input.access === 'public' ? '[YOUR ANON KEY]' : '[YOUR SERVICE ROLE KEY]'
-  const url = workerGatewayUrl(name)
 
   const javascript = [
     `const res = await fetch('${url}', {`,