sqlchat/src/components/QueryDrawer.tsx

import { Drawer } from "@mui/material";
import { useEffect, useState } from "react";
import { toast } from "react-hot-toast";
import { useTranslation } from "react-i18next";
import TextareaAutosize from "react-textarea-autosize";
import { useQueryStore } from "@/store";
import { ExecutionResult, ResponseObject } from "@/types";
import { checkStatementIsSelect, getMessageFromExecutionResult } from "@/utils";
import Tooltip from "./kit/Tooltip";
import Icon from "./Icon";
import EngineIcon from "./EngineIcon";
import DataTableView from "./ExecutionView/DataTableView";
import NotificationView from "./ExecutionView/NotificationView";
import ExecutionWarningBanner from "./ExecutionView/ExecutionWarningBanner";

const QueryDrawer = () => {
  const { t } = useTranslation();
  const queryStore = useQueryStore();
  const [executionResult, setExecutionResult] = useState<ExecutionResult | undefined>(undefined);
  const [statement, setStatement] = useState<string>("");
  const [isLoading, setIsLoading] = useState(false);
  const context = queryStore.context;
  const executionMessage = executionResult ? getMessageFromExecutionResult(executionResult) : "";
  const showExecutionWarningBanner = statement.trim() && !checkStatementIsSelect(statement);

  useEffect(() => {
    if (!queryStore.showDrawer) {
      return;
    }

    const statement = context?.statement || "";
    setStatement(statement);
    if (statement !== "" && checkStatementIsSelect(statement)) {
      executeStatement(statement);
    }
    setExecutionResult(undefined);
  }, [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);
      setExecutionResult(undefined);
      return;
    }

    setIsLoading(true);
    setExecutionResult(undefined);
    const { connection, database } = context;
    try {
      const response = await fetch("/api/connection/execute", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          connection,
          db: database?.name,
          statement,
        }),
      });
      const result = (await response.json()) as ResponseObject<ExecutionResult>;
      if (result.message) {
        setExecutionResult({
          rawResult: [],
          error: result.message,
        });
      } else {
        setExecutionResult(result.data);
      }
    } catch (error) {
      console.error(error);
      toast.error("Failed to execute statement");
    } finally {
      setIsLoading(false);
    }
  };

  const close = () => queryStore.toggleDrawer(false);

  return (
    <Drawer open={queryStore.showDrawer} anchor="right" className="w-full" onClose={close}>
      <div className="dark:text-gray-300 w-screen sm:w-[calc(60vw)] lg:w-[calc(50vw)] 2xl:w-[calc(40vw)] max-w-full flex flex-col justify-start items-start p-4">
        <button className="w-8 h-8 p-1 bg-zinc-600 text-gray-100 rounded-full hover:opacity-80" onClick={close}>
          <Icon.IoMdClose className="w-full h-auto" />
        </button>
        <h3 className="font-bold text-2xl mt-4">{t("execution.title")}</h3>
        {!context ? (
          <div className="w-full flex flex-col justify-center items-center py-6 pt-10">
            <Icon.BiSad className="w-7 h-auto opacity-70" />
            <span className="text-sm font-mono text-gray-500 mt-2">{t("execution.message.no-connection")}</span>
          </div>
        ) : (
          <>
            <div className="w-full flex flex-row justify-start items-center mt-4">
              <span className="opacity-70">{t("connection.self")}: </span>
              <EngineIcon className="w-6 h-auto" engine={context.connection.engineType} />
              <span>{context.database?.name}</span>
            </div>
            {showExecutionWarningBanner && <ExecutionWarningBanner className="rounded-lg mt-4" />}
            <div className="w-full h-auto mt-4 px-2 flex flex-row justify-between items-end border dark:border-zinc-700 rounded-lg overflow-clip">
              <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 whitespace-pre-wrap"
                value={statement}
                rows={1}
                minRows={1}
                maxRows={5}
                placeholder="Enter your SQL statement here..."
                onChange={(e) => setStatement(e.target.value)}
              />
              <Tooltip title={t("common.execute")} side="top">
                <button
                  className="w-6 p-1 -translate-y-2 cursor-pointer rounded-md hover:shadow opacity-90 hover:opacity-100 bg-indigo-600 text-gray-50 disabled:cursor-not-allowed disabled:opacity-60"
                  onClick={() => executeStatement(statement)}
                >
                  <Icon.IoPlay className="w-full h-auto" />
                </button>
              </Tooltip>
            </div>
            <div className="w-full flex flex-col justify-start items-start mt-4">
              {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">{t("execution.message.executing")}</span>
                </div>
              ) : (
                <>
                  {executionResult ? (
                    executionMessage ? (
                      <NotificationView message={executionMessage} style={executionResult?.error ? "error" : "info"} />
                    ) : (
                      <DataTableView rawResults={executionResult?.rawResult || []} />
                    )
                  ) : (
                    <></>
                  )}
                </>
              )}
            </div>
          </>
        )}
      </div>
    </Drawer>
  );
};

export default QueryDrawer;