feat: allow users to disable auto execute

ui/package.json

@@ -16,10 +16,12 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toggle": "^1.1.0",
     "@tanstack/react-query": "^5.44.0",
     "@tanstack/react-query-devtools": "^5.44.0",
     "@tanstack/react-router": "^1.35.3",
     "@tanstack/react-table": "^8.17.3",
+    "@uidotdev/usehooks": "^2.4.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.394.0",

ui/src/components/editor.tsx

@@ -33,7 +33,6 @@ export const Editor: FunctionComponent<Props> = ({ value, onChange }) => {
             bottom: 20,
           },
           fontFamily: "JetBrains Mono",
-          cursorStyle: "block",
           automaticLayout: true,
           readOnly: onChange === undefined,
         });

ui/src/components/ui/toggle.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };

ui/src/routes/query.lazy.tsx

@@ -1,14 +1,18 @@
 import "react-data-grid/lib/styles.css";
+import { useEffect, useState } from "react";
 
 import { z } from "zod";
-import { useState } from "react";
 import DataGrid from "react-data-grid";
+import { Play, Terminal } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";
+import { useDebounce } from "@uidotdev/usehooks";
 import { createFileRoute } from "@tanstack/react-router";
 
 import { cn } from "@/lib/utils";
 import { fetchQuery } from "@/api";
 import { Editor } from "@/components/editor";
+import { Toggle } from "@/components/ui/toggle";
+import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useTheme } from "@/provider/theme.provider";
 
@@ -22,14 +26,19 @@ function Query() {
   const navigate = Route.useNavigate();
 
   const currentTheme = useTheme();
-  const [code, setCode] = useState(sql ?? "select 1 + 1");
+  const [codeState, setCode] = useState(sql ?? "select 1 + 1");
+  const code = useDebounce(codeState, 100);
 
-  const { data, error } = useQuery({
+  const [autoExecute, setAutoExecute] = useState(true);
+
+  const { data, refetch, isLoading } = useQuery({
     queryKey: ["query", code],
     queryFn: () => fetchQuery(code),
+    enabled: autoExecute,
   });
+
   const grid = !data ? (
-    !error && <Skeleton className="w-full h-[300px]" />
+    isLoading && <Skeleton className="w-full h-[300px]" />
   ) : (
     <DataGrid
       columns={data.columns.map((col) => ({ key: col, name: col }))}
@@ -43,15 +52,36 @@ function Query() {
     />
   );
 
-  const handleChange = (sql: string) => {
-    setCode(sql);
-    navigate({ search: { sql } });
-  };
+  useEffect(() => {
+    navigate({
+      search: {
+        sql: code,
+      },
+    });
+  }, [code]);
 
   return (
     <>
       <div className="grid gap-2 grid-cols-1">
-        <Editor value={code} onChange={handleChange} />
+        <Editor value={code} onChange={(val) => setCode(val)} />
+        <div className="flex gap-2">
+          <Toggle
+            size="sm"
+            variant="outline"
+            className="text-foreground"
+            pressed={autoExecute}
+            onPressedChange={(val) => setAutoExecute(val)}
+            title={autoExecute ? "Disable Auto Execute" : "Enable Auto Execute"}
+          >
+            <Terminal className="h-4 w-4" />
+          </Toggle>
+
+          {!autoExecute && (
+            <Button size="sm" onClick={() => refetch()}>
+              <Play className="mr-2 h-4 w-4" /> Execute
+            </Button>
+          )}
+        </div>
       </div>
 
       {grid}