From 24ac4806b40c74a6b41de8687a69340fe9eef27d Mon Sep 17 00:00:00 2001
From: Paul Javaloyes <pauljavaloyesde@gmail.com>
Date: Sun, 5 Feb 2023 10:07:20 +0100
Subject: [PATCH] :rocket: Add query formatter

---
 package-lock.json                    | 40 +++++++++++++++++++++++++---
 package.json                         |  3 ++-
 src/hooks/useMonacoConfigSupplier.ts | 20 ++++++++++++--
 src/hooks/useQueryForm.ts            |  1 +
 4 files changed, 57 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 32e92ae..bae51d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "clickhouser",
-  "version": "1.6.5",
+  "version": "1.6.8",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "clickhouser",
-      "version": "1.6.5",
+      "version": "1.6.8",
       "dependencies": {
         "@blueprintjs/core": "4.11.6",
         "@blueprintjs/popover2": "1.8.1",
@@ -21,7 +21,8 @@
         "react-dom": "^18.0.0",
         "react-hotkeys-hook": "3.4.7",
         "react-router-dom": "^6.4.3",
-        "react-split": "2.0.14"
+        "react-split": "2.0.14",
+        "sql-formatter": "^12.1.0"
       },
       "devDependencies": {
         "@playwright/test": "1.27.1",
@@ -1933,6 +1934,11 @@
       "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
       "dev": true
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
     "node_modules/argv-formatter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/argv-formatter/-/argv-formatter-1.0.0.tgz",
@@ -9314,6 +9320,18 @@
         "node": ">= 6"
       }
     },
+    "node_modules/sql-formatter": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/sql-formatter/-/sql-formatter-12.1.0.tgz",
+      "integrity": "sha512-XwbFwdes2SuETEj/a0WY2MjweFFzgn5phDum4WOdWjk+aay84xXPUl9BzevB89PLykx+4d9GRdXRaiY1VHzytg==",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "nearley": "^2.20.1"
+      },
+      "bin": {
+        "sql-formatter": "bin/sql-formatter-cli.cjs"
+      }
+    },
     "node_modules/state-local": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
@@ -11523,6 +11541,11 @@
       "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
       "dev": true
     },
+    "argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
     "argv-formatter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/argv-formatter/-/argv-formatter-1.0.0.tgz",
@@ -16719,6 +16742,15 @@
         }
       }
     },
+    "sql-formatter": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/sql-formatter/-/sql-formatter-12.1.0.tgz",
+      "integrity": "sha512-XwbFwdes2SuETEj/a0WY2MjweFFzgn5phDum4WOdWjk+aay84xXPUl9BzevB89PLykx+4d9GRdXRaiY1VHzytg==",
+      "requires": {
+        "argparse": "^2.0.1",
+        "nearley": "^2.20.1"
+      }
+    },
     "state-local": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
@@ -17293,4 +17325,4 @@
       "dev": true
     }
   }
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 3125c03..bbcba10 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,8 @@
     "react-dom": "^18.0.0",
     "react-hotkeys-hook": "3.4.7",
     "react-router-dom": "^6.4.3",
-    "react-split": "2.0.14"
+    "react-split": "2.0.14",
+    "sql-formatter": "^12.1.0"
   },
   "devDependencies": {
     "@playwright/test": "1.27.1",
diff --git a/src/hooks/useMonacoConfigSupplier.ts b/src/hooks/useMonacoConfigSupplier.ts
index 1217b22..0233a9f 100644
--- a/src/hooks/useMonacoConfigSupplier.ts
+++ b/src/hooks/useMonacoConfigSupplier.ts
@@ -8,6 +8,7 @@ import { useUrlState } from "./useUrlState";
 import { initialState } from "../hooks/useQueryForm";
 import { usePasswordContext } from "../contexts/usePassword";
 import { getTablesSuggestionProvider } from "../lib/editor-suggestions/tables.suggestion";
+import { format } from 'sql-formatter';
 
 type Params = {
   jsonParams: string;
@@ -26,8 +27,8 @@ export const useMonacoConfigSupplier = ({ jsonParams }: Params) => {
       subs.push(
         monaco.languages.registerCompletionItemProvider(
           paremeterSnippetSuggetionProvider.language,
-          paremeterSnippetSuggetionProvider.provider
-        )
+          paremeterSnippetSuggetionProvider.provider,
+        ),
       );
       subs.push(
         monaco.languages.registerCompletionItemProvider(
@@ -35,6 +36,21 @@ export const useMonacoConfigSupplier = ({ jsonParams }: Params) => {
           paremeterTypeSuggetionProvider.provider
         )
       );
+      subs.push(
+        monaco.languages.registerDocumentFormattingEditProvider('sql', {
+          async provideDocumentFormattingEdits(model) {
+            
+            const text = format(model.getValue(), { language: 'sql' ,   });
+            return [
+              {
+                range: model.getFullModelRange(),
+                text,
+              },
+            ];
+          },
+        })
+
+      )
     }
     return () => {
       subs.forEach((sub) => sub.dispose());
diff --git a/src/hooks/useQueryForm.ts b/src/hooks/useQueryForm.ts
index 2f72669..7b471ef 100644
--- a/src/hooks/useQueryForm.ts
+++ b/src/hooks/useQueryForm.ts
@@ -49,6 +49,7 @@ export const useQueryForm = ({
     },
   ]);
 
+
   return {
     HotKeysHelpDialog,
     openHelpDialog,