Feat/add global spotlight menu#3313
Conversation
There was a problem hiding this comment.
Pull request overview
Adds a global Mantine Spotlight command palette to the dashboard so users can quickly navigate to top-level resource pages via keyboard-driven search.
Changes:
- Mount a new
GlobalSpotlightcomponent at the app root and include Mantine Spotlight styles. - Generate Spotlight actions from
navRoutesand navigate using TanStack Router. - Update dependencies/lockfile for
@mantine/spotlightand apply minor formatting-only updates in several Playwright specs.
Reviewed changes
Copilot reviewed 14 out of 15 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/routes/__root.tsx | Mounts the global Spotlight component so it’s available across all routes. |
| src/main.tsx | Adds Mantine Spotlight stylesheet import. |
| src/components/GlobalSpotlight.tsx | Implements the Spotlight UI and route-based actions. |
| package.json | Adds @mantine/spotlight dependency and an overrides entry. |
| pnpm-lock.yaml | Locks new Spotlight dependency resolution. |
| e2e/tests/upstreams.list.spec.ts | Formatting-only whitespace change. |
| e2e/tests/stream_routes.list.spec.ts | Formatting-only whitespace change. |
| e2e/tests/services.list.spec.ts | Formatting-only whitespace change. |
| e2e/tests/services.crud-required-fields.spec.ts | Formatting-only whitespace change. |
| e2e/tests/routes.list.spec.ts | Formatting-only whitespace change. |
| e2e/tests/protos.list.spec.ts | Formatting-only whitespace change. |
| e2e/tests/plugin_configs.list.spec.ts | Formatting-only whitespace change. |
| e2e/tests/hot-path.upstream-service-route.spec.ts | Formatting-only whitespace change. |
| e2e/tests/consumers.list.spec.ts | Formatting-only whitespace change. |
| e2e/tests/consumer_groups.list.spec.ts | Formatting-only whitespace change. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| leftSection: <IconSearch style={{ width: 22, height: 22 }} />, | ||
| placeholder: 'Search resources... (Ctrl + K)', | ||
| rightSectionPointerEvents: 'all', |
There was a problem hiding this comment.
The search input placeholder is hard-coded English and advertises only "Ctrl + K" even though the shortcut is typically platform-dependent (Cmd on macOS). This should be localized and either display a neutral "Mod + K" label or render the correct key combo per platform.
| <TanStackRouterDevtools /> | ||
| <ReactQueryDevtools initialIsOpen={false} /> | ||
| <SettingsModal /> | ||
| <GlobalSpotlight /> | ||
| </I18nextProvider> |
There was a problem hiding this comment.
The new global Spotlight feature is user-facing but has no automated coverage. Given the existing Playwright e2e suite, add a test that triggers the palette via the keyboard shortcut and verifies selecting an action navigates to the expected page.
| "@mantine/hooks": "^8.0.0", | ||
| "@mantine/modals": "^8.0.0", | ||
| "@mantine/notifications": "^8.0.0", | ||
| "@mantine/spotlight": "^8.3.15", | ||
| "@monaco-editor/react": "^4.7.0", |
There was a problem hiding this comment.
@mantine/spotlight is pinned to 8.3.15, but the repo is currently locked to @mantine/core/@mantine/hooks 8.3.12 (see pnpm-lock peer deps). Please align Mantine package versions (core/hooks/spotlight/store) to the same patch version to avoid peer-dependency mismatches and potential runtime issues.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Why submit this pull request?
What changes will this PR take into?
This PR introduces a global command palette (Ctrl + K / Cmd + K) that enables fast, keyboard-driven navigation across dashboard resources such as Routes, Upstreams, Consumers, and Plugins.
The goal is to reduce navigation friction in large deployments where manually browsing paginated lists becomes inefficient.
Detailed Implementation
✨ Feature: Global Command Palette (Spotlight)
@mantine/spotlightmodule to provide a polished, accessible command palette experience.Ctrl + K(Windows/Linux)Cmd + K(macOS)🔍 Resource Search & Navigation
🧩 Architecture & Integration
🎯 UX Considerations
This feature is fully self-contained, does not affect existing navigation behavior, and introduces no breaking changes.