d1s 0.2.10 → 0.2.12

package/src/components/environment-handler.jsx

@@ -1,332 +0,0 @@
-// components/environemtn-handler.jsx
-"use client";
-
-import { useState } from "react";
-import { useToast } from "@/hooks/use-toast";
-import { useDatabase } from "@/context/database-context";
-import PushPreviewToast from "./push-preview-toast";
-import PullPreviewToast from "./pull-preview-toast";
-
-const ErrorTypes = {
-  FOREIGN_KEY_ERROR: "FOREIGN_KEY_ERROR",
-  TABLE_EXISTS: "TABLE_EXISTS",
-  CONNECTION_ERROR: "CONNECTION_ERROR",
-  CONFIG_ERROR: "CONFIG_ERROR",
-  PULL_ERROR: "PULL_ERROR"
-};
-
-export function useEnvironmentController() {
-  const [isConnecting, setIsConnecting] = useState(false);
-  const [isPushing, setIsPushing] = useState(false);
-  // New state for data pull status
-  const [isDataPulling, setIsDataPulling] = useState(false);
-  const [showPreview, setShowPreview] = useState(false);
-  const [previewData, setPreviewData] = useState(null);
-  const [previewError, setPreviewError] = useState(null);
-  const [previewType, setPreviewType] = useState(null);
-  const [previewSuccess, setPreviewSuccess] = useState(null);
-  const [environment, setEnvironment] = useState('local');
-  const { toast } = useToast();
-  const { refreshTables } = useDatabase();
-
-  const clearPreviewState = () => {
-    setShowPreview(false);
-    setPreviewData(null);
-    setPreviewError(null);
-    setPreviewType(null);
-    setPreviewSuccess(null);
-  };
-
-  // Validate stored credentials
-  const validateStoredCredentials = async () => {
-    const storedCreds = localStorage.getItem("cf_credentials");
-    if (!storedCreds) return null;
-    try {
-      const credentials = JSON.parse(storedCreds);
-      const response = await fetch("/api/cloudflare", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(credentials)
-      });
-      if (!response.ok) throw new Error("Invalid stored credentials");
-      const data = await response.json();
-      return { ...credentials, databaseId: data.database.id };
-    } catch (error) {
-      console.error("Failed to validate stored credentials:", error);
-      localStorage.removeItem("cf_credentials");
-      return null;
-    }
-  };
-
-  // Push to remote preview
-  const pushToRemote = async () => {
-    try {
-      setPreviewType("push");
-      setShowPreview(true);
-      setIsPushing(true);
-      setPreviewError(null);
-      setPreviewSuccess(null);
-      setPreviewData({ preview: [] }); // show loading state
-      
-      const credentials = await validateStoredCredentials();
-      if (!credentials) throw new Error('No valid credentials found');
-      
-      const response = await fetch('/api/push-remote/preview', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(credentials)
-      });
-      
-      const data = await response.json();
-      if (!data.success) {
-        throw new Error(data.error?.message || 'Failed to generate preview');
-      }
-      
-      setPreviewData(data.details.details);
-    } catch (error) {
-      console.error('Push to remote preview failed:', error);
-      setPreviewError(error);
-      toast({
-        title: "Preview Failed",
-        description: error.message || 'Failed to generate preview',
-        variant: "destructive",
-      });
-    } finally {
-      setIsPushing(false);
-    }
-  };
-
-  // Update the confirmPush function:
-  const confirmPush = async () => {
-    try {
-      setIsPushing(true);
-      setPreviewError(null);
-      setPreviewSuccess(null);
-      
-      const credentials = await validateStoredCredentials();
-      if (!credentials) throw new Error("No valid credentials found");
-  
-      const response = await fetch("/api/push-remote/confirm", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(credentials)
-      });
-      
-      const data = await response.json();
-      if (!data.success) {
-        throw new Error(data.error?.message || 'Failed to confirm push');
-      }
-  
-      // Update the preview data to show applied status
-      setPreviewData(prev => ({
-        ...prev,
-        preview: prev.preview.map(item => ({
-          ...item,
-          action: item.action === 'will be applied' ? 'applied' : item.action
-        }))
-      }));
-  
-      setPreviewSuccess(`Applied ${data.details.applied} migration(s), skipped ${data.details.skipped}.`);
-      
-      // Reset environment after success
-      setEnvironment('local');
-    } catch (error) {
-      console.error("Push to remote confirm failed:", error);
-      setPreviewError(error);
-      // Reset environment after error
-      setEnvironment('local');
-    } finally {
-      setIsPushing(false);
-    }
-  };
-
-  // Pull to remote preview
-  const pullToRemotePreview = async () => {
-    try {
-      setPreviewType("pull");
-      setShowPreview(true);
-      setIsPushing(true);
-      setPreviewError(null);
-      setPreviewSuccess(null);
-      setPreviewData({ preview: [] }); // show loading state
-
-      const credentials = await validateStoredCredentials();
-      if (!credentials) throw new Error("No valid credentials found");
-      
-      const response = await fetch('/api/pull-remote/preview', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(credentials)
-      });
-      const data = await response.json();
-      if (!data.success) {
-        throw new Error(data.error?.message || 'Failed to generate pull preview');
-      }
-      setPreviewData(data.details);
-    } catch (error) {
-      console.error('Pull to remote preview failed:', error);
-      setPreviewError(error);
-      toast({
-        title: "Preview Failed",
-        description: error.message || 'Failed to generate pull preview',
-        variant: "destructive",
-      });
-    } finally {
-      setIsPushing(false);
-    }
-  };
-
-  // In confirmPull function, add environment reset:
-  const confirmPull = async () => {
-    try {
-      setIsPushing(true);
-      setEnvironment('pull'); // Ensure correct state during pull
-      setPreviewError(null);
-      setPreviewSuccess(null);
-      
-      const credentials = await validateStoredCredentials();
-      if (!credentials) throw new Error("No valid credentials found");
-  
-      const response = await fetch("/api/pull-remote/confirm", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(credentials)
-      });
-      
-      const data = await response.json();
-      if (!data.success) {
-        throw new Error(data.error?.message || 'Failed to confirm pull');
-      }
-  
-      setPreviewSuccess(`Pull migrations applied successfully.`);
-      
-      setPreviewData(prev => ({
-        ...prev,
-        preview: prev.preview.map(item => ({
-          ...item,
-          action: item.action === 'will be applied' ? 'applied' : item.action
-        }))
-      }));
-  
-      await refreshTables();
-      
-    } catch (error) {
-      console.error("Pull to remote confirm failed:", error);
-      setPreviewError(error);
-    } finally {
-      setIsPushing(false);
-      setEnvironment('local'); // Reset to local regardless of success/failure
-    }
-  };
-
-    // In confirmDataPull function, add syncing state:
-    const confirmDataPull = async () => {
-      try {
-        setIsDataPulling(true);
-        setEnvironment('syncing'); // Set environment to syncing during data pull
-        setPreviewError(null);
-        setPreviewSuccess(null);
-        
-        const credentials = await validateStoredCredentials();
-        if (!credentials) throw new Error("No valid credentials found");
-    
-        const response = await fetch("/api/pull-data/confirm", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(credentials)
-        });
-        
-        const data = await response.json();
-        if (!data.success) {
-          throw new Error(data.error?.message || 'Failed to confirm data pull');
-        }
-    
-        setPreviewSuccess("Remote data synced successfully.");
-        await refreshTables();
-        
-      } catch (error) {
-        console.error("Data pull confirm failed:", error);
-        setPreviewError(error);
-      } finally {
-        setIsDataPulling(false);
-        setEnvironment('local'); // Reset to local regardless of success/failure
-      }
-    };
-
-  // Connect to Cloudflare
-  async function connectToCloudflare(credentials) {
-    try {
-      setIsConnecting(true);
-      const response = await fetch("/api/cloudflare", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(credentials)
-      });
-      const data = await response.json();
-      if (!response.ok) throw new Error(data.error || "Failed to connect to Cloudflare");
-      localStorage.setItem("cf_credentials", JSON.stringify({
-        ...credentials,
-        databaseId: data.database.id
-      }));
-      toast({
-        title: "Connected to Cloudflare",
-        description: `Connected to database: ${data.database.name}`,
-        variant: "default"
-      });
-    } catch (error) {
-      toast({
-        title: "Connection Failed",
-        description: error.message || "Failed to connect to Cloudflare",
-        variant: "destructive"
-      });
-      throw error;
-    } finally {
-      setIsConnecting(false);
-    }
-  }
-
-  // Update PreviewUI to pass onDataPull and isDataPulling for pull previews.
-  const PreviewUI = showPreview && (
-    previewType === "pull" ? (
-      <PullPreviewToast
-        preview={previewData?.preview || []}
-        onConfirm={confirmPull}
-        onDataPull={confirmDataPull} // pass the new data pull handler
-        onCancel={clearPreviewState}
-        isConfirming={isPushing}
-        isDataPulling={isDataPulling}
-        error={previewError}
-        success={previewSuccess}
-        isLoading={isPushing && !previewData?.preview?.length}
-      />
-    ) : (
-      <PushPreviewToast
-        preview={previewData?.preview || []}
-        onConfirm={confirmPush}
-        onCancel={clearPreviewState}
-        isConfirming={isPushing}
-        error={previewError}
-        success={previewSuccess}
-        isLoading={isPushing && !previewData?.preview?.length}
-      />
-    )
-  );
-
-  return {
-    isConnecting,
-    isPushing,
-    isDataPulling,
-    showPreview,
-    previewError,
-    environment, // Add this
-    setEnvironment, // Add this if needed
-    pushToRemote,
-    pullToRemotePreview,
-    confirmPull,
-    confirmDataPull, // export the new function
-    connectToCloudflare,
-    validateStoredCredentials,
-    PreviewUI
-  };
-}
-

