Guides
Mock Data Guide
Implementing the Data Seeder UI.
Frontend Guide: Data Seeder
This guide outlines how to build the frontend interface for the Data Seeding feature.
1. Trigger
Add a context menu item to the Sidebar Table node:
- Label: "Generate Mock Data"
- Icon:
Wand2(Lucide) - Action: Open
<DataSeederModal />
2. Component State (DataSeederModal)
interface SeederState {
rowCount: number // default 100
preview: Record<string, any>[] // Fetched via 'preview_seed' command if available, or generated locally?
isGenerating: boolean
}Since the backend does the generation, we might just fire-and-forget for the MVP.
3. Backend Integration
Call the seed_table command (to be implemented).
import { invoke } from '@tauri-apps/api/core'
import { toast } from 'sonner'
async function handleSeed(connectionId: string, table: string, count: number) {
try {
await invoke('seed_table', {
connection_id: connectionId,
table_name: table,
count
})
toast.success(`Successfully added ${count} rows to ${table}`)
} catch (error) {
toast.error('Failed to seed data')
console.error(error)
}
}4. Improvements
For a better UX without a dedicated preview command:
- Fetch table schema using
get_database_schema. - Display column names that will be populated.
- Show a warning "This will insert data into [Table]".