allow user to modify table column for LibSQL

jest.config.ts

@@ -9,9 +9,12 @@ const createJestConfig = nextJest({
 // Add any custom config to be passed to Jest
 const config: Config = {
   coveragePathIgnorePatterns: ["<rootDir>/.*.tsx$"],
+  globals: {
+    window: {},
+  },
   testEnvironment: "node",
   // Add more setup options before each test is run
-  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
 };
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

jest.setup.ts

@@ -0,0 +1,7 @@
+import crypto from "crypto";
+
+Object.defineProperty(window, "crypto", {
+  value: {
+    randomUUID: crypto.randomUUID,
+  },
+});

package.json

@@ -85,7 +85,9 @@
     "drizzle-orm": "^0.30.1",
     "eslint-plugin-jest": "^27.6.3",
     "file-saver": "^2.0.5",
+    "immer": "^10.1.1",
     "libsql-stateless-easy": "^1.6.11",
+    "lodash": "^4.17.21",
     "lucia": "^3.2.0",
     "lucide-react": "^0.309.0",
     "magic-bytes.js": "^1.10.0",
@@ -106,6 +108,7 @@
     "@types/deep-equal": "^1.0.4",
     "@types/file-saver": "^2.0.7",
     "@types/jest": "^29.5.11",
+    "@types/lodash": "^4.17.9",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

src/app/(theme)/connect/saved-connection-card.tsx

@@ -51,14 +51,16 @@ export default function ConnectionItemCard({
               : `/client/r?p=${conn.id}`
           }
         >
-          <div className="py-4 shrink-0 ml-3 mr-2 flex flex-col gap-3">
-            <div className="flex gap-2">
-              <div className="w-10 h-10 bg-accent flex justify-center items-center rounded">
+          <div className="py-4 shrink-0 ml-3 mr-2 flex flex-col gap-3 flex-1">
+            <div className="flex gap-2 overflow-hidden">
+              <div className="w-10 h-10 bg-accent flex justify-center items-center rounded flex-shrink-0">
                 <DatabaseIcon className="w-6 h-6 text-accent-foreground" />
               </div>
 
-              <div>
-                <div className="line-clamp-1 text-primary">{conn.name}</div>
+              <div className="flex-1">
+                <div className="text-primary text-ellipsis overflow-hidden whitespace-nowrap w-[220px]">
+                  {conn.name}
+                </div>
                 <div className="text-xs text-muted-foreground">
                   {DRIVER_DETAIL[conn.driver ?? "turso"].displayName}
                 </div>

src/components/gui/schema-editor/index.tsx

@@ -62,7 +62,7 @@ export default function SchemaEditor({
   const hasChange = checkSchemaChange(value);
 
   const previewScript = useMemo(() => {
-    return databaseDriver.createUpdateTableSchema(value).join("\n");
+    return databaseDriver.createUpdateTableSchema(value).join(";\n");
   }, [value, databaseDriver]);
 
   return (
@@ -188,6 +188,9 @@ export default function SchemaEditor({
           onChange={onChange}
           onAddColumn={onAddColumn}
           schemaName={value.schemaName}
+          disabledEditExistingColumn={
+            !databaseDriver.getFlags().supportModifyColumn
+          }
         />
         <ColumnsProvider value={value.columns}>
           <SchemaEditorConstraintList

src/components/gui/schema-editor/schema-editor-column-list.tsx

@@ -95,11 +95,13 @@ function ColumnItem({
   idx,
   schemaName,
   onChange,
+  disabledEditExistingColumn,
 }: {
   value: DatabaseTableColumnChange;
   idx: number;
   schemaName?: string;
   onChange: Dispatch<SetStateAction<DatabaseTableSchemaChange>>;
+  disabledEditExistingColumn?: boolean;
 }) {
   const {
     setNodeRef,
@@ -109,7 +111,7 @@ function ColumnItem({
     transition,
     setActivatorNodeRef,
   } = useSortable({ id: value.key, disabled: !!value.old });
-  const disabled = !!value.old;
+  const disabled = !!disabledEditExistingColumn && !!value.old;
 
   const style = {
     transform: CSS.Transform.toString(transform),
@@ -338,11 +340,13 @@ export default function SchemaEditorColumnList({
   onChange,
   schemaName,
   onAddColumn,
+  disabledEditExistingColumn,
 }: Readonly<{
   columns: DatabaseTableColumnChange[];
   onChange: Dispatch<SetStateAction<DatabaseTableSchemaChange>>;
   schemaName?: string;
   onAddColumn: () => void;
+  disabledEditExistingColumn?: boolean;
 }>) {
   const headerStyle = "text-xs p-2 text-left bg-secondary border";
 
@@ -397,6 +401,7 @@ export default function SchemaEditorColumnList({
                   key={col.key}
                   onChange={onChange}
                   schemaName={schemaName}
+                  disabledEditExistingColumn={disabledEditExistingColumn}
                 />
               ))}
             </SortableContext>

src/components/gui/tabs/schema-editor-tab.tsx

@@ -4,6 +4,8 @@ import { useDatabaseDriver } from "@/context/driver-provider";
 import SchemaSaveDialog from "../schema-editor/schema-save-dialog";
 import { DatabaseTableSchemaChange } from "@/drivers/base-driver";
 import SchemaEditor from "../schema-editor";
+import { createTableSchemaDraft } from "@/components/lib/sql-generate.schema";
+import { cloneDeep } from "lodash";
 
 interface SchemaEditorTabProps {
   tableName?: string;
@@ -37,24 +39,7 @@ export default function SchemaEditorTab({
       databaseDriver
         .tableSchema(schemaName, name)
         .then((schema) => {
-          setSchema({
-            schemaName,
-            name: {
-              old: schema.tableName,
-              new: schema.tableName,
-            },
-            columns: schema.columns.map((col) => ({
-              key: window.crypto.randomUUID(),
-              old: col,
-              new: structuredClone(col),
-            })),
-            constraints: (schema.constraints ?? []).map((con) => ({
-              id: window.crypto.randomUUID(),
-              old: con,
-              new: structuredClone(con),
-            })),
-            createScript: schema.createScript,
-          });
+          setSchema(createTableSchemaDraft(schemaName, schema));
         })
         .catch(console.error)
         .finally(() => setLoading(false));
@@ -85,13 +70,13 @@ export default function SchemaEditorTab({
           .map((col) => ({
             key: col.key,
             old: col.old,
-            new: structuredClone(col.old),
+            new: cloneDeep(col.old),
           }))
           .filter((col) => col.old),
         constraints: prev.constraints.map((con) => ({
           id: window.crypto.randomUUID(),
           old: con.old,
-          new: structuredClone(con.old),
+          new: cloneDeep(con.old),
         })),
       };
     });