mirror of
https://github.com/supabase/supabase.git
synced 2026-10-16 22:59:11 +03:00
Danny White
4215b6ca32
## Problem The pipeline wizard in #49243 needs estimated costs and validation feedback in review before creation. ## Solution Add the megabranch’s inline cost estimate and validation feedback to preview-enabled creation. Initial-sync costs follow the selected tables; ongoing pipeline and streaming rates remain visible. Missing estimates do not block creation. Validation feedback distinguishes critical issues from warnings. Preview off and editing keep the existing layout. The Start action, warning confirmation and final cost dialog stay unchanged; no wizard routing is added. Stacked on #51635. ## Review instructions 1. Open the [Pipelines preview](https://studio-staging-git-dnywh-featpipeline-review-costs-supabase.vercel.app/dashboard/project/_/database/pipelines), select a test project with Pipelines enabled, enable **Pipeline creation wizard** in Feature Previews and click **Add pipeline**. Select a publication and confirm **Estimated costs** follows Data review. 2. Compare **All tables**, **No tables** and selected-table initial sync. Confirm initial-sync totals follow the selection, while hourly pipeline and streaming rates stay visible. With **No tables**, initial sync should cost zero. Check desktop and phone widths. 3. Enter valid-format but incorrect destination credentials and click **Start pipeline**. Confirm critical validation issues appear inline and creation stops. Correct the credentials and retry. If warnings are returned, confirm the review explains they may affect replication and the existing **Start pipeline anyway** confirmation still applies. Cancel before final creation. 4. Turn the preview off and reopen **Add pipeline**. Confirm there is no inline cost review. With the preview on, edit an existing pipeline and confirm its original layout 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>
}