[5.x] Include driver in Query content to enable proper formatting (#1620)

* return driver

* handle postgres

* Update preview.vue

---------

Co-authored-by: Taylor Otwell <[email protected]>

Author: cosmastech

resources/js/screens/queries/preview.vue

@@ -1,7 +1,7 @@
 <script type="text/ecmascript-6">
 import hljs from 'highlight.js/lib/core';
 import sql from 'highlight.js/lib/languages/sql';
-import { format } from 'sql-formatter';
+import { format, supportedDialects } from 'sql-formatter';
 
 hljs.registerLanguage('sql', sql);
 
@@ -12,8 +12,20 @@ export default {
                 hljs.highlightElement(this.$refs.sqlcode);
             });
         },
-        formatSql(sql) {
-            return format(sql);
+        formatSql(sql, driver) {
+            let formatterConfig = {};
+
+            if (driver) {
+                if (driver === 'pgsql') {
+                    driver = 'postgresql';
+                }
+
+                if (supportedDialects.includes(driver)) {
+                    formatterConfig = {language: driver};
+                }
+            }
+
+            return format(sql, formatterConfig);
         }
     }
 }
@@ -54,8 +66,8 @@ export default {
                     </li>
                 </ul>
                 <div class="code-bg p-4 mb-0 text-white">
-                    <copy-clipboard :data="formatSql(slotProps.entry.content.sql)">
-                        <pre class="code-bg text-white" ref="sqlcode">{{ formatSql(slotProps.entry.content.sql) }}</pre>
+                    <copy-clipboard :data="formatSql(slotProps.entry.content.sql, slotProps.entry.content.driver)">
+                        <pre class="code-bg text-white" ref="sqlcode">{{ formatSql(slotProps.entry.content.sql, slotProps.entry.content.driver) }}</pre>
                     </copy-clipboard>
                 </div>
             </div>

src/Watchers/QueryWatcher.php

@@ -38,6 +38,7 @@ public function recordQuery(QueryExecuted $event)
         if ($caller = $this->getCallerFromStackTrace()) {
             Telescope::recordQuery(IncomingEntry::make([
                 'connection' => $event->connectionName,
+                'driver' => $event->connection->getDriverName(),
                 'bindings' => [],
                 'sql' => $this->replaceBindings($event),
                 'time' => number_format($time, 2, '.', ''),

tests/Watchers/QueryWatcherTest.php

@@ -34,6 +34,7 @@ public function test_query_watcher_registers_database_queries()
         $this->assertSame(EntryType::QUERY, $entry->type);
         $this->assertSame('select count(*) as aggregate from "telescope_entries"', $entry->content['sql']);
         $this->assertSame('testbench', $entry->content['connection']);
+        $this->assertSame('sqlite', $entry->content['driver']);
         $this->assertFalse($entry->content['slow']);
     }