improve electron support with go back and retry

outerbase · Dec 4, 2024 · 11c3dc4 · 11c3dc4
1 parent 450d997
commit 11c3dc4
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 13 deletions.
diff --git a/src/components/gui/connection-dialog.tsx b/src/components/gui/connection-dialog.tsx
@@ -1,6 +1,7 @@
 import { Button } from "@/components/ui/button";
 import LogoLoading from "./logo-loading";
 import { useConfig } from "@/context/config-provider";
+import { useMemo } from "react";
 
 export default function ConnectingDialog({
   message,
@@ -11,6 +12,21 @@ export default function ConnectingDialog({
   onRetry?: () => void;
 }>) {
   const { name, onBack } = useConfig();
+
+  const isElectron = useMemo(() => {
+    return typeof window !== "undefined" && window.outerbaseIpc;
+  }, []);
+
+  const onElectronBack = () => {
+    if (window.outerbaseIpc?.close) {
+      window.outerbaseIpc?.close();
+    }
+  };
+
+  const onElectronRetry = () => {
+    window.location.reload();
+  };
+
   let body = (
     <div>
       <p className="mt-4 flex gap-4">
@@ -27,8 +43,13 @@ export default function ConnectingDialog({
         </div>
         <pre className="mt-4">{message}</pre>
         <div className="mt-4 flex gap-4">
-          <Button onClick={onRetry}>Retry</Button>
-          <Button variant={"secondary"} onClick={onBack}>
+          <Button onClick={isElectron ? onElectronRetry : onRetry}>
+            Retry
+          </Button>
+          <Button
+            variant={"secondary"}
+            onClick={isElectron ? onElectronBack : onBack}
+          >
             Back
           </Button>
         </div>

diff --git a/src/components/gui/schema-sidebar.tsx b/src/components/gui/schema-sidebar.tsx
@@ -6,9 +6,11 @@ import { useSchema } from "@/context/schema-provider";
 import { cn } from "@/lib/utils";
 import { buttonVariants } from "../ui/button";
 import { Plus } from "@phosphor-icons/react";
+import { useDatabaseDriver } from "@/context/driver-provider";
 
 export default function SchemaView() {
   const [search, setSearch] = useState("");
+  const { databaseDriver } = useDatabaseDriver();
   const { currentSchemaName } = useSchema();
 
   const onNewTable = useCallback(() => {
@@ -23,17 +25,19 @@ export default function SchemaView() {
       <div className="p-4 pb-2 flex flex-col">
         <div className="flex justify-between mb-5 items-center">
           <h1 className="text-xl font-medium text-primary">Tables</h1>
-          <button
-            className={cn(
-              buttonVariants({
-                size: "icon",
-              }),
-              "rounded-full h-8 w-8 bg-neutral-800 dark:bg-neutral-200"
-            )}
-            onClick={onNewTable}
-          >
-            <Plus size={16} weight="bold" />
-          </button>
+          {databaseDriver.getFlags().supportModifyColumn && (
+            <button
+              className={cn(
+                buttonVariants({
+                  size: "icon",
+                }),
+                "rounded-full h-8 w-8 bg-neutral-800 dark:bg-neutral-200"
+              )}
+              onClick={onNewTable}
+            >
+              <Plus size={16} weight="bold" />
+            </button>
+          )}
         </div>
 
         <div className="overflow-hidden cursor-text items-center has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 has-[:focus]:outline-neutral-400/70 has-[:enabled]:active:outline-neutral-400/70 dark:has-[:focus]:outline-neutral-600 dark:has-[:enabled]:active:outline-neutral-600 flex w-full rounded-md bg-white px-3 py-2.5 text-base text-neutral-900 outline outline-1 outline-neutral-200 focus:outline-neutral-400/70 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-900 dark:text-white dark:outline-neutral-800 dark:focus:outline-neutral-600 h-[32px]">