d1s 0.2.10 → 0.2.12

package/src/components/sidebar.jsx

@@ -1,254 +0,0 @@
-// components/sidebar.jsx
-'use client';
-
-import React, { useEffect, useState, useMemo } from 'react';
-import { 
-  Table2, 
-  Search, 
-  Loader2, 
-  AlertCircle,
-  TerminalSquare,
-} from 'lucide-react';
-import { Input } from '@/components/ui/input';
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import { useDatabase } from '@/context/database-context';
-import { CloudflareCredentialsModal } from './cloudflare-credentials-modal';
-import { useEnvironmentController } from './environment-handler'; 
-import { EnvironmentSelect } from './environment-select';
-
-export function AppSidebar({
-  className,
-  currentView,
-  onNavigate,
-  onTableSelect,
-}) {
-  const { tables, refreshTables, isLoading: isTablesLoading, error } = useDatabase();
-  const [databases, setDatabases] = useState([]);
-  const [searchTerm, setSearchTerm] = useState('');
-  const [environment, setEnvironment] = useState('local');
-  const [showCredentialsModal, setShowCredentialsModal] = useState(false);
-  const [selectedTable, setSelectedTable] = useState(null);
-  const [isTableLoading, setIsTableLoading] = useState(false);
-
-  const {
-    isConnecting,
-    isPushing,
-    showPreview,
-    connectToCloudflare,
-    pushToRemote,
-    pullFromRemote,
-    pullToRemotePreview,
-    validateStoredCredentials,
-    PreviewUI,
-  } = useEnvironmentController();
-
-  // Updated filtering logic with d1_migrations priority
-  const filteredTables = useMemo(() => {
-    const filtered = tables?.filter((table) =>
-      table.toLowerCase().includes(searchTerm.toLowerCase())
-    ) || [];
-
-    // Sort all tables alphabetically first
-    const sortedTables = [...filtered].sort((a, b) => a.localeCompare(b));
-
-    // If d1_migrations exists in the filtered list, move it to the top
-    const d1MigrationsIndex = sortedTables.indexOf('d1_migrations');
-    if (d1MigrationsIndex !== -1) {
-      sortedTables.splice(d1MigrationsIndex, 1);
-      sortedTables.unshift('d1_migrations');
-    }
-
-    return sortedTables;
-  }, [tables, searchTerm]);
-
-  const handleTableClick = async (table) => {
-    try {
-      setIsTableLoading(true);
-      setSelectedTable(table);
-      onTableSelect(table);
-    } catch (error) {
-      console.error('Error selecting table:', error);
-    } finally {
-      setIsTableLoading(false);
-    }
-  };
-
-  const handleEnvironmentChange = async (value) => {
-    console.log('Environment change triggered:', value);
-    // Immediately update the environment state so the UI reflects the correct label
-    setEnvironment(value);
-    
-    if (value === 'production') {
-      try {
-        const credentials = await validateStoredCredentials();
-        if (!credentials) {
-          setShowCredentialsModal(true);
-          return;
-        }
-        // Trigger push preview or push directly (as desired)
-        await pushToRemote();
-      } catch (error) {
-        console.error('Environment change failed:', error);
-        setEnvironment('local');
-      }
-    } else if (value === 'pull') {
-      try {
-        const credentials = await validateStoredCredentials();
-        if (!credentials) {
-          setShowCredentialsModal(true);
-          return;
-        }
-        // Instead of immediately pulling, show the pull preview toast
-        await pullToRemotePreview();
-        // Optionally, you may keep the environment value as "pull" until confirmation,
-        // then revert to "local" in the confirm pull flow.
-      } catch (error) {
-        console.error('Pull from remote failed:', error);
-        setEnvironment('local');
-      }
-    } else {
-      setEnvironment(value);
-    }
-  };
-
-  useEffect(() => {
-    const fetchDatabases = async () => {
-      try {
-        const response = await fetch('/api/databases');
-        const data = await response.json();
-
-        if (!response.ok) {
-          throw new Error(data.error || 'Failed to fetch databases');
-        }
-
-        setDatabases(data.databases || []);
-      } catch (error) {
-        console.error('Error fetching databases:', error);
-      }
-    };
-
-    fetchDatabases();
-    refreshTables();
-  }, [refreshTables]);
-
-  return (
-    <>
-      {/* The sidebar now has top position adjusted for the banner */}
-      <aside className={`${className} top-[var(--banner-height,0px)] left-0 h-[calc(100vh-var(--banner-height,0px))] bg-neutral-50 p-4`}>
-        <div className="flex flex-col h-full font-sans">
-          {/* Header */}
-          <div className="flex items-center gap-2 mb-4">
-            <Table2 className="h-5 w-5" />
-            <span className="font-mono font-bold text-sm">d1-studio</span>
-          </div>
-
-          {/* Error Message */}
-          {error && (
-            <Alert variant="destructive" className="mb-4">
-              <AlertCircle className="h-4 w-4" />
-              <AlertDescription className="text-sm ml-2">{error}</AlertDescription>
-            </Alert>
-          )}
-  
-           {/* Database Section */}
-           <div className="mb-2">
-            <div className="text-xs text-muted-foreground mb-1">Database name</div>
-            <div className="font-semibold text-sm">
-              {databases[0]?.database_name || 'No database found'}
-            </div>
-          </div>
-
-          {/* Environment Section - Full Width */}
-          <div className="mb-6">
-            <EnvironmentSelect className="w-full"
-              value={environment}
-              onValueChange={handleEnvironmentChange}
-              isLoading={isPushing}
-              disabled={isConnecting}
-              showPreview={showPreview}
-            />
-          </div>
-
-          {/* SQL Editor Section */}
-          <div className="mb-3">
-            <button
-              className={`w-full flex items-center gap-x-1 border rounded-md text-sm font-medium transition-colors px-2 py-2
-                ${currentView === 'sql-editor' ? 'bg-neutral-900 text-white' : 'bg-white hover:bg-neutral-100'}`}
-              onClick={() => onNavigate('sql-editor')}
-              disabled={isTableLoading}
-            >
-              <TerminalSquare className="h-[16px] w-[16px]" />
-              SQL editor
-            </button>
-          </div>
-  
-          {/* Search Section */}
-          <div className="relative mb-3 bg-white">
-            <Search className="absolute left-2 top-2.5 h-4 w-4 text-neutral-500" />
-            <Input
-              placeholder="Search tables"
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="pl-7"
-            />
-          </div>
-  
-          {/* Scrollable Tables Section - Updated */}
-          <div className="flex-1 min-h-0 flex flex-col">
-            {/* Tables Header */}
-            <div className="flex items-center justify-between mb-1 flex-none">
-              <h3 className="text-sm font-medium text-muted-foreground">
-                Tables {tables?.length ? `(${tables.length})` : ''}
-              </h3>
-              {isTablesLoading && <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />}
-            </div>
-
-            {/* Tables List - Scrollable - Updated with padding bottom */}
-            <div className="overflow-y-auto flex-1">
-              <div className="pr-2 pb-4"> {/* Added pb-4 for bottom padding */}
-                {!isTablesLoading && filteredTables.length === 0 && (
-                  <div className="text-sm font-medium text-muted-foreground px-2 py-2">
-                    {searchTerm 
-                      ? 'No matching tables found' 
-                      : error 
-                        ? 'Error loading tables' 
-                        : 'No tables available'
-                    }
-                  </div>
-                )}
-  
-              {filteredTables.map((table) => (
-                <button
-                  key={table}
-                  className={`w-full text-left text-sm font-medium rounded-md transition-colors px-2 py-2
-                    ${currentView === 'table-view' && selectedTable === table
-                      ? 'bg-[#F0F0F0] text-neutral-900 font-semibold'
-                      : 'text-neutral-700 hover:bg-[#F2F2F2]'}
-                    ${isTableLoading && 'opacity-50 cursor-not-allowed'}`}
-                  onClick={() => handleTableClick(table)}
-                  disabled={isTableLoading}
-                >
-                  {table}
-                </button>
-              ))}
-              </div>
-            </div>
-          </div>
-        </div>
-  
-        {/* Cloudflare Credentials Modal */}
-        <CloudflareCredentialsModal
-          open={showCredentialsModal}
-          onClose={() => {
-            setShowCredentialsModal(false);
-            setEnvironment('local');
-          }}
-          onSubmit={connectToCloudflare}
-        />
-      </aside>
-  
-      {/* Preview UI */}
-      {PreviewUI}
-    </>
-  );  
-}

