mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 12:25:05 +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 pages
Rough guidelines
- Try to break down your pages into smaller building blocks - components which are tightly coupled to a page can be placed within the folder
components/interfaces/xxx/...(Refer to the README.md under the components folder) - Keep to using
useStatehooks for any UI related logic, do not create MobX local stores to handle UI logic.
Template for building pages
import { NextPage } from 'next'
import { withAuth } from 'hooks/misc/withAuth'
// Import the corresponding layout based on the page
import { Layout } from 'components/layouts'
// Import the main building blocks of the page
import { ... } from 'components/interfaces/xxx'
// Import reusable UI components if needed
import { ... } from 'components/ui/xxx'
// Name your page accordingly
const Page: NextPage = () => {
return (
<Layout>
<div>Page content</div>
</Layout>
)
}
export default withAuth(Page)