OpenNoodl/dev-docs/tasks/phase-5-multi-target-deployment/01-byob-backend/TASK-007-integrated-backend/TASK-007H-COMPLETE.md

TASK-007H: Schema Manager UI - COMPLETE

Summary

Implemented a Schema Manager UI panel for viewing and managing database schemas in local SQLite backends.

Files Created

Schema Manager Panel Components

• packages/noodl-editor/src/editor/src/views/panels/schemamanager/SchemaPanel.tsx - Main panel showing tables list
• packages/noodl-editor/src/editor/src/views/panels/schemamanager/SchemaPanel.module.scss - Panel styles
• packages/noodl-editor/src/editor/src/views/panels/schemamanager/TableRow.tsx - Expandable table row with columns
• packages/noodl-editor/src/editor/src/views/panels/schemamanager/TableRow.module.scss - Table row styles
• packages/noodl-editor/src/editor/src/views/panels/schemamanager/index.ts - Module exports

Files Modified

BackendManager.js

Added IPC handlers for schema operations:

• backend:getSchema - Get full schema for a backend
• backend:getTableSchema - Get single table schema
• backend:getRecordCount - Get record count for a table
• backend:createTable - Create a new table
• backend:addColumn - Add column to existing table

LocalBackendCard.tsx

• Added "Schema" button (shows when backend is running)
• Added schema panel overlay state
• Integrated SchemaPanel component

LocalBackendCard.module.scss

• Added .SchemaPanelOverlay styles for full-screen modal:
  • Uses React Portal (createPortal) to render at document.body
  • z-index: 9999 ensures overlay above all UI elements
  • Dark backdrop (rgba(0, 0, 0, 0.85))
  • Centered modal with max-width 900px
  • Proper border-radius, shadow, and background styling

Features Implemented

SchemaPanel

• Shows list of all tables in the backend
• Displays table count in header
• Refresh button to reload schema
• Empty state with "Create First Table" prompt (placeholder)
• Close button to dismiss panel

TableRow

• Collapsible rows with expand/collapse toggle
• Table icon with "T" badge
• Shows field count and record count
• Expanded view shows:
  • System columns (objectId, createdAt, updatedAt)
  • User-defined columns with type badges
  • Required indicator
  • Default value display
• Type badges with color-coded data types:
  • String (primary)
  • Number (success/green)
  • Boolean (notice/yellow)
  • Date (purple)
  • Object (pink)
  • Array (indigo)
  • Pointer/Relation (red)
  • GeoPoint (teal)
  • File (orange)

Usage

1. Create and start a local backend
2. Click "Schema" button on the backend card
3. View tables and expand rows to see columns
4. Click "Refresh" to reload schema
5. Click "Close" to dismiss panel

Future Enhancements (Deferred)

The following were scoped but not implemented in this initial version:

• CreateTableModal - For creating new tables
• ColumnEditor - For editing column definitions
• SchemaEditor - Full table editor
• ExportDialog - Export schema to SQL formats (handlers exist in BackendManager)

These can be added incrementally as needed.

Verification

The implementation follows project patterns:

• ✅ Uses theme tokens (no hardcoded colors)
• ✅ Uses IPC pattern from useLocalBackends
• ✅ Proper TypeScript types
• ✅ JSDoc documentation
• ✅ Module SCSS with CSS modules
• ✅ Follows existing component structure

---

Completed: 15/01/2026