✨feat(command palette): enable Command Palette "table" input mode #3943
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Finished running flow.
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
WalkthroughRemoved the Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant I as SearchInput
participant S as SuggestionEngine
participant M as ModeController
U->>I: Type query
I->>S: Request suggestions
S-->>I: Return suggestion (table or non-table)
alt suggestion is table
U->>I: Press Tab
I->>M: setMode(type: "table", tableName)
I-->>U: Clear input (empty)
else suggestion is non-table
U->>I: Press Tab
I-->>U: Complete input with suggestion text
Note right of M: Mode unchanged
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Updates to Preview Branch (feat/release-command-palette-table-mode) ↗︎
Tasks are run on every commit but only new migration files are pushed.
View logs for this Workflow Run ↗︎. |
Check changeset necessityStatus:
Reason:
Changeset (copy & paste):---
"@liam-hq/erd-core": minor
---
- ✨ Enable Command Palette "table" input mode by default
- Pressing Tab with a table suggestion switches to table mode and clears the input
- Tab now completes suggestions in non-default modes and for non-table suggestions
- Removed the temporary feature flag prop `isTableModeActivatable` from internal components |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.test.tsx(3 hunks)frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx(1 hunks)frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteSearchInput/CommandPaletteSearchInput.test.tsx(3 hunks)frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteSearchInput/CommandPaletteSearchInput.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Name React component files in PascalCase and use TSX (e.g., App.tsx)
Files:
frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteSearchInput/CommandPaletteSearchInput.test.tsxfrontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.test.tsxfrontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteSearchInput/CommandPaletteSearchInput.tsxfrontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx
**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Write unit tests with filenames ending in .test.ts or .test.tsx colocated near source
Files:
frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteSearchInput/CommandPaletteSearchInput.test.tsxfrontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.test.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript/TSX across the codebase
Files:
frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteSearchInput/CommandPaletteSearchInput.test.tsxfrontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.test.tsxfrontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteSearchInput/CommandPaletteSearchInput.tsxfrontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx
frontend/packages/**
📄 CodeRabbit inference engine (AGENTS.md)
Shared libraries and tools live under frontend/packages
Files:
frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteSearchInput/CommandPaletteSearchInput.test.tsxfrontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.test.tsxfrontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteSearchInput/CommandPaletteSearchInput.tsxfrontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
frontend/**/*.{ts,tsx}: Use named exports only (no default exports)
Import UI components from @liam-hq/ui when available
Import icons from @liam-hq/ui
Follow existing import patterns and tsconfig path aliases
Use consts instead of function declarations for simple utilities (e.g., const toggle = () => {})
Use runtime type validation with valibot for external data validation
Use early returns for readability
Files:
frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteSearchInput/CommandPaletteSearchInput.test.tsxfrontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.test.tsxfrontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteSearchInput/CommandPaletteSearchInput.tsxfrontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx
frontend/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Follow principles outlined in @docs/test-principles.md for tests
Files:
frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteSearchInput/CommandPaletteSearchInput.test.tsxfrontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.test.tsx
🧠 Learnings (4)
📓 Common learnings
Learnt from: tnyo43
PR: liam-hq/liam#3129
File: frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/TableOptions.tsx:11-15
Timestamp: 2025-08-23T03:36:21.590Z
Learning: The CommandPalette and its child components (including CommandPaletteContent and TableOptions) in the ERD renderer are only rendered on the client side, so SSR safety checks for window object access are not necessary in this context.
Learnt from: tnyo43
PR: liam-hq/liam#3129
File: frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/TableOptions.tsx:11-15
Timestamp: 2025-08-23T03:36:21.590Z
Learning: In the liam ERD codebase, CommandPalette.tsx has a 'use client' directive, ensuring that all CommandPalette child components (CommandPaletteContent, TableOptions, etc.) run only on the client side, making window object access safe without additional typeof checks.
📚 Learning: 2025-08-23T03:36:21.590Z
Learnt from: tnyo43
PR: liam-hq/liam#3129
File: frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/TableOptions.tsx:11-15
Timestamp: 2025-08-23T03:36:21.590Z
Learning: In the liam ERD codebase, CommandPalette.tsx has a 'use client' directive, ensuring that all CommandPalette child components (CommandPaletteContent, TableOptions, etc.) run only on the client side, making window object access safe without additional typeof checks.
Applied to files:
frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteSearchInput/CommandPaletteSearchInput.test.tsxfrontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.test.tsxfrontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteSearchInput/CommandPaletteSearchInput.tsxfrontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx
📚 Learning: 2025-08-23T03:36:21.590Z
Learnt from: tnyo43
PR: liam-hq/liam#3129
File: frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/TableOptions.tsx:11-15
Timestamp: 2025-08-23T03:36:21.590Z
Learning: The CommandPalette and its child components (including CommandPaletteContent and TableOptions) in the ERD renderer are only rendered on the client side, so SSR safety checks for window object access are not necessary in this context.
Applied to files:
frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteSearchInput/CommandPaletteSearchInput.test.tsxfrontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.test.tsxfrontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteSearchInput/CommandPaletteSearchInput.tsxfrontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx
📚 Learning: 2025-10-14T03:19:19.170Z
Learnt from: CR
PR: liam-hq/liam#0
File: CLAUDE.md:0-0
Timestamp: 2025-10-14T03:19:19.170Z
Learning: Applies to frontend/**/*.{test,spec}.{ts,tsx} : Follow principles outlined in docs/test-principles.md for tests
Applied to files:
frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteSearchInput/CommandPaletteSearchInput.test.tsxfrontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.test.tsx
🧬 Code graph analysis (2)
frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteSearchInput/CommandPaletteSearchInput.test.tsx (1)
frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteSearchInput/CommandPaletteSearchInput.tsx (1)
CommandPaletteSearchInput(23-149)
frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.test.tsx (1)
frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx (1)
CommandPaletteContent(49-125)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: frontend-ci
- GitHub Check: frontend-lint
- GitHub Check: Supabase Preview
- GitHub Check: security-review
🔇 Additional comments (4)
frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteSearchInput/CommandPaletteSearchInput.tsx (1)
17-21: LGTM! Clean removal of the feature gate.The removal of
isTableModeActivatablesimplifies the component by making table mode activation unconditional. The logic is correct: Tab now always switches to table mode when a table is suggested (lines 78-84), and otherwise completes the input with the suggestion value (lines 103-106).Also applies to: 23-28, 54-54, 78-84, 102-109
frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteSearchInput/CommandPaletteSearchInput.test.tsx (1)
57-98: LGTM! Comprehensive test coverage for the simplified behavior.The tests correctly verify the unconditional Tab behavior across all input modes:
- Default mode: switches to table mode when a table is suggested, completes input otherwise
- Command mode: completes input with suggestion
- Table mode: completes input with column/index name, handles table suggestions appropriately
The addition of the test at lines 221-237 properly covers the edge case where a table is suggested while already in table mode.
Also applies to: 140-156, 199-237
frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.tsx (1)
49-49: LGTM! Clean simplification of the component API.The removal of the
Propstype andisTableModeActivatableprop correctly aligns with the unconditional table mode activation behavior. The component signature is now simpler and the CommandPaletteSearchInput is invoked without the removed prop.Also applies to: 76-81
frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteContent/CommandPaletteContent.test.tsx (1)
197-197: LGTM! Tests correctly updated to reflect the simplified component API.The removal of
isTableModeActivatablefrom the render calls aligns with the updatedCommandPaletteContentcomponent signature. All test scenarios continue to verify the expected behavior with the now-unconditional table mode activation.Also applies to: 212-212, 248-248
...omponents/ERDRenderer/CommandPalette/CommandPaletteSearchInput/CommandPaletteSearchInput.tsx
Show resolved
Hide resolved
tnyo43
changed the title
Contributor
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
.changeset/fancy-beds-joke.md (1)
2-2: Verify the version bump level for this feature.The changeset declares a
patchversion bump for a new feature (indicated by the ✨ emoji). Following semantic versioning, new features typically warrant aminorversion bump (e.g., 1.2.0 → 1.3.0) rather than a patch bump, which is reserved for bug fixes. Confirm whetherpatchis the intended bump level for this project's versioning strategy.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
.changeset/fancy-beds-joke.md(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: tnyo43
PR: liam-hq/liam#3129
File: frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/TableOptions.tsx:39-55
Timestamp: 2025-08-23T03:35:44.821Z
Learning: When working with cmdk library components, avoid setting tabIndex manually as cmdk handles focus management and keyboard navigation internally for Command.Item elements.
Learnt from: tnyo43
PR: liam-hq/liam#3129
File: frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/TableOptions.tsx:11-15
Timestamp: 2025-08-23T03:36:21.590Z
Learning: The CommandPalette and its child components (including CommandPaletteContent and TableOptions) in the ERD renderer are only rendered on the client side, so SSR safety checks for window object access are not necessary in this context.
📚 Learning: 2025-08-23T03:36:21.590Z
Learnt from: tnyo43
PR: liam-hq/liam#3129
File: frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/TableOptions.tsx:11-15
Timestamp: 2025-08-23T03:36:21.590Z
Learning: In the liam ERD codebase, CommandPalette.tsx has a 'use client' directive, ensuring that all CommandPalette child components (CommandPaletteContent, TableOptions, etc.) run only on the client side, making window object access safe without additional typeof checks.
Applied to files:
.changeset/fancy-beds-joke.md
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Supabase Preview
- GitHub Check: codeql / languages (javascript) / Perform CodeQL for javascript
- GitHub Check: frontend-ci
- GitHub Check: frontend-lint
- GitHub Check: Supabase Preview
🔇 Additional comments (1)
.changeset/fancy-beds-joke.md (1)
5-8: Changelog entry is clear and well-structured.The changeset entry effectively communicates the feature's three key behaviors: Tab-driven table mode activation, Tab-based input completion, and table options availability. Content aligns well with the underlying API changes (removal of
isTableModeActivatableprop and simplified Tab-key logic).
Member
Author
|
I did the following manual tests in https://liam-erd-sample-n7dim63tp-liambx.vercel.app
|
tnyo43
requested review from
MH4GF,
NoritakaIkeda,
junkisai and
sasamuku
and removed request for
a team
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue
Why is this change needed?
This PR will activate "table" input mode in CommandPalette.
Users can switch to the "table" mode by pressing Tab key. In the "table" mode, the table column and index options are shown and they link to the TableDetail content.
Screen.Recording.0007-10-30.at.8.07.08.mov
Mentioning about the code bases, this PR will just removing the feature flag and enabling the "table" input mode always.
Summary by CodeRabbit
Improvements
Tests