mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 19:05:06 +03:00
Ali Waseem
fbb0770b47
## Summary Fixes https://linear.app/supabase/issue/FE-2941 - Replaced per-cell `ContextMenu_Shadcn_` in SQL result tables with a single shared instance - Each Radix ContextMenu registers a `keydown` listener on `document` via `useEffect`. With 1000+ row result sets, this created thousands of document-level listeners. Chrome trace showed listeners growing from 21k to 347k, with every keystroke taking ~250ms (70k+ function calls per long task) - Fixed DataGrid not rendering in Firefox by using flex layout instead of `height: 100%` for sizing - Fixed double scrollbar in QueryBlock results by making the container a flex column and removing `overflow-auto` - Moved format utils into `Results.utils.ts` ## Test plan The `Results` component and `QueryBlock` are used in several places. Each should be verified: - [x] **AI Assistant** — Have the assistant run a query returning 1000+ rows. Verify the page stays responsive while typing and there is only a single scrollbar on the results table - [x] **AI Assistant (Firefox)** — Same as above but in Firefox. Verify the results table actually renders - [x] **SQL Editor results panel** — Run a query in the SQL Editor. Verify results render correctly with a single scrollbar in the utility panel - [x] **SQL Editor explain tab** — Run an EXPLAIN query. Verify explain results render - [x] **Editor Panel** (used in Table Editor SQL preview) — Verify results display correctly - [x] **Context menu** — Right-click a cell in any of the above and verify "Copy cell content" and "View cell content" still work ## Traces <img width="891" height="599" alt="image" src="https://github.com/user-attachments/assets/6e1b710b-ca9e-4748-9369-d03457d80206" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Fixed context menu behavior so it opens at the cursor and is instantiated once. * Improved clipboard copy formatting for cell values; NULLs copy as empty and cells render as "NULL". * **Style** * Adjusted table layout and scrolling behavior to improve results container sizing. * **Tests** * Added tests for results rendering, context-menu behavior, and cell/clipboard formatting utilities. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Writing components
Where to create your components
- For components that declare the general structure and layout of a page:
/components/layouts/xxx
- For components that are tightly coupled to a specific interface:
/components/interfaces/xxx
- For components that are meant to be reusable across multiple pages:
/components/ui/xxx
- Note: We're gradually moving files out of the
to-be-cleanedfolder into the respective folders as we refactor
Component structure
- If a component has constants and utility methods that are tightly coupled to itself, keep them close to the component and enclose them in a folder with an
index.tsxas an entry point - Otherwise it can just be a file on its own
- For example:
-
components/ui - SampleComponentA - SampleComponentA.tsx - SampleComponentA.constants.ts - SampleComponentA.utils.ts - SampleComponentA.types.ts - index.ts - SampleComponentB.tsx
-
Template for building components
// Declare the prop types of your component
interface ComponentAProps {
sampleProp: string
}
// Name your component accordingly
const ComponentA = ({ sampleProp }: ComponentAProps) => {
return <div>ComponentA: {sampleProp}</div>
}
export default ComponentA