Merge pull request #120 from supabase-community/fix/sql-formatter-cra…

…shes Fix SQL formatter causing page crashes
supabase-community · Oct 30, 2024 · 45f3f2c · 45f3f2c
2 parents 019c92a + c4e3f1d
commit 45f3f2c
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 68 deletions.
diff --git a/apps/postgres-new/components/ide.tsx b/apps/postgres-new/components/ide.tsx
@@ -2,21 +2,19 @@
 
 import { Editor } from '@monaco-editor/react'
 import { ParseResult } from 'libpg-query/wasm'
-import { FileCode, MessageSquareMore, Sprout, Workflow } from 'lucide-react'
+import { FileCode, MessageSquareMore, Workflow } from 'lucide-react'
 import { PropsWithChildren, useEffect, useState } from 'react'
-import { format } from 'sql-formatter'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs'
 import { useMessagesQuery } from '~/data/messages/messages-query'
 import { useAsyncMemo } from '~/lib/hooks'
 import { tabsSchema, TabValue } from '~/lib/schema'
-import { assertDefined, isMigrationStatement } from '~/lib/sql-util'
+import { assertDefined, formatSql, isMigrationStatement } from '~/lib/sql-util'
 import { ToolInvocation } from '~/lib/tools'
 import { useBreakpoint } from '~/lib/use-breakpoint'
 import { cn } from '~/lib/utils'
-import { useApp } from './app-provider'
 import SchemaGraph from './schema/graph'
-import { useWorkspace } from './workspace'
 import { buttonVariants } from './ui/button'
+import { useWorkspace } from './workspace'
 
 const initialMigrationSql = '-- Migrations will appear here as you chat with AI\n'
 const initialSeedSql = '-- Seeds will appear here as you chat with AI\n'
