mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 11:25:06 +03:00
Charis
2165746784
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Bug fix ## What is the current behavior? Selecting Database/Logs in the SQL Editor's query-source dropdown closes the menu (Radix's default select behavior), so switching to Logs gives no visible indication that a Time range control just became available until the dropdown is reopened. ## What is the new behavior? Selecting a source keeps the dropdown open, so the newly-available source-specific controls (e.g. Time range for Logs) are immediately visible. ## Additional context Fixes FE-4036 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved source switching in the SQL editor so the selection menu remains open while changing between database and logs sources. * Ensured source-specific controls update correctly after switching. * **Tests** * Added coverage for source selection, menu behavior, and source-specific control updates. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
72 lines
2.7 KiB
TypeScript
72 lines
2.7 KiB
TypeScript
import { screen } from '@testing-library/react'
|
||
import userEvent from '@testing-library/user-event'
|
||
import { mockAnimationsApi } from 'jsdom-testing-mocks'
|
||
import { describe, expect, it } from 'vitest'
|
||
|
||
import { DEFAULT_LOG_DATE_RANGE } from '@/components/interfaces/SQLEditor/querySource'
|
||
import { QuerySourceMenu } from '@/components/interfaces/SQLEditor/UtilityPanel/QuerySourceMenu/QuerySourceMenu'
|
||
import { customRender } from '@/tests/lib/custom-render'
|
||
import { addAPIMock } from '@/tests/lib/msw'
|
||
|
||
// QuerySourceMenu renders a Radix dropdown (+ nested dialog), both of which use Web Animations.
|
||
mockAnimationsApi()
|
||
|
||
addAPIMock({
|
||
method: 'get',
|
||
path: '/platform/projects/:ref',
|
||
response: {
|
||
id: 1,
|
||
ref: 'default',
|
||
organization_id: 1,
|
||
name: 'Test Project',
|
||
status: 'ACTIVE_HEALTHY',
|
||
cloud_provider: 'AWS',
|
||
region: 'us-east-1',
|
||
db_host: 'db.default.supabase.co',
|
||
restUrl: 'https://default.supabase.co/rest/v1/',
|
||
inserted_at: '2024-01-01T00:00:00Z',
|
||
updated_at: '2024-01-01T00:00:00Z',
|
||
subscription_id: 'sub_123',
|
||
is_branch_enabled: false,
|
||
is_physical_backups_enabled: false,
|
||
high_availability: false,
|
||
integration_source: null,
|
||
connectionString: 'postgresql://postgres@localhost:5432/postgres',
|
||
is_hibernating: false,
|
||
},
|
||
})
|
||
|
||
describe('QuerySourceMenu', () => {
|
||
it('keeps the dropdown open across a source switch, so the new source’s controls appear without reopening it', async () => {
|
||
// Selecting a source doesn't mutate `runSource` in place — it navigates to a
|
||
// fresh tab, and the parent re-renders this component with the new source once
|
||
// the route lands. Rerendering with the switched-to prop below stands in for
|
||
// that navigation, so the test observes exactly what the user does: does the
|
||
// dropdown have to be reopened to see the newly-available controls?
|
||
const { rerender } = customRender(
|
||
<QuerySourceMenu id="new-snippet" runSource={{ type: 'database' }} canCreateLogsSnippet />
|
||
)
|
||
|
||
await userEvent.click(screen.getByRole('button', { name: 'Query source: Database' }))
|
||
|
||
expect(await screen.findByText('Run as')).toBeInTheDocument()
|
||
expect(screen.queryByText('Time range')).not.toBeInTheDocument()
|
||
|
||
await userEvent.click(screen.getByText('Logs'))
|
||
|
||
rerender(
|
||
<QuerySourceMenu
|
||
id="new-snippet"
|
||
runSource={{ type: 'logs', dateRange: DEFAULT_LOG_DATE_RANGE }}
|
||
canCreateLogsSnippet
|
||
/>
|
||
)
|
||
|
||
// The dropdown never closed, so the logs-only "Time range" control is visible
|
||
// immediately, and the database-only controls are gone — without the user
|
||
// having to reopen the menu.
|
||
expect(screen.getByText('Time range')).toBeInTheDocument()
|
||
expect(screen.queryByText('Run as')).not.toBeInTheDocument()
|
||
})
|
||
})
|