mirror of
https://github.com/supabase/supabase.git
synced 2026-10-13 21:29:08 +03:00
Danny White
27dba8d02d
## What kind of change does this PR introduce? UI clarity improvement for the current pipeline creation sheet. ## What is the current behavior? All destination types appear under a generic Pipelines heading, with release-stage badges repeated beside each option. ## What is the new behavior? Destination types are grouped under Public Alpha, Early Access, and Deprecated headings. The selected value stays compact, while its release-stage guidance remains below the field. | Before | After | | --- | --- | | <img width="1280" height="750" alt="CleanShot 2026-08-28 at 15 45 29@2x" src="https://github.com/user-attachments/assets/5be32928-21fa-4911-bc68-3376c068703f" /> | <img width="1280" height="888" alt="CleanShot 2026-08-28 at 15 44 49@2x" src="https://github.com/user-attachments/assets/2046d174-dd4f-41f1-98da-3d8d48af8a1c" /> | ## To test 1. Open a project, then go to Database → Replication and select Add destination. 2. Open the Type selector. 3. Confirm available destinations are grouped by Public Alpha, Early Access, and Deprecated. 4. Select BigQuery and confirm the field still explains that it is in public alpha. 5. Edit an existing destination and confirm the Type selector remains disabled. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **UI Improvements** * Destination options are now organized into clear release-stage groups: Public Alpha, Early Access, and Deprecated. * Added group headings and separators to make destination selection easier to scan. * Removed individual stage badges from destination labels for a cleaner, more consistent layout. * **Tests** * Updated coverage to verify grouping and visibility across supported destination types. <!-- 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 — use a named export, not a default export
export const ComponentA = ({ sampleProp }: ComponentAProps) => {
return <div>ComponentA: {sampleProp}</div>
}