mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 21:05:06 +03:00
Saxon FletcherandJoshen Lim
0e60c5f341
This is the first smaller PR in the broader change of updating our Connect dialog (see [here](https://github.com/supabase/supabase/pull/42276)). This PR focuses on decoupling the ConnectButton our of the Connect dialog and into its own component . The button includes a flag to render the new sheet. The new sheet is empty for the time being as the flag is at 0%. To test: - Enable flag and click button, see new Sheet - Disable and see old dialog - Create a new project -> in getting started section see "connect to app" step -> Click connect button and make sure it works <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** - Added a Connect button component and an alternative Connect sheet. - Added curl syntax highlighting for code blocks. * **Changes** - Connection dialog moved to a controlled open-state pattern; Connect replaced legacy entry points across the UI and can be feature-flagged. - Connection actions simplified and no longer depend on framework selection. * **Removals** - Removed legacy framework selector, default framework constant, and related tests. <!-- 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 },
|
|
}
|
|
)
|
|
}
|