consider dialect for format query

Author: vieiralucas

apps/web/src/components/v2Editor/customBlocks/sql/index.tsx

@@ -180,16 +180,16 @@ function SQLBlock(props: Props) {
     (props.isEditable
       ? isCodeHiddenProp
       : localCodeHidden === null
-      ? isCodeHiddenProp
-      : localCodeHidden)
+        ? isCodeHiddenProp
+        : localCodeHidden)
 
   const isResultHidden =
     (!props.dashboardMode || !dashboardModeHasControls(props.dashboardMode)) &&
     (props.isEditable
       ? isResultHiddenProp
       : localResultHidden === null
-      ? isResultHiddenProp
-      : localResultHidden)
+        ? isResultHiddenProp
+        : localResultHidden)
 
   const { startedAt: environmentStartedAt } = useEnvironmentStatus(
     props.document.workspaceId
@@ -443,7 +443,10 @@ function SQLBlock(props: Props) {
   }, [router, props.document.workspaceId])
 
   const onToggleFormatSQLCode = useCallback(() => {
-    const sqlCodeFormatted = getSQLCodeFormatted(source)
+    const sqlCodeFormatted = getSQLCodeFormatted(
+      source,
+      dataSource?.config.type ?? null
+    )
 
     if (!sqlCodeFormatted) {
       return

packages/editor/src/blocks/sql.ts

@@ -1,3 +1,4 @@
+import { type DataSourceType } from '@briefer/database'
 import * as Y from 'yjs'
 import {
   RunQueryResult,
@@ -15,7 +16,7 @@ import {
 } from './index.js'
 import { ResultStatus, updateYText } from '../index.js'
 import { clone } from 'ramda'
-import { format as formatSQL } from 'sql-formatter'
+import { format as formatSQL, SqlLanguage } from 'sql-formatter'
 
 export type DataframeName = {
   value: string
@@ -354,13 +355,35 @@ export function getSQLBlockErrorMessage(
   }
 }
 
-export function getSQLCodeFormatted(source: Y.Text) {
+export function getSQLCodeFormatted(
+  source: Y.Text,
+  dialect: DataSourceType | null
+) {
   if (!source.length) {
     return null
   }
 
+  const language: SqlLanguage = (() => {
+    switch (dialect) {
+      case 'psql':
+        return 'postgresql'
+      case 'bigquery':
+      case 'mysql':
+      case 'snowflake':
+      case 'trino':
+      case 'redshift':
+        return dialect
+      case 'athena':
+      case 'oracle':
+      case 'sqlserver':
+      case 'databrickssql':
+      case null:
+        return 'sql'
+    }
+  })()
+
   const formatted = formatSQL(source.toString(), {
-    language: 'sql',
+    language,
     tabWidth: 4,
   })