OpenNoodl/dev-docs/tasks/phase-5-multi-target-deployment/01-byob-backend/TASK-003-schema-viewer/README.md

TASK-003: Schema Viewer Component

Task ID: TASK-003
Phase: 5 - Multi-Target Deployment (BYOB)
Priority: 🟡 Medium
Difficulty: 🟢 Easy
Estimated Time: 2-3 days
Prerequisites: TASK-001 (Backend Services Panel)
Branch: feature/byob-schema-viewer

Objective

Create a dedicated Schema Viewer component that displays the cached schema from connected backends in an interactive, collapsible tree view.

Background

TASK-001 implemented basic schema introspection, but the current UI only shows collection names in a simple list. Users need to:

• See all fields in each collection
• Understand field types and constraints
• Easily copy field names for use in nodes
• Refresh schema when backend changes

User Story

As a Noodl user, I want to browse my backend's data schema visually, so I can understand what data is available and use correct field names.

Current State

• Schema is fetched and cached (TASK-001 ✅)
• Only collection names shown in Backend Services Panel
• No field details visible
• No way to copy field paths

Desired State

• Expandable tree view of collections → fields
• Field type icons and badges
• Copy field path on click
• Relation indicators
• Search/filter collections
• Refresh button

UI Design

┌─────────────────────────────────────────────────────────────────────┐
│ SCHEMA BROWSER                              [🔍 Search] [↻ Refresh] │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│ ▼ users (12 fields)                                                 │
│   ├─ 🔑 id (uuid) PRIMARY                                           │
│   ├─ 📧 email (email) REQUIRED UNIQUE                               │
│   ├─ 📝 name (string)                                               │
│   ├─ 🖼️ avatar (image)                                              │
│   ├─ 🔗 role → roles (relation-one)                                 │
│   ├─ 📅 created_at (datetime) READ-ONLY                             │
│   └─ 📅 updated_at (datetime) READ-ONLY                             │
│                                                                     │
│ ▶ posts (8 fields)                                                  │
│ ▶ comments (6 fields)                                               │
│ ▶ categories (4 fields)                                             │
│ ▶ media (7 fields)                                                  │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

Features

1. Collapsible Tree Structure

• Collections at root level
• Fields as children
• Expand/collapse with animation
• "Expand All" / "Collapse All" buttons

2. Field Information Display

Each field shows:

• Name
• Type (with icon)
• Constraints (REQUIRED, UNIQUE, PRIMARY)
• Default value (if set)
• Relation target (for relation fields)

3. Field Type Icons

Type	Icon	Color
string	📝	default
text	📄	default
number/integer	🔢	blue
boolean	✅	green
datetime	📅	purple
email	📧	blue
url	🔗	blue
image/file	🖼️	orange
relation	🔗	cyan
json	{}	gray
uuid	🔑	yellow

4. Copy Field Path

• Click on field name → copies to clipboard
• For nested paths: collection.field
• Toast notification: "Copied: author.name"

5. Search/Filter

• Filter collections by name
• Filter fields within collections
• Highlight matching text

6. Refresh Schema

• Manual refresh button
• Shows last synced timestamp
• Loading indicator during refresh

Implementation

File Structure

packages/noodl-editor/src/editor/src/views/panels/BackendServicesPanel/
├── SchemaViewer/
│   ├── SchemaViewer.tsx           # Main component
│   ├── SchemaViewer.module.scss
│   ├── CollectionTree.tsx         # Collection list
│   ├── FieldRow.tsx               # Single field display
│   ├── FieldTypeIcon.tsx          # Type icon component
│   └── types.ts

Component API

interface SchemaViewerProps {
  backend: BackendConfig;
  onRefresh: () => Promise<void>;
}

Integration Point

The SchemaViewer should be embedded in the BackendServicesPanel, shown when a backend is selected or expanded.

Success Criteria

• Tree view displays all collections from schema
• Fields expand/collapse per collection
• Field types shown with appropriate icons
• Constraints (REQUIRED, UNIQUE) visible
• Click to copy field path works
• Search filters collections and fields
• Refresh button fetches fresh schema
• Last synced timestamp displayed