mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 03:15:06 +03:00
Ali Waseem
153f2619bc
## Summary
- Adds a hover-revealed expand button to SQL result cells whose value is
unlikely to fit on one line (objects, arrays, strings >60 chars, or
strings with newlines). Clicking opens the existing `CellDetailPanel`
for that cell.
- Switches the expand state from a boolean tied to the selected cell to
a direct `{ column, value }` reference, so the context menu and the new
button both target the right-clicked / clicked cell.
- Extracts the per-cell renderer into its own `ResultCell` component to
keep `Results.tsx` digestible and the new affordance isolated.
- Covers the new logic with exhaustive `isLargeValue` unit tests and a
`ResultCell` component test (visibility, click, right-click).
Linear: [FE-3130](https://linear.app/supabase/issue/FE-3130)
## Test plan
- [x] Run a SQL query that returns mixed cell types (short strings, long
strings, JSON objects, arrays, nulls) and confirm the expand button
appears only on cells where content is likely truncated.
- [x] Hover a large cell and click the expand button — `CellDetailPanel`
opens with the correct column + value.
- [x] Right-click a large cell and choose "View cell content" — same
panel opens with the right cell.
- [x] Right-click a small cell and "Copy cell content" — clipboard
contains the raw value.
- [x] Resize a column wider than its content and confirm the button
still positions correctly.
- [x] `pnpm vitest` for `Results.utils.test.ts`, `Results.test.tsx`,
`ResultCell.test.tsx` — all green.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Enhanced SQL result cells with automatic detection and expansion
functionality for large values (exceeding 60 characters or containing
line breaks)
* Added expand button to view full cell content directly in results
* Integrated right-click context menu for cell content options
* Improved display of null values in query results
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
57 lines
2.3 KiB
TypeScript
57 lines
2.3 KiB
TypeScript
import { fireEvent, screen } from '@testing-library/react'
|
|
import userEvent from '@testing-library/user-event'
|
|
import { expect, test, vi } from 'vitest'
|
|
|
|
import { ResultCell } from '@/components/interfaces/SQLEditor/UtilityPanel/ResultCell'
|
|
import { customRender as render } from '@/tests/lib/custom-render'
|
|
|
|
const noop = () => {}
|
|
|
|
test('renders the formatted cell value', () => {
|
|
render(<ResultCell column="name" value="alice" onContextMenu={noop} onExpand={noop} />)
|
|
expect(screen.getByText('alice')).toBeTruthy()
|
|
})
|
|
|
|
test('renders NULL for null values', () => {
|
|
render(<ResultCell column="name" value={null} onContextMenu={noop} onExpand={noop} />)
|
|
expect(screen.getByText('NULL')).toBeTruthy()
|
|
})
|
|
|
|
test('does not render the expand button for short string values', () => {
|
|
render(<ResultCell column="name" value="alice" onContextMenu={noop} onExpand={noop} />)
|
|
expect(screen.queryByRole('button', { name: 'View full cell content' })).toBeNull()
|
|
})
|
|
|
|
test('renders the expand button for object values', () => {
|
|
render(<ResultCell column="data" value={{ nested: true }} onContextMenu={noop} onExpand={noop} />)
|
|
expect(screen.getByRole('button', { name: 'View full cell content' })).toBeTruthy()
|
|
})
|
|
|
|
test('renders the expand button for long string values', () => {
|
|
render(<ResultCell column="bio" value={'a'.repeat(120)} onContextMenu={noop} onExpand={noop} />)
|
|
expect(screen.getByRole('button', { name: 'View full cell content' })).toBeTruthy()
|
|
})
|
|
|
|
test('clicking the expand button calls onExpand with column and value', async () => {
|
|
const onExpand = vi.fn()
|
|
const value = { nested: true }
|
|
render(<ResultCell column="data" value={value} onContextMenu={noop} onExpand={onExpand} />)
|
|
|
|
await userEvent.click(screen.getByRole('button', { name: 'View full cell content' }))
|
|
|
|
expect(onExpand).toHaveBeenCalledTimes(1)
|
|
expect(onExpand).toHaveBeenCalledWith('data', value)
|
|
})
|
|
|
|
test('right-clicking the cell calls onContextMenu with column and value', () => {
|
|
const onContextMenu = vi.fn()
|
|
render(<ResultCell column="name" value="alice" onContextMenu={onContextMenu} onExpand={noop} />)
|
|
|
|
fireEvent.contextMenu(screen.getByText('alice'))
|
|
|
|
expect(onContextMenu).toHaveBeenCalledTimes(1)
|
|
const [, column, value] = onContextMenu.mock.calls[0]
|
|
expect(column).toBe('name')
|
|
expect(value).toBe('alice')
|
|
})
|