index.tsx54 lines · main

1	import { useParams } from 'common'
2
3	import { Destinations } from '@/components/interfaces/Database/Replication/Destinations'
4	import { ReplicationDiagram } from '@/components/interfaces/Database/Replication/ReplicationDiagram'
5	import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
6	import { DefaultLayout } from '@/components/layouts/DefaultLayout'
7	import { ScaffoldContainer, ScaffoldSection } from '@/components/layouts/Scaffold'
8	import { UnknownInterface } from '@/components/ui/UnknownInterface'
9	import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
10	import { PipelineRequestStatusProvider } from '@/state/replication-pipeline-request-status'
11	import type { NextPageWithLayout } from '@/types'
12
13	const DatabaseReplicationPage: NextPageWithLayout = () => {
14	const { ref } = useParams()
15	const showPgReplicate = useIsFeatureEnabled('database:replication')
16
17	if (!showPgReplicate) {
18	return <UnknownInterface urlBack={`/project/${ref}/database/schemas`} />
19	}
20
21	return (
22	<PipelineRequestStatusProvider>
23	<ScaffoldContainer>
24	<ScaffoldSection isFullWidth>
25	<div className="w-full mb-6">
26	<div className="flex items-center gap-x-2 mb-1">
27	<h3 className="text-foreground text-xl prose">Replication</h3>
28	</div>
29	<p className="prose text-sm max-w-full">
30	Deploy read replicas across multiple regions, or replicate database changes to
31	external data warehouses and analytics platforms
32	</p>
33	</div>
34	</ScaffoldSection>
35	</ScaffoldContainer>
36
37	<ReplicationDiagram />
38
39	<ScaffoldContainer>
40	<ScaffoldSection isFullWidth className="pt-6!">
41	<Destinations />
42	</ScaffoldSection>
43	</ScaffoldContainer>
44	</PipelineRequestStatusProvider>
45	)
46	}
47
48	DatabaseReplicationPage.getLayout = (page) => (
49	<DefaultLayout>
50	<DatabaseLayout title="Replication">{page}</DatabaseLayout>
51	</DefaultLayout>
52	)
53
54	export default DatabaseReplicationPage