+}
+
+interface PartitioningFieldsProps {
+ columnSelection: ColumnSelectionState
+ errors: {
+ column?: string
+ end?: string
+ interval?: string
+ start?: string
+ }
+ onChange: (partitionBy: BigQueryPartitionBy | undefined) => void
+ onNeedsColumns: () => void
+ partitionBy: BigQueryPartitionBy | undefined
+}
+
+export const PartitioningFields = ({
+ columnSelection,
+ errors,
+ onChange,
+ onNeedsColumns,
+ partitionBy,
+}: PartitioningFieldsProps) => {
+ const partitionKind: BigQueryPartitionKind = partitionBy?.kind ?? 'none'
+
+ const compatibleColumnNames =
+ partitionBy && (partitionBy.kind === 'time_column' || partitionBy.kind === 'integer_range')
+ ? columnSelection.availableColumnNames.filter((column) =>
+ isPartitionColumnTypeCompatible(
+ partitionBy.kind,
+ columnSelection.columnTypeByName.get(column)
+ )
+ )
+ : columnSelection.availableColumnNames
+ const compatibleColumnEmptyLabel =
+ partitionBy?.kind === 'time_column'
+ ? 'No published date or timestamp columns'
+ : 'No published integer columns'
+
+ return (
+ <>
+
+
+
+
+ {partitionBy && 'column' in partitionBy && (
+
+
+
+ )}
+
+ {partitionBy && 'granularity' in partitionBy && (
+
+
+
+ )}
+
+ {partitionBy?.kind === 'integer_range' && (
+
+
+ ) =>
+ onChange({
+ ...partitionBy,
+ start: parseIntegerInput(event.target.value, partitionBy.start),
+ })
+ }
+ />
+
+
+ ) =>
+ onChange({
+ ...partitionBy,
+ end: parseIntegerInput(event.target.value, partitionBy.end),
+ })
+ }
+ />
+
+
+ ) =>
+ onChange({
+ ...partitionBy,
+ interval: parseIntegerInput(event.target.value, partitionBy.interval),
+ })
+ }
+ />
+
+
+ )}
+
+ )
+}
+
+interface ClusteringFieldsProps {
+ clusterBy: string[]
+ columnSelection: ColumnSelectionState
+ error?: string
+ onChange: (columns: string[]) => void
+}
+
+export const ClusteringFields = ({
+ clusterBy,
+ columnSelection,
+ error,
+ onChange,
+}: ClusteringFieldsProps) => {
+ const hasReachedColumnLimit = clusterBy.length >= BIGQUERY_MAX_CLUSTERING_COLUMNS
+
+ return (
+
+ {
+ if (columns.length <= BIGQUERY_MAX_CLUSTERING_COLUMNS) onChange(columns)
+ }}
+ onOpenChange={columnSelection.onOpenChange}
+ >
+ (
+
+ )}
+ />
+
+
+ {columnSelection.availableColumnNames.map((column) => (
+
+
+
+ ))}
+
+
+
+
+ )
+}
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/TableOptionRow.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/TableOptionRow.tsx
new file mode 100644
index 00000000000..f1f7d91caec
--- /dev/null
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/TableOptionRow.tsx
@@ -0,0 +1,259 @@
+import { useParams } from 'common'
+import { RotateCcw } from 'lucide-react'
+import { useState } from 'react'
+import { get, useController, useFormState, type Control, type FieldErrors } from 'react-hook-form'
+import { Button } from 'ui'
+import { Admonition } from 'ui-patterns/Admonition'
+
+import type { DestinationPanelSchemaType } from '../DestinationForm.schema'
+import {
+ isMetadataListErrorVisible,
+ isMetadataListLoading,
+ useRefreshOnOpen,
+} from '../useRefreshOnOpen'
+import {
+ ClusteringFields,
+ PartitioningFields,
+ type ColumnSelectionState,
+} from './TableOptionFields'
+import { useReplicationSourceId } from '@/data/replication/sources-query'
+import { useReplicationTableColumnsQuery } from '@/data/replication/table-columns-query'
+
+type TableOption = NonNullable[number]
+type PartitionBy = TableOption['partitionBy']
+
+const getFieldErrorMessage = (errors: FieldErrors, path: string) => {
+ const error = get(errors, path)
+ return typeof error?.message === 'string' ? error.message : undefined
+}
+
+interface TableOptionErrors {
+ partitionBy?: string
+ column?: string
+ start?: string
+ end?: string
+ interval?: string
+ clusterBy?: string
+}
+
+interface TableOptionEditorProps {
+ partitionBy: PartitionBy
+ clusterBy: string[]
+ onPartitionByChange: (partitionBy: PartitionBy) => void
+ onClusterByChange: (clusterBy: string[]) => void
+ errors?: TableOptionErrors
+ isPublicationColumnsError?: boolean
+ isPublicationColumnsPending?: boolean
+ publishedColumnNames?: ReadonlySet | null
+ tableId: number
+ onClear?: () => void
+}
+
+const TableOptionEditor = ({
+ partitionBy,
+ clusterBy,
+ onPartitionByChange,
+ onClusterByChange,
+ errors = {},
+ isPublicationColumnsError = false,
+ isPublicationColumnsPending = false,
+ publishedColumnNames,
+ tableId,
+ onClear,
+}: TableOptionEditorProps) => {
+ const { ref: projectRef } = useParams()
+ const sourceId = useReplicationSourceId({ projectRef })
+
+ const shouldInitiallyLoadColumns =
+ partitionBy?.kind === 'time_column' ||
+ partitionBy?.kind === 'integer_range' ||
+ clusterBy.length > 0
+ const [shouldLoadColumns, setShouldLoadColumns] = useState(shouldInitiallyLoadColumns)
+ const {
+ data: columns = [],
+ isPending,
+ isFetching,
+ isError,
+ isSuccess,
+ refetch: refetchColumns,
+ } = useReplicationTableColumnsQuery(
+ { projectRef, sourceId, tableId },
+ { enabled: shouldLoadColumns }
+ )
+
+ const isLoadingColumns =
+ (shouldLoadColumns && isMetadataListLoading(isPending || isFetching, columns.length)) ||
+ isPublicationColumnsPending
+ const sourceColumnNames = columns.map((column) => column.name)
+ const sourceColumnNameSet = new Set(sourceColumnNames)
+ const canUseColumns = !isPublicationColumnsPending && !isPublicationColumnsError
+ const availableColumnNames = canUseColumns
+ ? sourceColumnNames.filter(
+ (column) =>
+ publishedColumnNames === undefined ||
+ (publishedColumnNames !== null && publishedColumnNames.has(column))
+ )
+ : []
+ const columnTypeByName = new Map(columns.map((column) => [column.name, column.type]))
+ const areColumnsVerified = isSuccess && canUseColumns
+ const partitionColumn = partitionBy && 'column' in partitionBy ? partitionBy.column : undefined
+ const configuredColumns = [partitionColumn, ...clusterBy].filter(
+ (column, columnIndex, allConfiguredColumns): column is string =>
+ typeof column === 'string' &&
+ column.trim().length > 0 &&
+ allConfiguredColumns.indexOf(column) === columnIndex
+ )
+ const unavailableColumns = configuredColumns.filter(
+ (column) =>
+ areColumnsVerified &&
+ (!sourceColumnNameSet.has(column) ||
+ (publishedColumnNames != null && !publishedColumnNames.has(column)))
+ )
+ const unavailableColumnSet = new Set(unavailableColumns)
+ const isColumnSelectionError =
+ isPublicationColumnsError || isMetadataListErrorVisible(isError, columns.length)
+
+ const { handleOpenChange: handleRefreshColumnsOnOpen } = useRefreshOnOpen({
+ isEnabled: shouldLoadColumns,
+ refetch: refetchColumns,
+ })
+ const handleColumnPickerOpenChange = (isOpen: boolean) => {
+ if (isOpen && !shouldLoadColumns) {
+ setShouldLoadColumns(true)
+ return
+ }
+ handleRefreshColumnsOnOpen(isOpen)
+ }
+
+ const columnSelection: ColumnSelectionState = {
+ availableColumnNames,
+ columnTypeByName,
+ isError: isColumnSelectionError,
+ isLoading: isLoadingColumns,
+ onOpenChange: handleColumnPickerOpenChange,
+ unavailableColumnSet,
+ }
+
+ return (
+
+
setShouldLoadColumns(true)}
+ columnSelection={columnSelection}
+ errors={{
+ column: errors.column,
+ start: errors.start,
+ end: errors.end,
+ interval: errors.interval,
+ }}
+ />
+
+ {errors.partitionBy && {errors.partitionBy}
}
+
+
+
+ {shouldLoadColumns && isColumnSelectionError && (
+
+ )}
+
+ {unavailableColumns.length > 0 && (
+
+ )}
+
+ {onClear !== undefined && (
+ }
+ onClick={onClear}
+ >
+ Clear
+
+ )}
+
+ {['w-2/3', 'w-1/2', 'w-3/4'].map((width, index) => (
+
+
+
+
+ ))}
+
This publication has no tables.
+ }
+
+ return (
+
+
+
setExpandedTableId(value === '' ? undefined : Number(value))}
+ >
+ {publicationTables.map((table) => {
+ const index = fields.findIndex((field) => field.tableId === table.id)
+ const isConfigured = index !== -1
+ const summary = tableOptionSummary(isConfigured ? tableOptions[index] : undefined)
+ // Errors live inside the collapsed row, so the trigger has to carry them or a
+ // blocked save looks like nothing happened at all.
+ const rowError = isConfigured
+ ? findFirstErrorMessage(errors.tableOptions?.[index])
+ : undefined
+ const summaryLabel = rowError ?? summary ?? 'Not configured'
+ const publishedColumnNames =
+ selectedPublication?.config.type === 'tables'
+ ? resolvePublishedColumnNames(table.id, configuredTablesById, knownSourceTablesById)
+ : undefined
+ const isPublicationColumnsPending =
+ tablesNeedingPartitionAncestry.has(table.id) && isSourceTablesPending
+ const sharedProps = {
+ isPublicationColumnsError:
+ selectedPublication?.config.type === 'tables' &&
+ publishedColumnNames === null &&
+ !isPublicationColumnsPending,
+ isPublicationColumnsPending,
+ publishedColumnNames,
+ tableId: table.id,
+ }
+
+ return (
+
+
+
+
+
+
+ {tableLabel(table)}
+
+
+ {summaryLabel}
+
+
+
+
+ {/* Radix unmounts closed content after its exit animation, so this must not be
+ gated on the expanded state as well or the row collapses as an empty box. */}
+
+ {isConfigured ? (
+ {
+ remove(index)
+ setExpandedTableId(undefined)
+ }}
+ {...sharedProps}
+ />
+ ) : (
+ append({ tableId: table.id, ...option })}
+ {...sharedProps}
+ />
+ )}
+
+
+ )
+ })}
+
+
+ {unavailableTableOptions.map(({ field, index }) => {
+ const sourceTable = sourceTablesById.get(field.tableId)
+
+ return (
+
+
+
+
+
+ {sourceTable ? tableLabel(sourceTable) : 'Previously configured table'}
+
+ No longer in publication
+
+
+
}
+ onClick={() => remove(index)}
+ >
+ Remove
+
+
+ )
+ })}
+
+
+ {unavailableTableOptions.length > 0 && (
+
+ )}
+