diff --git a/apps/studio/components/interfaces/App/CommandMenu/CreateCommands.tsx b/apps/studio/components/interfaces/App/CommandMenu/CreateCommands.tsx index 87fc8c7d932..45e3f35c515 100644 --- a/apps/studio/components/interfaces/App/CommandMenu/CreateCommands.tsx +++ b/apps/studio/components/interfaces/App/CommandMenu/CreateCommands.tsx @@ -43,6 +43,7 @@ import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/L const AiIconAnimation = dynamic(() => import('ui').then((mod) => mod.AiIconAnimation)) const Badge = dynamic(() => import('ui').then((mod) => mod.Badge)) const EdgeFunctions = dynamic(() => import('icons').then((mod) => mod.EdgeFunctions)) +const Workers = dynamic(() => import('icons').then((mod) => mod.Workers)) const AnalyticsBucket = dynamic(() => import('icons').then((mod) => mod.AnalyticsBucket)) const FilesBucket = dynamic(() => import('icons').then((mod) => mod.FilesBucket)) const VectorBucket = dynamic(() => import('icons').then((mod) => mod.VectorBucket)) @@ -59,6 +60,7 @@ export function useCreateCommands(options?: CommandOptions) { authEnabled, edgeFunctionsEnabled, storageEnabled, + workersEnabled, sendSmsHook, sendEmailHook, customAccessTokenHook, @@ -273,6 +275,21 @@ export function useCreateCommands(options?: CommandOptions) { [ref, edgeFunctionsEnabled, openSidebar, snap, setIsOpen] ) + const workersCommands = useMemo( + () => + workersEnabled + ? ([ + { + id: 'deploy-worker', + name: 'Deploy a Worker', + route: `/project/${ref}/workers?deploy=true`, + icon: () => , + }, + ].filter(Boolean) as ICommand[]) + : [], + [ref, workersEnabled] + ) + const storageCommands = useMemo( () => storageEnabled @@ -406,6 +423,15 @@ export function useCreateCommands(options?: CommandOptions) { }, ] : []), + ...(workersCommands.length > 0 + ? [ + { + id: 'create-workers', + name: 'Workers', + commands: workersCommands, + }, + ] + : []), ...(storageCommands.length > 0 ? [ { @@ -438,6 +464,7 @@ export function useCreateCommands(options?: CommandOptions) { databaseCommands, authCommands, edgeFunctionsCommands, + workersCommands, storageCommands, integrationsCommands, observabilityCommands, diff --git a/apps/studio/components/interfaces/App/CommandMenu/CreateCommands.utils.tsx b/apps/studio/components/interfaces/App/CommandMenu/CreateCommands.utils.tsx index ece30e8dbc0..2003b46aeaf 100644 --- a/apps/studio/components/interfaces/App/CommandMenu/CreateCommands.utils.tsx +++ b/apps/studio/components/interfaces/App/CommandMenu/CreateCommands.utils.tsx @@ -1,4 +1,4 @@ -import { useParams } from 'common' +import { useFlag, useParams } from 'common' import { useMemo } from 'react' import { useSetPage } from 'ui-patterns/CommandMenu' @@ -90,6 +90,8 @@ export function useCreateCommandsConfig() { const { openSidebar } = useSidebarManagerSnapshot() const snap = useAiAssistantStateSnapshot() + const workersEnabled = useFlag('workers') + const { projectAuthAll: authEnabled, projectEdgeFunctionAll: edgeFunctionsEnabled, @@ -183,6 +185,7 @@ export function useCreateCommandsConfig() { authEnabled, edgeFunctionsEnabled, storageEnabled, + workersEnabled, sendSmsHook, sendEmailHook, customAccessTokenHook, diff --git a/apps/studio/pages/project/[ref]/workers/index.tsx b/apps/studio/pages/project/[ref]/workers/index.tsx index 73debf88890..46d8808112a 100644 --- a/apps/studio/pages/project/[ref]/workers/index.tsx +++ b/apps/studio/pages/project/[ref]/workers/index.tsx @@ -1,6 +1,6 @@ import { useQuery } from '@tanstack/react-query' import { useParams } from 'common' -import { useState } from 'react' +import { parseAsBoolean, useQueryState } from 'nuqs' import { Admonition } from 'ui-patterns/Admonition' import { PageContainer } from 'ui-patterns/PageContainer' import { @@ -31,7 +31,10 @@ import type { NextPageWithLayout } from '@/types' const WorkersPage: NextPageWithLayout = () => { const { ref } = useParams() - const [isDeployInstructionsOpen, setIsDeployInstructionsOpen] = useState(false) + const [isDeployInstructionsOpen, setIsDeployInstructionsOpen] = useQueryState( + 'deploy', + parseAsBoolean.withDefault(false) + ) const { data: workers, error,