Add SQL Formatter (#1205)

Co-authored-by: Alyssa (Bull) Joyner <[email protected]>
Co-authored-by: Andrew Hackmann <[email protected]>

Author: 3 people

package.json

@@ -84,6 +84,7 @@
     "react-dom": "18.3.1",
     "react-router-dom": "5.3.4",
     "semver": "7.7.1",
+    "sql-formatter": "^15.5.1",
     "tslib": "2.7.0"
   },
   "packageManager": "[email protected]",

src/components/QueryToolbox.tsx

@@ -0,0 +1,73 @@
+import React, { useMemo } from 'react';
+import { css } from '@emotion/css';
+
+import { Icon, IconButton, Stack, Tooltip, useTheme2 } from '@grafana/ui';
+
+interface QueryToolboxProps {
+  showTools?: boolean;
+  onFormatCode?: () => void;
+}
+
+export function QueryToolbox({ showTools, onFormatCode }: QueryToolboxProps) {
+  const theme = useTheme2();
+
+  const styles = useMemo(() => {
+    return {
+      container: css({
+        border: `1px solid ${theme.colors.border.medium}`,
+        borderTop: 'none',
+        padding: theme.spacing(0.5, 0.5, 0.5, 0.5),
+        display: 'flex',
+        flexGrow: 1,
+        justifyContent: 'space-between',
+        fontSize: theme.typography.bodySmall.fontSize,
+      }),
+      error: css({
+        color: theme.colors.error.text,
+        fontSize: theme.typography.bodySmall.fontSize,
+        fontFamily: theme.typography.fontFamilyMonospace,
+      }),
+      valid: css({
+        color: theme.colors.success.text,
+      }),
+      info: css({
+        color: theme.colors.text.secondary,
+      }),
+      hint: css({
+        color: theme.colors.text.disabled,
+        whiteSpace: 'nowrap',
+        cursor: 'help',
+      }),
+    };
+  }, [theme]);
+
+  let style = {};
+
+  if (!showTools) {
+    style = { height: 0, padding: 0, visibility: 'hidden' };
+  }
+
+  return (
+    <div className={styles.container} style={style}>
+      {showTools && (
+        <div>
+          <Stack>
+            {onFormatCode && (
+              <IconButton
+                onClick={() => {
+                  onFormatCode();
+                }}
+                name="brackets-curly"
+                size="xs"
+                tooltip="Format query"
+              />
+            )}
+            <Tooltip content="Hit CTRL/CMD+Return to run query">
+              <Icon className={styles.hint} name="keyboard" />
+            </Tooltip>
+          </Stack>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/SqlEditor.test.tsx

@@ -20,6 +20,7 @@ const mockMonaco = {
     register: jest.fn(),
     setMonarchTokensProvider: jest.fn(),
     registerCompletionItemProvider: jest.fn(),
+    registerDocumentFormattingEditProvider: jest.fn(),
   }
 };
 
@@ -121,7 +122,7 @@ describe('SQL Editor', () => {
     ]);
 
     // Trigger the action
-    registeredAction.run();
+    registeredAction.run(mockEditorInstance);
 
     // Verify mockOnRunQuery was called once
     expect(mockOnRunQuery).toHaveBeenCalledTimes(1);

src/components/SqlEditor.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { QueryEditorProps } from '@grafana/data';
 import { CodeEditor, monacoTypes } from '@grafana/ui';
 import { Datasource } from 'data/CHDatasource';
@@ -13,6 +13,7 @@ import { QueryType } from 'types/queryBuilder';
 import { QueryTypeSwitcher } from 'components/queryBuilder/QueryTypeSwitcher';
 import { pluginVersion } from 'utils/version';
 import { useSchemaSuggestionsProvider } from 'hooks/useSchemaSuggestionsProvider';
+import { QueryToolbox } from './QueryToolbox';
 
 type SqlEditorProps = QueryEditorProps<Datasource, CHQuery, CHConfig>;
 
@@ -33,6 +34,7 @@ function setupAutoSize(editor: monacoTypes.editor.IStandaloneCodeEditor) {
 
 export const SqlEditor = (props: SqlEditorProps) => {
   const { query, onChange, datasource } = props;
+  const editorRef = useRef<monacoTypes.editor.IStandaloneCodeEditor | null>(null);
   const sqlQuery = query as CHSqlQuery;
   const queryType = sqlQuery.queryType || QueryType.Table;
 
@@ -74,6 +76,7 @@ export const SqlEditor = (props: SqlEditorProps) => {
   };
 
   const handleMount = (editor: monacoTypes.editor.IStandaloneCodeEditor, monaco: typeof monacoTypes) => {
+    editorRef.current = editor;
     const me = registerSQL('sql', editor, _getSuggestions);
     setupAutoSize(editor);
     editor.onKeyUp((e: any) => {
@@ -82,18 +85,29 @@ export const SqlEditor = (props: SqlEditorProps) => {
         validateSql(sql, editor.getModel(), me);
       }
     });
+
     editor.addAction({
       id: 'run-query',
       label: 'Run Query',
       keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
       contextMenuGroupId: 'navigation',
       contextMenuOrder: 1.5,
-      run: function() {
+      run: (editor: monacoTypes.editor.IStandaloneCodeEditor) => {
+        saveChanges({ rawSql: editor.getValue() });
         props.onRunQuery();
       },
     });
   };
 
+  const onEditorWillUnmount = () => {
+    editorRef.current = null
+  };
+  const triggerFormat = () => {
+    if (editorRef.current !== null) {
+      editorRef.current.trigger("editor", "editor.action.formatDocument", "");
+    }
+  };
+
   return (
     <>
       <div className={'gf-form ' + styles.QueryEditor.queryType}>
@@ -109,6 +123,11 @@ export const SqlEditor = (props: SqlEditorProps) => {
           showLineNumbers={true}
           onBlur={(sql) => saveChanges({ rawSql: sql })}
           onEditorDidMount={handleMount}
+          onEditorWillUnmount={onEditorWillUnmount}
+        />
+        <QueryToolbox
+          showTools
+          onFormatCode={triggerFormat}
         />
       </div>
     </>

src/components/sqlProvider.test.ts

@@ -0,0 +1,11 @@
+import { formatSql } from "./sqlProvider"
+
+describe('SQL Formatter', () => {
+	it('formats SQL', () => {
+		const input = 'SELECT 1, 2, 3 FROM test LIMIT 1';
+		const expected = 'SELECT\n 1,\n 2,\n 3\nFROM\n test\nLIMIT\n 1';
+
+		const actual = formatSql(input, 1);
+		expect(actual).toBe(expected);
+	});
+});

src/components/sqlProvider.ts

@@ -1,4 +1,5 @@
-import { Monaco, MonacoEditor, monacoTypes } from '@grafana/ui'
+import { Monaco, MonacoEditor, monacoTypes } from '@grafana/ui';
+import { format } from 'sql-formatter';
 
 declare const monaco: Monaco;
 
@@ -39,8 +40,22 @@ export type Fetcher = {
   (text: string, range: Range, cursorPosition: number): Promise<SuggestionResponse>;
 };
 
+export function formatSql(rawSql: string, tabWidth = 4): string {
+  // The default formatter doesn't like the $, so we swap it out
+  const macroPrefix = '$';
+  const swapIdentifier = 'GRAFANA_DOLLAR_TOKEN';
+  const removedVariables = rawSql.replaceAll(macroPrefix, swapIdentifier);
+  const formattedRaw = format(removedVariables, {
+    language: 'postgresql',
+    tabWidth
+  });
+
+  const formatted = formattedRaw.replaceAll(swapIdentifier, macroPrefix);
+  return formatted;
+}
+
 export function registerSQL(lang: string, editor: MonacoEditor, fetchSuggestions: Fetcher) {
-  // so options are visible outside query editor
+  // show options outside query editor
   editor.updateOptions({ fixedOverflowWidgets: true, scrollBeyondLastLine: false });
 
   // const registeredLang = monaco.languages.getLanguages().find((l: Lang) => l.id === lang);
@@ -55,13 +70,6 @@ export function registerSQL(lang: string, editor: MonacoEditor, fetchSuggestions
     triggerCharacters: [' ', '.', '$'],
     provideCompletionItems: async (model: Model, position: Position) => {
       const word = model.getWordUntilPosition(position);
-      // const textUntilPosition = model.getValueInRange({
-      //   startLineNumber: 1,
-      //   startColumn: 1,
-      //   endLineNumber: position.lineNumber,
-      //   endColumn: position.column,
-      // });
-
       const range: Range = {
         startLineNumber: position.lineNumber,
         endLineNumber: position.lineNumber,
@@ -73,5 +81,16 @@ export function registerSQL(lang: string, editor: MonacoEditor, fetchSuggestions
     },
   });
 
+  monaco.languages.registerDocumentFormattingEditProvider('sql', {
+    provideDocumentFormattingEdits(model, options) {
+      return [
+        {
+          range: model.getFullModelRange(),
+          text: formatSql(model.getValue(), options.tabSize)
+        }
+      ];
+    }
+  });
+
   return monaco.editor;
 }

yarn.lock

@@ -6500,7 +6500,7 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-nearley@^2.19.5:
+nearley@^2.19.5, nearley@^2.20.1:
   version "2.20.1"
   resolved "https://registry.yarnpkg.com/nearley/-/nearley-2.20.1.tgz#246cd33eff0d012faf197ff6774d7ac78acdd474"
   integrity sha512-+Mc8UaAebFzgV+KpI5n7DasuuQCHA89dmwm7JXw3TV43ukfNQ9DnBH3Mdb2g/I4Fdxc26pwimBWvjIw0UAILSQ==
@@ -8056,6 +8056,14 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
+sql-formatter@^15.5.1:
+  version "15.5.1"
+  resolved "https://registry.yarnpkg.com/sql-formatter/-/sql-formatter-15.5.1.tgz#ce5602e2dab6438a05afaaecb6424dec7e62ff25"
+  integrity sha512-H3XfFRpK8LybkU2mD2Vj3AF35YcfviwUuy3yl98Xp7DTneJJVB40L654DpHYIRctASNIQPoLo7+yCboOfkOpWA==
+  dependencies:
+    argparse "^2.0.1"
+    nearley "^2.20.1"
+
 stack-generator@^2.0.5:
   version "2.0.10"
   resolved "https://registry.yarnpkg.com/stack-generator/-/stack-generator-2.0.10.tgz#8ae171e985ed62287d4f1ed55a1633b3fb53bb4d"