mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 03:15:06 +03:00
Joshen Lim
ea909e998b
## Context > [!IMPORTANT] > Changes in this PR only apply to the local environment - there should not be any changes to staging (nor production) Given that read replicas currently sit under database replication, the UI currently waits for replication destinations to load before rendering the page. However for local development, setting up of the ETL API isn't necessary nor applicable for everyone so this indirectly adds friction if we just want to work with read replicas. ## Changes involved - Opting to skip retrying fetching ETL related requests if the error returned is "replication API URL is not configured" - This is indicative that the local platform isn't set up for ETL yet - ^ Database replication page will hence not wait for ETL requests to succeed before finally rendering the UI - Node diagram will also then render properly (just read replicas) - Add a small admonition to visualize this <img width="1079" height="301" alt="image" src="https://github.com/user-attachments/assets/32bd5d2f-a76e-417e-bedf-9a04de3bb305" /> ## To test - Will only be able to test locally - basically just head over to the database replication page (unless you somehow already have ETL API set up locally) - But can also verify that there's no changes on staging preview <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved error messaging when ETL is not configured in local development environments * Enhanced error handling for replication API failures with better non-retryable error detection * **Improvements** * Refined replication diagram rendering based on destination setup state * Updated dropdown menu interactions for read replica management <!-- 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