feat: update query drawer (#7)

* feat: update query drawer

* chore: update

components/ChatView/Header.tsx

@@ -18,7 +18,11 @@ const Header = (props: Props) => {
   }, [title]);
 
   return (
-    <div className={`${className || ""} w-full flex flex-row justify-between items-center lg:grid lg:grid-cols-3 py-1 border-b z-1`}>
+    <div
+      className={`${
+        className || ""
+      } w-full flex flex-row justify-between items-center lg:grid lg:grid-cols-3 py-1 border-b z-1 transition-all duration-300`}
+    >
       <div className="ml-2 flex justify-start items-center">
         <label htmlFor="connection-drawer" className="w-8 h-8 p-1 mr-1 block lg:hidden rounded-md cursor-pointer hover:bg-gray-100">
           <Icon.IoIosMenu className="text-gray-600 w-full h-auto" />

components/CreateConnectionModal.tsx

@@ -36,6 +36,8 @@ const CreateConnectionModal = (props: Props) => {
   useEffect(() => {
     if (show) {
       setConnection(isEditing ? editConnection : defaultConnection);
+      setIsRequesting(false);
+      setShowDeleteConnectionModal(false);
     }
   }, [show]);
 
@@ -108,7 +110,7 @@ const CreateConnectionModal = (props: Props) => {
             <Icon.IoMdClose className="w-5 h-auto" />
           </button>
           <div className="w-full flex flex-col justify-start items-start space-y-3 pt-4">
-            <DataStorageBanner className="rounded-lg bg-white border py-2" alwaysShow={true} />
+            <DataStorageBanner className="rounded-lg bg-white border py-2 !justify-start" alwaysShow={true} />
             <div className="w-full flex flex-col">
               <label className="block text-sm font-medium text-gray-700 mb-1">Database Type</label>
               <select

components/QueryDrawer.tsx

@@ -3,8 +3,10 @@ import { head } from "lodash-es";
 import { useEffect, useState } from "react";
 import DataTable from "react-data-table-component";
 import { toast } from "react-hot-toast";
+import TextareaAutosize from "react-textarea-autosize";
 import { useQueryStore } from "@/store";
 import Icon from "./Icon";
+import EngineIcon from "./EngineIcon";
 
 type RawQueryResult = {
   [key: string]: any;
@@ -13,11 +15,13 @@ type RawQueryResult = {
 const QueryDrawer = () => {
   const queryStore = useQueryStore();
   const [rawResults, setRawResults] = useState<RawQueryResult[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
   const context = queryStore.context;
+  const [statement, setStatement] = useState<string>(context?.statement || "");
+  const [isLoading, setIsLoading] = useState(true);
   const columns = Object.keys(head(rawResults) || {}).map((key) => {
     return {
       name: key,
+      sortable: true,
       selector: (row: RawQueryResult) => row[key],
     };
   });
@@ -27,6 +31,16 @@ const QueryDrawer = () => {
       return;
     }
 
+    setStatement(context?.statement || "");
+    executeStatement(context?.statement || "");
+  }, [context, queryStore.showDrawer]);
+
+  const executeStatement = async (statement: string) => {
+    if (!statement) {
+      toast.error("Please enter a statement.");
+      return;
+    }
+
     if (!context) {
       toast.error("No execution context found.");
       setIsLoading(false);
@@ -36,31 +50,27 @@ const QueryDrawer = () => {
 
     setIsLoading(true);
     setRawResults([]);
-    const { connection, database, statement } = context;
+    const { connection, database } = context;
-    const executeStatement = async () => {
+    try {
-      try {
+      const response = await fetch("/api/connection/execute", {
-        const response = await fetch("/api/connection/execute", {
+        method: "POST",
-          method: "POST",
+        headers: {
-          headers: {
+          "Content-Type": "application/json",
-            "Content-Type": "application/json",
+        },
-          },
+        body: JSON.stringify({
-          body: JSON.stringify({
+          connection,
-            connection,
+          db: database?.name,
-            db: database?.name,
+          statement,
-            statement,
+        }),
-          }),
+      });
-        });
+      const result = await response.json();
-        const result = await response.json();
+      setIsLoading(false);
-        setIsLoading(false);
+      setRawResults(result);
-        setRawResults(result);
+    } catch (error) {
-      } catch (error) {
+      console.error(error);
-        console.error(error);
+      toast.error("Failed to execute statement");
-        toast.error("Failed to execute statement");
+    }
-      }
+  };
-    };
-
-    executeStatement();
-  }, [context, queryStore.showDrawer]);
 
   const close = () => queryStore.toggleDrawer(false);
 
@@ -70,20 +80,55 @@ const QueryDrawer = () => {
         <button className="btn btn-sm btn-circle" onClick={close}>
           <Icon.IoMdClose className="w-5 h-auto" />
         </button>
-        <h3 className="font-bold text-lg mt-4">Execute query</h3>
+        <h3 className="font-bold text-2xl mt-4">Execute query</h3>
-        <div className="w-full flex flex-col justify-start items-start space-y-3 pt-4">
+        {!context ? (
-          {isLoading ? (
+          <div className="w-full flex flex-col justify-center items-center py-6 pt-10">
-            <div className="w-full flex justify-center py-6 pt-8">
+            <Icon.BiSad className="w-7 h-auto opacity-70" />
-              <Icon.BiLoaderAlt className="w-6 h-auto opacity-70 animate-spin" />
+            <span className="text-sm font-mono text-gray-500 mt-2">No connection selected.</span>
+          </div>
+        ) : (
+          <>
+            <div className="w-full flex flex-row justify-start items-center mt-4">
+              <span className="opacity-70">Connection: </span>
+              <EngineIcon className="w-6 h-auto" engine={context.connection.engineType} />
+              <span>{context.database?.name}</span>
             </div>
-          ) : rawResults.length === 0 ? (
+            <div className="w-full h-auto mt-4 px-2 flex flex-row justify-between items-end border rounded-lg overflow-clip">
-            <div className="w-full flex justify-center py-6 pt-8">No data return.</div>
+              <TextareaAutosize
-          ) : (
+                className="w-full h-full outline-none border-none bg-transparent leading-6 pl-2 py-2 resize-none hide-scrollbar text-sm font-mono break-all"
-            <div className="w-full">
+                value={statement}
-              <DataTable className="w-full border" columns={columns} data={rawResults} pagination responsive />
+                rows={1}
+                minRows={1}
+                maxRows={5}
+                placeholder="Enter your SQL statement here..."
+                onChange={(e) => setStatement(e.target.value)}
+              />
+              <button
+                className="w-8 p-1 -translate-y-1 cursor-pointer rounded-md hover:shadow hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-60"
+                onClick={() => executeStatement(statement)}
+              >
+                <Icon.IoPlay className="w-full h-auto text-indigo-600" />
+              </button>
             </div>
-          )}
+            <div className="w-full flex flex-col justify-start items-start mt-4">
-        </div>
+              {isLoading ? (
+                <div className="w-full flex flex-col justify-center items-center py-6 pt-10">
+                  <Icon.BiLoaderAlt className="w-7 h-auto opacity-70 animate-spin" />
+                  <span className="text-sm font-mono text-gray-500 mt-2">Executing</span>
+                </div>
+              ) : rawResults.length === 0 ? (
+                <div className="w-full flex flex-col justify-center items-center py-6 pt-10">
+                  <Icon.BsBox2 className="w-7 h-auto opacity-70" />
+                  <span className="text-sm font-mono text-gray-500 mt-2">No data return.</span>
+                </div>
+              ) : (
+                <div className="w-full">
+                  <DataTable className="w-full border !rounded-lg" columns={columns} data={rawResults} fixedHeader pagination responsive />
+                </div>
+              )}
+            </div>
+          </>
+        )}
       </div>
     </Drawer>
   );

pages/_app.tsx

@@ -8,6 +8,7 @@ dayjs.extend(localizedFormat);
 
 import "@/styles/tailwind.css";
 import "@/styles/global.css";
+import "@/styles/data-table.css";
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (

styles/data-table.css

@@ -0,0 +1,3 @@
+.rdt_Pagination {
+  border-top: none !important;
+}