@@ -80,13 +78,7 @@ export default function IDE({ children, className }: IDEProps) {
 
         const migrationSql = await deparse(filteredAst)
 
-        const formattedSql = format(migrationSql, {
-          language: 'postgresql',
-          keywordCase: 'lower',
-          identifierCase: 'lower',
-          dataTypeCase: 'lower',
-          functionCase: 'lower',
-        })
+        const formattedSql = formatSql(migrationSql) ?? sql
 
         const withSemicolon = formattedSql.endsWith(';') ? formattedSql : `${formattedSql};`
 
@@ -189,14 +181,11 @@ export default function IDE({ children, className }: IDEProps) {
                 monaco.languages.registerDocumentFormattingEditProvider('pgsql', {
                   async provideDocumentFormattingEdits(model) {
                     const currentCode = editor.getValue()
-                    const formattedCode = format(currentCode, {
-                      language: 'postgresql',
-                      keywordCase: 'lower',
-                    })
+                    const formattedCode = formatSql(currentCode)
                     return [
                       {
                         range: model.getFullModelRange(),
-                        text: formattedCode,
+                        text: formattedCode ?? currentCode,
                       },
                     ]
                   },
@@ -233,14 +222,11 @@ export default function IDE({ children, className }: IDEProps) {
                 monaco.languages.registerDocumentFormattingEditProvider('pgsql', {
                   async provideDocumentFormattingEdits(model) {
                     const currentCode = editor.getValue()
-                    const formattedCode = format(currentCode, {
-                      language: 'postgresql',
-                      keywordCase: 'lower',
-                    })
+                    const formattedCode = formatSql(currentCode)
                     return [
                       {
                         range: model.getFullModelRange(),
-                        text: formattedCode,
+                        text: formattedCode ?? currentCode,
                       },
                     ]
                   },

diff --git a/apps/postgres-new/components/tools/csv-export.tsx b/apps/postgres-new/components/tools/csv-export.tsx
@@ -1,8 +1,8 @@
 import { m } from 'framer-motion'
 import { Download } from 'lucide-react'
 import { useMemo } from 'react'
-import { format } from 'sql-formatter'
 import { loadFile } from '~/lib/files'
+import { formatSql } from '~/lib/sql-util'
 import { ToolInvocation } from '~/lib/tools'
 import { downloadFile } from '~/lib/util'
 import CodeAccordion from '../code-accordion'
@@ -14,17 +14,7 @@ export type CsvExportProps = {
 export default function CsvExport({ toolInvocation }: CsvExportProps) {
   const { sql } = toolInvocation.args
 
-  const formattedSql = useMemo(
-    () =>
-      format(sql, {
-        language: 'postgresql',
-        keywordCase: 'lower',
-        identifierCase: 'lower',
-        dataTypeCase: 'lower',
-        functionCase: 'lower',
-      }),
-    [sql]
-  )
+  const formattedSql = useMemo(() => formatSql(sql), [sql])
 
   if (!('result' in toolInvocation)) {
     return null
@@ -37,15 +27,15 @@ export default function CsvExport({ toolInvocation }: CsvExportProps) {
       <CodeAccordion
         title="Error executing SQL"
         language="sql"
-        code={formattedSql}
+        code={formattedSql ?? sql}
         error={result.error}
       />
     )
   }
 
   return (
     <>
-      <CodeAccordion title="Executed SQL" language="sql" code={formattedSql} />
+      <CodeAccordion title="Executed SQL" language="sql" code={formattedSql ?? sql} />
       <m.div
         layoutId={toolInvocation.toolCallId}
         className="self-start px-5 py-2.5 text-base rounded-full bg-border flex gap-2 items-center text-lighter italic"

diff --git a/apps/postgres-new/components/tools/csv-import.tsx b/apps/postgres-new/components/tools/csv-import.tsx
@@ -1,7 +1,7 @@
+import { useMemo } from 'react'
+import { formatSql } from '~/lib/sql-util'
 import { ToolInvocation } from '~/lib/tools'
 import CodeAccordion from '../code-accordion'
-import { useMemo } from 'react'
-import { format } from 'sql-formatter'
 
 export type CsvExportProps = {
   toolInvocation: ToolInvocation<'importCsv'>
@@ -10,17 +10,7 @@ export type CsvExportProps = {
 export default function CsvImport({ toolInvocation }: CsvExportProps) {
   const { sql } = toolInvocation.args
 
-  const formattedSql = useMemo(
-    () =>
-      format(sql, {
-        language: 'postgresql',
-        keywordCase: 'lower',
-        identifierCase: 'lower',
-        dataTypeCase: 'lower',
-        functionCase: 'lower',
-      }),
-    [sql]
-  )
+  const formattedSql = useMemo(() => formatSql(sql), [sql])
 
   if (!('result' in toolInvocation)) {
     return null
@@ -33,11 +23,11 @@ export default function CsvImport({ toolInvocation }: CsvExportProps) {
       <CodeAccordion
         title="Error executing SQL"
         language="sql"
-        code={formattedSql}
+        code={formattedSql ?? sql}
         error={result.error}
       />
     )
   }
 
-  return <CodeAccordion title="Executed SQL" language="sql" code={formattedSql} />
+  return <CodeAccordion title="Executed SQL" language="sql" code={formattedSql ?? sql} />
 }
diff --git a/apps/postgres-new/components/tools/executed-sql.tsx b/apps/postgres-new/components/tools/executed-sql.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { format } from 'sql-formatter'
+import { formatSql } from '~/lib/sql-util'
 import { ToolInvocation } from '~/lib/tools'
 import CodeAccordion from '../code-accordion'
 
@@ -10,17 +10,7 @@ export type ExecutedSqlProps = {
 export default function ExecutedSql({ toolInvocation }: ExecutedSqlProps) {
   const { sql } = toolInvocation.args
 
-  const formattedSql = useMemo(
-    () =>
-      format(sql, {
-        language: 'postgresql',
-        keywordCase: 'lower',
-        identifierCase: 'lower',
-        dataTypeCase: 'lower',
-        functionCase: 'lower',
-      }),
-    [sql]
-  )
+  const formattedSql = useMemo(() => formatSql(sql), [sql])
 
   if (!('result' in toolInvocation)) {
     return null
@@ -33,11 +23,11 @@ export default function ExecutedSql({ toolInvocation }: ExecutedSqlProps) {
       <CodeAccordion
         title="Error executing SQL"
         language="sql"
-        code={formattedSql}
+        code={formattedSql ?? sql}
         error={result.error}
       />
     )
   }
 
-  return <CodeAccordion title="Executed SQL" language="sql" code={formattedSql} />
+  return <CodeAccordion title="Executed SQL" language="sql" code={formattedSql ?? sql} />
 }
diff --git a/apps/postgres-new/lib/hooks.ts b/apps/postgres-new/lib/hooks.ts
@@ -168,6 +168,7 @@ export function useAsyncMemo<T>(
       })
       .catch((err) => {
         if (!hasBeenCancelled.current) {
+          setValue(undefined)
           setError(err)
         }
       })

diff --git a/apps/postgres-new/lib/sql-util.ts b/apps/postgres-new/lib/sql-util.ts
@@ -1,4 +1,5 @@
 import { A_Const, A_Expr, ColumnRef, Node, RawStmt } from 'libpg-query/wasm'
+import { format } from 'sql-formatter'
 
 export function isQueryStatement(stmt: RawStmt) {
   return stmt.stmt && unwrapQueryStatement(stmt.stmt) !== undefined
@@ -507,3 +508,17 @@ export function parseConstant(constant: A_Const) {
     throw new AssertionError(`Constant values must be a string, integer, or float`)
   }
 }
+
+export function formatSql(sql: string) {
+  try {
+    return format(sql, {
+      language: 'postgresql',
+      keywordCase: 'lower',
+      identifierCase: 'lower',
+      dataTypeCase: 'lower',
+      functionCase: 'lower',
+    })
+  } catch (err) {
+    return undefined
+  }
+}
diff --git a/apps/postgres-new/package.json b/apps/postgres-new/package.json
@@ -62,7 +62,7 @@
     "rehype-katex": "^7.0.0",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
-    "sql-formatter": "^15.3.1",
+    "sql-formatter": "^15.4.5",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
     "web-streams-polyfill": "^4.0.0",

diff --git a/package-lock.json b/package-lock.json