Files
supabase/apps/studio/components/grid/hooks/useOperationQueueShortcuts.ts
Ali Waseem 40791f9846 chore(studio): migrate useHotKey to useShortcut (#45099)
## Summary
- Migrates all 11 `useHotKey` call sites across 9 files to
`useShortcut`, backed by `SHORTCUT_DEFINITIONS` in
`state/shortcuts/registry.ts`.
- Adds 10 new registry entries (all `showInSettings: false` to keep
behavior identical to today — these were not previously
user-configurable).
- Deletes `apps/studio/hooks/ui/useHotKey.ts`.
- Simplifies `ActionBar.handleSave` — the legacy hook passed a
`KeyboardEvent` the callback used for `preventDefault`/`stopPropagation`
and a textarea-plain-Enter guard; all of that is redundant under
`useShortcut` (TanStack handles default/propagation; `Mod+Enter` never
fires on plain Enter).
- Removes a stale commented-out `useHotKey` reference in
`DataTableFilterCommand.tsx`.

Part of FE-3025 (legacy hotkey hook cleanup). `useKeyboardShortcuts` in
`grid/components/common/Hooks.tsx` will be migrated in a follow-up.

## Test plan

All shortcuts should still fire with **Cmd** (macOS) / **Ctrl**
(Win/Linux).

**Table Editor — operation queue** (requires pending unsaved edits on a
row)
- [x] `Cmd+S` saves pending edits
- [x] `Cmd+.` toggles the operation queue side panel
- [x] `Cmd+Z` undoes the latest edit and re-fetches the affected table
rows
- [x] With no pending edits, none of the above fire (gated by
`isEnabled`)

**Table Editor — side panel editor forms** (row, table, column, policy,
etc.)
- [x] `Cmd+Enter` submits the form when the panel is visible
- [x] Does not submit if the form is disabled/loading or the panel is
hidden

**Unified Logs — data table**
- [x] `Cmd+B` toggles the filter controls sidebar (desktop)
- [x] `Cmd+B` opens the filter drawer (mobile, `<sm` breakpoint)
- [x] `Cmd+Esc` resets active column filters (reset button visible)
- [x] `Cmd+U` resets column order + visibility
- [x] `Cmd+J` toggles live mode

**Unified Logs — reset focus**
- [x] `Cmd+.` blurs the currently focused element / resets focus to body

**AI Assistant panel**
- [x] While editing a message, `Cmd+Esc` cancels the edit

**Regression checks**
- [x] `pnpm --filter=studio typecheck` passes (verified locally)
- [x] None of the new shortcut entries appear in Account → Preferences →
Keyboard shortcuts (all `showInSettings: false`)
- [x] Existing shortcuts (`Cmd+K`, `Cmd+I`, `Cmd+E`, results
copy/download) still work unchanged

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

## Summary by CodeRabbit

## Refactor
* Implemented a centralized keyboard shortcut registry system for
managing shortcuts consistently across the application
* Updated multiple UI components throughout the interface to use the new
shortcut management system
* All existing keyboard shortcuts continue to function without any
changes in behavior or user experience

## Chores
* Removed legacy keyboard shortcut hook implementation

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-22 06:19:32 -06:00

65 lines
2.0 KiB
TypeScript

import { useQueryClient } from '@tanstack/react-query'
import { useOperationQueueActions } from './useOperationQueueActions'
import { useIsQueueOperationsEnabled } from '@/components/interfaces/Account/Preferences/useDashboardSettings'
import { tableRowKeys } from '@/data/table-rows/keys'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
import { useShortcut } from '@/state/shortcuts/useShortcut'
import { useTableEditorStateSnapshot } from '@/state/table-editor'
/**
* Hook that provides keyboard shortcuts for the operation queue.
*
* Shortcuts:
* - Cmd/Ctrl + S: Save all pending changes
* - Cmd/Ctrl + .: Toggle the operation queue side panel
*
* These shortcuts are registered on the capture phase to ensure they fire
* before the data grid handles the keyboard event.
*/
export function useOperationQueueShortcuts() {
const queryClient = useQueryClient()
const { data: project } = useSelectedProjectQuery()
const isQueueOperationsEnabled = useIsQueueOperationsEnabled()
const snap = useTableEditorStateSnapshot()
const { handleSave } = useOperationQueueActions()
const isSaving = snap.operationQueue.status === 'saving'
const hasOperations = snap.hasPendingOperations
const isEnabled = isQueueOperationsEnabled && hasOperations
useShortcut(
SHORTCUT_IDS.OPERATION_QUEUE_SAVE,
() => {
if (!isSaving && hasOperations) {
handleSave()
}
},
{ enabled: isEnabled }
)
useShortcut(
SHORTCUT_IDS.OPERATION_QUEUE_TOGGLE,
() => {
snap.toggleViewOperationQueue()
},
{ enabled: isEnabled }
)
useShortcut(
SHORTCUT_IDS.OPERATION_QUEUE_UNDO,
() => {
const tableIdLatestOperation = snap.operationQueue.operations.at(-1)?.tableId
snap.undoLatestOperation()
if (project && tableIdLatestOperation) {
queryClient.invalidateQueries({
queryKey: tableRowKeys.tableRowsAndCount(project.ref, tableIdLatestOperation),
})
}
},
{ enabled: isEnabled }
)
}