Forker/OpenNoodl

Fork 0

mirror of https://github.com/The-Low-Code-Foundation/OpenNoodl.git synced 2026-01-12 23:32:55 +01:00

Files

Richard Osborne cfaf78fb15 Finished node canvas UI tweaks. Failed to add connection highlighting

2026-01-01 16:11:21 +01:00

37 KiB

Raw Blame History

TASK-007E: Migration & Export Tools

Overview

Implement tools for migrating data between backends and exporting schemas/data for production deployment. This includes a Parse-to-Local migration wizard and schema export for various production databases.

Parent Task: TASK-007 (Integrated Local Backend) Phase: E (Migration & Export) Effort: 8-10 hours Priority: MEDIUM Depends On: TASK-007A, TASK-007B, TASK-007D

Objectives

Create schema export wizard (PostgreSQL, Supabase, PocketBase, JSON)
Build Parse Server migration wizard for existing Noodl users
Implement data export in multiple formats
Create connection switcher for moving to external backends
Document migration paths clearly

User Stories

Story 1: Export to Production Database

As a developer ready to deploy, I want to export my local schema to PostgreSQL so I can set up my production database.

Story 2: Migrate from Noodl Cloud

As an existing Noodl user, I want to migrate my Parse-based project to the new local backend so I can continue development offline.

Story 3: Move to Supabase

As a developer scaling up, I want to switch from local backend to Supabase while keeping my data and schema intact.

Implementation Steps

Step 1: Export Wizard Component (3 hours)

File: packages/noodl-editor/src/editor/src/views/BackendPanel/ExportWizard.tsx

import React, { useState } from 'react';
import { Dialog } from '@noodl-core-ui/components/layout/Dialog';
import { RadioGroup, Radio } from '@noodl-core-ui/components/inputs/RadioGroup';
import { Checkbox } from '@noodl-core-ui/components/inputs/Checkbox';
import { PrimaryButton } from '@noodl-core-ui/components/inputs/PrimaryButton';
import { SecondaryButton } from '@noodl-core-ui/components/inputs/SecondaryButton';
import { CodeEditor } from '@noodl-core-ui/components/inputs/CodeEditor';
import { IconCopy, IconDownload } from '@noodl-core-ui/components/common/Icon';
import styles from './ExportWizard.module.scss';

type ExportFormat = 'postgres' | 'supabase' | 'pocketbase' | 'json';
type ExportStep = 'options' | 'generating' | 'result';

interface Props {
  backendId: string;
  backendName: string;
  onClose: () => void;
}

