Fix editing destination selected type (#41555)

apps/docs/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

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

@@ -17,6 +17,7 @@ import { ReadReplicaForm } from './ReadReplicaForm'
 
 interface DestinationPanelProps {
   visible: boolean
+  type?: DestinationType
   existingDestination?: {
     sourceId?: number
     destinationId: number
@@ -29,13 +30,14 @@ interface DestinationPanelProps {
 
 export const DestinationPanel = ({
   visible,
+  type,
   existingDestination,
   onClose,
 }: DestinationPanelProps) => {
   const unifiedReplication = useFlag('unifiedReplication')
 
   const [selectedType, setSelectedType] = useState<DestinationType>(
-    unifiedReplication ? 'Read Replica' : 'BigQuery'
+    type || (unifiedReplication ? 'Read Replica' : 'BigQuery')
   )
 
   const editMode = !!existingDestination

apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.tsx

@@ -1,7 +1,6 @@
 import { useFlag } from 'common'
 import { AnalyticsBucket, BigQuery, Database } from 'icons'
 import { cn, RadioGroupStacked, RadioGroupStackedItem } from 'ui'
-import { Admonition } from 'ui-patterns'
 import { DestinationType } from './DestinationPanel.types'
 
 type DestinationTypeSelectionProps = {
@@ -25,14 +24,11 @@ export const DestinationTypeSelection = ({
 
   return (
     <div className="px-5 py-5">
-      <div className="flex flex-col gap-y-2 mb-4">
+      <div className="flex flex-col gap-y-1 mb-4">
         <p className="text-sm font-medium text-foreground">Type</p>
-        {editMode && (
-          <Admonition
-            type="default"
-            title="The destination type cannot be changed after creation"
-          />
-        )}
+        <p className="text-foreground-light text-sm">
+          The destination type cannot be changed after creation
+        </p>
       </div>
       <RadioGroupStacked
         disabled={editMode}

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

@@ -32,7 +32,7 @@ interface DestinationRowProps {
   sourceId?: number
   destinationId: number
   destinationName: string
-  type: DestinationType | 'Other'
+  type?: DestinationType
   pipeline?: Pipeline
   error: ResponseError | null
   isLoading: boolean
@@ -222,6 +222,7 @@ export const DestinationRow = ({
 
       <DestinationPanel
         visible={showEditDestinationPanel}
+        type={type}
         onClose={() => setShowEditDestinationPanel(false)}
         existingDestination={{
           sourceId,

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

@@ -171,7 +171,7 @@ export const Destinations = () => {
                   ? 'BigQuery'
                   : 'iceberg' in destination.config
                     ? 'Analytics Bucket'
-                    : 'Other'
+                    : undefined
 
               return (
                 <DestinationRow