mirror of
https://github.com/supabase/supabase.git
synced 2026-06-10 04:26:19 +08:00
7283459a02
## What kind of change does this PR introduce?
Refactor
## What is the current behavior?
FE-3452: `Connect.Commands.tsx` has a local `ConnectShortcutBadge`
component that hand-rolls the same Fragment + `KeyboardShortcut` +
"then" separator loop that `ShortcutBadge` already provides.
FE-3453: The `'header_button' | 'connect_section' | 'keyboard_shortcut'`
union is written out twice: once in `app-state.ts` and once in the
`ConnectSheetOpenedEvent` telemetry type in `telemetry-constants.ts`.
## What is the new behavior?
FE-3452: `ConnectShortcutBadge` is removed; the badge uses
`<ShortcutBadge shortcutId={SHORTCUT_IDS.CONNECT_OPEN_SHEET} />` inline.
FE-3453: A `ConnectSheetSource` type is exported from
`telemetry-constants.ts` and imported into `app-state.ts`.
## Additional context
- Resolves FE-3452
- Resolves FE-3453.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Consolidated shortcut badge rendering to use a shared component across
the application, improving code maintainability and reducing
duplication.
* Introduced a centralized type definition for connect sheet source
tracking, enhancing type consistency throughout the codebase.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46245?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
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'
|
|
|
|
import { COMMAND_MENU_SECTIONS } from '@/components/interfaces/App/CommandMenu/CommandMenu.utils'
|
|
import { orderCommandSectionsByPriority } from '@/components/interfaces/App/CommandMenu/ordering'
|
|
import { ShortcutBadge } from '@/components/ui/ShortcutBadge'
|
|
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
|
|
import { PROJECT_STATUS } from '@/lib/constants'
|
|
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
|
|
|
|
export function useConnectCommands() {
|
|
const setIsOpen = useSetCommandMenuOpen()
|
|
const { data: selectedProject } = useSelectedProjectQuery()
|
|
const isActiveHealthy = selectedProject?.status === PROJECT_STATUS.ACTIVE_HEALTHY
|
|
const enabled = !!selectedProject && isActiveHealthy
|
|
|
|
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" />,
|
|
badge: () => <ShortcutBadge shortcutId={SHORTCUT_IDS.CONNECT_OPEN_SHEET} />,
|
|
},
|
|
{
|
|
id: 'connect-mcp',
|
|
name: 'Connect via MCP',
|
|
action: () => {
|
|
setShowConnect(true)
|
|
setConnectTab('mcp')
|
|
setIsOpen(false)
|
|
},
|
|
icon: () => <Plug className="rotate-90" />,
|
|
},
|
|
] as ICommand[],
|
|
{
|
|
enabled,
|
|
orderSection: orderCommandSectionsByPriority,
|
|
sectionMeta: { priority: 2 },
|
|
}
|
|
)
|
|
}
|