ReplicationStaticMockup() — supabase Function Reference

Architecture documentation for the ReplicationStaticMockup() function in ComingSoon.tsx from the supabase codebase.

Function tsx ContentManagement Migrations calls 1

Entity Profile

ContentManagement→ Migrations→ ReplicationStaticMockup() — supabase Function Reference

Dependency Diagram

graph TD
  c85ff955_5294_6f67_8929_d387857005c3["ReplicationStaticMockup()"]
  c1af387e_e4fa_16ed_79d8_44fe43460d28["CTANode()"]
  c85ff955_5294_6f67_8929_d387857005c3 -->|calls| c1af387e_e4fa_16ed_79d8_44fe43460d28
  style c85ff955_5294_6f67_8929_d387857005c3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Database/Replication/ComingSoon.tsx lines 75–119

const ReplicationStaticMockup = () => {
  const { ref: projectRef = '_' } = useParams()
  const nodes = useMemo(() => STATIC_NODES, [])
  const edges = useMemo(() => STATIC_EDGES, [])

  const { resolvedTheme } = useTheme()

  const backgroundPatternColor =
    resolvedTheme === 'dark' && projectRef !== '_'
      ? 'rgba(255, 255, 255, 0.3)'
      : 'rgba(0, 0, 0, 0.4)'

  const nodeTypes = useMemo(
    () => ({
      primary: PrimaryNode,
      replica: ReplicaNode,
      blank: BlankNode,
      cta: () => CTANode({ projectRef }),
    }),
    [projectRef]
  )

  return (
    <div className="relative border-t h-full w-full">
      <ReactFlow
        fitView
        fitViewOptions={{ minZoom: 0.9, maxZoom: 0.9 }}
        className="instance-configuration"
        zoomOnPinch={false}
        zoomOnScroll={false}
        nodesDraggable={true}
        nodesConnectable={false}
        zoomOnDoubleClick={false}
        edgesFocusable={false}
        edgesUpdatable={false}
        nodes={nodes}
        edges={edges}
        nodeTypes={nodeTypes}
        proOptions={{ hideAttribution: true }}
      >
        <Background color={backgroundPatternColor} />
      </ReactFlow>
    </div>
  )
}