mirror of
https://github.com/supabase/supabase.git
synced 2026-06-14 05:06:27 +08:00
83992c55f7
Closes [FE-3378](https://linear.app/supabase/issue/FE-3378/featlogs-keyboard-shortcuts-for-function-logs-invocations-and-logs). ## Summary Adds a shared shortcut registry for every `LogsPreviewer` surface — Function Logs, Function Invocations, and the Logs Explorer — and brings the grid keyboard model in line with the Auth Users / Table Editor patterns. ## Shortcuts | Key | Action | | --- | --- | | `↑` / `↓` | Move single-row selection; opens side panel | | `Shift+Space` | Toggle current row in multi-select | | `Mod+A` | Toggle all visible rows in multi-select | | `Esc` | Staged: clear multi-select → close side panel | | `Shift+R` | Refresh logs | | `Shift+H` | Toggle histogram | | `Shift+L` | Load older logs | | `Shift+P` | Open time range picker | | `Mod+Shift+J / M / C` | Copy selected rows as JSON / Markdown / CSV (existing global handler) | ## Other changes - `ShortcutTooltip` on search, refresh, histogram, load older, and time-picker controls. - `onSearchInputEscape` wired on the logs search bar (clear → blur). - Visual row highlight (`rdg-row--focused`) when a row is keyboard-focused or multi-selected. - Multi-select copy dropdown gains a **Copy as CSV** entry and shows the keybind on each item via `ShortcutBadge`. - Manual arrow-nav (`navigate()`) updates `selectedRow` directly without going through `onRowClick`, so multi-select checkmarks survive keyboard navigation. ## Test plan - [x] Function Logs and Function Invocations: all shortcuts above fire while the page is mounted, no firing in other tabs. - [x] Logs Explorer: same shortcuts work; copy keybinds still copy *all* rows when nothing is multi-selected. - [x] Arrow keys on first load select the first row even when the focus sink is the active element. - [x] Selecting rows via checkbox or `Shift+Space`, then pressing arrow keys, preserves the checkmarks. - [x] Escape on a populated search input clears it; Escape on an empty input blurs it. - [x] Esc with multi-select active clears the selection before closing the side panel. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * CSV export for log selections (adds CSV alongside JSON and Markdown). * New logs-preview keyboard shortcuts: search focus, refresh, chart toggle, date picker, load older, navigation, and selection. * **Improvements** * Shortcut badges and tooltip integration across the logs UI. * Search input focus/ref support and controlled date-picker visibility. * Better no-results/error rendering and expanded copy dropdown sizing. * **Tests** * Added CSV formatting tests covering RFC 4180 edge cases. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45989) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import type { RefObject } from 'react'
|
|
|
|
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
|
|
import { useShortcut } from '@/state/shortcuts/useShortcut'
|
|
|
|
interface UseLogsPreviewShortcutsParams {
|
|
searchInputRef: RefObject<HTMLInputElement | null>
|
|
hasSearch: boolean
|
|
onResetSearch: () => void
|
|
onRefresh: () => void
|
|
onToggleChart: () => void
|
|
onLoadOlder: () => void
|
|
canLoadOlder: boolean
|
|
}
|
|
|
|
/**
|
|
* Toolbar-level shortcuts for the LogsPreviewer (search focus, reset filters,
|
|
* refresh, toggle histogram, load older). Grid-level shortcuts (selection,
|
|
* arrow navigation, escape) live alongside the grid in LogTable.
|
|
*
|
|
* Mounted once inside LogsPreviewer so the shortcuts auto-activate on every
|
|
* consumer of the component (function logs, function invocations, logs
|
|
* explorer).
|
|
*/
|
|
export function useLogsPreviewShortcuts({
|
|
searchInputRef,
|
|
hasSearch,
|
|
onResetSearch,
|
|
onRefresh,
|
|
onToggleChart,
|
|
onLoadOlder,
|
|
canLoadOlder,
|
|
}: UseLogsPreviewShortcutsParams) {
|
|
useShortcut(
|
|
SHORTCUT_IDS.LIST_PAGE_FOCUS_SEARCH,
|
|
() => {
|
|
searchInputRef.current?.focus()
|
|
searchInputRef.current?.select()
|
|
},
|
|
{ label: 'Search logs' }
|
|
)
|
|
|
|
useShortcut(SHORTCUT_IDS.LIST_PAGE_RESET_FILTERS, onResetSearch, {
|
|
enabled: hasSearch,
|
|
})
|
|
|
|
useShortcut(SHORTCUT_IDS.LOGS_PREVIEW_REFRESH, onRefresh)
|
|
|
|
useShortcut(SHORTCUT_IDS.LOGS_PREVIEW_TOGGLE_CHART, onToggleChart)
|
|
|
|
useShortcut(SHORTCUT_IDS.LOGS_PREVIEW_LOAD_OLDER, onLoadOlder, { enabled: canLoadOlder })
|
|
}
|