[pipelineId].tsx50 lines · main

1	import { FeatureFlagContext, useParams } from 'common'
2	import { useRouter } from 'next/router'
3	import { useContext, useEffect } from 'react'
4
5	import { ReplicationPipelineStatus } from '@/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus'
6	import { useIsETLPrivateAlpha } from '@/components/interfaces/Database/Replication/useIsETLPrivateAlpha'
7	import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
8	import DefaultLayout from '@/components/layouts/DefaultLayout'
9	import { ScaffoldContainer, ScaffoldSection } from '@/components/layouts/Scaffold'
10	import { FormHeader } from '@/components/ui/Forms/FormHeader'
11	import { PipelineRequestStatusProvider } from '@/state/replication-pipeline-request-status'
12	import type { NextPageWithLayout } from '@/types'
13
14	const DatabaseReplicationPage: NextPageWithLayout = () => {
15	const router = useRouter()
16	const { ref: projectRef } = useParams()
17	const { hasLoaded } = useContext(FeatureFlagContext)
18	const enablePgReplicate = useIsETLPrivateAlpha()
19
20	useEffect(() => {
21	if (hasLoaded && !enablePgReplicate) {
22	router.replace(`/project/${projectRef}/database/replication`)
23	}
24	}, [router, hasLoaded, projectRef, enablePgReplicate])
25
26	return (
27	<>
28	{enablePgReplicate && (
29	<PipelineRequestStatusProvider>
30	<ScaffoldContainer>
31	<ScaffoldSection>
32	<div className="col-span-12">
33	<FormHeader title="Replication" />
34	<ReplicationPipelineStatus />
35	</div>
36	</ScaffoldSection>
37	</ScaffoldContainer>
38	</PipelineRequestStatusProvider>
39	)}
40	</>
41	)
42	}
43
44	DatabaseReplicationPage.getLayout = (page) => (
45	<DefaultLayout>
46	<DatabaseLayout title="Replication">{page}</DatabaseLayout>
47	</DefaultLayout>
48	)
49
50	export default DatabaseReplicationPage