feat: use drawer instead of modal for sql query

components/CodeBlock.tsx

@@ -1,11 +1,8 @@
-import { useState } from "react";
-import { createPortal } from "react-dom";
 import { toast } from "react-hot-toast";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
-import { useConnectionStore } from "@/store";
+import { useConnectionStore, useQueryStore } from "@/store";
 import Icon from "./Icon";
-import ExecuteStatementModal from "./ExecuteStatementModal";
 
 interface Props {
   language: string;
@@ -19,7 +16,7 @@ const checkStatementIsSelect = (statement: string) => {
 export const CodeBlock = (props: Props) => {
   const { language, value } = props;
   const connectionStore = useConnectionStore();
-  const [showExecuteQueryModal, setShowExecuteQueryModal] = useState(false);
+  const queryStore = useQueryStore();
   const currentConnectionCtx = connectionStore.currentConnectionCtx;
   // Only show execute button in the following situations:
   // * SQL code, and it is a SELECT statement;
@@ -37,44 +34,44 @@ export const CodeBlock = (props: Props) => {
     });
   };
 
+  const handleExecuteQuery = () => {
+    if (!currentConnectionCtx) {
+      toast.error("Please select a connection first");
+      return;
+    }
+
+    queryStore.setContext({
+      connection: currentConnectionCtx.connection,
+      database: currentConnectionCtx.database,
+      statement: value,
+    });
+    queryStore.toggleDrawer(true);
+  };
+
   return (
-    <>
-      <div className="w-full max-w-full relative font-sans text-[16px]">
-        <div className="flex items-center justify-between py-2 px-4">
-          <span className="text-xs text-white font-mono">{language}</span>
-          <div className="flex items-center space-x-2">
+    <div className="w-full max-w-full relative font-sans text-[16px]">
+      <div className="flex items-center justify-between py-2 px-4">
+        <span className="text-xs text-white font-mono">{language}</span>
+        <div className="flex items-center space-x-2">
+          <button
+            className="flex justify-center items-center rounded bg-none w-6 h-6 p-1 text-xs text-white bg-gray-500 opacity-70 hover:opacity-100"
+            onClick={copyToClipboard}
+          >
+            <Icon.BiClipboard className="w-full h-auto" />
+          </button>
+          {showExecuteButton && (
             <button
               className="flex justify-center items-center rounded bg-none w-6 h-6 p-1 text-xs text-white bg-gray-500 opacity-70 hover:opacity-100"
-              onClick={copyToClipboard}
+              onClick={handleExecuteQuery}
             >
-              <Icon.BiClipboard className="w-full h-auto" />
+              <Icon.IoPlay className="w-full h-auto" />
             </button>
-            {showExecuteButton && (
-              <button
-                className="flex justify-center items-center rounded bg-none w-6 h-6 p-1 text-xs text-white bg-gray-500 opacity-70 hover:opacity-100"
-                onClick={() => setShowExecuteQueryModal(true)}
-              >
-                <Icon.IoPlay className="w-full h-auto" />
-              </button>
-            )}
-          </div>
+          )}
         </div>
-        <SyntaxHighlighter language={language.toLowerCase()} style={oneDark} customStyle={{ margin: 0 }}>
-          {value}
-        </SyntaxHighlighter>
       </div>
-
-      {showExecuteQueryModal &&
-        showExecuteButton &&
-        createPortal(
-          <ExecuteStatementModal
-            connection={currentConnectionCtx.connection}
-            databaseName={currentConnectionCtx.database?.name || ""}
-            statement={value}
-            close={() => setShowExecuteQueryModal(false)}
-          />,
-          document.body
-        )}
-    </>
+      <SyntaxHighlighter language={language.toLowerCase()} style={oneDark} customStyle={{ margin: 0 }}>
+        {value}
+      </SyntaxHighlighter>
+    </div>
   );
 };

components/QueryDrawer.tsx

@@ -1,23 +1,18 @@
+import { Drawer } from "@mui/material";
 import { head } from "lodash-es";
 import { useEffect, useState } from "react";
 import DataTable from "react-data-table-component";
 import { toast } from "react-hot-toast";
-import { Connection } from "@/types";
+import { useQueryStore } from "@/store";
 import Icon from "./Icon";
 
-interface Props {
-  connection: Connection;
-  databaseName: string;
-  statement: string;
-  close: () => void;
-}
-
 type RawQueryResult = {
   [key: string]: any;
 };
 
-const ExecuteStatementModal = (props: Props) => {
-  const { close, connection, databaseName, statement } = props;
+const QueryDrawer = () => {
+  const queryStore = useQueryStore();
+  const context = queryStore.context;
   const [rawResults, setRawResults] = useState<RawQueryResult[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const columns = Object.keys(head(rawResults) || {}).map((key) => {
@@ -28,6 +23,16 @@ const ExecuteStatementModal = (props: Props) => {
   });
 
   useEffect(() => {
+    if (!context) {
+      toast.error("No execution context found.");
+      setIsLoading(false);
+      setRawResults([]);
+      return;
+    }
+
+    setIsLoading(true);
+    setRawResults([]);
+    const { connection, database, statement } = context;
     const executeStatement = async () => {
       try {
         const response = await fetch("/api/connection/execute", {
@@ -37,7 +42,7 @@ const ExecuteStatementModal = (props: Props) => {
           },
           body: JSON.stringify({
             connection,
-            db: databaseName,
+            db: database?.name,
             statement,
           }),
         });
@@ -51,15 +56,17 @@ const ExecuteStatementModal = (props: Props) => {
     };
 
     executeStatement();
-  }, []);
+  }, [context]);
+
+  const close = () => queryStore.toggleDrawer(false);
 
   return (
-    <div className="modal modal-middle modal-open">
-      <div className="modal-box w-full">
-        <h3 className="font-bold text-lg">Execute query</h3>
-        <button className="btn btn-sm btn-circle absolute right-4 top-4" onClick={close}>
+    <Drawer open={queryStore.showDrawer} anchor="right" className="w-full" onClose={close}>
+      <div className="w-screen sm:w-[640px] max-w-full flex flex-col justify-start items-start p-4">
+        <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>
         <div className="w-full flex flex-col justify-start items-start space-y-3 pt-4">
           {isLoading ? (
             <div className="w-full flex justify-center py-6 pt-8">
@@ -69,13 +76,13 @@ const ExecuteStatementModal = (props: Props) => {
             <div className="w-full flex justify-center py-6 pt-8">No data return.</div>
           ) : (
             <div className="w-full">
-              <DataTable className="w-full" columns={columns} data={rawResults} pagination responsive />
+              <DataTable className="w-full border" columns={columns} data={rawResults} pagination responsive />
             </div>
           )}
         </div>
       </div>
-    </div>
+    </Drawer>
   );
 };
 
-export default ExecuteStatementModal;
+export default QueryDrawer;