Merge pull request #347 from samueldurantes/feat/sql

feat: allow format sql code

Author: vieiralucas

apps/web/src/components/v2Editor/FormatSQLButton.tsx

@@ -0,0 +1,42 @@
+import { Menu } from '@headlessui/react'
+import { CodeBracketIcon } from '@heroicons/react/20/solid'
+import { useRef } from 'react'
+import { TooltipV2 } from '../Tooltips'
+
+interface Props {
+  onFormat: () => void
+  disabled: boolean
+}
+
+function FormatSQLButton(props: Props) {
+  const buttonRef = useRef<HTMLButtonElement>(null)
+
+  return (
+    <Menu as="div" className="inline-block">
+      {({ open }) => {
+        return (
+          <>
+            <TooltipV2<HTMLButtonElement>
+              message="Format and structure your SQL code for better readability."
+              referenceRef={buttonRef}
+              active={!open}
+            >
+              {(ref) => (
+                <Menu.Button
+                  ref={ref}
+                  className="rounded-sm border border-gray-200 h-6 min-w-6 flex items-center justify-center relative group hover:bg-gray-50"
+                  onClick={props.onFormat}
+                  disabled={props.disabled}
+                >
+                  <CodeBracketIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
+                </Menu.Button>
+              )}
+            </TooltipV2>
+          </>
+        )
+      }}
+    </Menu>
+  )
+}
+
+export default FormatSQLButton

apps/web/src/components/v2Editor/customBlocks/sql/index.tsx

@@ -33,6 +33,7 @@ import {
   AITasks,
   isExecutionStatusLoading,
   AddBlockGroupBlock,
+  getSQLCodeFormatted,
 } from '@briefer/editor'
 import SQLResult from './SQLResult'
 import type {
@@ -56,6 +57,7 @@ import LargeSpinner from '@/components/LargeSpinner'
 import { APIDataSources } from '@/hooks/useDatasources'
 import { useRouter } from 'next/router'
 import HiddenInPublishedButton from '../../HiddenInPublishedButton'
+import FormatSQLButton from '../../FormatSQLButton'
 import useEditorAwareness from '@/hooks/useEditorAwareness'
 import { useWorkspaces } from '@/hooks/useWorkspaces'
 import useProperties from '@/hooks/useProperties'
@@ -440,6 +442,17 @@ function SQLBlock(props: Props) {
     router.push(`/workspaces/${props.document.workspaceId}/data-sources`)
   }, [router, props.document.workspaceId])
 
+  const onToggleFormatSQLCode = useCallback(() => {
+    const sqlCodeFormatted = getSQLCodeFormatted(source)
+
+    if (!sqlCodeFormatted) {
+      return
+    }
+
+    // Reuse the `EditWithAIForm` component to show the formatted SQL code
+    props.block.setAttribute('aiSuggestions', sqlCodeFormatted)
+  }, [source, props.block])
+
   const onToggleIsBlockHiddenInPublished = useCallback(() => {
     props.onToggleIsBlockHiddenInPublished(blockId)
   }, [props.onToggleIsBlockHiddenInPublished, blockId])
@@ -1136,7 +1149,6 @@ function SQLBlock(props: Props) {
             </button>
           )}
         </TooltipV2>
