Skip to content

Feat/add global spotlight menu#3313

Draft
Baluduvamsi2006 wants to merge 6 commits intoapache:masterfrom
Baluduvamsi2006:feat/add-global-spotlight-menu
Draft

Feat/add global spotlight menu#3313
Baluduvamsi2006 wants to merge 6 commits intoapache:masterfrom
Baluduvamsi2006:feat/add-global-spotlight-menu

Conversation

@Baluduvamsi2006
Copy link
Contributor

Why submit this pull request?

  • Bugfix
  • New feature provided
  • Improve performance
  • Backport patches

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)

image
  • Integrated Mantine’s native @mantine/spotlight module to provide a polished, accessible command palette experience.
  • Added a global keyboard shortcut:
    • Ctrl + K (Windows/Linux)
    • Cmd + K (macOS)
  • Trigger opens a modal overlay that dims the background and focuses user input for immediate interaction.

🔍 Resource Search & Navigation

  • Implements fuzzy search across core dashboard resources:
    • Routes
    • Upstreams
    • Consumers
    • Plugins
  • Selecting a result performs an immediate navigation to the corresponding resource detail or list view.
  • Eliminates the need to manually traverse side menus and paginated tables for commonly accessed resources.

🧩 Architecture & Integration

  • Spotlight provider is mounted at the application root to ensure global availability.
  • Action definitions are generated dynamically from existing route and resource metadata to avoid duplication.
  • Fully leverages Mantine’s built-in spotlight lifecycle, accessibility, and keyboard handling without introducing custom modal logic.

🎯 UX Considerations

  • Designed for power users managing large API gateway configurations.
  • Keyboard-first interaction improves efficiency while remaining optional for mouse-based users.
  • Visual styling aligns with existing dashboard theming to ensure a consistent look and feel.

This feature is fully self-contained, does not affect existing navigation behavior, and introduces no breaking changes.

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 GlobalSpotlight component at the app root and include Mantine Spotlight styles.
  • Generate Spotlight actions from navRoutes and navigate using TanStack Router.
  • Update dependencies/lockfile for @mantine/spotlight and 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.

Comment on lines +48 to +50
leftSection: <IconSearch style={{ width: 22, height: 22 }} />,
placeholder: 'Search resources... (Ctrl + K)',
rightSectionPointerEvents: 'all',
Copy link

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
Comment on lines 56 to 60
<TanStackRouterDevtools />
<ReactQueryDevtools initialIsOpen={false} />
<SettingsModal />
<GlobalSpotlight />
</I18nextProvider>
Copy link

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
Comment on lines 20 to 24
"@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",
Copy link

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

Copilot uses AI. Check for mistakes.
Baluduvamsi2006 and others added 2 commits March 6, 2026 06:58
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
@Baluduvamsi2006 Baluduvamsi2006 marked this pull request as draft March 20, 2026 16:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants