mirror of
https://github.com/supabase/supabase.git
synced 2026-09-06 09:59:03 +08:00
29ad86558c
## What kind of change does this PR introduce? Bug fix. Resolves [FE-4192](https://linear.app/supabase/issue/FE-4192/org-and-project-selectors-sometimes-dont-register-selections). ## What is the current behavior? Navigation actions sometimes nest links inside command or dropdown menu items. Closing the menu during selection can prevent the nested link navigation from registering. ## What is the new behavior? - Adds a documented Studio CommandItemLink composition that wraps command items with their navigation link. - Migrates all Studio command-item links, including organisation, project, function, database, branch, and integration actions. - Uses the dropdown menu asChild composition for both infrastructure-diagram Manage replica actions. - Preserves native link behaviour and leaves disabled command items non-navigable. ## To test - [ ] [Organisation and project selectors](https://studio-staging-git-dnywh-fe-4192-selector-links-supabase.vercel.app/dashboard/org): open the organisation selector and try an organisation, All Organizations, and New organization. Open a project, then use the project selector to switch projects and open New project. Confirm every action navigates on the first click. - [ ] [Branch selector](https://studio-staging-git-dnywh-fe-4192-selector-links-supabase.vercel.app/dashboard/project/_): in a project with branching enabled, open the branch selector. Switch branches and select Manage branches. Confirm both navigate on the first click. - [ ] [Database selector](https://studio-staging-git-dnywh-fe-4192-selector-links-supabase.vercel.app/dashboard/project/_/observability/query-performance): open the Source selector. Switch between the primary database and a read replica if available, then select Create a new read replica. Confirm selections apply and the footer action navigates on the first click. - [ ] [Function selector](https://studio-staging-git-dnywh-fe-4192-selector-links-supabase.vercel.app/dashboard/project/_/auth/hooks): select Add a new hook, choose a hook, select Postgres, then open the Postgres function selector and select New function. Confirm it navigates on the first click. - [ ] [Infrastructure diagram](https://studio-staging-git-dnywh-fe-4192-selector-links-supabase.vercel.app/dashboard/project/_/settings/infrastructure): for a project with a read replica, select Manage replica from both diagram variants. Confirm the replica settings open on the first click. - [ ] On any navigational row above, modifier-click and confirm native link behaviour is preserved. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added consistent link navigation across organization, project, branch, function, replica, and integration menus. * Added project-specific destinations to organization and project selectors. * Preserved disabled-item behavior while improving accessible command-menu link semantics. * **Bug Fixes** * Improved navigation and menu-closing behavior for command items and dropdown actions. * **Tests** * Added coverage for link destinations, accessibility roles, disabled states, and route preservation. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import { screen, within } from '@testing-library/react'
|
|
import { Command } from 'ui'
|
|
import { describe, expect, it, vi } from 'vitest'
|
|
|
|
import { ProjectCommandItem } from './ProjectCommandItem'
|
|
import type { OrgProject } from '@/data/projects/org-projects-infinite-query'
|
|
import { render } from '@/tests/helpers'
|
|
|
|
const project = {
|
|
cloud_provider: 'AWS',
|
|
databases: [],
|
|
inserted_at: '2026-08-26T00:00:00.000Z',
|
|
integration_source: null,
|
|
is_branch: false,
|
|
ref: 'project-ref',
|
|
name: 'Project name',
|
|
region: 'ap-southeast-2',
|
|
status: 'ACTIVE_HEALTHY',
|
|
} satisfies OrgProject
|
|
|
|
describe('ProjectCommandItem', () => {
|
|
it('wraps navigable command items in a link', () => {
|
|
render(
|
|
<Command>
|
|
<ProjectCommandItem
|
|
project={project}
|
|
selectedRef={undefined}
|
|
onClose={vi.fn()}
|
|
href="/project/project-ref"
|
|
/>
|
|
</Command>
|
|
)
|
|
|
|
const projectLink = screen.getByRole('link', { name: 'Project name' })
|
|
expect(within(projectLink).getByRole('option')).toBeInTheDocument()
|
|
expect(projectLink).toHaveAttribute('href', '/project/project-ref')
|
|
})
|
|
})
|