mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 18:05:11 +03:00
Joshen Lim
6ffc3fc94c
## Context Related to unifying read replicas into database replication page which is currently in internal testing ## Changes involved - Updates the "New replica" CTA in `DatabaseSelector` (e.g within the SQL Editor) to link to the replication page instead of settings infrastructure - Refactor replication UI to use URL query states for new destination + edit destination ## To test - [ ] Verify that the "New replica" CTA links correctly to replication page if flag is on - [ ] Verify that new + edit destination UI works as expected - Note that there's some server side validation for ETL replication now so might be tricky to test creating an actual ETL replication - Minimally can test creating a read replica and ensure that the UI behaviour is all as expected <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added unified replication experience with URL-based state management for destination creation and editing * **Refactor** * Simplified replication panel component interfaces and consolidated destination data fetching logic * Enhanced edit flows to leverage URL parameters for seamless navigation * **Chores** * Marked legacy read replica creation panel as deprecated <!-- end of auto-generated comment: release notes by coderabbit.ai -->
76 lines
2.4 KiB
TypeScript
76 lines
2.4 KiB
TypeScript
import { useParams } from 'common'
|
|
|
|
import { DestinationType } from './DestinationPanel/DestinationPanel.types'
|
|
import { getStatusName } from './Pipeline.utils'
|
|
import { useReplicationDestinationByIdQuery } from '@/data/replication/destination-by-id-query'
|
|
import { useReplicationPipelineStatusQuery } from '@/data/replication/pipeline-status-query'
|
|
import { useReplicationPipelinesQuery } from '@/data/replication/pipelines-query'
|
|
import { useReplicationSourcesQuery } from '@/data/replication/sources-query'
|
|
|
|
export const useDestinationInformation = ({ id }: { id?: number | null }) => {
|
|
const { ref: projectRef } = useParams()
|
|
|
|
const { data: sourcesData, isSuccess: isSourcesSuccess } = useReplicationSourcesQuery({
|
|
projectRef,
|
|
})
|
|
const sourceId = sourcesData?.sources.find((s) => s.name === projectRef)?.id
|
|
const replicationNotEnabled = isSourcesSuccess && !sourceId
|
|
|
|
const {
|
|
data: destination,
|
|
error: destinationError,
|
|
isPending: isDestinationPending,
|
|
isError: isDestinationError,
|
|
isSuccess: isDestinationSuccess,
|
|
} = useReplicationDestinationByIdQuery({
|
|
projectRef,
|
|
destinationId: id,
|
|
})
|
|
const destinationType: DestinationType | undefined = !destination
|
|
? undefined
|
|
: 'big_query' in destination.config
|
|
? 'BigQuery'
|
|
: 'iceberg' in destination.config
|
|
? 'Analytics Bucket'
|
|
: undefined
|
|
|
|
const {
|
|
data: pipelinesData,
|
|
error: pipelineError,
|
|
isPending: isPipelinePending,
|
|
isError: isPipelineError,
|
|
isSuccess: isPipelineSuccess,
|
|
} = useReplicationPipelinesQuery({ projectRef })
|
|
const pipeline = pipelinesData?.pipelines.find((p) => p.destination_id === id)
|
|
|
|
const { data: pipelineStatus } = useReplicationPipelineStatusQuery({
|
|
projectRef,
|
|
pipelineId: pipeline?.id,
|
|
})
|
|
const statusName = getStatusName(pipelineStatus?.status)
|
|
|
|
return {
|
|
sourceId,
|
|
destination,
|
|
pipeline,
|
|
pipelineStatus,
|
|
// Derivatives
|
|
statusName,
|
|
type: destinationType,
|
|
replicationNotEnabled,
|
|
// Data fetching status (Secondary information)
|
|
pipelineFetcher: {
|
|
error: pipelineError,
|
|
isPending: isPipelinePending,
|
|
isError: isPipelineError,
|
|
isSuccess: isPipelineSuccess,
|
|
},
|
|
destinationFetcher: {
|
|
error: destinationError,
|
|
isPending: isDestinationPending,
|
|
isError: isDestinationError,
|
|
isSuccess: isDestinationSuccess,
|
|
},
|
|
}
|
|
}
|