Update copywriting for database replication if flag is on

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

@@ -3,10 +3,13 @@ import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import { useMemo } from 'react'
 import ReactFlow, { Background, Handle, Position, ReactFlowProvider } from 'reactflow'
+
 import 'reactflow/dist/style.css'
 
+import { useParams } from 'common'
 import { BASE_PATH } from 'lib/constants'
 import { Button, Card, CardContent } from 'ui'
+
 import { NODE_WIDTH } from '../../Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.constants'
 
 const STATIC_NODES = [
@@ -61,22 +64,25 @@ const STATIC_EDGES = [
   { id: 'e1-4', source: '1', target: '4', type: 'smoothstep', animated: true },
 ]
 
-export const ReplicationComingSoon = ({ projectRef }: { projectRef: string }) => {
+export const ReplicationComingSoon = () => {
   return (
     <ReactFlowProvider>
-      <ReplicationStaticMockup projectRef={projectRef} />
+      <ReplicationStaticMockup />
     </ReactFlowProvider>
   )
 }
 
-const ReplicationStaticMockup = ({ projectRef }: { projectRef: string }) => {
+const ReplicationStaticMockup = () => {
+  const { ref: projectRef = '_' } = useParams()
   const nodes = useMemo(() => STATIC_NODES, [])
   const edges = useMemo(() => STATIC_EDGES, [])
 
   const { resolvedTheme } = useTheme()
 
   const backgroundPatternColor =
-    resolvedTheme === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.4)'
+    resolvedTheme === 'dark' && projectRef !== '_'
+      ? 'rgba(255, 255, 255, 0.3)'
+      : 'rgba(0, 0, 0, 0.4)'
 
   const nodeTypes = useMemo(
     () => ({

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

@@ -1,8 +1,4 @@
 import { useQueryClient } from '@tanstack/react-query'
-import { Plus, Search, X } from 'lucide-react'
-import { useEffect, useRef, useState } from 'react'
-
-import { useReadReplicasQuery } from '@/data/read-replicas/replicas-query'
 import { useFlag, useParams } from 'common'
 import { AlertError } from 'components/ui/AlertError'
 import { DocsButton } from 'components/ui/DocsButton'
@@ -13,26 +9,30 @@ import { useReplicationPipelinesQuery } from 'data/replication/pipelines-query'
 import { useReplicationSourcesQuery } from 'data/replication/sources-query'
 import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements'
 import { DOCS_URL } from 'lib/constants'
+import { Plus, Search, X } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
 import {
   Button,
   Card,
   CardContent,
-  cn,
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeader,
   TableRow,
+  cn,
 } from 'ui'
 import { GenericSkeletonLoader } from 'ui-patterns'
 import { Input } from 'ui-patterns/DataInputs/Input'
+
 import { REPLICA_STATUS } from '../../Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.constants'
 import { DestinationPanel } from './DestinationPanel/DestinationPanel'
 import { DestinationRow } from './DestinationRow'
 import { EnableReplicationCallout } from './EnableReplicationCallout'
 import { PIPELINE_ERROR_MESSAGES } from './Pipeline.utils'
 import { ReadReplicaRow } from './ReadReplicas/ReadReplicaRow'
+import { useReadReplicasQuery } from '@/data/read-replicas/replicas-query'
 
 export const Destinations = () => {
   const queryClient = useQueryClient()
@@ -281,14 +281,18 @@ export const Destinations = () => {
               className={cn(
                 'w-full',
                 'border border-dashed bg-surface-100 border-overlay',
-                'flex flex-col px-10 rounded-lg justify-center items-center py-8 mt-4'
+                'flex flex-col px-16 rounded-lg justify-center items-center py-8 mt-4'
               )}
             >
-              <h4>Create your first destination</h4>
-              <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 various data warehouses and analytics platforms to enable real-time
-                data pipelines.
+              <h4>
+                {unifiedReplication
+                  ? 'Replication keeps your data in sync across systems'
+                  : 'Create your first destination'}
+              </h4>
+              <p className="text-foreground-light text-sm text-balance text-center mt-1">
+                {unifiedReplication
+                  ? 'Deploy read replicas for lower latency and better resource management, or capture database changes to external platforms for real-time data pipelines.'
+                  : 'Destinations are external platforms where your database changes are automatically sent. Connect to various data warehouses and analytics platforms to enable real-time data pipelines.'}
               </p>
               <Button
                 icon={<Plus />}

apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx

@@ -1,9 +1,3 @@
-import dayjs from 'dayjs'
-import { capitalize } from 'lodash'
-import { BarChart2, ExternalLink } from 'lucide-react'
-import Link from 'next/link'
-import { Fragment, useMemo, useState } from 'react'
-
 import { useParams } from 'common'
 import { getAddons } from 'components/interfaces/Billing/Subscription/Subscription.utils'
 import { CPUWarnings } from 'components/interfaces/Billing/Usage/UsageWarningAlerts/CPUWarnings'
@@ -30,15 +24,20 @@ import {
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
 import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
 import { useResourceWarningsQuery } from 'data/usage/resource-warnings-query'
+import dayjs from 'dayjs'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { DOCS_URL, INSTANCE_MICRO_SPECS, INSTANCE_NANO_SPECS, InstanceSpecs } from 'lib/constants'
 import { TIME_PERIODS_BILLING, TIME_PERIODS_REPORTS } from 'lib/constants/metrics'
+import { capitalize } from 'lodash'
+import { BarChart2, ExternalLink } from 'lucide-react'
+import Link from 'next/link'
+import { Fragment, useMemo, useState } from 'react'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
-import { Admonition } from 'ui-patterns/admonition'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
+import { Admonition } from 'ui-patterns/admonition'
+
 import { INFRA_ACTIVITY_METRICS } from './Infrastructure.constants'
-import { useShowNewReplicaPanel } from './InfrastructureConfiguration/use-show-new-replica'
 
 const NON_DEDICATED_IO_RESOURCES = [
   'ci_micro',
@@ -74,8 +73,6 @@ export const InfrastructureActivity = () => {
   const { data: addons } = useProjectAddonsQuery({ projectRef })
   const selectedAddons = addons?.selected_addons ?? []
 
-  const { setShowNewReplicaPanel } = useShowNewReplicaPanel()
-
   const { computeInstance } = getAddons(selectedAddons)
   const hasDedicatedIOResources =
     computeInstance !== undefined &&

apps/studio/pages/project/[ref]/database/replication/index.tsx

@@ -34,8 +34,9 @@ const DatabaseReplicationPage: NextPageWithLayout = () => {
                   <h3 className="text-foreground text-xl prose">Replication</h3>
                 </div>
                 <p className="prose text-sm max-w-full">
-                  Automatically replicate your database changes to external data warehouses and
-                  analytics platforms in real-time
+                  {unifiedReplication
+                    ? 'Deploy read replicas across multiple regions, or replicate database changes to external data warehouses and analytics platforms'
+                    : 'Automatically replicate your database changes to external data warehouses and analytics platforms in real-time'}
                 </p>
               </div>
             </ScaffoldSection>
@@ -60,7 +61,7 @@ const DatabaseReplicationPage: NextPageWithLayout = () => {
               />
             </ScaffoldSection>
           </ScaffoldContainer>
-          <ReplicationComingSoon projectRef={ref || '_'} />
+          <ReplicationComingSoon />
         </>
       )}
     </>