-
         {!props.dashboardMode && (
           <HiddenInPublishedButton
             isBlockHiddenInPublished={props.isBlockHiddenInPublished}
@@ -1159,6 +1171,14 @@ function SQLBlock(props: Props) {
             />
           )}
 
+        {((result && !isResultHidden) || !isCodeHidden) &&
+          !props.dashboardMode && (
+            <FormatSQLButton
+              onFormat={onToggleFormatSQLCode}
+              disabled={!props.isEditable}
+            />
+          )}
+
         {((result && !isResultHidden) || !isCodeHidden) &&
           dataSource?.config.type === 'athena' && (
             <SQLQueryConfigurationButton

packages/editor/package.json

@@ -16,13 +16,16 @@
     "moduleNameMapper": {
       "^(\\.\\.?\\/.+)\\.jsx?$": "$1"
     },
-    "modulePathIgnorePatterns": ["<rootDir>/dist/"]
+    "modulePathIgnorePatterns": [
+      "<rootDir>/dist/"
+    ]
   },
   "dependencies": {
     "@briefer/types": "*",
     "fast-diff": "^1.3.0",
     "ramda": "^0.29.1",
     "react-grid-layout": "^1.4.4",
+    "sql-formatter": "^15.4.11",
     "uuid": "^9.0.1",
     "yjs": "^13.6.14"
   },

packages/editor/src/blocks/sql.ts

@@ -15,6 +15,7 @@ import {
 } from './index.js'
 import { ResultStatus, updateYText } from '../index.js'
 import { clone } from 'ramda'
+import { format as formatSQL } from 'sql-formatter'
 
 export type DataframeName = {
   value: string
@@ -148,8 +149,8 @@ export function duplicateSQLBlock(
     source: duplicateYText(prevAttributes.source),
     dataframeName: clone(prevAttributes.dataframeName),
     dataSourceId: prevAttributes.dataSourceId
-      ? options?.datasourceMap?.get(prevAttributes.dataSourceId) ??
-        prevAttributes.dataSourceId
+      ? (options?.datasourceMap?.get(prevAttributes.dataSourceId) ??
+        prevAttributes.dataSourceId)
       : null,
     isFileDataSource: prevAttributes.isFileDataSource,
     result: options?.noState ? null : clone(prevAttributes.result),
@@ -283,7 +284,7 @@ export function closeSQLEditWithAIPrompt(
   block: Y.XmlElement<SQLBlock>,
   cleanPrompt: boolean
 ) {
-  const opeartion = () => {
+  const operation = () => {
     const prompt = getSQLBlockEditWithAIPrompt(block)
     if (cleanPrompt) {
       prompt.delete(0, prompt.length)
@@ -293,9 +294,9 @@ export function closeSQLEditWithAIPrompt(
   }
 
   if (block.doc) {
-    block.doc.transact(opeartion)
+    block.doc.transact(operation)
   } else {
-    opeartion()
+    operation()
   }
 }
 
@@ -352,3 +353,16 @@ export function getSQLBlockErrorMessage(
       return null
   }
 }
+
+export function getSQLCodeFormatted(source: Y.Text) {
+  if (!source.length) {
+    return null
+  }
+
+  const formatted = formatSQL(source.toString(), {
+    language: 'sql',
+    tabWidth: 4,
+  })
+
+  return new Y.Text(formatted)
+}

yarn.lock

@@ -5982,7 +5982,7 @@ command-line-usage@^7.0.0:
     table-layout "^4.1.0"
     typical "^7.1.1"
 
-commander@2, commander@^2.15.1:
+commander@2, commander@^2.15.1, commander@^2.19.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -6811,6 +6811,11 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
+[email protected]:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a"
+  integrity sha512-c68LpLbO+7kP/b1Hr1qs8/BJ09F5khZGTxqxZuhzxpmwJKOgRFHJWIb9/KmqnqHhLdO55aOxFH/EGBvUQbL/RQ==
+
 dlv@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
@@ -8294,6 +8299,11 @@ get-package-type@^0.1.0:
   resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
   integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
 
+get-stdin@=8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-8.0.0.tgz#cbad6a73feb75f6eeb22ba9e01f89aa28aa97a53"
+  integrity sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==
+
 get-stream@^6.0.0, get-stream@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
@@ -10751,6 +10761,11 @@ monaco-editor@^0.47.0:
   resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.47.0.tgz#39865d67e0c9fb8c6b49e760bf9caf6a6650d28e"
   integrity sha512-VabVvHvQ9QmMwXu4du008ZDuyLnHs9j7ThVFsiJoXSOQk18+LF89N4ADzPbFenm0W4V2bGHnFBztIRQTgBfxzw==
 
+moo@^0.5.0:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.2.tgz#f9fe82473bc7c184b0d32e2215d3f6e67278733c"
+  integrity sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==
+
 mouse-change@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/mouse-change/-/mouse-change-1.4.0.tgz#c2b77e5bfa34a43ce1445c8157a4e4dc9895c14f"
@@ -10850,6 +10865,16 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+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==
+  dependencies:
+    commander "^2.19.0"
+    moo "^0.5.0"
+    railroad-diagrams "^1.0.0"
+    randexp "0.4.6"
+
 needle@^2.5.2:
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/needle/-/needle-2.9.1.tgz#22d1dffbe3490c2b83e301f7709b6736cd8f2684"
@@ -12351,11 +12376,24 @@ raf@^3.4.1:
   dependencies:
     performance-now "^2.1.0"
 
+railroad-diagrams@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz#eb7e6267548ddedfb899c1b90e57374559cddb7e"
+  integrity sha512-cz93DjNeLY0idrCNOH6PviZGRN9GJhsdm9hpn1YCS879fj4W+x5IFJhhkRZcwVgMmFF7R82UA/7Oh+R8lLZg6A==
+
 ramda@^0.29.1:
   version "0.29.1"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.29.1.tgz#408a6165b9555b7ba2fc62555804b6c5a2eca196"
   integrity sha512-OfxIeWzd4xdUNxlWhgFazxsA/nl3mS4/jGZI5n00uWOoSSFRhC1b6gl6xvmzUamgmqELraWp0J/qqVlXYPDPyA==
 
+[email protected]:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/randexp/-/randexp-0.4.6.tgz#e986ad5e5e31dae13ddd6f7b3019aa7c87f60ca3"
+  integrity sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==
+  dependencies:
+    discontinuous-range "1.0.0"
+    ret "~0.1.10"
+
 range-parser@~1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
@@ -12902,6 +12940,11 @@ resolve@^2.0.0-next.3, resolve@^2.0.0-next.5:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+ret@~0.1.10:
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
+  integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
+
 retry-request@^7.0.0:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/retry-request/-/retry-request-7.0.2.tgz#60bf48cfb424ec01b03fca6665dee91d06dd95f3"
@@ -13370,6 +13413,15 @@ 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.4.11:
+  version "15.4.11"
+  resolved "https://registry.yarnpkg.com/sql-formatter/-/sql-formatter-15.4.11.tgz#10a8205aa82d60507811360d4735e81d4a21c137"
+  integrity sha512-AfIjH0mYxv0NVzs4mbcGIAcos2Si20LeF9GMk0VmVA4A3gs1PFIixVu3rtcz34ls7ghPAjrDb+XbRly/aF6HAg==
+  dependencies:
+    argparse "^2.0.1"
+    get-stdin "=8.0.0"
+    nearley "^2.20.1"
+
 ssh2@^1.15.0:
   version "1.16.0"
   resolved "https://registry.yarnpkg.com/ssh2/-/ssh2-1.16.0.tgz#79221d40cbf4d03d07fe881149de0a9de928c9f0"