ref(etl): Improve copy and UI (#40515)

apps/docs/content/guides/database/replication.mdx

@@ -9,7 +9,7 @@ Replication is the process of copying changes from your database to another loca
 
 You might use replication for:
 
-- **Analytics and Data Warehousing**: Replicate your operational database to analytics platforms like BigQuery for complex analysis without impacting your application's performance.
+- **Analytics and Data Warehousing**: Replicate your operational database to analytics platforms for complex analysis without impacting your application's performance.
 - **Data Integration**: Keep your data synchronized across different systems and services in your tech stack.
 - **Backup and Disaster Recovery**: Maintain up-to-date copies of your data in different locations.
 - **Read Scaling**: Distribute read operations across multiple database instances to improve performance.

apps/studio/components/interfaces/Database/ETL/ComingSoon.tsx

@@ -199,12 +199,13 @@ const CTANode = ({ projectRef }: { projectRef: string }) => {
     <Card className="w-[500px] p-6">
       <CardContent>
         <div className="flex items-center gap-x-2 justify-between mb-2">
-          <h2 className="text-lg">Replicate your data in real time</h2>
+          <h2 className="text-lg">Replicate data to destinations in real-time</h2>
           <Badge variant="warning">Early Access</Badge>
         </div>
         <p className="text-foreground-light">
-          Stream database changes to multiple destinations - no manual exports, no lag. Limited
-          rollout for external destinations has begun, read replicas available now.
+          Replicate database changes to multiple destinations with ETL replication - no manual
+          exports, no lag. Limited rollout for external destinations has begun, read replicas
+          available now.
         </p>
         <div className="flex items-center gap-x-2 mt-6">
           <Button asChild type="secondary" iconRight={<ArrowUpRight size={16} strokeWidth={1.5} />}>

apps/studio/components/interfaces/Database/ETL/DestinationPanel/NoDestinationsAvailable.tsx

@@ -8,8 +8,8 @@ export const NoDestinationsAvailable = () => {
       </div>
       <h3 className="text-lg font-medium text-foreground mb-2">No destinations available</h3>
       <p className="text-sm text-foreground-light max-w-lg">
-        Replication destinations are not currently enabled for this project. Contact support to
-        enable real-time data replication to external platforms.
+        ETL replication destinations are not currently enabled for this project. Contact support to
+        enable real-time replication to external platforms.
       </p>
     </div>
   )

apps/studio/components/interfaces/Database/ETL/DestinationRow.tsx

@@ -185,7 +185,8 @@ export const DestinationRow = ({
                           <AlertCircle size={14} />
                         </TooltipTrigger>
                         <TooltipContent side="bottom">
-                          {errorCount} table{errorCount === 1 ? '' : 's'} have replication errors
+                          {errorCount} table{errorCount === 1 ? '' : 's'} encountered replication
+                          errors
                         </TooltipContent>
                       </Tooltip>
                     )}

apps/studio/components/interfaces/Database/ETL/Destinations.tsx

@@ -134,11 +134,10 @@ export const Destinations = () => {
         ) : replicationNotEnabled ? (
           <div className="border rounded-md p-4 md:p-12 flex flex-col gap-y-4">
             <div className="flex flex-col gap-y-1">
-              <h3>Stream data to external destinations in real-time</h3>
+              <h3>Replicate data to external destinations in real-time</h3>
               <p className="text-sm text-foreground-light">
-                {isPaidPlan
-                  ? 'Enable replication to start sending your database changes to data warehouses and analytics platforms'
-                  : 'Upgrade to the Pro plan to send your database changes to data warehouses and analytics platforms via replication'}
+                {isPaidPlan ? 'Enable ETL replication' : 'Upgrade to the Pro plan'} to start
+                replicating your database changes to data warehouses and analytics platforms
               </p>
             </div>
             <div className="flex gap-x-2">
@@ -201,10 +200,10 @@ export const Destinations = () => {
               )}
             >
               <h4>Create your first destination</h4>
-              <p className="prose text-sm text-center mt-1 max-w-full">
+              <p className="prose text-sm text-center mt-1 max-w-[70ch]">
                 Destinations are external platforms where your database changes are automatically
-                sent. Connect to data warehouses like BigQuery or analytics buckets to enable
-                real-time data pipelines.
+                sent. Connect to various data warehouses and analytics platforms to enable real-time
+                data pipelines.
               </p>
               <Button
                 icon={<Plus />}

apps/studio/components/interfaces/Database/ETL/EnableReplicationModal.tsx

@@ -23,11 +23,11 @@ export const EnableReplicationModal = () => {
   const { mutate: createTenantSource, isLoading: creatingTenantSource } =
     useCreateTenantSourceMutation({
       onSuccess: () => {
-        toast.success('Replication has been successfully enabled!')
+        toast.success('ETL replication has been successfully enabled!')
         setOpen(false)
       },
       onError: (error) => {
-        toast.error(`Failed to enable replication: ${error.message}`)
+        toast.error(`Failed to enable ETL replication: ${error.message}`)
       },
     })
 
@@ -40,26 +40,26 @@ export const EnableReplicationModal = () => {
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
         <Button type="primary" className="w-min">
-          Enable replication
+          Enable ETL replication
         </Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Confirm to enable Replication</DialogTitle>
+          <DialogTitle>Enable ETL Replication</DialogTitle>
         </DialogHeader>
         <DialogSectionSeparator />
         <DialogSection className="flex flex-col gap-y-2 !p-0">
           <Admonition
             type="warning"
             className="rounded-none border-0 mb-0"
-            title="Replication is currently in Alpha"
+            title="ETL Replication is currently in Alpha"
           >
             <p className="text-sm !leading-normal">
               This feature is in active development and may change as we gather feedback.
               Availability and behavior can evolve while in Alpha.
             </p>
             <p className="text-sm !leading-normal">
-              Pricing has not been finalized yet. You can enable replication now; we’ll announce
+              Pricing has not been finalized yet. You can enable ETL replication now; we'll announce
               pricing later and notify you before any charges apply.
             </p>
           </Admonition>
@@ -69,7 +69,7 @@ export const EnableReplicationModal = () => {
             Cancel
           </Button>
           <Button type="primary" loading={creatingTenantSource} onClick={onEnableReplication}>
-            Enable replication
+            Enable ETL replication
           </Button>
         </DialogFooter>
       </DialogContent>

apps/studio/components/interfaces/Database/ETL/NewPublicationPanel.tsx

@@ -87,7 +87,7 @@ export const NewPublicationPanel = ({ visible, sourceId, onClose }: NewPublicati
                 <div>
                   <SheetTitle>New Publication</SheetTitle>
                   <SheetDescription>
-                    Create a new publication to share table changes for replication
+                    Create a new publication to replicate table changes to destinations
                   </SheetDescription>
                 </div>
                 <SheetClose
@@ -126,7 +126,7 @@ export const NewPublicationPanel = ({ visible, sourceId, onClose }: NewPublicati
                     render={({ field }) => (
                       <FormItemLayout
                         label="Tables"
-                        description="Which tables to make available for replication"
+                        description="Which tables to replicate to destinations"
                       >
                         <FormControl_Shadcn_>
                           <MultiSelector

apps/studio/components/interfaces/Database/ETL/Pipeline.utils.ts

@@ -33,12 +33,12 @@ export const PIPELINE_ACTIONABLE_STATES = ['failed', 'started', 'stopped'] as Pi
 const PIPELINE_STATE_MESSAGES = {
   enabling: {
     title: 'Starting pipeline',
-    message: 'Starting the pipeline. Table replication will resume once running.',
+    message: 'Starting the pipeline. Replication will resume once running.',
     badge: 'Starting',
   },
   disabling: {
     title: 'Stopping pipeline',
-    message: 'Stopping the pipeline. Table replication will be paused once stopped.',
+    message: 'Stopping the pipeline. Replication will be paused once stopped.',
     badge: 'Stopping',
   },
   restarting: {
@@ -63,17 +63,17 @@ const PIPELINE_STATE_MESSAGES = {
   },
   stopping: {
     title: 'Pipeline stopping',
-    message: 'Stopping replication. Table replication will be paused once stopped',
+    message: 'Stopping replication. Data transfer will be paused once stopped',
     badge: 'Stopping',
   },
   running: {
     title: 'Pipeline running',
-    message: 'Replication is active and processing data',
+    message: 'Replication is active and processing changes',
     badge: 'Running',
   },
   unknown: {
     title: 'Pipeline status unknown',
-    message: 'Unable to determine replication status.',
+    message: 'Unable to determine pipeline status.',
     badge: 'Unknown',
   },
   notRunning: {

apps/studio/components/interfaces/Database/ETL/PipelineStatus.tsx

@@ -1,6 +1,7 @@
 import { AlertTriangle, Loader2 } from 'lucide-react'
 
 import { useParams } from 'common'
+import { DotPing } from 'components/ui/DotPing'
 import { InlineLink } from 'components/ui/InlineLink'
 import { ReplicationPipelineStatusData } from 'data/etl/pipeline-status-query'
 import { PipelineStatusRequestStatus } from 'state/replication-pipeline-request-status'
@@ -86,7 +87,7 @@ export const PipelineStatus = ({
         case PipelineStatusName.STARTED:
           return {
             label: 'Running',
-            dot: <div className="w-2 h-2 bg-brand-600 rounded-full" />,
+            dot: <DotPing animate={true} variant="primary" />,
             color: 'text-brand-600',
             tooltip: stateMessages.message,
           }

apps/studio/components/interfaces/Database/ETL/RetryOptionsDropdown.tsx

@@ -24,7 +24,7 @@ const RETRY_OPTIONS = [
     type: 'full' as RollbackType,
     icon: <RotateCcw className="w-3 h-3 mt-0.5" />,
     title: 'Reset from scratch',
-    description: 'Completely restart the table replication',
+    description: 'Completely restart replicating this table',
   },
 ] as const