feat: integrate Quick Navigator search overlay#252
Conversation
- Added customizable 'quick_navigator' keyboard shortcut (Cmd+P / Ctrl+P). - Created QuickNavigatorModal component to filter tables, views, routines, and triggers of the active database connection. - Restructured code by moving extraction and filtering logic to src/utils/quickNavigator.ts. - Added comprehensive unit tests in tests/utils/quickNavigator.test.ts. - Integrated background metadata loading for all schemas/databases configured in the connection parameters. - Grouped results under clean separator headers by database/schema, removing visual redundancy. - Supported hover quick actions (Inspect, Generate SQL, Run Query) next to items.
debba
force-pushed
the
feat/quick-navigator
branch
from
1587b5d to
8010f5d
Compare
![kilo-code-bot[bot]](https://avatars.githubusercontent.com/in/2193792?s=60&v=4){kind=small}
| } | ||
| }; | ||
|
|
||
| loadAll(); |
There was a problem hiding this comment.
WARNING: Unhandled promise rejections in background loading
loadSchemaData and loadDatabaseData return promises that are neither awaited nor caught. If any call throws, it will surface as an unhandled promise rejection. Consider collecting the promises and attaching a catch handler.
| loadAll(); | |
| Promise.all((hasSchemas && schemas) ? schemas.map((s) => loadSchemaData(s)) : (isMultiDb && configuredDatabases) ? configuredDatabases.map((d) => loadDatabaseData(d)) : []).catch(() => {}); |
Code Review SummaryStatus: 3 Issues Found | Recommendation: Address before merge Overview
Issue Details (click to expand)WARNING
Other Observations (not in diff)Issues found in unchanged code that cannot receive inline comments:
Resolved Since Last Review
Files Reviewed (16 files)
Fix these issues in Kilo Cloud Reviewed by kimi-k2.6-20260420 · 221,045 tokens |
…sidebar reference
| useEffect(() => { | ||
| if (!activeTable || !sidebarBodyRef.current) return; | ||
| const el = sidebarBodyRef.current.querySelector<HTMLElement>( | ||
| `[data-table-name="${activeTable}"][data-schema="${activeSchema ?? ''}"]` |
There was a problem hiding this comment.
WARNING: Unescaped CSS selector injection
activeTable or activeSchema values containing double quotes (e.g. my"table) will produce an invalid selector and cause querySelector to throw a DOMException. Use CSS.escape() to sanitize values before interpolating them into the selector.
| `[data-table-name="${activeTable}"][data-schema="${activeSchema ?? ''}"]` | |
| `[data-table-name="${CSS.escape(activeTable)}"][data-schema="${CSS.escape(activeSchema ?? '')}"]` |
# Conflicts: # src/components/layout/ExplorerSidebar.tsx
…tables Selecting a result in the Quick Navigator on a connection with many tables (hundreds) froze the UI and the sidebar often failed to reveal the chosen table. Three related issues are addressed: - Performance: SidebarTableItem was not memoized, so every item re-rendered on each sidebar render (and the call sites pass freshly created inline callbacks). Wrap it in React.memo with a comparator that only inspects the data props and whether *this* item is the active one, so changing the active table re-renders just the two affected items instead of all of them. The comparator lives in src/utils/sidebarTableItem.ts and is unit tested. - Multi-database connections: SidebarDatabaseItem only set its expanded state on mount, so picking a table in a different, collapsed database neither opened that database nor loaded its tables. It now auto-expands and lazily loads when it becomes the active database, mirroring SidebarSchemaItem. - Scroll reveal: the scroll-into-view effect ran once, before a freshly expanded database/schema had mounted its (asynchronously loaded) table item, so scrolling upward to such a table silently did nothing. Retry across animation frames until the item is in the DOM, and build the lookup selector via a helper that escapes special characters in table/schema names.
debba
force-pushed
the
feat/quick-navigator
branch
from
19761ed to
60926f7
Compare
|
Hey @Lenobre, pushed a few fixes to the Quick Navigator branch, here's what changed: The big one was the freeze when opening a result on connections with lots of tables (was testing with ~300). Turned out the sidebar table item wasn't memoized, so picking a table re-rendered every single row instead of just the two that actually change. Wrapped it in Second, on multi-database connections selecting a table in a different (collapsed) database didn't open that database. The schema item already auto-expanded when it became active, but the database item only did it on mount, so it never reacted afterwards. Made it behave like the schema one: auto-expand and lazy-load its tables when it becomes the active db. Third, scrolling to the table worked going down but not up. The scroll ran once, before the freshly expanded db/schema had mounted its tables (they load async), so it found nothing and gave up. Now it retries over a few frames until the row is actually in the DOM. Also moved the selector into a small helper that escapes table/schema names, so weird names don't break the lookup. Pulled the testable bits into |
| } | ||
|
|
||
| return ( | ||
| <div key={`${item.type}-${item.schema || ""}-${item.name}`}> |
There was a problem hiding this comment.
WARNING: Duplicate React keys for triggers/routines with same name
In PostgreSQL, trigger names are unique per table but not per schema. Two triggers with the same name on different tables in the same schema produce identical keys (trigger-<schema>-<name>), causing React warnings and incorrect rendering. Same-name routines of different types (e.g., FUNCTION vs PROCEDURE) also collide.
| <div key={`${item.type}-${item.schema || ""}-${item.name}`}> | |
| <div key={`${item.type}-${item.schema || ""}-${item.name}-${item.detail || ""}`}> |
2 participants
Description
This PR integrates a new Quick Navigator (search overlay/dialog) for database schema elements in the sidebar of an active connection, taking inspiration from Beekeeper Studio's Quick Search.
Features
Cmd+P/Ctrl+Pby default) is fully customizable in settings under the "Navigation" category. We prevent browser print behavior when it triggers.QuickNavigatorModal.tsxthat autofocuses a search input and dynamically filters tables, views, routines, and triggers.Implementation Details
src/utils/quickNavigator.ts).tests/utils/quickNavigator.test.ts.Verification