export function ExportWizard({ backendId, backendName, onClose }: Props) {
  const [step, setStep] = useState<ExportStep>('options');
  const [format, setFormat] = useState<ExportFormat>('postgres');
  const [includeData, setIncludeData] = useState(false);
  const [includeSampleData, setIncludeSampleData] = useState(false);
  const [result, setResult] = useState<string>('');
  const [error, setError] = useState<string | null>(null);

  const formatOptions = [
    {
      value: 'postgres',
      label: 'PostgreSQL',
      description: 'Standard PostgreSQL DDL statements'
    },
    {
      value: 'supabase',
      label: 'Supabase',
      description: 'PostgreSQL with Row Level Security policies'
    },
    {
      value: 'pocketbase',
      label: 'PocketBase',
      description: 'PocketBase collection schema JSON'
    },
    {
      value: 'json',
      label: 'JSON Schema',
      description: 'Portable JSON schema definition'
    }
  ];

  const handleExport = async () => {
    setStep('generating');
    setError(null);

    try {
      // Get schema
      let schemaResult = await window.electronAPI.backend.exportSchema(
        backendId,
        format
      );

      // Get data if requested
      if (includeData || includeSampleData) {
        const dataFormat = format === 'json' ? 'json' : 'sql';
        const dataResult = await window.electronAPI.backend.exportData(
          backendId,
          dataFormat
        );

        if (includeSampleData && !includeData) {
          // Limit to first 10 records per table
          schemaResult += '\n\n-- SAMPLE DATA (first 10 records per table)\n';
          schemaResult += limitDataToSample(dataResult, 10);
        } else {
          schemaResult += '\n\n-- DATA\n';
          schemaResult += dataResult;
        }
      }

      // Add format-specific headers/comments
      const finalResult = addFormatHeader(schemaResult, format, backendName);

      setResult(finalResult);
      setStep('result');
    } catch (e: any) {
      setError(e.message || 'Export failed');
      setStep('options');
    }
  };

  const handleCopy = async () => {
    await navigator.clipboard.writeText(result);
    // Show toast notification
  };

  const handleDownload = () => {
    const extension = format === 'json' || format === 'pocketbase' ? 'json' : 'sql';
    const filename = `${backendName.toLowerCase().replace(/\s+/g, '-')}-schema.${extension}`;
    const blob = new Blob([result], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    a.click();
    
    URL.revokeObjectURL(url);
  };

  return (
    <Dialog
      title="Export Schema"
      onClose={onClose}
      width={600}
    >
      {step === 'options' && (
        <div className={styles.content}>
          <p className={styles.description}>
            Export your database schema to use with a production database.
            The exported schema can be used to create tables in your target database.
          </p>

          <div className={styles.section}>
            <h4>Export Format</h4>
            <RadioGroup value={format} onChange={(v) => setFormat(v as ExportFormat)}>
              {formatOptions.map(opt => (
                <Radio key={opt.value} value={opt.value}>
                  <div className={styles.radioContent}>
                    <span className={styles.radioLabel}>{opt.label}</span>
                    <span className={styles.radioDesc}>{opt.description}</span>
                  </div>
                </Radio>
              ))}
            </RadioGroup>
          </div>

          <div className={styles.section}>
            <h4>Data Options</h4>
            <Checkbox
              checked={includeData}
              onChange={setIncludeData}
              label="Include all data"
            />
            <p className={styles.hint}>
              Export all records from all tables. Use for full backup or migration.
            </p>
            
            <Checkbox
              checked={includeSampleData}
              onChange={setIncludeSampleData}
              disabled={includeData}
              label="Include sample data (10 records per table)"
            />
            <p className={styles.hint}>
              Export a few records for testing your production setup.
            </p>
          </div>

          {error && (
            <div className={styles.error}>{error}</div>
          )}

          <div className={styles.actions}>
            <SecondaryButton label="Cancel" onClick={onClose} />
            <PrimaryButton label="Generate Export" onClick={handleExport} />
          </div>
        </div>
      )}

      {step === 'generating' && (
        <div className={styles.generating}>
          <div className={styles.spinner} />
          <p>Generating export...</p>
        </div>
      )}

      {step === 'result' && (
        <div className={styles.content}>
          <div className={styles.resultHeader}>
            <h4>Export Complete</h4>
            <div className={styles.resultActions}>
              <SecondaryButton
                label="Copy"
                icon={IconCopy}
                onClick={handleCopy}
              />
              <PrimaryButton
                label="Download"
                icon={IconDownload}
                onClick={handleDownload}
              />
            </div>
          </div>

          <div className={styles.codeContainer}>
            <CodeEditor
              value={result}
              language={format === 'json' || format === 'pocketbase' ? 'json' : 'sql'}
              readOnly
              height={400}
            />
          </div>

          <div className={styles.nextSteps}>
            <h4>Next Steps</h4>
            {format === 'postgres' && (
              <ol>
                <li>Create a PostgreSQL database on your hosting provider</li>
                <li>Run this SQL in your database to create the tables</li>
                <li>Update your project to use the external database connection</li>
              </ol>
            )}
            {format === 'supabase' && (
              <ol>
                <li>Go to your Supabase project's SQL Editor</li>
                <li>Paste and run this SQL to create tables with RLS</li>
                <li>Configure authentication policies as needed</li>
                <li>Update your project to use Supabase as the backend</li>
              </ol>
            )}
            {format === 'pocketbase' && (
              <ol>
                <li>Open PocketBase Admin UI</li>
                <li>Import collections from the JSON file</li>
                <li>Configure API rules as needed</li>
                <li>Update your project to use PocketBase as the backend</li>
              </ol>
            )}
            {format === 'json' && (
              <ol>
                <li>Use this schema definition with any compatible database</li>
                <li>Convert to your target database's DDL format</li>
                <li>Create tables and configure your backend</li>
              </ol>
            )}
          </div>

          <div className={styles.actions}>
            <SecondaryButton label="Export Another" onClick={() => setStep('options')} />
            <PrimaryButton label="Done" onClick={onClose} />
          </div>
        </div>
      )}
    </Dialog>
  );
}

function addFormatHeader(content: string, format: ExportFormat, backendName: string): string {
  const timestamp = new Date().toISOString();
  
  if (format === 'json' || format === 'pocketbase') {
    // For JSON formats, wrap in metadata
    try {
      const parsed = JSON.parse(content);
      return JSON.stringify({
        _meta: {
          exportedFrom: 'Nodegex Local Backend',
          backendName,
          exportedAt: timestamp,
          format
        },
        ...parsed
      }, null, 2);
    } catch {
      return content;
    }
  }

  // For SQL formats
  return `-- ============================================
-- Nodegex Schema Export
-- Backend: ${backendName}
-- Format: ${format.toUpperCase()}
-- Exported: ${timestamp}
-- ============================================

${content}`;
}

function limitDataToSample(data: string, limit: number): string {
  // For SQL inserts, keep only first N per table
  const lines = data.split('\n');
  const counts: Record<string, number> = {};
  
  return lines.filter(line => {
    const match = line.match(/^INSERT INTO "(\w+)"/);
    if (!match) return true;
    
    const table = match[1];
    counts[table] = (counts[table] || 0) + 1;
    return counts[table] <= limit;
  }).join('\n');
}

Step 2: Parse Migration Wizard (3 hours)

File: packages/noodl-editor/src/editor/src/views/Migration/ParseMigrationWizard.tsx

import React, { useState, useEffect } from 'react';
import { Dialog } from '@noodl-core-ui/components/layout/Dialog';
import { PrimaryButton } from '@noodl-core-ui/components/inputs/PrimaryButton';
import { SecondaryButton } from '@noodl-core-ui/components/inputs/SecondaryButton';
import { ProgressBar } from '@noodl-core-ui/components/feedback/ProgressBar';
import { TextInput } from '@noodl-core-ui/components/inputs/TextInput';
import { Checkbox } from '@noodl-core-ui/components/inputs/Checkbox';
import styles from './ParseMigrationWizard.module.scss';

type MigrationStep = 'connect' | 'review' | 'migrate' | 'complete' | 'error';

interface ParseConfig {
  endpoint: string;
  appId: string;
  masterKey?: string;
}

interface TablePreview {
  className: string;
  recordCount: number;
  fields: string[];
  selected: boolean;
}

interface Props {
  projectId: string;
  existingParseConfig?: ParseConfig;
  onComplete: (newBackendId: string) => void;
  onCancel: () => void;
}

export function ParseMigrationWizard({ 
  projectId, 
  existingParseConfig, 
  onComplete, 
  onCancel 
}: Props) {
  const [step, setStep] = useState<MigrationStep>('connect');
  const [parseConfig, setParseConfig] = useState<ParseConfig>(
    existingParseConfig || { endpoint: '', appId: '', masterKey: '' }
  );
  const [tables, setTables] = useState<TablePreview[]>([]);
  const [migrateData, setMigrateData] = useState(true);
  const [progress, setProgress] = useState(0);
  const [progressMessage, setProgressMessage] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [newBackendId, setNewBackendId] = useState<string | null>(null);

  // Step 1: Connect and fetch schema
  const handleConnect = async () => {
    setError(null);
    
    try {
      // Validate connection
      const schemaResponse = await fetch(`${parseConfig.endpoint}/schemas`, {
        headers: {
          'X-Parse-Application-Id': parseConfig.appId,
          'X-Parse-Master-Key': parseConfig.masterKey || '',
        }
      });

      if (!schemaResponse.ok) {
        throw new Error('Failed to connect to Parse Server. Check your credentials.');
      }

      const schemaData = await schemaResponse.json();
      
      // Get record counts for each class
      const tablesPreviews: TablePreview[] = [];
      
      for (const cls of schemaData.results || []) {
        // Skip internal Parse classes
        if (cls.className.startsWith('_') && cls.className !== '_User') {
          continue;
        }

        const countResponse = await fetch(
          `${parseConfig.endpoint}/classes/${cls.className}?count=1&limit=0`,
          {
            headers: {
              'X-Parse-Application-Id': parseConfig.appId,
              'X-Parse-Master-Key': parseConfig.masterKey || '',
            }
          }
        );
        
        const countData = await countResponse.json();
        
        tablesPreviews.push({
          className: cls.className,
          recordCount: countData.count || 0,
          fields: Object.keys(cls.fields || {}).filter(
            f => !['objectId', 'createdAt', 'updatedAt', 'ACL'].includes(f)
          ),
          selected: true
        });
      }

      setTables(tablesPreviews);
      setStep('review');
    } catch (e: any) {
      setError(e.message);
    }
  };

  // Step 2: Start migration
  const handleStartMigration = async () => {
    setStep('migrate');
    setProgress(0);
    setError(null);

    try {
      // Create new local backend
      setProgressMessage('Creating local backend...');
      const backend = await window.electronAPI.backend.create(
        `Migrated from ${parseConfig.appId}`
      );
      setNewBackendId(backend.id);
      setProgress(5);

      // Start the backend
      setProgressMessage('Starting backend...');
      await window.electronAPI.backend.start(backend.id);
      setProgress(10);

      // Get selected tables
      const selectedTables = tables.filter(t => t.selected);
      const totalTables = selectedTables.length;
      
      // Fetch and migrate schema
      setProgressMessage('Fetching schema...');
      const schemaResponse = await fetch(`${parseConfig.endpoint}/schemas`, {
        headers: {
          'X-Parse-Application-Id': parseConfig.appId,
          'X-Parse-Master-Key': parseConfig.masterKey || '',
        }
      });
      const schemaData = await schemaResponse.json();
      
      const selectedSchema = schemaData.results.filter((cls: any) =>
        selectedTables.some(t => t.className === cls.className)
      );

      setProgressMessage('Creating tables...');
      await window.electronAPI.invoke('backend:import-parse-schema', {
        backendId: backend.id,
        schema: selectedSchema
      });
      setProgress(20);

      // Migrate data if requested
      if (migrateData) {
        let completedTables = 0;
        let totalRecordsMigrated = 0;

        for (const table of selectedTables) {
          setProgressMessage(`Migrating ${table.className}...`);
          
          // Fetch in batches
          let skip = 0;
          const batchSize = 100;
          
          while (skip < table.recordCount) {
            const response = await fetch(
              `${parseConfig.endpoint}/classes/${table.className}?limit=${batchSize}&skip=${skip}`,
              {
                headers: {
                  'X-Parse-Application-Id': parseConfig.appId,
                  'X-Parse-Master-Key': parseConfig.masterKey || '',
                }
              }
            );
            
            const data = await response.json();
            
            if (data.results?.length > 0) {
              await window.electronAPI.invoke('backend:import-records', {
                backendId: backend.id,
                collection: table.className,
                records: data.results
              });
              
              totalRecordsMigrated += data.results.length;
            }
            
            skip += batchSize;
            
            // Update progress
            const tableProgress = Math.min(skip, table.recordCount) / table.recordCount;
            const overallProgress = 20 + (
              (completedTables + tableProgress) / totalTables * 70
            );
            setProgress(Math.round(overallProgress));
          }
          
          completedTables++;
        }

        setProgressMessage(`Migrated ${totalRecordsMigrated} records`);
      }

      setProgress(100);
      setStep('complete');
    } catch (e: any) {
      setError(e.message);
      setStep('error');
    }
  };

  const toggleTableSelection = (className: string) => {
    setTables(tables.map(t =>
      t.className === className ? { ...t, selected: !t.selected } : t
    ));
  };

  const totalRecords = tables
    .filter(t => t.selected)
    .reduce((sum, t) => sum + t.recordCount, 0);

  return (
    <Dialog
      title="Migrate from Parse Server"
      onClose={onCancel}
      width={600}
    >
      {step === 'connect' && (
        <div className={styles.content}>
          <p className={styles.description}>
            Migrate your existing Parse Server data to a local backend.
            This will create a new local backend with all your data.
          </p>

          <div className={styles.form}>
            <div className={styles.field}>
              <label>Parse Server URL</label>
              <TextInput
                value={parseConfig.endpoint}
                onChange={(v) => setParseConfig({ ...parseConfig, endpoint: v })}
                placeholder="https://your-parse-server.com/parse"
              />
            </div>

            <div className={styles.field}>
              <label>Application ID</label>
              <TextInput
                value={parseConfig.appId}
                onChange={(v) => setParseConfig({ ...parseConfig, appId: v })}
                placeholder="your-app-id"
              />
            </div>

            <div className={styles.field}>
              <label>Master Key (optional, required for full export)</label>
              <TextInput
                value={parseConfig.masterKey || ''}
                onChange={(v) => setParseConfig({ ...parseConfig, masterKey: v })}
                placeholder="your-master-key"
                type="password"
              />
            </div>
          </div>

          {error && <div className={styles.error}>{error}</div>}

          <div className={styles.actions}>
            <SecondaryButton label="Cancel" onClick={onCancel} />
            <PrimaryButton 
              label="Connect & Scan" 
              onClick={handleConnect}
              disabled={!parseConfig.endpoint || !parseConfig.appId}
            />
          </div>
        </div>
      )}

      {step === 'review' && (
        <div className={styles.content}>
          <p className={styles.description}>
            Select the tables you want to migrate. Uncheck any tables you want to skip.
          </p>

          <div className={styles.tableList}>
            {tables.map(table => (
              <div key={table.className} className={styles.tableRow}>
                <Checkbox
                  checked={table.selected}
                  onChange={() => toggleTableSelection(table.className)}
                />
                <div className={styles.tableInfo}>
                  <span className={styles.tableName}>{table.className}</span>
                  <span className={styles.tableCount}>
                    {table.recordCount.toLocaleString()} records
                  </span>
                </div>
                <div className={styles.tableFields}>
                  {table.fields.slice(0, 5).join(', ')}
                  {table.fields.length > 5 && ` +${table.fields.length - 5} more`}
                </div>
              </div>
            ))}
          </div>

          <div className={styles.options}>
            <Checkbox
              checked={migrateData}
              onChange={setMigrateData}
              label="Migrate data (recommended)"
            />
            <p className={styles.hint}>
              If unchecked, only the schema will be migrated, tables will be empty.
            </p>
          </div>

          <div className={styles.summary}>
            <strong>Summary:</strong> {tables.filter(t => t.selected).length} tables, {' '}
            {migrateData ? `${totalRecords.toLocaleString()} records` : 'schema only'}
          </div>

          <div className={styles.actions}>
            <SecondaryButton label="Back" onClick={() => setStep('connect')} />
            <PrimaryButton 
              label="Start Migration" 
              onClick={handleStartMigration}
              disabled={tables.filter(t => t.selected).length === 0}
            />
          </div>
        </div>
      )}

      {step === 'migrate' && (
        <div className={styles.migrating}>
          <div className={styles.progressSection}>
            <ProgressBar value={progress} max={100} />
            <p className={styles.progressMessage}>{progressMessage}</p>
            <p className={styles.progressPercent}>{progress}%</p>
          </div>
          <p className={styles.warning}>
            Please don't close this window until migration is complete.
          </p>
        </div>
      )}

      {step === 'complete' && (
        <div className={styles.complete}>
          <div className={styles.successIcon}>✓</div>
          <h3>Migration Complete!</h3>
          <p>
            Your data has been successfully migrated to a new local backend.
            You can now use this backend with your project.
          </p>
          <div className={styles.actions}>
            <PrimaryButton 
              label="Use New Backend" 
              onClick={() => onComplete(newBackendId!)}
            />
          </div>
        </div>
      )}

      {step === 'error' && (
        <div className={styles.errorState}>
          <div className={styles.errorIcon}>⚠</div>
          <h3>Migration Failed</h3>
          <p className={styles.errorMessage}>{error}</p>
          <div className={styles.actions}>
            <SecondaryButton label="Cancel" onClick={onCancel} />
            <PrimaryButton 
              label="Retry" 
              onClick={() => setStep('review')}
            />
          </div>
        </div>
      )}
    </Dialog>
  );
}

Step 3: Connection Switcher (2 hours)

File: packages/noodl-editor/src/editor/src/views/BackendPanel/ConnectionSwitcher.tsx

import React, { useState } from 'react';
import { Dialog } from '@noodl-core-ui/components/layout/Dialog';
import { RadioGroup, Radio } from '@noodl-core-ui/components/inputs/RadioGroup';
import { TextInput } from '@noodl-core-ui/components/inputs/TextInput';
import { PrimaryButton } from '@noodl-core-ui/components/inputs/PrimaryButton';
import { SecondaryButton } from '@noodl-core-ui/components/inputs/SecondaryButton';
import styles from './ConnectionSwitcher.module.scss';

type BackendType = 'local' | 'supabase' | 'pocketbase' | 'custom';

interface Props {
  projectId: string;
  currentBackend: {
    type: string;
    id?: string;
    endpoint?: string;
  };
  onSwitch: (config: any) => Promise<void>;
  onClose: () => void;
}

export function ConnectionSwitcher({ projectId, currentBackend, onSwitch, onClose }: Props) {
  const [backendType, setBackendType] = useState<BackendType>(
    currentBackend.type as BackendType || 'local'
  );
  const [config, setConfig] = useState({
    localBackendId: currentBackend.id || '',
    supabaseUrl: '',
    supabaseKey: '',
    pocketbaseUrl: '',
    customEndpoint: '',
    customApiKey: ''
  });
  const [testing, setTesting] = useState(false);
  const [testResult, setTestResult] = useState<'success' | 'error' | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [localBackends, setLocalBackends] = useState<any[]>([]);

  React.useEffect(() => {
    loadLocalBackends();
  }, []);

  const loadLocalBackends = async () => {
    try {
      const backends = await window.electronAPI.backend.list();
      setLocalBackends(backends);
    } catch (e) {
      console.error('Failed to load backends:', e);
    }
  };

  const handleTest = async () => {
    setTesting(true);
    setTestResult(null);
    setError(null);

    try {
      let testEndpoint = '';
      let testHeaders: Record<string, string> = {};

      switch (backendType) {
        case 'local':
          const backend = localBackends.find(b => b.id === config.localBackendId);
          if (!backend) throw new Error('Select a local backend');
          
          const status = await window.electronAPI.backend.status(backend.id);
          if (!status.running) {
            await window.electronAPI.backend.start(backend.id);
          }
          testEndpoint = `http://localhost:${status.port || backend.port}/health`;
          break;

        case 'supabase':
          testEndpoint = `${config.supabaseUrl}/rest/v1/`;
          testHeaders = {
            'apikey': config.supabaseKey,
            'Authorization': `Bearer ${config.supabaseKey}`
          };
          break;

        case 'pocketbase':
          testEndpoint = `${config.pocketbaseUrl}/api/health`;
          break;

        case 'custom':
          testEndpoint = config.customEndpoint;
          if (config.customApiKey) {
            testHeaders = { 'Authorization': `Bearer ${config.customApiKey}` };
          }
          break;
      }

      const response = await fetch(testEndpoint, { headers: testHeaders });
      
      if (response.ok) {
        setTestResult('success');
      } else {
        throw new Error(`Connection failed: ${response.status}`);
      }
    } catch (e: any) {
      setTestResult('error');
      setError(e.message);
    } finally {
      setTesting(false);
    }
  };

  const handleSwitch = async () => {
    try {
      let newConfig: any;

      switch (backendType) {
        case 'local':
          newConfig = {
            type: 'local',
            id: config.localBackendId
          };
          break;

        case 'supabase':
          newConfig = {
            type: 'supabase',
            endpoint: config.supabaseUrl,
            apiKey: config.supabaseKey
          };
          break;

        case 'pocketbase':
          newConfig = {
            type: 'pocketbase',
            endpoint: config.pocketbaseUrl
          };
          break;

        case 'custom':
          newConfig = {
            type: 'custom',
            endpoint: config.customEndpoint,
            apiKey: config.customApiKey
          };
          break;
      }

      await onSwitch(newConfig);
      onClose();
    } catch (e: any) {
      setError(e.message);
    }
  };

  return (
    <Dialog
      title="Switch Backend"
      onClose={onClose}
      width={500}
    >
      <div className={styles.content}>
        <p className={styles.description}>
          Switch your project to use a different backend. Your frontend code
          will continue to work with the new backend.
        </p>

        <div className={styles.section}>
          <h4>Backend Type</h4>
          <RadioGroup value={backendType} onChange={(v) => setBackendType(v as BackendType)}>
            <Radio value="local">
              <div className={styles.radioContent}>
                <span className={styles.radioLabel}>Local Backend</span>
                <span className={styles.radioDesc}>SQLite database running locally</span>
              </div>
            </Radio>
            <Radio value="supabase">
              <div className={styles.radioContent}>
                <span className={styles.radioLabel}>Supabase</span>
                <span className={styles.radioDesc}>PostgreSQL with realtime and auth</span>
              </div>
            </Radio>
            <Radio value="pocketbase">
              <div className={styles.radioContent}>
                <span className={styles.radioLabel}>PocketBase</span>
                <span className={styles.radioDesc}>Lightweight Go backend</span>
              </div>
            </Radio>
            <Radio value="custom">
              <div className={styles.radioContent}>
                <span className={styles.radioLabel}>Custom REST API</span>
                <span className={styles.radioDesc}>Any REST-compatible backend</span>
              </div>
            </Radio>
          </RadioGroup>
        </div>

        <div className={styles.config}>
          {backendType === 'local' && (
            <div className={styles.field}>
              <label>Select Backend</label>
              <select
                value={config.localBackendId}
                onChange={(e) => setConfig({ ...config, localBackendId: e.target.value })}
                className={styles.select}
              >
                <option value="">Choose a backend...</option>
                {localBackends.map(b => (
                  <option key={b.id} value={b.id}>{b.name}</option>
                ))}
              </select>
            </div>
          )}

          {backendType === 'supabase' && (
            <>
              <div className={styles.field}>
                <label>Supabase URL</label>
                <TextInput
                  value={config.supabaseUrl}
                  onChange={(v) => setConfig({ ...config, supabaseUrl: v })}
                  placeholder="https://your-project.supabase.co"
                />
              </div>
              <div className={styles.field}>
                <label>API Key (anon/public)</label>
                <TextInput
                  value={config.supabaseKey}
                  onChange={(v) => setConfig({ ...config, supabaseKey: v })}
                  placeholder="your-anon-key"
                  type="password"
                />
              </div>
            </>
          )}

          {backendType === 'pocketbase' && (
            <div className={styles.field}>
              <label>PocketBase URL</label>
              <TextInput
                value={config.pocketbaseUrl}
                onChange={(v) => setConfig({ ...config, pocketbaseUrl: v })}
                placeholder="http://127.0.0.1:8090"
              />
            </div>
          )}

          {backendType === 'custom' && (
            <>
              <div className={styles.field}>
                <label>API Endpoint</label>
                <TextInput
                  value={config.customEndpoint}
                  onChange={(v) => setConfig({ ...config, customEndpoint: v })}
                  placeholder="https://api.example.com"
                />
              </div>
              <div className={styles.field}>
                <label>API Key (optional)</label>
                <TextInput
                  value={config.customApiKey}
                  onChange={(v) => setConfig({ ...config, customApiKey: v })}
                  placeholder="your-api-key"
                  type="password"
                />
              </div>
            </>
          )}
        </div>

        {testResult === 'success' && (
          <div className={styles.success}>✓ Connection successful</div>
        )}

        {error && (
          <div className={styles.error}>{error}</div>
        )}

        <div className={styles.actions}>
          <SecondaryButton
            label={testing ? 'Testing...' : 'Test Connection'}
            onClick={handleTest}
            disabled={testing}
          />
          <div className={styles.spacer} />
          <SecondaryButton label="Cancel" onClick={onClose} />
          <PrimaryButton
            label="Switch Backend"
            onClick={handleSwitch}
            disabled={testResult !== 'success'}
          />
        </div>
      </div>
    </Dialog>
  );
}

Step 4: Project Open Migration Prompt (2 hours)

File: packages/noodl-editor/src/editor/src/views/Migration/BackendMigrationPrompt.tsx

import React from 'react';
import { Dialog } from '@noodl-core-ui/components/layout/Dialog';
import { PrimaryButton } from '@noodl-core-ui/components/inputs/PrimaryButton';
import { SecondaryButton } from '@noodl-core-ui/components/inputs/SecondaryButton';
import styles from './BackendMigrationPrompt.module.scss';

interface Props {
  projectName: string;
  parseConfig: {
    endpoint: string;
    appId: string;
  };
  onContinueWithParse: () => void;
  onMigrateToLocal: () => void;
  onDismiss: () => void;
}

export function BackendMigrationPrompt({
  projectName,
  parseConfig,
  onContinueWithParse,
  onMigrateToLocal,
  onDismiss
}: Props) {
  return (
    <Dialog
      title="Backend Options"
      onClose={onDismiss}
      width={500}
    >
      <div className={styles.content}>
        <div className={styles.icon}>⚡</div>
        
        <h3>New Local Backend Available</h3>
        
        <p>
          <strong>{projectName}</strong> is currently using a Parse Server backend.
          You can now use a local backend for faster development and offline support.
        </p>

        <div className={styles.comparison}>
          <div className={styles.option}>
            <h4>🌐 Continue with Parse</h4>
            <ul>
              <li>Keep using {parseConfig.endpoint}</li>
              <li>No changes to your data</li>
              <li>Requires internet connection</li>
            </ul>
          </div>

          <div className={styles.option}>
            <h4>💻 Migrate to Local</h4>
            <ul>
              <li>Works offline</li>
              <li>Faster development</li>
              <li>Easy export to production</li>
              <li>Free (no cloud costs)</li>
            </ul>
          </div>
        </div>

        <div className={styles.actions}>
          <SecondaryButton
            label="Continue with Parse"
            onClick={onContinueWithParse}
          />
          <PrimaryButton
            label="Migrate to Local"
            onClick={onMigrateToLocal}
          />
        </div>

        <div className={styles.footer}>
          <button className={styles.link} onClick={onDismiss}>
            Don't show this again for this project
          </button>
        </div>
      </div>
    </Dialog>
  );
}

Files to Create

packages/noodl-editor/src/editor/src/views/BackendPanel/
├── ExportWizard.tsx
├── ExportWizard.module.scss
├── ConnectionSwitcher.tsx
└── ConnectionSwitcher.module.scss

packages/noodl-editor/src/editor/src/views/Migration/
├── ParseMigrationWizard.tsx
├── ParseMigrationWizard.module.scss
├── BackendMigrationPrompt.tsx
└── BackendMigrationPrompt.module.scss

Files to Modify

packages/noodl-editor/src/editor/src/models/projectmodel.ts
  - Add backend migration check on project open

packages/noodl-editor/src/editor/src/views/Launcher/BackendManager/BackendCard.tsx
  - Add export button that opens ExportWizard

Testing Checklist

Export Wizard

PostgreSQL export generates valid DDL
Supabase export includes RLS policies
PocketBase export creates valid JSON
JSON schema is portable
Data export works for all formats
Sample data limiting works
Copy to clipboard works
Download works with correct filename

Parse Migration

Connection validation works
Schema fetching succeeds
Table selection works
Progress tracking is accurate
Data migration preserves all records
Error handling shows useful messages
Can retry after failure

Connection Switcher

Local backend selection works
Supabase connection test works
PocketBase connection test works
Custom endpoint test works
Backend switch persists in project

Migration Prompt

Shows for Parse-based projects
"Don't show again" works
Links to migration wizard
Continue with Parse works

Success Criteria

Users can export schema to any supported format
Parse migration preserves 100% of data
Connection switching is seamless
Clear guidance at each step
Error recovery is possible

Dependencies

Internal:

TASK-007A (LocalSQLAdapter - for schema/data export)
TASK-007B (BackendManager - IPC handlers)
TASK-007D (UI components)

Blocks:

None (enables production deployment)

Estimated Session Breakdown

Session	Focus	Hours
1	Export Wizard	3
2	Parse Migration Wizard	3
3	Connection Switcher + Prompt	3
Total		9

37 KiB Raw Blame History