mirror of
https://github.com/supabase/supabase.git
synced 2026-10-07 02:15:05 +03:00
<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>
48 lines
1.6 KiB
TypeScript
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 },
|
|
}
|
|
)
|
|
}
|