Files
supabase/apps/studio/components/interfaces/ConnectButton/Connect.Commands.tsx
T
Saxon FletcherandJoshen Lim 0d761b0434 Connect sheet final content (#42374)
<img width="2892" height="2342" alt="image"
src="https://github.com/user-attachments/assets/7e08929d-abc3-4397-b89d-99cc52d8190e"
/>

This is the third and final PR to complete the new connect sheet. 

First: https://github.com/supabase/supabase/pull/42367

Second: https://github.com/supabase/supabase/pull/42373

This re-adds the Direct, ORM, MCP tabs and their content, including via
connect.schema.

To test:
- Flag will be enabled on all staging projects
- Click connect and notice new Sheet
- Click all tabs and ensure content is correct

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Multi-mode connection flow with mode selector and icons (framework,
direct DB, ORM, MCP)
* New framework/variant/library selector, richer connection guides and
install steps (Prisma, Drizzle, direct)
* MCP onboarding flows (Cursor, Codex, Claude Code) with server/auth
commands and configuration UIs

* **Refactor**
* Connect schema and state rebuilt to be mode-driven with improved step
resolution and cascading state updates

* **Tests**
* Expanded unit tests covering framework resolution, connect flows, and
mode behaviors

* **Chores**
  * ESLint ignores updated for content files
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-02-11 22:14:18 +08:00

48 lines
1.6 KiB
TypeScript

import { COMMAND_MENU_SECTIONS } from 'components/interfaces/App/CommandMenu/CommandMenu.utils'
import { orderCommandSectionsByPriority } from 'components/interfaces/App/CommandMenu/ordering'
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
import { PROJECT_STATUS } from 'lib/constants'
import { Plug } from 'lucide-react'
import { parseAsBoolean, parseAsString, useQueryState } from 'nuqs'
import type { ICommand } from 'ui-patterns/CommandMenu'
import { useRegisterCommands, useSetCommandMenuOpen } from 'ui-patterns/CommandMenu'
export function useConnectCommands() {
const setIsOpen = useSetCommandMenuOpen()
const { data: selectedProject } = useSelectedProjectQuery()
const isActiveHealthy = selectedProject?.status === PROJECT_STATUS.ACTIVE_HEALTHY
const [, setShowConnect] = useQueryState('showConnect', parseAsBoolean.withDefault(false))
const [, setConnectTab] = useQueryState('connectTab', parseAsString)
useRegisterCommands(
COMMAND_MENU_SECTIONS.ACTIONS,
[
{
id: 'connect-to-project',
name: 'Connect to your project',
action: () => {
setShowConnect(true)
setIsOpen(false)
},
icon: () => <Plug className="rotate-90" />,
},
{
id: 'connect-mcp',
name: 'Connect via MCP',
action: () => {
setShowConnect(true)
setConnectTab('mcp')
setIsOpen(false)
},
icon: () => <Plug className="rotate-90" />,
},
] as ICommand[],
{
enabled: !!selectedProject && isActiveHealthy,
orderSection: orderCommandSectionsByPriority,
sectionMeta: { priority: 2 },
}
)
}