mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-12 15:22:55 +01:00
159 lines
5.4 KiB
Markdown
159 lines
5.4 KiB
Markdown
# 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
|
|
|
|
```typescript
|
|
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
|