[Feature] Replace Query Textarea by MonacoEdiotr

Signed-off-by: Kent Huang <kent@infuseai.io>

Author: kentwelcome

.editorconfig

@@ -16,11 +16,11 @@ indent_style = space
 indent_size = 4
 
 # 2 space indentation
-[*.{js,json,y{a,}ml,html,cwl}]
+[*.{js,json,y{a,}ml,html,cwl,tsx}]
 indent_style = space
 indent_size = 2
 
 [*.{md,Rmd,rst}]
 trim_trailing_whitespace = false
 indent_style = space
-indent_size = 2
+indent_size = 2

js/package.json

@@ -18,10 +18,12 @@
     "@chakra-ui/react": "^2.8.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@monaco-editor/react": "^4.6.0",
     "axios": "^1.6.0",
     "dagre": "^0.8.5",
     "framer-motion": "^10.16.4",
     "lodash": "^4.17.21",
+    "monaco-editor": "^0.44.0",
     "next": "14.0.1",
     "react": "^18",
     "react-data-grid": "7.0.0-beta.40",

js/pnpm-lock.yaml

@@ -5,6 +5,7 @@ import axios, { AxiosError } from "axios";
 import { DataFrame, queryDiff } from "@/components/query/query";
 import { PUBLIC_API_URL } from "../../lib/const";
 import { Box, Button, Flex, Textarea } from "@chakra-ui/react";
+import SqlEditor from "./SqlEditor";
 
 interface QueryViewDataGridProps {
   loading: boolean;
@@ -48,7 +49,7 @@ const QueryViewDataGrid = ({
 };
 
 const QueryView = () => {
-  const [query, setQuery] = useState('select * from {{ ref("mymodel") }}');
+  const [query, setQuery] = useState('-- Enter your SQL query here ---\nselect * from {{ ref("mymodel") }}');
 
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string>();
@@ -128,21 +129,19 @@ const QueryView = () => {
           Run
         </Button>
       </Flex>
-      <Textarea
-        flex="1"
-        height="200px"
-        value={query}
-        onChange={(e) => setQuery(e.target.value)}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
-            executeQuery();
-            e.preventDefault();
-          }
-        }}
-        placeholder="Enter your SQL query here"
-        rows={20}
+      <Box
+        flex='1'
+        border={'1px solid #CBD5E0'}
+        height='200px'
         style={{ width: "100%" }}
-      />
+        >
+        <SqlEditor
+          language="sql"
+          theme="vs"
+          value={query}
+          onChange={(value) => setQuery(value)}
+        />
+      </Box>
       <Box backgroundColor="gray.100" height="50vh">
         <QueryViewDataGrid
           loading={loading}

js/src/components/query/QueryView.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import MonacoEditor from '@monaco-editor/react';
+
+
+interface SqlEditorProps {
+  language?: string;
+  theme?: string;
+  value: string;
+  onChange: (e: any) => void;
+}
+
+const SqlEditor: React.FC<SqlEditorProps> = ({ value, onChange, ...props}: SqlEditorProps) => {
+  const handleEditorChange = (value: string | undefined) => {
+    if (value !== undefined) {
+    onChange(value);
+    }
+  };
+
+  return (
+    <MonacoEditor
+      language={props.language || "sql"}
+      theme={props.theme || "vs"}
+      defaultValue={value}
+      onChange={handleEditorChange}
+      options={{
+        tabSize: 2,
+        fontSize: 16,
+        lineNumbers: "off",
+        automaticLayout: true,
+        minimap: { enabled: false },
+        wordWrap: "on",
+        wrappingIndent: 'indent',
+        // Additional options as needed
+      }}
+    />
+  );
+};
+
+export default SqlEditor;