Files
Joshen Lim 71d58cba7f Joshenlim/fe 4401 re sql editor silently points to the primary instead of (#50513)
## Context

Fixes the following 2 issues with the database selection in the SQL
Editor
- An errant `useEffect` was resetting the `selectedDatabaseId` back to
the primary every time the `databases` list from `useReadReplicasQuery`
changed reference (not just on first load).
- `QuerySourceMenu` kept showing "Read Replica" even after selection had
reverted
- Was using local storage value as the `identifier` for
`DatabaseParametersSubMenu`, when it should use the valtio store as the
source of truth

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Improvements**
- The SQL Editor now remembers the last selected database between
sessions.
- Your saved database selection is restored when available; otherwise,
the project’s primary database is selected automatically.
- Query source settings now stay synchronized with the database
currently selected in the SQL Editor.

- **Bug Fixes**
- Background database refreshes no longer unexpectedly reset your
selected read replica to the primary database.
- Database selection now waits for saved preferences to load, preventing
a brief incorrect selection.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-17 12:34:13 +00:00

66 lines
2.0 KiB
TypeScript

import { LOCAL_STORAGE_KEYS } from 'common'
import { useEffect } from 'react'
import { isValidConnString } from '@/data/fetchers'
import { useReadReplicasQuery, type Database } from '@/data/read-replicas/replicas-query'
import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
import {
useDatabaseSelectorStateSnapshot,
useGetSelectedDatabaseId,
} from '@/state/database-selector'
export function getDefaultDatabaseId({
databases,
ref,
lastSelectedDatabase,
}: {
databases: Pick<Database, 'identifier'>[]
ref: string | undefined
lastSelectedDatabase: string
}): string | undefined {
const lastSelectedIsStillValid = databases.some((db) => db.identifier === lastSelectedDatabase)
if (lastSelectedIsStillValid) return lastSelectedDatabase
return databases.find((db) => db.identifier === ref)?.identifier
}
/**
* Defaults the SQL editor's selected database once read replicas load
*/
export function useSqlEditorDatabaseSelection({
ref,
connectionString,
}: {
ref: string | undefined
connectionString: string | null | undefined
}) {
const { setSelectedDatabaseId } = useDatabaseSelectorStateSnapshot()
const getSelectedDatabaseId = useGetSelectedDatabaseId()
const { data: databases, isSuccess: isSuccessReadReplicas } = useReadReplicasQuery(
{ projectRef: ref },
{ enabled: isValidConnString(connectionString) }
)
const [lastSelectedDatabase, , { isLoading: isLoadingLastSelectedDatabase }] =
useLocalStorageQuery(LOCAL_STORAGE_KEYS.SQL_EDITOR_LAST_SELECTED_DB(ref ?? ''), '')
useEffect(() => {
// Only set the initial selection once, when nothing has been selected yet.
if (
isSuccessReadReplicas &&
!isLoadingLastSelectedDatabase &&
getSelectedDatabaseId() === undefined
) {
setSelectedDatabaseId(getDefaultDatabaseId({ databases, ref, lastSelectedDatabase }))
}
}, [
isSuccessReadReplicas,
isLoadingLastSelectedDatabase,
databases,
ref,
lastSelectedDatabase,
setSelectedDatabaseId,
getSelectedDatabaseId,
])
}