Function QueryDrawer

src/components/QueryDrawer.tsx:16–167

()

import ExecutionWarningBanner from "./ExecutionView/ExecutionWarningBanner";

const QueryDrawer = () => {
  const { t } = useTranslation();
  const queryStore = useQueryStore();
  const messageStore = useMessageStore();
  const [executionResult, setExecutionResult] = useState<ExecutionResult | undefined>(undefined);
  const [originalStatement, setOriginalStatement] = useState<string>("");
  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);
    // Save original statement when open QueryDrawer.
    if (!originalStatement) {
      setOriginalStatement(statement);
    }

    if (statement !== "" && checkStatementIsSelect(statement)) {
      executeStatement(statement);
    }
    setExecutionResult(undefined);
  }, [context, queryStore.showDrawer]);

  // Reset original statement to "" when close QueryDrawer.
  useEffect(() => {
    if (!queryStore.showDrawer) {
      setOriginalStatement("");
    }
  }, [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",