package/src/components/environment-select.jsx

@@ -1,62 +0,0 @@
-import { 
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from '@/components/ui/select';
-import { HardDrive, Download, Upload, Loader2 } from 'lucide-react';
-
-export function EnvironmentSelect({ 
-  value, 
-  onValueChange, 
-  isLoading, 
-  disabled,
-  showPreview
-}) {
-  return (
-    <Select
-      value={value}
-      onValueChange={onValueChange}
-      disabled={disabled || isLoading || showPreview}
-    >
-      <SelectTrigger className="w-full bg-white border-neutral-200 font-medium">
-        <div className="flex items-center gap-1 text-sm">
-          {isLoading || showPreview ? (
-            <>
-              <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-              <span className="text-muted-foreground font-medium">
-                {value === "pull" ? "Pulling..." : 
-                 value === "syncing" ? "Syncing..." :
-                 value === "production" ? "Pushing..." : 
-                 "Loading..."}
-              </span>
-            </>
-          ) : (
-            <SelectValue placeholder="Environment" className="w-full" />
-          )}
-        </div>
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="local">
-          <div className="flex items-center gap-2">
-            <HardDrive className="h-4 w-4" />
-            <span>Local</span>
-          </div>
-        </SelectItem>
-        <SelectItem value="pull">
-          <div className="flex items-center gap-2">  
-            <Download className="h-4 w-4" />
-            <span>Pull remote</span>
-          </div>
-        </SelectItem>
-        <SelectItem value="production">
-          <div className="flex items-center gap-2">
-            <Upload className="h-4 w-4" />
-            <span>Push remote</span>
-          </div>
-        </SelectItem>
-      </SelectContent>
-    </Select>
-  );
-}

package/src/components/pull-preview-toast.jsx

@@ -1,215 +0,0 @@
-// components/pull-preview-toast.jsx
-
-import React, { useEffect, useState } from "react";
-import { Button } from "@/components/ui/button";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { FileText, Loader2, X } from "lucide-react";
-import { cn } from "@/lib/utils";
-
-export function PullPreviewToast({
-  preview = [],
-  onConfirm,
-  onCancel,
-  onDataPull,
-  isConfirming,
-  isDataPulling,
-  error,
-  isLoading,
-  success,
-}) {
-  console.log("PullPreviewToast rendered with:", {
-    previewLength: preview.length,
-    isConfirming,
-    error,
-    isLoading,
-  });
-
-  useEffect(() => {
-    console.log("PullPreviewToast mounted/updated");
-    return () => console.log("PullPreviewToast unmounted");
-  }, []);
-
-  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
-
-  // Loading state
-  if (isLoading) {
-    console.log("Rendering loading state");
-    return (
-      <div className="fixed bottom-4 right-4 z-50 font-sans w-[600px]">
-        <div className="rounded-lg border p-4 shadow-lg bg-background">
-          <div className="flex items-start gap-3">
-            <Loader2 className="h-5 w-5 text-neutral-600 shrink-0 mt-0.5 animate-spin" />
-            <div className="flex-1 space-y-3">
-              <div className="space-y-1">
-                <p className="font-medium text-neutral-800">
-                  Preparing Pull Migration
-                </p>
-                <p className="text-sm text-neutral-600">
-                  Checking remote migrations...
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (!preview?.length) {
-    console.log("No preview data available");
-    return (
-      <div className="fixed bottom-4 right-4 z-50 w-[600px]">
-        <div className="rounded-lg border bg-destructive/15 p-4">
-          <div className="flex items-center gap-2">
-            <p className="text-sm font-medium text-destructive">
-              No preview data available
-            </p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Filter migrations to only include files with a ".sql" extension
-  const sqlMigrations = preview.filter((item) => {
-    const migrationName = item.migration || item.name || "";
-    return migrationName.endsWith(".sql");
-  });
-
-  // Count only SQL migrations for the header
-  const totalMigrations = sqlMigrations.length;
-  console.log("Migration stats:", { totalMigrations });
-
-  // Determine if sync button should be enabled
-  // Only enable if pull was successful and not currently pulling data
-  const isSyncEnabled = success && !isDataPulling && !error;
-
-  return (
-    <div className="fixed bottom-4 right-4 z-50 font-sans w-[600px]">
-      <div
-        className={cn(
-          "rounded-lg border p-4 shadow-lg",
-          error ? "bg-destructive/15" : "bg-background"
-        )}
-      >
-        <div className="flex items-start gap-x-1">
-          <div className="flex-1 space-y-3">
-            {/* Header with Close Button */}
-            <div className="space-y-1">
-              <div className="flex items-center justify-between">
-                <h5
-                  className={cn(
-                    "font-medium",
-                    error ? "text-destructive" : "text-neutral-900"
-                  )}
-                >
-                  {error ? "Pull Migration Error" : "Pull Migration Preview"}
-                </h5>
-                <button
-                  onClick={onCancel}
-                  className="text-neutral-500 hover:text-neutral-900 p-1 rounded-md hover:bg-neutral-100"
-                >
-                  <X className="h-4 w-4" />
-                </button>
-              </div>
-              <p
-                className={cn(
-                  "text-sm",
-                  error ? "text-destructive/80" : "text-neutral-700"
-                )}
-              >
-                {`${totalMigrations} migration(s) will be applied`}
-              </p>
-              {error && (
-                <p className="text-sm text-destructive font-medium mt-1">
-                  {error.message}
-                </p>
-              )}
-              {success && (
-                <p className="text-sm text-green-700 font-medium mt-1">
-                  {success}
-                </p>
-              )}
-            </div>
-
-            {/* Migration Details */}
-            <div>
-              <button
-                onClick={() => setIsDetailsOpen(!isDetailsOpen)}
-                className="text-sm font-medium hover:underline"
-              >
-                {isDetailsOpen ? "Hide Details" : "Show Details"}
-              </button>
-
-              {isDetailsOpen && (
-                <ScrollArea className="h-[480px] mt-2 rounded border border-neutral-200">
-                  <div className="w-full">
-                    <div className="bg-neutral-50 border-b px-4 py-2">
-                      <div className="text-sm font-medium text-neutral-600">Migration</div>
-                    </div>
-                    <div>
-                      {sqlMigrations.map((item, index) => (
-                        <div
-                          key={index}
-                          className="px-4 py-2 border-b last:border-0"
-                        >
-                          <div className="font-mono text-xs">
-                            {item.migration || item.name}
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                </ScrollArea>
-              )}
-            </div>
-
-            {/* Action Buttons */}
-            <div className="flex flex-col gap-2 pt-1">
-              <div className="flex gap-2">
-              <Button
-                  onClick={onConfirm}
-                  disabled={isConfirming}
-                  className={`flex-1 ${isConfirming ? "cursor-not-allowed opacity-50" : ""}`}
-                >
-                  {isConfirming ? (
-                    <>
-                      <Loader2 className="h-4 w-4 animate-spin" />
-                      Confirming...
-                    </>
-                  ) : (
-                    "Confirm Pull"
-                  )}
-                </Button>
-
-                {/* Right column - Sync data and description */}
-                <div className="flex-1 flex flex-col gap-2">
-                <Button
-                    onClick={onDataPull}
-                    disabled={!isSyncEnabled}
-                    variant="outline"
-                    className={`w-full ${!isSyncEnabled ? "cursor-not-allowed opacity-50" : ""}`}
-                  >
-                    {isDataPulling ? (
-                      <>
-                        <Loader2 className="h-4 w-4 animate-spin" />
-                        Syncing remote data...
-                      </>
-                    ) : (
-                      "Sync remote data"
-                    )}
-                  </Button>
-                  <p className="text-xs text-neutral-500 text-center">
-                     75 records per table
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default PullPreviewToast;

package/src/components/push-error-alert.jsx

@@ -1,72 +0,0 @@
-// components/push-error-alert.jsx
-'use client';
-
-import React from 'react';
-import { AlertCircle, X, ChevronDown, ChevronUp } from 'lucide-react';
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-
-export const PushErrorAlert = ({ error, onDismiss }) => {
-  const [showSuggestions, setShowSuggestions] = React.useState(true);
-
-  if (!error) return null;
-
-  // Ensure error message is visible by scrolling to it
-  useEffect(() => {
-    if (error) {
-      const alertElement = document.querySelector('.alert-push-error');
-      alertElement?.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    }
-  }, [error]);
-
-  return (
-    <Alert variant="destructive" className="mt-4 mb-4 alert-push-error">
-      <AlertCircle className="h-4 w-4" />
-      <AlertTitle className="flex items-center justify-between">
-        <span>{error.message}</span>
-        {onDismiss && (
-          <button 
-            onClick={onDismiss}
-            className="p-1 hover:bg-destructive/10 rounded-full"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        )}
-      </AlertTitle>
-      
-      <AlertDescription className="mt-2">
-        <Collapsible 
-          open={showSuggestions} 
-          onOpenChange={setShowSuggestions}
-          className="space-y-2"
-        >
-          <CollapsibleTrigger className="flex items-center gap-2 text-sm font-medium">
-            {showSuggestions ? (
-              <ChevronUp className="h-4 w-4" />
-            ) : (
-              <ChevronDown className="h-4 w-4" />
-            )}
-            Suggested Actions
-          </CollapsibleTrigger>
-          
-          <CollapsibleContent className="space-y-2">
-            {error.details?.suggestions?.map((suggestion, index) => (
-              <div 
-                key={index}
-                className="text-sm text-destructive-foreground/80 pl-6"
-              >
-                • {suggestion}
-              </div>
-            ))}
-          </CollapsibleContent>
-        </Collapsible>
-
-        {error.details?.error && (
-          <div className="mt-4 text-sm font-mono bg-destructive/10 p-2 rounded">
-            {error.details.error}
-          </div>
-        )}
-      </AlertDescription>
-    </Alert>
-  );
-};