mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 07:09:07 +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.
29 lines
1.1 KiB
TypeScript
29 lines
1.1 KiB
TypeScript
import type { UseFormReturn } from 'react-hook-form'
|
|
|
|
import { AdvancedSettings } from '../DestinationPanel/DestinationForm/AdvancedSettings'
|
|
import type { DestinationPanelSchemaType } from '../DestinationPanel/DestinationForm/DestinationForm.schema'
|
|
import { PublicationSelection } from '../DestinationPanel/DestinationForm/PublicationSelection'
|
|
import { TableCopySelection } from '../DestinationPanel/DestinationForm/TableCopySelection'
|
|
import type { DestinationType } from '../DestinationPanel/DestinationPanel.types'
|
|
|
|
export const PipelineDataSection = ({
|
|
type,
|
|
form,
|
|
onSelectNewPublication,
|
|
}: {
|
|
type: DestinationType
|
|
form: UseFormReturn<DestinationPanelSchemaType>
|
|
onSelectNewPublication: () => void
|
|
}) => (
|
|
<section aria-label="Data">
|
|
<div className="p-5 flex flex-col gap-y-6">
|
|
<h3 className="text-sm font-medium text-foreground">Data</h3>
|
|
<div className="flex flex-col gap-y-4">
|
|
<PublicationSelection form={form} onSelectNewPublication={onSelectNewPublication} />
|
|
<TableCopySelection form={form} editMode={false} />
|
|
</div>
|
|
</div>
|
|
<AdvancedSettings type={type} form={form} group="data" />
|
|
</section>
|
|
)
|