feat: UI/UX improvements and unified schema selector#55
feat: UI/UX improvements and unified schema selector#55wicky-zipstack wants to merge 4 commits intomainfrom
Conversation
- Make entire project card clickable (header + body), with stopPropagation on action buttons - Redesign Model Configuration modal: Hierarchy on top, Source/Destination below, full width dropdowns - Increase project_schema max_length from 20 to 1024 - Fix table pagination wrapping to new line instead of horizontal overflow - Add distinct background color to toolbar (Filter, Sort, etc.) with light/dark theme support - Replace AI chat schema tooltip with interactive dropdown selector - Sync schema selection bidirectionally across AI Chat, Explorer, and Seeds via shared store
- Make entire project card clickable (header + body), with stopPropagation on action buttons - Redesign Model Configuration modal: Hierarchy on top, Source/Destination below, full width dropdowns - Increase project_schema max_length from 20 to 1024 - Fix table pagination wrapping to new line instead of horizontal overflow - Add distinct background color to toolbar (Filter, Sort, etc.) with light/dark theme support - Replace AI chat schema tooltip with interactive dropdown selector - Sync schema selection bidirectionally across AI Chat, Explorer, and Seeds via shared store - Move inline styles to CSS classes, lint cleanup
|
| Filename | Overview |
|---|---|
| frontend/src/base/components/project-list/ProjectListCard.jsx | Moves onClick/onKeyDown from inner body div to outer wrapper; action buttons correctly use stopPropagation. Missing Spacebar activation on the new role=button wrapper. |
| frontend/src/ide/chat-ai/PromptActions.jsx | Replaces static InfoChip with interactive Select dropdown backed by shared schemaList store; useCallback memoization is broken because expService (recreated each render) is listed as a dependency. |
| frontend/src/ide/editor/no-code-configuration/configure-source-destination.jsx | Refactors layout to two stacked cards; migrates deprecated bodyStyle to v5 styles prop and adds popupMatchSelectWidth to all selects. No functional logic changed. |
| frontend/src/ide/explorer/explorer-component.jsx | Stores fetched schema list in shared project-store; unmount cleanup only resets currentSchema, leaving schemaList stale across project navigations. |
| frontend/src/store/project-store.js | Adds schemaList state and setSchemaList action; correctly excluded from persisted partialize so it resets on page reload. |
Prompt To Fix All With AI
This is a comment left during a code review.
Path: frontend/src/ide/explorer/explorer-component.jsx
Line: 88-92
Comment:
**`schemaList` not cleared on Explorer unmount**
The cleanup effect resets `currentSchema` but leaves `schemaList` populated. When a user navigates from Project A's IDE to Project B's IDE in the same session, AI Chat will briefly display Project A's schema options (with no selection) until `getSchemas()` completes for Project B.
```suggestion
useEffect(() => {
return () => {
setCurrentSchema("");
setSchemaList([]);
};
}, [setCurrentSchema, setSchemaList]);
```
How can I resolve this? If you propose a fix, please make it concise.
---
This is a comment left during a code review.
Path: frontend/src/ide/chat-ai/PromptActions.jsx
Line: 61-83
Comment:
**`useCallback` memoization broken by unstable `expService` reference**
`explorerService()` returns a new object on every render (because it calls `useAxiosPrivate()` internally), so `expService` changes identity each render. Including it in `handleSchemaChange`'s dependency array means the callback is also recreated every render, making `useCallback` a no-op here.
Alternatively, simply omit `useCallback` here since `handleSchemaChange` is only passed to an Ant Design `Select` that isn't memoised itself.
How can I resolve this? If you propose a fix, please make it concise.
---
This is a comment left during a code review.
Path: frontend/src/base/components/project-list/ProjectListCard.jsx
Line: 92-95
Comment:
**`role="button"` missing Spacebar activation**
WAI-ARIA requires `role="button"` elements to respond to both Enter and the Spacebar key. The current `onKeyDown` only checks for `"Enter"`, leaving keyboard-only users unable to activate the card via the Spacebar.
Consider adding `e.key === " "` to the key check so both keys trigger `handleCardClick`.
How can I resolve this? If you propose a fix, please make it concise.Reviews (3): Last reviewed commit: "fix: address PR #55 review feedback" | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| {schemaList.length > 0 && ( | ||
| <div className="chat-ai-info-chip chat-ai-info-chip-clickable"> | ||
| <DatabaseOutlined className="chat-ai-info-chip-icon" /> | ||
| <Select | ||
| size="small" | ||
| variant="borderless" | ||
| showSearch | ||
| placeholder="Schema" | ||
| value={currentSchema || undefined} | ||
| onChange={handleSchemaChange} | ||
| options={schemaOptions} | ||
| popupMatchSelectWidth={false} | ||
| className="chat-ai-schema-select" | ||
| /> | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
schemaList is only populated in project-store.js by the Explorer component's getSchemas() call. If a user navigates directly to the AI Chat tab without visiting Explorer first (or on a hard refresh since schemaList is not persisted), schemaList.length === 0 and the selector is hidden entirely — so there's no way for the user to change the schema from AI Chat alone.
Consider either fetching the schema list directly in this component as a fallback, or pre-populating schemaList from the project details response that is already loaded before the IDE renders.
Prompt To Fix With AI
This is a comment left during a code review.
Path: frontend/src/ide/chat-ai/PromptActions.jsx
Line: 216-231
Comment:
**Schema selector invisible until Explorer is mounted**
`schemaList` is only populated in `project-store.js` by the Explorer component's `getSchemas()` call. If a user navigates directly to the AI Chat tab without visiting Explorer first (or on a hard refresh since `schemaList` is not persisted), `schemaList.length === 0` and the selector is hidden entirely — so there's no way for the user to change the schema from AI Chat alone.
Consider either fetching the schema list directly in this component as a fallback, or pre-populating `schemaList` from the project details response that is already loaded before the IDE renders.
How can I resolve this? If you propose a fix, please make it concise.There was a problem hiding this comment.
The Explorer component is always mounted in the IDE layout before the AI Chat panel is accessible — they share the same view. Schema list gets populated on IDE load via Explorer's getSchemas(). A direct deep-link to AI Chat without Explorer doesn't exist in current routing, so this edge case won't occur in practice. Will revisit if routing changes in the future.
frontend/src/ide/editor/no-code-configuration/configure-source-destination.jsx
Show resolved
Hide resolved
… deprecated bodyStyle
- Add e.stopPropagation() to shared-user avatar onKeyDown handler to prevent card navigation on Enter
- Replace deprecated bodyStyle prop with styles={{ body: {...} }} for Ant Design v5 compatibility
tahierhussain
left a comment
tahierhussain
left a comment
There was a problem hiding this comment.
@wicky-zipstack Can you please add screenshots for the UI changes addressed in this PR?
- Remove unused .project-list-card-clickable-content CSS class - Reduce !important usage in schema select styles, increase specificity instead - Replace duplicate API call with explorerService.setProjectSchema - Replace message.success/error with useNotificationService for consistency - Show error InfoChip when schema list is empty instead of hiding dropdown - Revert project_schema max_length change (will be added to PR #54 with migration)
|
@tahierhussain All review comments addressed in commit 917ed8a. Summary:
Will add screenshots shortly. |
2 participants
What
Why
How
Can this PR break any existing features. If yes, please list possible items. If no, please explain why. (PS: Admins do not merge the PR without this section filled)
Database Migrations
Env Config
Relevant Docs
Related Issues or PRs
Dependencies Versions
Notes on Testing
Screenshots
Checklist