cover more case for unsupport file system handler

outerbase · Jan 10, 2025 · 0decc76 · 0decc76
1 parent 910c6d2
commit 0decc76
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 16 deletions.
diff --git a/src/app/(theme)/connect/connection-string-input.tsx b/src/app/(theme)/connect/connection-string-input.tsx
@@ -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>
           );
         }
 

diff --git a/src/components/filehandler-picker.tsx b/src/components/filehandler-picker.tsx
@@ -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 (

diff --git a/src/components/screen-dropzone.tsx b/src/components/screen-dropzone.tsx
@@ -2,11 +2,61 @@
 
 import { useEffect } from "react";
 import { useCommonDialog } from "./common-dialog";
+import Link from "next/link";
 
 interface Props {
   onFileDrop: (handler: FileSystemFileHandle) => void;
 }
 
+export const unsupportFileHandlerDialogContent = {
+  destructive: true,
+  title: "Unsupported Browser",
+  content: (
+    <p className="text-sm flex flex-col gap-2">
+      <p>
+        Outerbase Studio SQLite client requires the{" "}
+        <span className="bg-muted font-mono px-2 inline-flex">
+          FileSystemHandle
+        </span>{" "}
+        API to function.
+      </p>
+
+      <p>
+        This API is currently supported only by Chromium-based browsers, such as{" "}
+        <strong>Edge, Chrome, and Brave</strong>. Learn more about it here:{" "}
+        <Link
+          target="_blank"
+          href="https://developer.mozilla.org/en-US/docs/Web/API/FileSystemHandle"
+          className="text-blue-500 underline"
+        >
+          FileSystemHandle API
+        </Link>
+        .
+      </p>
+
+      <p>
+        If you&apos;re encountering this issue in Brave, note that the File
+        System API is disabled by default. To enable it:
+      </p>
+
+      <ul className="list-disc list-inside">
+        <li>
+          Open{" "}
+          <span className="bg-muted font-mono px-2 inline-flex">
+            brave://flags
+          </span>{" "}
+          in the browser.
+        </li>
+        <li>Search for &quot;File System Access API.&quot;</li>
+        <li>Enable the feature.</li>
+        <li>
+          Restart Brave after enabling the API to ensure proper functionality.
+        </li>
+      </ul>
+    </p>
+  ),
+};
+
 export default function ScreenDropZone({ onFileDrop }: Props) {
   const { showDialog } = useCommonDialog();
 
@@ -23,11 +73,7 @@ export default function ScreenDropZone({ onFileDrop }: Props) {
       try {
         (fileList[0] as any).getAsFileSystemHandle().then(onFileDrop);
       } catch (error) {
-        showDialog({
-          destructive: true,
-          title: "Warning",
-          content: "Your browser are not support. please use another browser.",
-        });
+        showDialog(unsupportFileHandlerDialogContent);
       }
     };