import { useParams } from 'common' import { useMemo } from 'react' import type { UseFormReturn } from 'react-hook-form' import { FormControl, FormField } from 'ui' import { Admonition } from 'ui-patterns' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' import type { DestinationPanelSchemaType } from './DestinationForm.schema' import { PublicationsComboBox } from './PublicationsComboBox' import { useReplicationPublicationsQuery } from '@/data/replication/publications-query' type PublicationSelectionProps = { form: UseFormReturn sourceId?: number visible: boolean onSelectNewPublication: () => void } export const PublicationSelection = ({ form, sourceId, onSelectNewPublication, }: PublicationSelectionProps) => { const { ref: projectRef } = useParams() const { publicationName } = form.watch() const { data: publications = [], isPending: isLoadingPublications, isSuccess: isSuccessPublications, } = useReplicationPublicationsQuery({ projectRef, sourceId }) const publicationNames = useMemo(() => publications?.map((pub) => pub.name) ?? [], [publications]) const isSelectedPublicationMissing = isSuccessPublications && !!publicationName && !publicationNames.includes(publicationName) return ( ( onSelectNewPublication()} /> {isSelectedPublicationMissing && (

The publication {publicationName} was not found, it may have been renamed or deleted, please select another one.

)}
)} /> ) }