diff --git a/apps/studio/components/interfaces/Workers/WorkersEmptyState.tsx b/apps/studio/components/interfaces/Workers/WorkersEmptyState.tsx index ebf209afb6b..20a194718ad 100644 --- a/apps/studio/components/interfaces/Workers/WorkersEmptyState.tsx +++ b/apps/studio/components/interfaces/Workers/WorkersEmptyState.tsx @@ -1,110 +1,55 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' -import { Plus, Sparkles, Terminal } from 'lucide-react' -import { Button, Card } from 'ui' +import { BoxPlus } from 'icons' +import { Plus, Terminal } from 'lucide-react' +import { Button } from 'ui' +import { EmptyStatePresentational } from 'ui-patterns/EmptyStatePresentational' +import { EXAMPLE_WORKER } from './workerSnippets' +import { WorkerSnippetTabs } from './WorkerSnippetTabs' import { ButtonTooltip } from '@/components/ui/ButtonTooltip' -import CopyButton from '@/components/ui/CopyButton' import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions' -import { WORKERS_CLI_DEPLOY, WORKERS_SKILL_MARKDOWN } from '@/lib/constants/workers' interface WorkersEmptyStateProps { onDeploy: () => void onCreate: () => void } -const STEPS = [ - { - title: 'Detects your stack', - description: - 'The CLI inspects your project and picks the right runtime — Node, Deno, Bun, Python, or your Dockerfile.', - }, - { - title: 'Builds & schedules', - description: - 'Your worker is built and scheduled onto a microVM in US West, right next to your database.', - }, - { - title: 'Streams back here', - description: 'Lifecycle events and logs stream to Logflare and show up on this page.', - }, -] - export const WorkersEmptyState = ({ onDeploy, onCreate }: WorkersEmptyStateProps) => { const { can: canDeployWorkers } = useAsyncCheckPermissions(PermissionAction.FUNCTIONS_WRITE, '*') return ( - -
-
-

Deploy a worker

-

- No workers yet. Run managed compute in microVMs next to your database. Deploy from the - dashboard, or push your own code with the Supabase CLI. -

-
- -
- } - disabled={!canDeployWorkers} - onClick={onCreate} - tooltip={{ - content: { - side: 'bottom', - text: canDeployWorkers - ? undefined - : 'You need additional permissions to deploy workers', - }, - }} - > - New worker - - -
- -
    - {STEPS.map((step, index) => ( -
  1. - - {index + 1} - -
    -

    {step.title}

    -

    {step.description}

    -
    -
  2. - ))} -
+ +
+ } + disabled={!canDeployWorkers} + onClick={onCreate} + tooltip={{ + content: { + side: 'bottom', + text: canDeployWorkers + ? undefined + : 'You need additional permissions to deploy workers', + }, + }} + > + Deploy worker + +
-
-

- Prefer the CLI? -

-
- {WORKERS_CLI_DEPLOY} -
- -
-
- SKILL.md - - For agents - -
-

- Drop a skill file into your agent so it can deploy and manage workers for you. -

-
- - Copy SKILL.md - -
-
+
+
- + ) } diff --git a/apps/studio/components/interfaces/Workers/workerSnippets.ts b/apps/studio/components/interfaces/Workers/workerSnippets.ts index e02f20d2ae4..ba6fae404ee 100644 --- a/apps/studio/components/interfaces/Workers/workerSnippets.ts +++ b/apps/studio/components/interfaces/Workers/workerSnippets.ts @@ -52,7 +52,7 @@ export function buildWorkerSnippets(input: WorkerSnippetInput): WorkerSnippets { `size = "${input.size}" # ${formatSize(input.size)}`, `access = "${input.access}"`, `instances = ${input.instances}`, - `# region is locked to us-west-1 at alpha`, + `# region is locked to us-west-2 at alpha`, ].join('\n') const authHeader =