Temporarily disable replication on HA (#47324)

Temporarily disables replication on HA projects until they are
supported.

Requires https://github.com/supabase/supabase/pull/47322 to be merged
first.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added reusable High Availability UI components for an empty-state
message and an availability notice.
* Introduced shared High Availability helpers to determine availability
status and adjust schema lists accordingly.
* Updated the replication page to use the new High Availability flow
with a dedicated empty state when enabled.
* **Bug Fixes**
* Improved High Availability detection consistency, including safer
fallback behavior when project data is missing or null.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>

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

@@ -1,13 +1,13 @@
-import { Admonition } from 'ui-patterns/admonition'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 
 import { Destinations } from '@/components/interfaces/Database/Replication/Destinations'
 import { ReplicationDiagram } from '@/components/interfaces/Database/Replication/ReplicationDiagram'
-import { EmptyReplicationDiagram } from '@/components/interfaces/Database/Replication/ReplicationDiagram/EmptyReplicationDiagram'
 import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
 import { DefaultLayout } from '@/components/layouts/DefaultLayout'
 import { ScaffoldContainer, ScaffoldSection } from '@/components/layouts/Scaffold'
+import { HighAvailabilityDisabledEmptyState } from '@/components/ui/HighAvailability/HighAvailabilityDisabledEmptyState'
 import { UnknownInterface } from '@/components/ui/UnknownInterface'
+import { useHighAvailability } from '@/hooks/misc/useHighAvailability'
 import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
 import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
 import { PipelineRequestStatusProvider } from '@/state/replication-pipeline-request-status'
@@ -15,12 +15,24 @@ import type { NextPageWithLayout } from '@/types'
 
 const DatabaseReplicationPage: NextPageWithLayout = () => {
   const { data: selectedProject, isPending } = useSelectedProjectQuery()
+  const { isHighAvailability } = useHighAvailability()
   const showPgReplicate = useIsFeatureEnabled('database:replication')
 
   if (!showPgReplicate) {
     return <UnknownInterface urlBack={`/project/${selectedProject?.ref}/database/schemas`} />
   }
 
+  if (isHighAvailability) {
+    return (
+      <div className="flex h-full w-full items-center justify-center p-6">
+        <HighAvailabilityDisabledEmptyState
+          title="Replication unavailable on High Availability projects"
+          description="We're working to bring replication to High Availability projects. Contact support if this is blocking your work."
+        />
+      </div>
+    )
+  }
+
   return (
     <PipelineRequestStatusProvider>
       <ScaffoldContainer>
@@ -41,31 +53,6 @@ const DatabaseReplicationPage: NextPageWithLayout = () => {
         <ScaffoldContainer>
           <GenericSkeletonLoader />
         </ScaffoldContainer>
-      ) : selectedProject?.high_availability ? (
-        <>
-          <EmptyReplicationDiagram />
-
-          <ScaffoldContainer>
-            <ScaffoldSection isFullWidth className="pt-6!">
-              <Admonition
-                variant="default"
-                title="Replication is not available for High Availability projects"
-              >
-                Replication is not currently available for projects with High Availability. Please
-                contact{' '}
-                <a
-                  href="https://supabase.com/support"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-primary underline"
-                >
-                  support
-                </a>{' '}
-                if you are interested in using this feature with your High Availability project.
-              </Admonition>
-            </ScaffoldSection>
-          </ScaffoldContainer>
-        </>
       ) : (
         <>
           <ReplicationDiagram />