better sql dialect detection

Author: julienbourdeau

client/src/components/queries/QueryItem.vue

@@ -27,7 +27,7 @@ function copyToClipboard(text: string) {
 }
 
 function sqlFormat(query: string) {
-  return format(query, { language: configStore.config.activeRecord.adapter })
+  return format(query, { language: configStore.config.sqlDialect })
 }
 </script>
 

client/src/models/Config.ts

@@ -1,4 +1,5 @@
 import defaultsDeep from "lodash/defaultsDeep"
+import { SqlLanguage } from "sql-formatter"
 
 export type DebugbarConfigOptions = {
   mode: "ws" | "poll" | "off"
@@ -17,13 +18,27 @@ export type DebugbarConfigOptions = {
   activeRecord: {
     adapter: "mysql" | "postgresql" | "sql" | "sqlite"
   }
+  sqlDialect: SqlLanguage
 }
 
 export type DebugbarConfig = DebugbarConfigOptions & {
   actionCableUrl: string
   pollUrl: string
 }
 
+function sqlDialect(arAdapter): SqlLanguage {
+  // We use regex to handle adapter names like "mysql2", "jdbcpostgresql", etc.
+  if (/mysql|triology/.test(arAdapter)) {
+    return "mysql"
+  } else if (/pg|postgres/.test(arAdapter)) {
+    return "postgresql"
+  } else if (/sqlite/.test(arAdapter)) {
+    return "sqlite"
+  } else {
+    return "sql"
+  }
+}
+
 export function newDebugbarConfig(options: DebugbarConfigOptions) {
   const obj: DebugbarConfig = defaultsDeep(options, {
     mode: "ws",
@@ -47,5 +62,7 @@ export function newDebugbarConfig(options: DebugbarConfigOptions) {
   obj.actionCableUrl = `${obj.cable.url}${obj.prefix}/cable`
   obj.pollUrl = `${obj.poll.url}${obj.prefix}/poll`
 
+  obj.sqlDialect = sqlDialect(obj.activeRecord.adapter)
+
   return obj
 }