Fix: redirect for load balancer source (supabase#40757)

fix redirect for load balancer source

Author: awaseem

apps/studio/components/interfaces/Settings/API/ServiceList.tsx

@@ -1,4 +1,6 @@
 import { AlertCircle } from 'lucide-react'
+import { parseAsString, useQueryState } from 'nuqs'
+import { useEffect } from 'react'
 
 import { useParams } from 'common'
 import { ScaffoldSection } from 'components/layouts/Scaffold'
@@ -20,6 +22,8 @@ export const ServiceList = () => {
   const { ref: projectRef } = useParams()
   const state = useDatabaseSelectorStateSnapshot()
 
+  const [querySource, setQuerySource] = useQueryState('source', parseAsString)
+
   const { data: customDomainData } = useCustomDomainsQuery({ projectRef })
   const {
     data: databases,
@@ -28,6 +32,12 @@ export const ServiceList = () => {
   } = useReadReplicasQuery({ projectRef })
   const { data: loadBalancers } = useLoadBalancersQuery({ projectRef })
 
+  useEffect(() => {
+    if (querySource && querySource !== state.selectedDatabaseId) {
+      state.setSelectedDatabaseId(querySource)
+    }
+  }, [querySource, state, projectRef])
+
   // Get the API service
   const isCustomDomainActive = customDomainData?.customDomain?.status === 'active'
   const selectedDatabase = databases?.find((db) => db.identifier === state.selectedDatabaseId)
@@ -61,6 +71,9 @@ export const ServiceList = () => {
                     ? [{ id: 'load-balancer', name: 'API Load Balancer' }]
                     : []
                 }
+                onSelectId={() => {
+                  setQuerySource(null)
+                }}
               />
             </CardHeader>
             <CardContent>

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

@@ -96,7 +96,7 @@ export const LoadBalancerNode = ({ data }: NodeProps<LoadBalancerData>) => {
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-40" side="bottom" align="end">
               <DropdownMenuItem asChild className="gap-x-2">
-                <Link href={`/project/${ref}/settings/api?source=loadbalancer`}>View API URL</Link>
+                <Link href={`/project/${ref}/settings/api?source=load-balancer`}>View API URL</Link>
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>