mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 10:55:06 +03:00
Saxon FletcherandJoshen Lim
d9742d707f
Moves Explorer’s back navigation and create actions into a reusable sidebar breadcrumb header. Reduces product-menu headings globally to `text-sm` and keeps breadcrumb links free of padding, borders, and backgrounds. ### How to test 1. Open `/project/<ref>/explorer` and confirm the header shows Explorer and the SQL Editor switch action. 2. Open Notebooks and Chats. Confirm the header shows `Explorer > Notebooks/Chats` and the corresponding create action works. 3. Return using the Explorer breadcrumb with a click or Tab + Enter. Check that the label stays aligned and has no hover background. 4. Open another product, such as Database, and confirm its sidebar heading uses the smaller font size. 5. At a mobile viewport, open the menu and repeat the notebook/chat actions and back navigation without closing the sheet. Confirm the header stays current and disappears when returning to the main menu or opening another product. Validation: 18 focused tests, typecheck, formatting, and lint ratchet passed. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added a shared Explorer sidebar header with breadcrumbs and contextual actions for creating notebooks and chats. - Added keyboard-accessible navigation between the Explorer overview and notebook or chat sections. - Added support for customized product menu headers across project layouts. - **Improvements** - Centralized Explorer navigation and actions in the shared sidebar layout. - Improved mobile menu updates when navigating between Explorer resources. - Refined Explorer home layout and drag-handle behavior across screen sizes. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
86 lines
3.3 KiB
TypeScript
86 lines
3.3 KiB
TypeScript
import { screen, within } from '@testing-library/react'
|
|
import userEvent from '@testing-library/user-event'
|
|
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
|
|
|
import type { ExplorerResourceType } from './ExplorerLayout.constants'
|
|
import { ExplorerNavHeader } from './ExplorerNavHeader'
|
|
import { ProductMenuBar } from '@/components/layouts/Navigation/ProductMenuBar'
|
|
import { customRender } from '@/tests/lib/custom-render'
|
|
|
|
const createNotebook = vi.fn()
|
|
const createChat = vi.fn()
|
|
vi.mock('@/components/interfaces/Explorer/hooks', () => ({
|
|
useCreateNotebook: () => ({ createNotebook }),
|
|
useCreateChat: () => ({ createChat }),
|
|
}))
|
|
|
|
function renderHeader(section?: ExplorerResourceType) {
|
|
const onBack = vi.fn()
|
|
customRender(
|
|
<ProductMenuBar
|
|
title="Explorer"
|
|
header={
|
|
<ExplorerNavHeader
|
|
section={section}
|
|
onBack={onBack}
|
|
rootAction={<span>Switch to SQL Editor</span>}
|
|
/>
|
|
}
|
|
/>
|
|
)
|
|
return { onBack }
|
|
}
|
|
|
|
describe('Explorer sidebar header', () => {
|
|
beforeEach(() => vi.clearAllMocks())
|
|
|
|
it('shows the smaller root title with the SQL action', () => {
|
|
renderHeader()
|
|
expect(screen.getAllByText('Explorer')).toHaveLength(1)
|
|
expect(screen.getByText('Explorer')).toHaveClass('text-sm')
|
|
expect(screen.getByText('Switch to SQL Editor')).toBeInTheDocument()
|
|
expect(screen.queryByRole('button')).not.toBeInTheDocument()
|
|
})
|
|
|
|
it.each([
|
|
{ section: 'notebook', parent: 'Explorer', current: 'Notebooks' },
|
|
{ section: 'chat', parent: 'Explorer', current: 'Chats' },
|
|
] satisfies { section: ExplorerResourceType; parent: string; current: string }[])(
|
|
'shows only $parent → $current and returns via the parent breadcrumb',
|
|
async ({ section, parent, current }) => {
|
|
const { onBack } = renderHeader(section)
|
|
const breadcrumb = screen.getByRole('navigation', { name: 'Explorer navigation' })
|
|
expect(within(breadcrumb).getByRole('button', { name: parent })).toBeInTheDocument()
|
|
expect(within(breadcrumb).getByRole('link', { name: current })).toHaveAttribute(
|
|
'aria-current',
|
|
'page'
|
|
)
|
|
expect(within(breadcrumb).getAllByRole('listitem')).toHaveLength(2)
|
|
expect(screen.queryByText('Switch to SQL Editor')).not.toBeInTheDocument()
|
|
expect(screen.queryByRole('button', { name: 'Back' })).not.toBeInTheDocument()
|
|
const user = userEvent.setup()
|
|
await user.click(screen.getByRole('button', { name: parent }))
|
|
expect(onBack).toHaveBeenCalledOnce()
|
|
screen.getByRole('button', { name: parent }).focus()
|
|
await user.keyboard('{Enter}')
|
|
expect(onBack).toHaveBeenCalledTimes(2)
|
|
}
|
|
)
|
|
|
|
it.each(['notebook', 'chat'] as const)(
|
|
'shows the create action only for the current %s level',
|
|
async (level) => {
|
|
renderHeader(level)
|
|
await userEvent.click(screen.getByRole('button', { name: `New ${level}` }))
|
|
expect(level === 'notebook' ? createNotebook : createChat).toHaveBeenCalledOnce()
|
|
expect(level === 'notebook' ? createChat : createNotebook).not.toHaveBeenCalled()
|
|
}
|
|
)
|
|
|
|
it('keeps the default title and badge for other product sidebars', () => {
|
|
customRender(<ProductMenuBar title="Database" titleBadge={<span>Preview</span>} />)
|
|
expect(screen.getByRole('heading', { name: 'Database' })).toHaveClass('text-sm')
|
|
expect(screen.getByText('Preview')).toBeInTheDocument()
|
|
})
|
|
})
|