diff --git a/apps/studio/components/ui/DatabaseSelector.tsx b/apps/studio/components/ui/DatabaseSelector.tsx index ab43c7fa5ba..b4bc3067c78 100644 --- a/apps/studio/components/ui/DatabaseSelector.tsx +++ b/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 ( + + + + + Read replica ({region} - {id}) + + + + + + + + ) + } + return ( - {database.identifier === selectedDatabaseId && } + {database.identifier === selectedDatabaseId && } )
+ Read replica ({region} - {id}) +