Merge pull request #236 from outerbase/develop

deployment 2025-01-10

Author: invisal

package-lock.json

@@ -6,6 +6,7 @@ import {
 } from "./saved-connection-storage";
 import { Input } from "@/components/ui/input";
 import FileHandlerPicker from "@/components/filehandler-picker";
+import { CommonDialogProvider } from "@/components/common-dialog";
 
 export default function ConnectionStringInput({
   value,
@@ -68,12 +69,14 @@ export default function ConnectionStringInput({
           );
         } else if (field.type === "filehandler") {
           inputDom = (
-            <FileHandlerPicker
-              value={value[field.name]}
-              onChange={(fileId) => {
-                onChange({ ...value, [field.name]: fileId });
-              }}
-            />
+            <CommonDialogProvider>
+              <FileHandlerPicker
+                value={value[field.name]}
+                onChange={(fileId) => {
+                  onChange({ ...value, [field.name]: fileId });
+                }}
+              />
+            </CommonDialogProvider>
           );
         }
 

src/app/(theme)/connect/connection-string-input.tsx

@@ -0,0 +1,30 @@
+"use client";
+import { Studio } from "@/components/gui/studio";
+import { IframeSQLiteDriver } from "@/drivers/iframe-driver";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useMemo } from "react";
+
+export default function EmbedPageClient() {
+  const searchParams = useSearchParams();
+
+  const driver = useMemo(
+    () =>
+      new IframeSQLiteDriver({
+        supportPragmaList: false,
+        supportBigInt: true,
+      }),
+    []
+  );
+
+  useEffect(() => {
+    return driver.listen();
+  }, [driver]);
+
+  return (
+    <Studio
+      driver={driver}
+      name={searchParams.get("name") || "Unnamed Connection"}
+      color={searchParams.get("color") || "gray"}
+    />
+  );
+}

src/app/(theme)/embed/turso/page-client.tsx

@@ -0,0 +1,4 @@
+import { createEmbedPage } from "../embed-page";
+import EmbedPageClient from "./page-client";
+
+export default createEmbedPage(() => <EmbedPageClient />);

src/app/(theme)/embed/turso/page.tsx

@@ -17,6 +17,7 @@ import {
   DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
+import { CommonDialogProvider } from "@/components/common-dialog";
 
 function OverlayAround({
   x,
@@ -324,10 +325,12 @@ export default function PlaygroundEditorBody({
 
   return (
     <>
-      <Script src="/sqljs/sql-wasm.js" onReady={onReady} />
-      <ScreenDropZone onFileDrop={setHandler} />
-      <Onboarding />
-      {dom}
+      <CommonDialogProvider>
+        <Script src="/sqljs/sql-wasm.js" onReady={onReady} />
+        <ScreenDropZone onFileDrop={setHandler} />
+        <Onboarding />
+        {dom}
+      </CommonDialogProvider>
     </>
   );
 }

src/app/(theme)/playground/client/page-client.tsx

@@ -26,7 +26,7 @@ export async function OPTIONS() {
     headers: {
       "Access-Control-Allow-Origin": "*",
       "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
-      "Access-Control-Allow-Headers": "Content-Type, Authorization, x-ob-id",
+      "Access-Control-Allow-Headers": "Content-Type, Authorization, x-od-id",
     },
   });
 }
@@ -61,7 +61,16 @@ export const POST = async (req: NextRequest) => {
       .catch();
   });
 
-  return NextResponse.json({
-    success: true,
-  });
+  return NextResponse.json(
+    {
+      success: true,
+    },
+    {
+      headers: {
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+        "Access-Control-Allow-Headers": "Content-Type, Authorization, x-od-id",
+      },
+    }
+  );
 };

src/app/api/events/route.ts

@@ -4,6 +4,8 @@ import { localDb } from "@/indexdb";
 import { LucideFile, LucideFolderClosed } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { SavedConnectionLocalStorage } from "@/app/(theme)/connect/saved-connection-storage";
+import { unsupportFileHandlerDialogContent } from "./screen-dropzone";
+import { useCommonDialog } from "./common-dialog";
 
 /**
  * Cleanup file handler from indexdb database when
@@ -64,6 +66,7 @@ export default function FileHandlerPicker({
   onChange: (file: string) => void;
 }) {
   const [handler, setHandler] = useState<FileSystemHandle>();
+  const { showDialog } = useCommonDialog();
 
   useEffect(() => {
     if (value) {
@@ -76,11 +79,17 @@ export default function FileHandlerPicker({
   }, [value]);
 
   const onChangeFile = useCallback(() => {
-    cleanupFileHandler()
-      .then(openFileHandler)
-      .then(onChange)
-      .catch(console.error);
-  }, [onChange]);
+    try {
+      cleanupFileHandler()
+        .then(openFileHandler)
+        .then(onChange)
+        .catch(() => {
+          showDialog(unsupportFileHandlerDialogContent);
+        });
+    } catch {
+      showDialog(unsupportFileHandlerDialogContent);
+    }
+  }, [onChange, showDialog]);
 
   if (handler) {
     return (

src/components/filehandler-picker.tsx

@@ -98,9 +98,22 @@ export default function ColumnTypeSelector({
       {
         return {
           ...group,
-          suggestions: group.suggestions.filter((type) => {
-            return type.name.toLowerCase().startsWith(parsedType.toLowerCase());
-          }),
+          suggestions: group.suggestions
+            .filter((type) => {
+              return (
+                type.name.toLowerCase().startsWith(parsedType.toLowerCase()) &&
+                type.name !== "uuid"
+              );
+            })
+            .map((x) => {
+              if (["enum", "set"].includes(x.name)) {
+                return {
+                  ...x,
+                  parameters: [{ name: "", default: "'Y','N'" }],
+                };
+              }
+              return x;
+            }),
         };
       }
     })

src/components/gui/schema-editor/column-type-selector.tsx

@@ -110,8 +110,16 @@ function ColumnItemType({
     databaseDriver.columnTypeSelector.type === "dropdown" &&
     databaseDriver.columnTypeSelector.dropdownOptions
   ) {
+    const normalizedValue = databaseDriver.columnTypeSelector.dropdownNormalized
+      ? databaseDriver.columnTypeSelector.dropdownNormalized(value) || value
+      : value;
+
     return (
-      <Select value={value} onValueChange={onChange} disabled={disabled}>
+      <Select
+        value={normalizedValue}
+        onValueChange={onChange}
+        disabled={disabled}
+      >
         <SelectTrigger className="bg-inherit border-0 rounded-none shadow-none text-sm">
           <SelectValue placeholder="Select datatype" />
         </SelectTrigger>

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

@@ -1,7 +1,7 @@
 import { useConfig } from "@/context/config-provider";
 import { useTheme } from "@/context/theme-provider";
 import { cn } from "@/lib/utils";
-import { ReactElement, useState } from "react";
+import { ReactElement, useMemo, useState } from "react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import Link from "next/link";
 import {
@@ -35,8 +35,38 @@ export default function SidebarTab({ tabs }: Readonly<SidebarTabProps>) {
 
   const config = useConfig();
 
+  /**
+   * Adding color to help identify the database.
+   * Some people have multiple databases open at the same time.
+   * This will help them identify the database they are working on.
+   *
+   * https://github.com/outerbase/studio/issues/234
+   */
+  const databaseColorIndicatorClassName = useMemo(() => {
+    if (config.color === "red") {
+      return `border-l-8 border-red-400 dark:border-red-800`;
+    } else if (config.color === "blue") {
+      return `border-l-8 border-blue-400 dark:border-blue-800`;
+    } else if (config.color === "green") {
+      return `border-l-8 border-green-400 dark:border-green-800`;
+    } else if (config.color === "yellow") {
+      return `border-l-8 border-yellow-400 dark:border-yellow-800`;
+    } else if (config.color === "purple") {
+      return `border-l-8 border-purple-400 dark:border-purple-800`;
+    } else if (config.color === "gray") {
+      return `border-l-8 border-gray-400 dark:border-gray-800`;
+    }
+
+    return "";
+  }, [config.color]);
+
   return (
-    <div className={cn("flex h-full bg-neutral-50 dark:bg-neutral-950")}>
+    <div
+      className={cn(
+        "flex h-full bg-neutral-50 dark:bg-neutral-950",
+        databaseColorIndicatorClassName
+      )}
+    >
       <div className={cn("shrink-0")}>
         <div className="flex flex-col border-r border-neutral-200 dark:border-neutral-800 h-full p-3 gap-4">
           <DropdownMenu modal={false}>