mirror of
https://github.com/supabase/supabase.git
synced 2026-10-15 06:09:08 +03:00
Danny White
7fa436050a
## Problem The pipeline wizard in #49243 needs publication, initial sync and replication settings together on its data step. ## Solution Compose `PipelineDataSection` from the existing controls and use it in preview-enabled creation. It includes the publication selector, initial-sync controls and data advanced settings, including BigQuery table layout. This preserves the grouping from #51570. Preview off and editing keep the existing layout. Validation and creation behaviour stay the same; no wizard routing is added. Stacked on #51570. ## Review instructions 1. Open the [Pipelines preview](https://studio-staging-git-dnywh-featpipeline-data-section-supabase.vercel.app/dashboard/project/_/database/pipelines), select a test project with Pipelines enabled and go to **Database → Pipelines**. Enable **Pipeline creation wizard** in Feature Previews, then click **Add pipeline**. Confirm **Data** follows **Destination connection**, with publication and initial sync above its **Advanced settings**. 2. Select a publication and change the initial-sync option. For selected-table options, confirm the publication tables are available. Click **New publication** in the publication selector and confirm the existing creation panel opens, then cancel it. 3. Expand **Advanced settings** under **Data**. Confirm replication settings appear, plus table layout for BigQuery, without connection pool size, staleness or role. Change **Batch wait time**, collapse and reopen the accordion, and confirm the value remains. Check desktop and phone widths. Cancel and discard changes; no credentials or pipeline creation are needed. 4. Turn the preview off and reopen **Add pipeline**. Confirm the original layout remains. With the preview on, edit an existing pipeline and confirm its original layout also remains.
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>
}