mirror of
https://github.com/supabase/supabase.git
synced 2026-06-30 04:17:50 -04:00
Ali Waseem
722fe85c16
## Summary Adds keyboard shortcuts to the Integrations Marketplace landing and per-integration detail pages. Introduces a `useDynamicShortcut` hook since per-integration tab counts/labels can't be pre-declared in the static registry. ## Shortcuts | Page | Keys | Action | |---|---|---| | Marketplace landing | `Shift+F` | Focus the integrations search input | | Marketplace landing | `F` then `C` | Clear search + category/type/source filters | | Marketplace landing search | `Esc` | Clear value (1st press), blur (2nd press) | | Integration detail | `1`–`9` | Jump to the Nth tab (label adapts per integration, e.g. "Go to Queues", "Go to Jobs") | Linear: [FE-3416](https://linear.app/supabase/issue/FE-3416) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Use number keys 1–9 to jump to integration detail tabs. * Marketplace search shortcuts: focus/select the search field and reset filters via keyboard; Escape now clears the search input. * Shortcuts now appear in the command menu under a dedicated integrations navigation group. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46348?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 -->
47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
import { useRouter } from 'next/router'
|
|
|
|
import type { IntegrationTab } from '@/components/interfaces/Integrations/Landing/useIntegrationDetail'
|
|
import { SHORTCUT_REFERENCE_GROUPS } from '@/state/shortcuts/referenceGroups'
|
|
import { DynamicShortcut } from '@/state/shortcuts/useDynamicShortcut'
|
|
|
|
const TAB_DIGIT_KEYS = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const
|
|
|
|
/**
|
|
* Binds digit keys 1-9 to whichever tabs the active integration declares in
|
|
* its `navigation` array. Render this once per integration detail page —
|
|
* shared between `LegacyIntegrationPage` and the marketplace `MarketplaceDetail`
|
|
* since both surfaces drive off the same `tabs` shape from `useIntegrationDetail`.
|
|
*
|
|
* The dynamic shortcut registry handles per-tab label overrides ("Go to Jobs",
|
|
* "Go to Wrappers", etc.) so the reference sheet and Cmd+K pick up the actual
|
|
* tab name without us having to pre-declare every possible integration tab.
|
|
*/
|
|
export interface IntegrationDetailTabShortcutsProps {
|
|
tabs: IntegrationTab[]
|
|
enabled?: boolean
|
|
}
|
|
|
|
export const IntegrationDetailTabShortcuts = ({
|
|
tabs,
|
|
enabled = true,
|
|
}: IntegrationDetailTabShortcutsProps) => {
|
|
const router = useRouter()
|
|
|
|
return (
|
|
<>
|
|
{tabs.slice(0, TAB_DIGIT_KEYS.length).map((tab, index) => (
|
|
<DynamicShortcut
|
|
key={tab.href}
|
|
id={`integration-detail.tab-${index}`}
|
|
sequence={[TAB_DIGIT_KEYS[index]]}
|
|
label={`Go to ${tab.label}`}
|
|
referenceGroup={SHORTCUT_REFERENCE_GROUPS.NAVIGATION_INTEGRATIONS_DETAIL}
|
|
enabled={enabled && !tab.active}
|
|
registerInCommandMenu
|
|
callback={() => router.push(tab.href)}
|
|
/>
|
|
))}
|
|
</>
|
|
)
|
|
}
|