edit-schema: use backend preview endpoint for diagram instead of clie…#1797
Conversation
…nt-side SQL parsing Replace the frontend node-sql-parser AST walk that built the AI-change diagram preview with a call to POST /connection/diagram/:id/preview, so the preview matches what will actually be applied and overlays proposed changes on the real schema. Also bumps pnpm audit overrides. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
📝 WalkthroughWalkthroughThe PR migrates diagram preview generation from local component-side Mermaid building to a backend service endpoint. ChangesSchema Diagram Preview Backend Integration
Sequence DiagramsequenceDiagram
participant EditComponent as EditDatabaseSchemaComponent
participant SchemaService as TableSchemaService
participant Backend as Backend API
EditComponent->>SchemaService: previewDiagram(connectionId, sqlCommands)
SchemaService->>Backend: POST /connection/diagram/{connectionId}/preview
Backend->>Backend: Generate preview from SQL
Backend->>SchemaService: ConnectionDiagramPreviewResponse
SchemaService->>EditComponent: Return preview with statement results and diff
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 6✅ Passed checks (6 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add 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 |
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/src/app/components/edit-database-schema/edit-database-schema.component.ts (1)
232-246:⚠️ Potential issue | 🟠 Major | ⚡ Quick win
rejectBatchfailure leaves UI in inconsistent state.If
rejectBatchthrows, theawaitcompletes but the subsequentmessages.update()still runs, clearingbatchIdand removing the preview diagram despite the rejection not being persisted on the backend. Consider wrapping in try/catch to preserve state on failure.Proposed fix
async onReject() { const batch = this.pendingBatch(); if (!batch?.batchId) return; - await this._tableSchema.rejectBatch(batch.batchId); - this.messages.update((msgs) => - msgs - .filter((m) => !(m.role === 'diagram' && m.text === 'Schema Preview')) - .map((m) => (m === batch ? { ...m, batchId: undefined } : m)) - .concat({ - role: 'ai', - text: 'Changes rejected. Feel free to describe what you need differently.', - }), - ); + try { + await this._tableSchema.rejectBatch(batch.batchId); + this.messages.update((msgs) => + msgs + .filter((m) => !(m.role === 'diagram' && m.text === 'Schema Preview')) + .map((m) => (m === batch ? { ...m, batchId: undefined } : m)) + .concat({ + role: 'ai', + text: 'Changes rejected. Feel free to describe what you need differently.', + }), + ); + } catch (err: unknown) { + const error = err as { error?: { message?: string }; message?: string }; + this.messages.update((msgs) => [ + ...msgs, + { + role: 'error', + text: error?.error?.message || error?.message || 'Failed to reject changes.', + }, + ]); + } }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/app/components/edit-database-schema/edit-database-schema.component.ts` around lines 232 - 246, The onReject handler currently calls await this._tableSchema.rejectBatch(batch.batchId) but always runs messages.update afterwards, which can clear batchId and remove the preview even if the backend call fails; modify onReject (use pendingBatch() to get the batch) to wrap the rejectBatch call in a try/catch and only perform messages.update when rejectBatch succeeds, and in the catch preserve the existing messages state and surface the error (e.g., log or show a user notification) so the UI remains consistent if _tableSchema.rejectBatch throws.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In
`@frontend/src/app/components/edit-database-schema/edit-database-schema.component.ts`:
- Around line 232-246: The onReject handler currently calls await
this._tableSchema.rejectBatch(batch.batchId) but always runs messages.update
afterwards, which can clear batchId and remove the preview even if the backend
call fails; modify onReject (use pendingBatch() to get the batch) to wrap the
rejectBatch call in a try/catch and only perform messages.update when
rejectBatch succeeds, and in the catch preserve the existing messages state and
surface the error (e.g., log or show a user notification) so the UI remains
consistent if _tableSchema.rejectBatch throws.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: e8432947-6173-4446-b8bf-37618e5334f6
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (3)
frontend/src/app/components/edit-database-schema/edit-database-schema.component.tsfrontend/src/app/services/table-schema.service.tspackage.json
…nt-side SQL parsing
Replace the frontend node-sql-parser AST walk that built the AI-change diagram preview with a call to POST /connection/diagram/:id/preview, so the preview matches what will actually be applied and overlays proposed changes on the real schema. Also bumps pnpm audit overrides.
Summary by CodeRabbit
Bug Fixes
Improvements
Chores