konnosDashboard
ReplicationDisclaimerDialog.tsx77 lines · main
1import {
2 Button,
3 Dialog,
4 DialogContent,
5 DialogFooter,
6 DialogHeader,
7 DialogSection,
8 DialogSectionSeparator,
9 DialogTitle,
10} from 'ui'
11
12interface ReplicationDisclaimerDialogProps {
13 open: boolean
14 isLoading: boolean
15 onOpenChange: (value: boolean) => void
16 onConfirm: () => void
17}
18
19export const ReplicationDisclaimerDialog = ({
20 open,
21 isLoading,
22 onOpenChange,
23 onConfirm,
24}: ReplicationDisclaimerDialogProps) => {
25 return (
26 <Dialog open={open} onOpenChange={onOpenChange}>
27 <DialogContent className="sm:max-w-lg">
28 <DialogHeader>
29 <DialogTitle>Replication limitations</DialogTitle>
30 </DialogHeader>
31 <DialogSectionSeparator />
32 <DialogSection className="space-y-4 text-sm">
33 <p className="text-foreground">
34 Creating this replication pipeline will immediately start syncing data from your
35 publication into the destination. Make sure you understand the limitations of the system
36 before proceeding.
37 </p>
38
39 <div className="text-foreground-light">
40 <ul className="list-disc flex flex-col gap-y-1.5 pl-5 text-sm leading-snug">
41 <li>
42 <strong className="text-foreground">Custom data types replicate as strings.</strong>{' '}
43 Check that the destination can interpret those string values correctly.
44 </li>
45 <li>
46 <strong className="text-foreground">Generated columns are skipped.</strong> Replace
47 them with triggers or materialized views if you need the derived values downstream.
48 </li>
49 <li>
50 <strong className="text-foreground">
51 FULL replica identity is strongly recommended.
52 </strong>{' '}
53 With FULL replica identity deletes and updates include the payload that is needed to
54 correctly apply those changes.
55 </li>
56 <li>
57 <strong className="text-foreground">Schema changes aren’t supported yet.</strong>{' '}
58 Plan for manual adjustments if you need to alter replicated tables.
59 </li>
60 </ul>
61 </div>
62 </DialogSection>
63
64 <DialogSectionSeparator />
65
66 <DialogFooter>
67 <Button type="default" disabled={isLoading} onClick={() => onOpenChange(false)}>
68 Cancel
69 </Button>
70 <Button loading={isLoading} onClick={onConfirm}>
71 Understood, start replication
72 </Button>
73 </DialogFooter>
74 </DialogContent>
75 </Dialog>
76 )
77}