mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
Joshen Lim
ca7e697c41
## Context Started to notice a spike of this error happening on Sentry: `TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.` Checking the stack trace points the error to `cmdk` - the most recent change related to `cmdk` was this PR [here](https://github.com/supabase/supabase/pull/42277) ^ Not entirely suer if it was the cause tbh but it did help pinpoint the error locally that it was happening when trying to search in the `ColumnType` popover From what I can tell - it's happening because of the `CommandItem` "Other types" being rendered outside of a `CommandGroup` Am removing that as the fix + add `heading` to the `CommandGroups` so that it looks nicer anyways <img width="506" height="333" alt="image" src="https://github.com/user-attachments/assets/34623cfa-39be-4a02-9579-15303d442794" /> ## To test Can reproduce by trying to search in the ColumnType of the table side panel editor <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * Enhanced the column type selector with better visual organization. Data types are now grouped into clearly labeled sections ("Postgres data types" and "Other types") with visual separators, making it easier to navigate and select the appropriate column type when editing tables. <sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub> <!-- 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