mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Saxon FletcherandClaude Opus 5
a311279d66
Stack 3/4 · previous: #50687 · next: #50689 ## Problem `DataTableInfinite` could only open one row at a time. Multi-select meant clicking a separate checkbox column, with no support for ranges or modifier keys. ## Solution This PR only adds shared primitives. Behavior stays the same until a consumer passes `onSelectRow` (wired up in the next PR). - `selectTableRow` (`rowSelection.utils.ts`): a pure reducer for plain, Cmd/Ctrl-toggle, Shift-range, and additive-range selection over the current display order, with a fixed anchor. - `useTableRowSelection`: holds the selection state and resets it when its `scope` (project/filters) changes. - `DataTableProvider` gets an optional `onSelectRow`. When it's set, `DataTableInfinite` rows use it and reflect `row.getIsSelected()`. Rows also get `aria-selected`, Space activates them like Enter, and shift-click no longer selects text. ## Review instructions 1. Read `rowSelection.utils.test.ts`: it covers the selection rules. 2. Open Unified Logs. Row clicks should behave the same as on master. ## Checklist - [ ] I have read [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added richer data-table row selection, including multi-select, range selection, toggling, and keyboard support. - Added visual and accessibility feedback for selected rows, including pointer cursor and `aria-selected`. - Preserved selections across paging and live updates while resetting them when filters or projects change. - Added support for external row-selection callbacks. - **Tests** - Added comprehensive coverage for selection behavior and state persistence. <!-- end of auto-generated comment: release notes by coderabbit.ai --> Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
80 lines
3.0 KiB
TypeScript
80 lines
3.0 KiB
TypeScript
import { describe, expect, it } from 'vitest'
|
|
|
|
import { selectTableRow } from './rowSelection.utils'
|
|
|
|
const ids = ['a', 'b', 'c', 'd', 'e']
|
|
|
|
describe('selectTableRow', () => {
|
|
it('replaces selection on plain click, including an already selected row', () => {
|
|
const selected = selectTableRow({ selected: { a: true, c: true } }, ids, 'c')
|
|
expect(selected).toEqual({ selected: { c: true }, anchorId: 'c', activeId: 'c' })
|
|
})
|
|
|
|
it('clears selection on plain click of the only selected row', () => {
|
|
const selected = selectTableRow({ selected: {} }, ids, 'c')
|
|
expect(selectTableRow(selected, ids, 'c')).toEqual({ selected: {} })
|
|
})
|
|
|
|
it.each([{ metaKey: true }, { ctrlKey: true }, { toggle: true }])(
|
|
'toggles individual rows with %o',
|
|
(modifiers) => {
|
|
const start = selectTableRow({ selected: {} }, ids, 'a')
|
|
const added = selectTableRow(start, ids, 'c', modifiers)
|
|
expect(added.selected).toEqual({ a: true, c: true })
|
|
expect(selectTableRow(added, ids, 'a', modifiers).selected).toEqual({ c: true })
|
|
expect(selectTableRow(added, ids, 'c', modifiers).anchorId).toBe('c')
|
|
}
|
|
)
|
|
|
|
it('extends, shrinks, and reverses a range around a fixed anchor', () => {
|
|
const start = selectTableRow({ selected: {} }, ids, 'c')
|
|
const down = selectTableRow(start, ids, 'e', { shiftKey: true })
|
|
expect(down.selected).toEqual({ c: true, d: true, e: true })
|
|
const back = selectTableRow(down, ids, 'd', { shiftKey: true })
|
|
expect(back.selected).toEqual({ c: true, d: true })
|
|
expect(selectTableRow(back, ids, 'a', { shiftKey: true }).selected).toEqual({
|
|
a: true,
|
|
b: true,
|
|
c: true,
|
|
})
|
|
expect(back.anchorId).toBe('c')
|
|
})
|
|
|
|
it('keeps a range selected when shift-clicking it again', () => {
|
|
const start = selectTableRow({ selected: {} }, ids, 'a')
|
|
const range = selectTableRow(start, ids, 'c', { shiftKey: true })
|
|
expect(selectTableRow(range, ids, 'c', { shiftKey: true })).toEqual(range)
|
|
})
|
|
|
|
it.each([{ metaKey: true }, { ctrlKey: true }])(
|
|
'adds a range to disjoint selection with %o',
|
|
(modifiers) => {
|
|
const start = { selected: { a: true, d: true }, anchorId: 'd' }
|
|
expect(selectTableRow(start, ids, 'e', { shiftKey: true, ...modifiers }).selected).toEqual({
|
|
a: true,
|
|
d: true,
|
|
e: true,
|
|
})
|
|
}
|
|
)
|
|
|
|
it('uses the current display order', () => {
|
|
const start = { selected: { a: true }, anchorId: 'a' }
|
|
expect(
|
|
selectTableRow(start, ['e', 'a', 'c', 'b', 'd'], 'b', { shiftKey: true }).selected
|
|
).toEqual({ a: true, c: true, b: true })
|
|
})
|
|
|
|
it.each([undefined, 'missing'])('starts a fresh range when the anchor is %s', (anchorId) => {
|
|
expect(
|
|
selectTableRow({ selected: { a: true }, anchorId }, ids, 'c', { shiftKey: true })
|
|
).toEqual({ selected: { c: true }, anchorId: 'c', activeId: 'c' })
|
|
})
|
|
|
|
it('ignores missing targets and empty results', () => {
|
|
const state = { selected: { a: true } }
|
|
expect(selectTableRow(state, ids, 'missing')).toBe(state)
|
|
expect(selectTableRow(state, [], 'a')).toBe(state)
|
|
})
|
|
})
|