mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 04:15:04 +03:00
## Summary
Adds keyboard shortcuts to the Storage section, mirroring the
conventions already established for Auth Users and Database pages:
- **Storage navigation chords** (`S, F` / `S, A` / `S, V` / `S, 3`)
active only inside `StorageLayout`.
- **Files (bucket list) page** shortcuts for search, create, refresh,
reset filters, reset sort.
- **Storage Explorer** shortcuts for upload, new folder, view toggle,
refresh, search, multi-select download/move/delete, and an Escape
ladder.
- `ShortcutTooltip` wired into the relevant buttons so users can
discover keybinds on hover.
- Reload spinner is now driven by a shared store flag, so it shows
whether you click the button or fire the shortcut.
## Test plan
### Storage navigation chords
Active anywhere under `/project/<ref>/storage/*`.
| Keybind | Action |
|---------|--------|
| `S` then `F` | Go to Files |
| `S` then `A` | Go to Analytics buckets (platform + feature-flagged) |
| `S` then `V` | Go to Vector buckets (platform + feature-flagged) |
| `S` then `3` | Go to S3 settings (platform only) |
### Files (bucket list) page
At `/project/<ref>/storage/files`.
| Keybind | Action | Notes |
|---------|--------|-------|
| `Shift+F` | Focus search ("Search buckets") | Selects existing text |
| `Shift+N` | Create new bucket | Opens the create-bucket modal |
| `F` then `C` | Reset filters | Clears the search string |
| `Shift+R` | Refresh buckets | Refetches the bucket list |
| `S` then `C` | Reset bucket sort | Only fires when sort ≠ default
(Created at) |
### Storage Explorer (inside a bucket)
At `/project/<ref>/storage/files/buckets/<bucketId>`.
| Keybind | Action | Notes |
|---------|--------|-------|
| `Shift+F` | Focus search ("Search files") | Opens the search input if
hidden, then focuses |
| `Shift+R` | Refresh | Refetches all opened folders; spinner reflects
state |
| `I` then `F` | Upload files | Disabled w/o ` STORAGE_WRITE ` or at
bucket root with no folder |
| `I` then `N` | Create folder | Same permission gates as Upload |
| `V` then `C` | View as columns | |
| `V` then `L` | View as list | |
| `Shift+D` | Download selected | Only fires when ≥1 item selected;
single vs many handled |
| `Shift+M` | Move selected | Only fires when ≥1 item selected AND `
STORAGE_WRITE ` granted |
| `Mod+Backspace` | Delete selected | Only fires when ≥1 item selected
(` Mod ` = ⌘ on macOS / ` Ctrl ` on Win/Linux) |
| `Escape` | Clear selection | If ≥1 item selected |
| `Escape` | Close file preview | If no selection and preview pane open
|
| `Escape` | Close search | If no selection, no preview, and search is
open |
### Tips while testing
- [x] Chords (two-key sequences): press the first key, release, then
press the second key within ~1s
- [x] Hover any wired button (search, Refresh, Upload, Create folder,
View, Download, Move, Delete, the bucket Create button, sidebar items)
to see the keybind in a tooltip
- [x] Most actions also appear under "Shortcuts" in `Cmd+P`
- [x] Chords starting with a plain letter (` S, F ` / ` I, F ` / ` V, C
` / ` F, C ` / ` S, C `) won't fire while typing in an input — click out
first
- [x] `Escape` does fire from inside the search field (closes the
search)
- [x] `Cmd+/` opens the full shortcuts reference
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Keyboard shortcuts added across Storage: buckets (refresh, clear sort,
create, search), explorer (upload, create folder, refresh, download,
move, delete, clear search), and navigation shortcuts for
Files/Analytics/Vectors/S3.
* **UI**
* Shortcut keytips/tooltips added to relevant buttons and menu items for
discoverability.
* **Documentation/Tests**
* Shortcut reference sheet labels updated and covered by a new test.
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45837)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import { Dispatch, RefObject, SetStateAction } from 'react'
|
|
|
|
import { STORAGE_BUCKET_SORT } from '../Storage.constants'
|
|
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
|
|
import { useShortcut } from '@/state/shortcuts/useShortcut'
|
|
|
|
interface UseFilesBucketsShortcutsParams {
|
|
searchInputRef: RefObject<HTMLInputElement>
|
|
setFilterString: Dispatch<SetStateAction<string>>
|
|
sortBucket: STORAGE_BUCKET_SORT
|
|
setSortBucket: (value: STORAGE_BUCKET_SORT) => void
|
|
setCreateVisible: (value: boolean) => void
|
|
onRefresh: () => void
|
|
}
|
|
|
|
export function useFilesBucketsShortcuts({
|
|
searchInputRef,
|
|
setFilterString,
|
|
sortBucket,
|
|
setSortBucket,
|
|
setCreateVisible,
|
|
onRefresh,
|
|
}: UseFilesBucketsShortcutsParams) {
|
|
useShortcut(
|
|
SHORTCUT_IDS.LIST_PAGE_FOCUS_SEARCH,
|
|
() => {
|
|
searchInputRef.current?.focus()
|
|
searchInputRef.current?.select()
|
|
},
|
|
{ label: 'Search buckets' }
|
|
)
|
|
|
|
useShortcut(SHORTCUT_IDS.LIST_PAGE_NEW_ITEM, () => setCreateVisible(true), {
|
|
label: 'Create new bucket',
|
|
})
|
|
|
|
useShortcut(SHORTCUT_IDS.LIST_PAGE_RESET_FILTERS, () => {
|
|
setFilterString('')
|
|
})
|
|
|
|
useShortcut(SHORTCUT_IDS.STORAGE_BUCKETS_REFRESH, onRefresh)
|
|
|
|
useShortcut(
|
|
SHORTCUT_IDS.STORAGE_BUCKETS_CLEAR_SORT,
|
|
() => setSortBucket(STORAGE_BUCKET_SORT.CREATED_AT),
|
|
{ enabled: sortBucket !== STORAGE_BUCKET_SORT.CREATED_AT }
|
|
)
|
|
}
|