Revert "[5.x] Enhance query preview when using the pgsql driver"

package.json

@@ -22,12 +22,12 @@
         "resolve-url-loader": "^5.0.0",
         "sass": "^1.15.2",
         "sass-loader": "^11.0.1",
-        "sql-formatter": "^15.3.1",
+        "sql-formatter": "^3.1.0",
         "vue": "^2.5.7",
-        "vue-copy-to-clipboard": "^1.0.3",
         "vue-json-pretty": "^1.6.2",
         "vue-loader": "^15.9.6",
         "vue-router": "^3.0.1",
-        "vue-template-compiler": "^2.5.21"
+        "vue-template-compiler": "^2.5.21",
+        "vue-copy-to-clipboard": "^1.0.3"
     }
 }

public/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=9a52c14de3847c3cc640ff1845ef3ed0",
+    "/app.js": "/app.js?id=7049e92a398e816f8cd53a915eaea592",
     "/app-dark.css": "/app-dark.css?id=1ea407db56c5163ae29311f1f38eb7b9",
     "/app.css": "/app.css?id=de4c978567bfd90b38d186937dee5ccf"
 }

resources/js/app.js

@@ -42,7 +42,6 @@ Vue.component('index-screen', require('./components/IndexScreen.vue').default);
 Vue.component('preview-screen', require('./components/PreviewScreen.vue').default);
 Vue.component('alert', require('./components/Alert.vue').default);
 Vue.component('copy-clipboard', require('./components/CopyClipboard.vue').default);
-Vue.component('higlighter', require('./components/Highligter.vue').default);
 
 Vue.mixin(Base);
 

resources/js/screens/queries/preview.vue

@@ -1,46 +1,26 @@
 <script type="text/ecmascript-6">
-import { format } from 'sql-formatter';
+    import hljs from 'highlight.js/lib/core';
+    import sql from 'highlight.js/lib/languages/sql';
+    import { format } from 'sql-formatter';
+
+    hljs.registerLanguage('sql', sql);
 
     export default {
         methods: {
-            formatSql(sql, language) {
-                return format(sql, { language: this.mapLanguage(language)});
-            },
-
-            mapLanguage(language) {
-                if (language === 'sql') {
-                    return language;
-                }
-
-                switch (language) {
-                    case 'pgsql':
-                        return 'postgresql';
-                    case 'mysql':
-                        return 'mysql';
-                    case 'mariadb':
-                        return 'mariadb'
-                    case 'sqlite':
-                        return 'sqlite'
-                    case 'sqlsrv':
-                        return 'transactsql'
-                }
+            highlightSQL() {
+                this.$nextTick(() => {
+                    hljs.highlightElement(this.$refs.sqlcode);
+                });
             },
-
-            mapHighlightingLanguage(language) {
-                if (language === 'sql') {
-                    return language;
-                } else if(language === 'sqlsrv') {
-                    return 'tsql';
-                }
-
-                return 'pgsql';
+            formatSql(sql) {
+                return format(sql);
             }
         }
     }
 </script>
 
 <template>
-    <preview-screen title="Query Details" resource="queries" :id="$route.params.id">
+    <preview-screen title="Query Details" resource="queries" :id="$route.params.id" v-on:ready="highlightSQL()">
         <template slot="table-parameters" slot-scope="slotProps">
             <tr>
                 <td class="table-fit text-muted">Connection</td>
@@ -78,10 +58,8 @@ import { format } from 'sql-formatter';
                     </li>
                 </ul>
                 <div class="code-bg p-4 mb-0 text-white">
-                    <copy-clipboard  :data="formatSql(slotProps.entry.content.sql, slotProps?.entry?.content?.driver ?? 'sql')">
-                        <higlighter :code="formatSql(slotProps.entry.content.sql, slotProps.entry.content?.driver ?? 'sql')"
-                                    :language="mapHighlightingLanguage(slotProps.entry.content?.driver ?? 'sql')"
-                                    class="code-bg text-white class" />
+                    <copy-clipboard :data="formatSql(slotProps.entry.content.sql)">
+                      <pre class="code-bg text-white" ref="sqlcode">{{ formatSql(slotProps.entry.content.sql) }}</pre>
                     </copy-clipboard>
                 </div>
             </div>

src/Watchers/QueryWatcher.php

@@ -45,7 +45,6 @@ public function recordQuery(QueryExecuted $event)
                 'file' => $caller['file'],
                 'line' => $caller['line'],
                 'hash' => $this->familyHash($event),
-                'driver' => $event->connection->getDriverName(),
             ])->tags($this->tags($event)));
         }
     }
@@ -91,10 +90,6 @@ protected function formatBindings($event)
      */
     public function replaceBindings($event)
     {
-        if (version_compare(app()->version(), '10.0.0', '>=')) {
-            return $event->connection->getQueryGrammar()->substituteBindingsIntoRawSql($event->sql, $event->bindings);
-        }
-
         $sql = $event->sql;
 
         foreach ($this->formatBindings($event) as $key => $binding) {