mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 04:15:04 +03:00
Joshen LimandJonathan Summers-Muir
3620ca8ebe
* Init demo world map for read replicas * Update package.json * Scaffold and mock data for flow view of project settings infrastructure configuration * Shift map stuff and install deck.gl to experiment * Flesh out map view a bit more * Scaffold deploy new replica panel * Add restart replica option * Add animations, shift node generation into utils, attempt to show region nodes * Experiments * General improvement to chart and map UI * Improve some copy writing for restart and drop replica modals * Simplify loading, error, success states in DatabaseSettings * Scaffold DB selection in connection string section * Link replica node to connection string * Scaffold database selection for SQL editor * Make DatabaseSelector into a component * Add database selector to infra activity * Update * Hide read replicas UI behind a feature flag * Update flags * Update package-lock --------- Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
88 lines
3.2 KiB
TypeScript
88 lines
3.2 KiB
TypeScript
import { MOCK_DATABASES } from 'components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.constants'
|
|
import { useState } from 'react'
|
|
import {
|
|
Popover_Shadcn_,
|
|
PopoverTrigger_Shadcn_,
|
|
Button,
|
|
IconChevronDown,
|
|
PopoverContent_Shadcn_,
|
|
Command_Shadcn_,
|
|
CommandList_Shadcn_,
|
|
CommandGroup_Shadcn_,
|
|
ScrollArea,
|
|
CommandItem_Shadcn_,
|
|
IconCheck,
|
|
} from 'ui'
|
|
|
|
interface DatabaseSelectorProps {
|
|
selectedDatabaseId: string
|
|
onChangeDatabaseId: (id: string) => void
|
|
}
|
|
|
|
const DatabaseSelector = ({ selectedDatabaseId, onChangeDatabaseId }: DatabaseSelectorProps) => {
|
|
const [open, setOpen] = useState(false)
|
|
const databases = MOCK_DATABASES.sort((a, b) => (a.id > b.id ? 1 : -1))
|
|
const selectedDatabase = databases.find((db) => db.id.toString() === selectedDatabaseId)
|
|
|
|
return (
|
|
<Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
|
|
<PopoverTrigger_Shadcn_ asChild>
|
|
<div className="flex items-center space-x-2 cursor-pointer">
|
|
<Button
|
|
type="default"
|
|
className="pr-2"
|
|
iconRight={
|
|
<IconChevronDown className="text-foreground-light" strokeWidth={2} size={12} />
|
|
}
|
|
>
|
|
Source:{' '}
|
|
<span className="capitalize">
|
|
{(selectedDatabase?.type ?? '').split('_').join(' ').toLowerCase()}
|
|
{selectedDatabase?.type === 'PRIMARY' && ' database'}
|
|
</span>{' '}
|
|
{selectedDatabase?.type === 'READ_REPLICA' && <span>(ID: {selectedDatabase?.id})</span>}
|
|
</Button>
|
|
</div>
|
|
</PopoverTrigger_Shadcn_>
|
|
<PopoverContent_Shadcn_ className="p-0 w-48" side="bottom" align="end">
|
|
<Command_Shadcn_>
|
|
<CommandList_Shadcn_>
|
|
<CommandGroup_Shadcn_>
|
|
<ScrollArea className={(databases || []).length > 7 ? 'h-[210px]' : ''}>
|
|
{databases?.map((database) => {
|
|
return (
|
|
<CommandItem_Shadcn_
|
|
key={database.id}
|
|
value={database.id.toString()}
|
|
className="cursor-pointer w-full"
|
|
onSelect={() => {
|
|
onChangeDatabaseId(database.id.toString())
|
|
setOpen(false)
|
|
}}
|
|
onClick={() => {
|
|
onChangeDatabaseId(database.id.toString())
|
|
setOpen(false)
|
|
}}
|
|
>
|
|
<div className="w-full flex items-center justify-between">
|
|
<p>
|
|
{database.type === 'PRIMARY'
|
|
? 'Primary database'
|
|
: `Read replica (ID: ${database.id})`}
|
|
</p>
|
|
{database.id.toString() === selectedDatabaseId && <IconCheck />}
|
|
</div>
|
|
</CommandItem_Shadcn_>
|
|
)
|
|
})}
|
|
</ScrollArea>
|
|
</CommandGroup_Shadcn_>
|
|
</CommandList_Shadcn_>
|
|
</Command_Shadcn_>
|
|
</PopoverContent_Shadcn_>
|
|
</Popover_Shadcn_>
|
|
)
|
|
}
|
|
|
|
export default DatabaseSelector
|