mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 02:45:07 +03:00
Joshen Lim
a54fd1e93c
## Context There's an error from the `LogTable` component `Previous layout not found` that's caused by trying to set `defaultSize` as a dynamic value for the `ResizablePanel` component. Theres 2 ways to address this really Option 1: Set `id` param on `ResizablePanel` to be a dynamic: this came from a suggestion by the library's author [here](https://github.com/bvaughn/react-resizable-panels/issues/401#issuecomment-2351010630) Option 2: Avoid dynamic values entirely Opting for option 2 as the cleaner way to fix this. Just note as well that there's a couple of console warnings from the library about `Invalid layout total size` - this one's safe to ignore and is seemingly an issue with the current version of `react-resizable-panels` that we're using (v2, there's currently v4 already) ## To test Tbh I couldn't reproduce this locally actually, but I happened to come across this same bug while debugging the `Invalid layout total size` warning in `DefaultLayout` by trying to set a dynamic value for `defaultSize` which made me realise the dynamic value was the one causing that error <img width="534" height="89" alt="image" src="https://github.com/user-attachments/assets/3b696c16-ea66-481e-a698-d59841c7400d" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **Refactor** * Improved logs viewer layout with resizable panels for better content management and log selection display. * Reorganized internal component structure and module exports for improved maintainability. * **Chores** * Updated test imports to reflect internal module restructuring. <!-- 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