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>
30 lines
1.3 KiB
TypeScript
30 lines
1.3 KiB
TypeScript
import { act, renderHook } from '@testing-library/react'
|
|
import { describe, expect, it } from 'vitest'
|
|
|
|
import { useTableRowSelection } from './useTableRowSelection'
|
|
|
|
describe('useTableRowSelection', () => {
|
|
it('restores a linked log and resets when filters or project change', () => {
|
|
const { result, rerender } = renderHook(
|
|
({ scope }) => useTableRowSelection({ scope, initialId: 'b' }),
|
|
{ initialProps: { scope: 'project-1:filters-1' } }
|
|
)
|
|
expect(result.current.selection.selected).toEqual({ b: true })
|
|
act(() => result.current.selectRow(['a', 'b', 'c'], 'c', { shiftKey: true }))
|
|
expect(result.current.selection.selected).toEqual({ b: true, c: true })
|
|
rerender({ scope: 'project-1:filters-1' })
|
|
expect(result.current.selection.selected).toEqual({ b: true, c: true })
|
|
rerender({ scope: 'project-1:filters-2' })
|
|
expect(result.current.selection).toEqual({ selected: {} })
|
|
act(() => result.current.selectRow(['a'], 'a'))
|
|
rerender({ scope: 'project-2:filters-2' })
|
|
expect(result.current.selection).toEqual({ selected: {} })
|
|
})
|
|
|
|
it('clears the anchor and selection when closing the pane', () => {
|
|
const { result } = renderHook(() => useTableRowSelection({ scope: 'logs', initialId: 'a' }))
|
|
act(() => result.current.clearSelection())
|
|
expect(result.current.selection).toEqual({ selected: {} })
|
|
})
|
|
})
|