Prevent selecting replica is status is not active healthy (#23395)

apps/studio/components/ui/DatabaseSelector.tsx

@@ -17,12 +17,18 @@ import {
   PopoverTrigger_Shadcn_,
   Popover_Shadcn_,
   ScrollArea,
+  TooltipContent_Shadcn_,
+  TooltipTrigger_Shadcn_,
+  Tooltip_Shadcn_,
   cn,
 } from 'ui'
 
 import { useReadReplicasQuery } from 'data/read-replicas/replicas-query'
 import { formatDatabaseID, formatDatabaseRegion } from 'data/read-replicas/replicas.utils'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
+import { Check } from 'lucide-react'
+import { REPLICA_STATUS } from 'components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.constants'
+import { Markdown } from 'components/interfaces/Markdown'
 
 interface DatabaseSelectorProps {
   variant?: 'regular' | 'connected-on-right' | 'connected-on-left' | 'connected-on-both'
@@ -124,6 +130,33 @@ const DatabaseSelector = ({
                   const region = formatDatabaseRegion(database.region)
                   const id = formatDatabaseID(database.identifier)
 
+                  if (database.status !== 'ACTIVE_HEALTHY') {
+                    const status = [
+                      REPLICA_STATUS.INIT_READ_REPLICA,
+                      REPLICA_STATUS.COMING_UP,
+                    ].includes(database.status)
+                      ? 'coming up'
+                      : 'not healthy'
+
+                    return (
+                      <Tooltip_Shadcn_ key={database.identifier}>
+                        <TooltipTrigger_Shadcn_ asChild>
+                          <div className="px-2 py-1.5 w-full flex items-center justify-between">
+                            <p className="text-xs text-foreground-lighter">
+                              Read replica ({region} - {id})
+                            </p>
+                          </div>
+                        </TooltipTrigger_Shadcn_>
+                        <TooltipContent_Shadcn_ side="right" className="w-80">
+                          <Markdown
+                            className="text-xs text-foreground"
+                            content={`Replica unable to accept requests as its ${status}. [View infrastructure settings](/project/${projectRef}/settings/infrastructure) for more information.`}
+                          />
+                        </TooltipContent_Shadcn_>
+                      </Tooltip_Shadcn_>
+                    )
+                  }
+
                   return (
                     <CommandItem_Shadcn_
                       key={database.identifier}
@@ -146,7 +179,7 @@ const DatabaseSelector = ({
                             ? 'Primary database'
                             : `Read replica (${region} - ${id})`}
                         </p>
-                        {database.identifier === selectedDatabaseId && <IconCheck />}
+                        {database.identifier === selectedDatabaseId && <Check size={16} />}
                       </div>
                     </CommandItem_Shadcn_>
                   )