Autoformat AI generated queries before setting them

Author: matt-aitken

apps/webapp/app/components/code/TSQLEditor.tsx

@@ -178,12 +178,7 @@ export function TSQLEditor(opts: TSQLEditorProps) {
     if (!currentContent.trim()) return;
 
     try {
-      const formatted = formatSQL(currentContent, {
-        language: "sql",
-        keywordCase: "upper",
-        indentStyle: "standard",
-        linesBetweenQueries: 2,
-      });
+      const formatted = autoFormatSQL(currentContent);
       view.dispatch({
         changes: { from: 0, to: view.state.doc.length, insert: formatted },
       });
@@ -264,3 +259,12 @@ export function TSQLEditor(opts: TSQLEditorProps) {
     </div>
   );
 }
+
+export function autoFormatSQL(sql: string) {
+  return formatSQL(sql, {
+    language: "sql",
+    keywordCase: "upper",
+    indentStyle: "standard",
+    linesBetweenQueries: 2,
+  });
+}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx

@@ -27,7 +27,7 @@ import {
 } from "~/components/code/ChartConfigPanel";
 import { CodeBlock } from "~/components/code/CodeBlock";
 import { QueryResultsChart } from "~/components/code/QueryResultsChart";
-import { TSQLEditor } from "~/components/code/TSQLEditor";
+import { autoFormatSQL, TSQLEditor } from "~/components/code/TSQLEditor";
 import { TSQLResultsTable } from "~/components/code/TSQLResultsTable";
 import {
   ClientTabs,
@@ -487,7 +487,10 @@ export default function Page() {
                 editorRef.current?.setQuery(exampleQuery);
                 editorRef.current?.setScope(exampleScope);
               }}
-              onQueryGenerated={(query) => editorRef.current?.setQuery(query)}
+              onQueryGenerated={(query) => {
+                const formatted = autoFormatSQL(query);
+                editorRef.current?.setQuery(formatted);
+              }}
               getCurrentQuery={() => editorRef.current?.getQuery() ?? ""}
             />
           </ResizablePanel>