package/src/components/sql-editor.jsx

@@ -1,411 +0,0 @@
-'use client';
-
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import Editor from '@monaco-editor/react';
-import { Loader2, Command, CornerDownLeft, GripHorizontal, ChevronDown } from 'lucide-react';
-import { Button } from "@/components/ui/button";
-import { useDatabase } from '@/context/database-context';
-import { SQLResultsView, SQLErrorDisplay } from './query-results';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { parseSQLError } from '@/lib/parse-sql-error'; 
-
-// Helpful predefined queries
-const HELPFUL_QUERIES = {
-  // Table listing queries
-  'Show Tables': `SELECT name
-    FROM sqlite_master 
-    WHERE type='table' 
-    AND name NOT LIKE 'sqlite_%';`,
-  
-  // Schema queries
-  'Table Schema': `-- Table Schema
--- Replace table_name with your table name
-PRAGMA table_info(table_name);`,
-
-  'Table Indexes': `-- Table Indexes
--- Replace table_name with your table name
-SELECT 
-  m.name as table_name,
-  i.name as index_name,
-  i.sql as index_definition
-FROM sqlite_master m
-JOIN sqlite_master i ON m.name = i.tbl_name
-WHERE m.type = 'table'
-AND i.type = 'index'
-AND m.name = 'table_name';`,
-
-  'Foreign Keys': `-- Foreign Key Information
--- Replace table_name with your table name
-PRAGMA foreign_key_list(table_name);`,
-
-  // Data queries
-  'Table Data': `-- Table Data
--- Replace table_name with your table name
-SELECT * FROM table_name LIMIT 100;`,
-
-  'Row Count': `-- Row Count
--- Replace table_name with your table name
-SELECT COUNT(*) as total_rows FROM table_name;`,
-
-  'Column Stats': `-- Column Statistics
--- Replace table_name and column_name with your values
-SELECT 
-  COUNT(*) as total_rows,
-  COUNT(column_name) as non_null_count,
-  COUNT(DISTINCT column_name) as unique_values,
-  MIN(column_name) as min_value,
-  MAX(column_name) as max_value
-FROM table_name;`,
-
-  // Schema modification
-  'Create Table': `CREATE TABLE IF NOT EXISTS new_table (
-  id INTEGER PRIMARY KEY AUTOINCREMENT,
-  name TEXT NOT NULL,
-  email TEXT UNIQUE,
-  status TEXT CHECK(status IN ('active', 'inactive')) DEFAULT 'active',
-  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
-);
-
--- Create indexes
-CREATE INDEX idx_new_table_name ON new_table(name);
-CREATE UNIQUE INDEX idx_new_table_email ON new_table(email);`,
-
-  'Create View': `-- Create a view
-CREATE VIEW view_name AS
-SELECT column1, column2
-FROM table_name
-WHERE condition;`
-};
-
-// Query categories for organization
-const QUERY_CATEGORIES = {
-  'Schema Information': ['Show Tables', 'Table Schema', 'Table Indexes', 'Foreign Keys'],
-  'Data Queries': ['Table Data', 'Row Count', 'Column Stats'],
-  'Schema Modification': ['Create Table', 'Create View']
-};
-
-function QueryTemplateMenu({ onSelectQuery }) {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="sm">
-          Query Templates
-          <ChevronDown className="ml-2 h-4 w-4" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" className="w-72">
-        {Object.entries(QUERY_CATEGORIES).map(([category, queryNames]) => (
-          <React.Fragment key={category}>
-            <div className="px-2 py-1.5 text-sm font-semibold text-neutral-900 font-sans">
-              {category}
-            </div>
-            {queryNames.map((queryName) => (
-              <DropdownMenuItem
-                key={queryName}
-                onClick={() => onSelectQuery(queryName)}
-                className="font-sans text-neutral-800"
-              >
-                {queryName}
-              </DropdownMenuItem>
-            ))}
-          </React.Fragment>
-        ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-export function SQLEditor() {
-  const { executeQuery, refreshTables } = useDatabase();
-  const [queryResult, setQueryResult] = useState(null);
-  const [isExecuting, setIsExecuting] = useState(false);
-  const [editorHeight, setEditorHeight] = useState(300);
-  const [isResizing, setIsResizing] = useState(false);
-  const editorRef = useRef(null);
-  const panelRef = useRef(null);
-
-  // Update the height of the panel on editorHeight change
-  useEffect(() => {
-    if (panelRef.current) {
-      panelRef.current.style.height = `${editorHeight}px`;
-    }
-  }, [editorHeight]);
-
-  // Resizing logic for editor
-  const startResizing = useCallback((mouseDownEvent) => {
-    mouseDownEvent.preventDefault();
-
-    const startHeight = editorHeight;
-    const startY = mouseDownEvent.pageY;
-
-    const onMouseMove = (mouseMoveEvent) => {
-      const currentY = mouseMoveEvent.pageY;
-      const newHeight = startHeight + (currentY - startY);
-      const minHeight = 100;
-      const maxHeight = window.innerHeight * 0.8;
-
-      setEditorHeight(Math.min(Math.max(newHeight, minHeight), maxHeight));
-    };
-
-    const onMouseUp = () => {
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
-    };
-
-    document.addEventListener("mousemove", onMouseMove);
-    document.addEventListener("mouseup", onMouseUp);
-  }, [editorHeight]);
-
-  // Execute query and refresh tables
-  const executeQueryAndRefresh = async () => {
-    if (!editorRef.current) return;
-
-    const query = editorRef.current.getValue().trim().replace(/;+$/, '');
-    if (!query) {
-      setQueryResult({
-        success: false,
-        error: { message: "Query cannot be empty." },
-      });
-      return;
-    }
-
-    try {
-      setIsExecuting(true);
-      setQueryResult(null);
-
-      const data = await executeQuery(query);
-      const isSchemaModifying = /^(CREATE|DROP|ALTER)\s+TABLE/i.test(query);
-      if (isSchemaModifying) {
-        await refreshTables();
-      }
-
-      let results = [];
-
-      // --- Updated extraction logic ---
-      if (data.results) {
-        if (Array.isArray(data.results)) {
-          // Check for the columns/values shape (typical for schema queries)
-          if (
-            data.results.length > 0 &&
-            data.results[0]?.columns &&
-            data.results[0]?.values
-          ) {
-            const resultSet = data.results[0];
-            results = resultSet.values.map((row) =>
-              resultSet.columns.reduce((acc, col, idx) => {
-                acc[col] = row[idx];
-                return acc;
-              }, {})
-            );
-          } else {
-            // If we have one element with a "results" property, unwrap it.
-            if (
-              data.results.length === 1 &&
-              data.results[0].results &&
-              Array.isArray(data.results[0].results)
-            ) {
-              results = data.results[0].results;
-            } else {
-              // Otherwise, assume data.results is already an array of row objects.
-              results = data.results;
-            }
-          }
-        } else if (data.results.columns && data.results.values) {
-          const resultSet = data.results;
-          results = resultSet.values.map((row) =>
-            resultSet.columns.reduce((acc, col, idx) => {
-              acc[col] = row[idx];
-              return acc;
-            }, {})
-          );
-        }
-      } else if (data.result && data.result.results) {
-        if (Array.isArray(data.result.results)) {
-          if (
-            data.result.results.length > 0 &&
-            data.result.results[0]?.columns &&
-            data.result.results[0]?.values
-          ) {
-            const resultSet = data.result.results[0];
-            results = resultSet.values.map((row) =>
-              resultSet.columns.reduce((acc, col, idx) => {
-                acc[col] = row[idx];
-                return acc;
-              }, {})
-            );
-          } else {
-            if (
-              data.result.results.length === 1 &&
-              data.result.results[0].results &&
-              Array.isArray(data.result.results[0].results)
-            ) {
-              results = data.result.results[0].results;
-            } else {
-              results = data.result.results;
-            }
-          }
-        } else if (data.result.results.columns && data.result.results.values) {
-          const resultSet = data.result.results;
-          results = resultSet.values.map((row) =>
-            resultSet.columns.reduce((acc, col, idx) => {
-              acc[col] = row[idx];
-              return acc;
-            }, {})
-          );
-        }
-      }
-      // --- End updated extraction logic ---
-
-      setQueryResult({
-        success: true,
-        results,
-      });
-    } catch (error) {
-      const parsedError = parseSQLError(error) || { message: 'An unknown error occurred', details: {} };
-      setQueryResult({
-        success: false,
-        error: parsedError,
-      });
-    } finally {
-      setIsExecuting(false);
-    }
-  };
-
-  const renderQueryResult = () => {
-    if (isExecuting) {
-      return (
-        <div className="flex items-center text-sm text-neutral-700">
-          <Loader2 className="h-4 w-4 animate-spin mr-2 font-sans" />
-          Running your query...
-        </div>
-      );
-    }
-
-    if (!queryResult) {
-      return <div className="text-sm text-neutral-500 font-sans">Run the query to see the results.</div>;
-    }
-
-    if (!queryResult.success) {
-      console.debug("SQLEditor - Rendering error:", queryResult.error);
-      return <SQLErrorDisplay error={queryResult.error} />;
-    }
-
-    const results = queryResult.results;
-    if (!results || results.length === 0) {
-      return <div className="text-sm text-neutral-900 font-sans">Success. No results to display.</div>;
-    }
-
-    return (
-      <SQLResultsView
-        query={editorRef.current?.getValue() || ''}
-        results={results}
-      />
-    );
-  };
-
-
-  return (
-    <div className="h-full flex flex-col bg-white text-neutral-900 font-sans">
-      {/* Toolbar */}
-      <div className="px-4 py-2 bg-neutral-100 border-b flex items-center gap-4">
-        <QueryTemplateMenu
-          onSelectQuery={(queryType) => {
-            if (editorRef.current) {
-              // Normalize the queryType to match HELPFUL_QUERIES keys
-              const formattedQueryType = Object.keys(HELPFUL_QUERIES).find(
-                (key) => key.toLowerCase() === queryType.toLowerCase()
-              );
-
-              if (formattedQueryType) {
-                const query = HELPFUL_QUERIES[formattedQueryType];
-                editorRef.current.setValue(query);
-                editorRef.current.focus();
-              } else {
-                console.warn(`Query template not found for: ${queryType}`);
-              }
-            }
-          }}
-        />
-      </div>
-
-      {/* Query Editor */}
-      <div
-        ref={panelRef}
-        className="relative pt-2 overflow-hidden"
-        style={{ height: `${editorHeight}px`, minHeight: '100px' }}
-      >
-        <Editor
-          height="100%"
-          language="sql"
-          options={{
-            minimap: { enabled: false },
-            fontSize: 14,
-            wordWrap: "on",
-            automaticLayout: true,
-            lineNumbers: "on",
-            fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
-          }}
-          onMount={(editor) => {
-            editorRef.current = editor;
-            // Ensure that the "monaco" global is available.
-            editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
-              executeQueryAndRefresh();
-            });
-          }}
-        />
-      </div>
-
-      {/* Resizer */}
-      <div
-        className={`relative h-0.5 cursor-row-resize bg-neutral-200 group ${
-          isResizing ? "bg-neutral-300" : "hover:bg-neutral-300"
-        }`}
-        onMouseDown={(e) => {
-          setIsResizing(true);
-          startResizing(e);
-        }}
-        onMouseUp={() => setIsResizing(false)}
-      >
-        <div
-          className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-neutral-900 rounded-sm px-0.5 
-          ${isResizing ? "visible" : "invisible group-hover:visible"}`}
-        >
-          <GripHorizontal className="h-3 w-3 text-white" />
-        </div>
-      </div>
-
-      {/* Query Results */}
-      <div className="px-4 py-3 bg-neutral-100 border-b font-sans">
-        <div className="flex justify-between items-center">
-          <h3 className="text-sm font-medium">Results</h3>
-          <Button
-            size="sm"
-            onClick={executeQueryAndRefresh}
-            disabled={isExecuting}
-            className="flex items-center gap-1 text-sm font-medium"
-          >
-            Run
-            {isExecuting ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <>
-                <Command className="h-4 w-4" />
-                <CornerDownLeft className="h-4 w-4" />
-              </>
-            )}
-          </Button>
-        </div>
-      </div>
-
-      {/* Render Query Results */}
-      <div className="flex-1 overflow-auto p-4 bg-white">
-        {renderQueryResult()}
-      </div>
-    </div>
-  );
-}