feat: UI/UX improvements and unified schema selector#55
feat: UI/UX improvements and unified schema selector#55wicky-zipstack wants to merge 3 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 | onClick moved to wrapper div making the full card clickable; action buttons use stopPropagation on click but are missing onKeyDown stopPropagation, causing Enter-key presses to simultaneously trigger both the button action and card navigation. |
| frontend/src/ide/chat-ai/PromptActions.jsx | Schema InfoChip replaced with an interactive Select dropdown; API call and store update on change look correct; selector is conditionally hidden when schemaList is empty (pre-existing dependency on Explorer mount noted in prior review threads). |
| frontend/src/store/project-store.js | Added schemaList state and setSchemaList setter; correctly excluded from partialize so it is not persisted to localStorage and is always refetched on session start. |
| frontend/src/ide/explorer/explorer-component.jsx | Calls setSchemaList(allSchemas) after fetching schemas, sharing the list with the global store for AI Chat and Seeds consumers. |
| frontend/src/ide/editor/no-code-configuration/configure-source-destination.jsx | Source and Destination configs split into stacked cards with full-width layout; uses updated styles={{ body }} API (not deprecated bodyStyle); popupMatchSelectWidth added to prevent truncation. |
| backend/backend/core/models/project_details.py | max_length increased from 20 to 1024 on project_schema CharField; missing migration was flagged in prior review threads. |
| frontend/src/ide/editor/no-code-model/no-code-model.css | Pagination container switched from overflow-x:auto to flex-wrap+gap to fix wrapping on narrow viewports; configure-section-card utility classes added. |
| frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.css | Toolbar given background color via CSS variable and border-radius; new rule targets .ant-space internal class which is fragile across Ant Design upgrades. |
| frontend/src/ide/chat-ai/ChatAI.css | Schema selector styles added with !important overrides for Ant Design Select sizing inside the compact info-chip container; approach is consistent with existing component patterns. |
| frontend/src/base/components/project-list/ProjectListCard.css | cursor:pointer moved from inner clickable-content to the wrapper; minor and correct change aligned with JSX refactor. |
Sequence Diagram
sequenceDiagram
participant User
participant Explorer
participant ProjectStore
participant AIChat
participant Backend
User->>Explorer: Visits Explorer tab
Explorer->>Backend: getAllSchema(projectId)
Backend-->>Explorer: schema_names + default_project_schema
Explorer->>ProjectStore: setSchemaList(allSchemas)
Explorer->>ProjectStore: setCurrentSchema(defaultSchema)
User->>AIChat: Opens AI Chat tab
AIChat->>ProjectStore: reads schemaList, currentSchema
AIChat-->>User: Renders schema selector
User->>AIChat: Selects new schema
AIChat->>Backend: POST /set_schema
Backend-->>AIChat: 200 OK
AIChat->>ProjectStore: setCurrentSchema(value)
ProjectStore-->>Explorer: currentSchema updated
ProjectStore-->>AIChat: currentSchema updated
Prompt To Fix All With AI
This is a comment left during a code review.
Path: frontend/src/base/components/project-list/ProjectListCard.jsx
Line: 89-95
Comment:
**Action buttons missing onKeyDown stopPropagation**
Moving `onClick`/`onKeyDown` to the wrapper div introduces a keyboard regression: pressing Enter while an action button (Edit, Delete, Share) is focused fires a `keydown` event that bubbles to the wrapper and triggers `handleCardClick()` alongside the button's own action. The `stopPropagation()` on each button's click handler stops only the click event, not the keydown.
Each action button needs `onKeyDown` that calls `stopPropagation()`, matching the pattern already applied to the shared-avatars div at lines 147–151.
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/editor/no-code-toolbar/no-code-toolbar.css
Line: 22-25
Comment:
**Targeting Ant Design internal class is fragile**
`.no-code-toolbar-content > .ant-space` directly targets Ant Design's generated class names. These internal class names can change between Ant Design minor/patch versions without notice, silently breaking the layout. Consider using a custom wrapper class or the `styles` / `style` prop on the Ant Design component instead.
How can I resolve this? If you propose a fix, please make it concise.Reviews (2): Last reviewed commit: "fix: address PR review — stopPropagation..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| profile_path = models.CharField(max_length=100) | ||
|
|
||
| project_schema = models.CharField(max_length=20, blank=True, null=True) | ||
| project_schema = models.CharField(max_length=1024, blank=True, null=True) |
There was a problem hiding this comment.
Changing max_length from 20 → 1024 on a CharField is a DDL change that requires a Django migration. Without one, python manage.py makemigrations --check will fail in CI and the actual database column will remain VARCHAR(20), silently truncating any schema name longer than 20 characters on databases that enforce column lengths (MySQL/PostgreSQL). The backend/backend/core/migrations/ directory currently has no new migration for this change.
Run python manage.py makemigrations core to generate the migration and commit it alongside this change.
Prompt To Fix With AI
This is a comment left during a code review.
Path: backend/backend/core/models/project_details.py
Line: 105
Comment:
**Missing database migration for max_length change**
Changing `max_length` from 20 → 1024 on a `CharField` is a DDL change that requires a Django migration. Without one, `python manage.py makemigrations --check` will fail in CI and the actual database column will remain `VARCHAR(20)`, silently truncating any schema name longer than 20 characters on databases that enforce column lengths (MySQL/PostgreSQL). The `backend/backend/core/migrations/` directory currently has no new migration for this change.
Run `python manage.py makemigrations core` to generate the migration and commit it alongside this change.
How can I resolve this? If you propose a fix, please make it concise.There was a problem hiding this comment.
Migration is intentionally not included — makemigrations requires eventlet and stripe modules which are not available in the local dev environment. The migration will be generated and applied in the deployment environment as part of the release process. This is a known workflow for this repo.
| {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
1 participant
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
N/A
Checklist