Repository: supabase/supabase
File: apps/studio/components/interfaces/Database/Replication/ReplicationDisclaimerDialog.tsx (TypeScript)

Code before:

export const ReplicationDisclaimerDialog = ({
  open,
  isLoading,
  onOpenChange,
  onConfirm,
}: ReplicationDisclaimerDialogProps) => {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle>Before creating this pipeline</DialogTitle>
        </DialogHeader>
        <DialogSectionSeparator />
        <DialogSection className="space-y-4 text-sm">
          <p className="text-foreground">
            Creating this replication pipeline will immediately start syncing data from your
            publication into the destination. Make sure you understand requirements and limitations
            of the system before proceeding.
          </p>

          <Admonition type="warning" className="space-y-1 px-4 py-3">
            <p className="font-medium text-foreground">Primary keys are required for all tables</p>
            <p className="text-foreground-light">
              Every table included in the publication must expose a primary key for replication to
              work correctly.
            </p>
          </Admonition>

          <Accordion_Shadcn_ type="single" collapsible>
            <AccordionItem_Shadcn_ value="limitations" className="border-none">
              <AccordionTrigger_Shadcn_ className="justify-between gap-2 text-sm font-medium py-2">
                View limitations
              </AccordionTrigger_Shadcn_>
              <AccordionContent_Shadcn_ className="pt-2">
                <div className="text-foreground-light">
                  <ul className="list-disc flex flex-col gap-y-1.5 pl-5 text-sm leading-snug">
                    <li>
                      <strong className="text-foreground">
                        Custom data types replicate as strings.
                      </strong>{' '}
                      Check that the destination can interpret those string values correctly.
                    </li>
                    <li>
                      <strong className="text-foreground">Generated columns are skipped.</strong>{' '}
                      Replace them with triggers or materialized views if you need the derived
                      values downstream.
                    </li>
                    <li>
                      <strong className="text-foreground">
                        FULL replica identity is strongly recommended.

Review comment (suggestion):
might be better to be clearer here RE how the behaviour will be if this condition isn't met

also wondering if its possible to catch this requirement on the client side and we block starting a replication to mitigate guess work if there's issues. ideal scenario i suppose is that we're able to highlight upfront which tables in the selected publication are missing primary keys

Code after:
  onConfirm,
}: ReplicationDisclaimerDialogProps) => {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle>Replication limitations</DialogTitle>
        </DialogHeader>
        <DialogSectionSeparator />
        <DialogSection className="space-y-4 text-sm">
          <p className="text-foreground">
            Creating this replication pipeline will immediately start syncing data from your
            publication into the destination. Make sure you understand the limitations of the system
            before proceeding.
          </p>

          <div className="text-foreground-light">
            <ul className="list-disc flex flex-col gap-y-1.5 pl-5 text-sm leading-snug">
              <li>
                <strong className="text-foreground">Custom data types replicate as strings.</strong>{' '}
                Check that the destination can interpret those string values correctly.
              </li>
              <li>
                <strong className="text-foreground">Generated columns are skipped.</strong> Replace
                them with triggers or materialized views if you need the derived values downstream.
              </li>
              <li>
                <strong className="text-foreground">
                  FULL replica identity is strongly recommended.
                </strong>{' '}
                With FULL replica identity deletes and updates include the payload that is needed to
                correctly apply those changes.
              </li>
              <li>
                <strong className="text-foreground">Schema changes aren’t supported yet.</strong>{' '}
                Plan for manual adjustments if you need to alter replicated tables.
              </li>
            </ul>
          </div>
        </DialogSection>

        <DialogSectionSeparator />

        <DialogFooter>
          <Button type="default" disabled={isLoading} onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
          <Button loading={isLoading} onClick={onConfirm}>
            Understood, start replication
          </Button>
        </DialogFooter>