polish up initial dolt integration

Author: invisal

src/components/common-dialog/index.tsx

@@ -14,6 +14,7 @@ import {
   DialogDescription,
   DialogFooter,
   DialogHeader,
+  DialogTitle,
 } from "../ui/dialog";
 import { Button } from "../ui/button";
 import { Icon } from "@phosphor-icons/react";
@@ -70,20 +71,22 @@ export function CommonDialogProvider({ children }: PropsWithChildren) {
             <DialogHeader
               className={dialogOption?.destructive ? "text-red-500" : ""}
             >
-              {dialogOption.title}
+              <DialogTitle>{dialogOption.title}</DialogTitle>
             </DialogHeader>
-            <DialogDescription className="flex flex-col gap-2">
-              {errorMessage && (
-                <div className="text-sm text-red-500 font-mono flex gap-4 items-end">
-                  <p>{errorMessage}</p>
-                </div>
-              )}
 
-              <div>{dialogOption.content}</div>
-              {dialogOption.previewCode && (
-                <CodePreview code={dialogOption.previewCode} />
-              )}
-            </DialogDescription>
+            {errorMessage && (
+              <div className="text-sm text-red-500 font-mono flex gap-4 items-end">
+                <p>{errorMessage}</p>
+              </div>
+            )}
+
+            <div>{dialogOption.content}</div>
+            {dialogOption.previewCode && (
+              <CodePreview code={dialogOption.previewCode} />
+            )}
+
+            <DialogDescription className="flex flex-col gap-2"></DialogDescription>
+
             <DialogFooter>
               {dialogOption.actions?.map((action) => (
                 <Button

src/components/gui/database-gui.tsx

@@ -20,6 +20,7 @@ import SavedDocTab from "./sidebar/saved-doc-tab";
 import { useSchema } from "@/context/schema-provider";
 import { Binoculars, GearSix, Table } from "@phosphor-icons/react";
 import DoltSidebar from "./database-specified/dolt/dolt-sidebar";
+import { DoltIcon } from "../icons/outerbase-icon";
 
 export default function DatabaseGui() {
   const DEFAULT_WIDTH = 300;
@@ -111,11 +112,7 @@ export default function DatabaseGui() {
             key: "dolt",
             name: "Dolt",
             content: <DoltSidebar />,
-            icon: (
-              <div className="font-mono text-3xl font-bold text-green-500">
-                d
-              </div>
-            ),
+            icon: <DoltIcon className="w-7 h-7 text-green-500" />,
           }
         : undefined,
     ].filter(Boolean) as SidebarTabItem[];

src/components/gui/database-specified/dolt/dolt-create-branch.tsx

@@ -0,0 +1,104 @@
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { useDatabaseDriver } from "@/context/driver-provider";
+import { GitBranch, Loader } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+
+export default function useDoltCreateBranchModal(refreshStatus: () => void) {
+  const { databaseDriver } = useDatabaseDriver();
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | undefined>();
+  const [branchName, setBranchName] = useState<string>();
+  const [commitHash, setCommitHash] = useState<string | undefined>();
+
+  const onSaveClicked = useCallback(() => {
+    const command = commitHash
+      ? `CALL DOLT_CHECKOUT('-b', ${databaseDriver.escapeValue(branchName)}, ${databaseDriver.escapeValue(commitHash)});`
+      : `CALL DOLT_CHECKOUT('-b', ${databaseDriver.escapeValue(branchName)});`;
+
+    setLoading(true);
+    databaseDriver
+      .query(command)
+      .then(() => {
+        refreshStatus();
+        setOpen(false);
+      })
+      .catch((e) => {
+        setLoading(false);
+        if (e instanceof Error) {
+          setErrorMessage(e.message);
+        } else {
+          setErrorMessage("An error occurred");
+        }
+      });
+  }, [databaseDriver, refreshStatus, commitHash, branchName]);
+
+  const modal = useMemo(() => {
+    if (!open) return null;
+
+    return (
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Create Branch</DialogTitle>
+          </DialogHeader>
+
+          <DialogDescription>
+            {commitHash ? (
+              <>
+                Creating new branch from{" "}
+                <span className="bg-muted rounded inline-flex font-mono px-2">
+                  {commitHash}
+                </span>
+              </>
+            ) : (
+              "Creating new branch"
+            )}
+          </DialogDescription>
+
+          {errorMessage && (
+            <div className="py-2 font-mono text-red-500">{errorMessage}</div>
+          )}
+
+          <div>
+            <Input
+              value={branchName}
+              placeholder="Branch Name"
+              onChange={(e) => setBranchName(e.currentTarget.value)}
+            />
+          </div>
+
+          <DialogFooter>
+            <Button disabled={!branchName || loading} onClick={onSaveClicked}>
+              {loading ? (
+                <Loader className="mr-2 w-4 h-4 animate-spin" />
+              ) : (
+                <GitBranch className="mr-2 w-4 h-4" />
+              )}
+              Create
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  }, [open, branchName, commitHash, onSaveClicked, loading, errorMessage]);
+
+  const openModal = (commitHash?: string) => {
+    setCommitHash(commitHash);
+    setBranchName("");
+    setLoading(false);
+    setOpen(true);
+    setErrorMessage(undefined);
+  };
+
+  return { modal, openModal };
+}