PublicationSelection.tsx67 lines · main

1	import { useParams } from 'common'
2	import { useMemo } from 'react'
3	import type { UseFormReturn } from 'react-hook-form'
4	import { FormControl, FormField } from 'ui'
5	import { Admonition } from 'ui-patterns'
6	import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
7
8	import type { DestinationPanelSchemaType } from './DestinationForm.schema'
9	import { PublicationsComboBox } from './PublicationsComboBox'
10	import { useReplicationPublicationsQuery } from '@/data/replication/publications-query'
11
12	type PublicationSelectionProps = {
13	form: UseFormReturn<DestinationPanelSchemaType>
14	sourceId?: number
15	visible: boolean
16	onSelectNewPublication: () => void
17	}
18
19	export const PublicationSelection = ({
20	form,
21	sourceId,
22	onSelectNewPublication,
23	}: PublicationSelectionProps) => {
24	const { ref: projectRef } = useParams()
25	const { publicationName } = form.watch()
26
27	const {
28	data: publications = [],
29	isPending: isLoadingPublications,
30	isSuccess: isSuccessPublications,
31	} = useReplicationPublicationsQuery({ projectRef, sourceId })
32
33	const publicationNames = useMemo(() => publications?.map((pub) => pub.name) ?? [], [publications])
34	const isSelectedPublicationMissing =
35	isSuccessPublications && !!publicationName && !publicationNames.includes(publicationName)
36
37	return (
38	<FormField
39	control={form.control}
40	name="publicationName"
41	render={({ field }) => (
42	<FormItemLayout
43	layout="horizontal"
44	label="Publication"
45	description="Tables in the selected publication will be replicated to this destination"
46	>
47	<FormControl>
48	<PublicationsComboBox
49	publications={publications}
50	isLoadingPublications={isLoadingPublications}
51	field={field}
52	onNewPublicationClick={() => onSelectNewPublication()}
53	/>
54	</FormControl>
55	{isSelectedPublicationMissing && (
56	<Admonition type="warning" className="mt-2">
57	<p className="leading-normal!">
58	The publication <strong className="text-foreground">{publicationName}</strong> was
59	not found, it may have been renamed or deleted, please select another one.
60	</p>
61	</Admonition>
62	)}
63	</FormItemLayout>
64	)}
65	/>
66	)
67	}