Fix view connection string (#32683)

apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceNode.tsx

@@ -2,6 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import dayjs from 'dayjs'
 import { Database, DatabaseBackup, HelpCircle, Loader2, MoreVertical } from 'lucide-react'
 import Link from 'next/link'
+import { parseAsBoolean, useQueryState } from 'nuqs'
 import { Handle, NodeProps, Position } from 'reactflow'
 
 import { useParams } from 'common'
@@ -14,6 +15,7 @@ import {
 import { formatDatabaseID } from 'data/read-replicas/replicas.utils'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { BASE_PATH } from 'lib/constants'
+import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
 import {
   Badge,
   Button,
@@ -178,8 +180,9 @@ export const ReplicaNode = ({ data }: NodeProps<ReplicaNodeData>) => {
     onSelectDropReplica,
   } = data
   const { ref } = useParams()
-  const created = dayjs(inserted_at).format('DD MMM YYYY')
+  const dbSelectorState = useDatabaseSelectorStateSnapshot()
   const canManageReplicas = useCheckPermissions(PermissionAction.CREATE, 'projects')
+  const [, setShowConnect] = useQueryState('showConnect', parseAsBoolean.withDefault(false))
 
   const { data: databaseStatuses } = useReadReplicasStatusesQuery({ projectRef: ref })
   const { replicaInitializationStatus } =
@@ -197,6 +200,7 @@ export const ReplicaNode = ({ data }: NodeProps<ReplicaNodeData>) => {
     error?: string
   }) ?? { status: undefined, progress: undefined, estimations: undefined, error: undefined }
 
+  const created = dayjs(inserted_at).format('DD MMM YYYY')
   const stage = progress !== undefined ? Number(progress.split('_')[0]) : 0
   const stagePercent = stage / (Object.keys(INIT_PROGRESS).length - 1)
 
@@ -340,10 +344,12 @@ export const ReplicaNode = ({ data }: NodeProps<ReplicaNodeData>) => {
             <DropdownMenuItem
               disabled={status !== REPLICA_STATUS.ACTIVE_HEALTHY}
               className="gap-x-2"
+              onClick={() => {
+                setShowConnect(true)
+                dbSelectorState.setSelectedDatabaseId(id)
+              }}
             >
-              <Link href={`/project/${ref}/settings/database?connectionString=${id}`}>
-                View connection string
-              </Link>
+              View connection string
             </DropdownMenuItem>
             <DropdownMenuItem
               className="gap-x-2"

apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/MapView.tsx

@@ -3,6 +3,7 @@ import dayjs from 'dayjs'
 import { partition, uniqBy } from 'lodash'
 import { MoreVertical } from 'lucide-react'
 import Link from 'next/link'
+import { parseAsBoolean, useQueryState } from 'nuqs'
 import { useEffect, useState } from 'react'
 import {
   ComposableMap,
@@ -20,6 +21,7 @@ import { formatDatabaseID } from 'data/read-replicas/replicas.utils'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { BASE_PATH } from 'lib/constants'
 import type { AWS_REGIONS_KEYS } from 'shared-data'
+import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
 import {
   Badge,
   Button,
@@ -50,6 +52,8 @@ const MapView = ({
   onSelectDropReplica,
 }: MapViewProps) => {
   const { ref } = useParams()
+  const dbSelectorState = useDatabaseSelectorStateSnapshot()
+
   const [mount, setMount] = useState(false)
   const [zoom, setZoom] = useState<number>(1.5)
   const [center, setCenter] = useState<[number, number]>([14, 7])
@@ -59,6 +63,7 @@ const MapView = ({
     region: { key: string; country?: string; name?: string }
   }>()
   const canManageReplicas = useCheckPermissions(PermissionAction.CREATE, 'projects')
+  const [, setShowConnect] = useQueryState('showConnect', parseAsBoolean.withDefault(false))
 
   const { data } = useReadReplicasQuery({ projectRef: ref })
   const databases = data ?? []
@@ -293,12 +298,12 @@ const MapView = ({
                             <DropdownMenuItem
                               className="gap-x-2"
                               disabled={database.status !== REPLICA_STATUS.ACTIVE_HEALTHY}
+                              onClick={() => {
+                                setShowConnect(true)
+                                dbSelectorState.setSelectedDatabaseId(database.identifier)
+                              }}
                             >
-                              <Link
-                                href={`/project/${ref}/settings/database?connectionString=${database.identifier}`}
-                              >
-                                View connection string
-                              </Link>
+                              View connection string
                             </DropdownMenuItem>
                             <DropdownMenuItem
                               className="gap-x-2"