fix lint

Author: Marco

components/webui/client/src/components/SqlEditor/index.tsx

@@ -1,33 +1,51 @@
-import {Editor, useMonaco, EditorProps} from "@monaco-editor/react";
 import {useEffect} from "react";
-import { language as sqlLanguage } from 'monaco-editor/esm/vs/basic-languages/sql/sql.js';
 
-interface SqlEditorProps extends Omit<EditorProps, 'language'> {}
+import {
+    Editor,
+    EditorProps,
+    useMonaco,
+} from "@monaco-editor/react";
+import {language as sqlLanguage} from "monaco-editor/esm/vs/basic-languages/sql/sql.js";
+
+
+type SqlEditorProps = Omit<EditorProps, "language">;
 
 /**
  * Monaco editor with highlighting and autocomplete for SQL syntax.
+ *
+ * @param props
+ * @return
  */
 const SqlEditor = (props: SqlEditorProps) => {
     const monaco = useMonaco();
 
 
     useEffect(() => {
         if (null === monaco) {
-            return;
+            return () => {
+            };
         }
-        
+
         // Adds autocomplete suggestions for SQL keywords on editor load
-        const provider = monaco.languages.registerCompletionItemProvider('sql', {
-            provideCompletionItems: () => {
-                const suggestions = sqlLanguage[`keywords`].map((keyword: string) => ({
-                    label: keyword,
+        const provider = monaco.languages.registerCompletionItemProvider("sql", {
+            provideCompletionItems: (model, position) => {
+                const word = model.getWordUntilPosition(position);
+                const range = {
+                    startLineNumber: position.lineNumber,
+                    endLineNumber: position.lineNumber,
+                    startColumn: word.startColumn,
+                    endColumn: word.endColumn,
+                };
+                const suggestions = sqlLanguage.keywords.map((keyword: string) => ({
+                    detail: "SQL Keyword",
+                    insertText: `${keyword} `,
                     kind: monaco.languages.CompletionItemKind.Keyword,
-                    insertText: keyword + ' ',
-                    detail: 'SQL Keyword'
+                    label: keyword,
+                    range: range,
                 }));
 
-                return { suggestions };
-            }
+                return {suggestions: suggestions};
+            },
         });
 
         return () => {
@@ -37,24 +55,22 @@ const SqlEditor = (props: SqlEditorProps) => {
 
     return (
         <Editor
-            language="sql"
+            language={"sql"}
+
             // Use white background while loading (default is grey) so transition to editor with
             // white background is less jarring.
-            loading={
-                <div style={{ backgroundColor: 'white', height: '100%', width: '100%' }}/>
-            }
+            loading={<div style={{backgroundColor: "white", height: "100%", width: "100%"}}/>}
             options={{
-                minimap: { enabled: false },
+                fontSize: 14,
                 lineNumbers: "on",
                 lineNumbersMinChars: 2,
+                minimap: {enabled: false},
+                overviewRulerBorder: false,
+                placeholder: "Enter your SQL query",
                 scrollBeyondLastLine: false,
                 wordWrap: "on",
-                placeholder: "Enter your SQL query",
-                overviewRulerBorder: false,
-                fontSize: 14,
             }}
-            {...props}
-        />
+            {...props}/>
     );
 };
 

components/webui/client/src/components/SqlEditor/monaco-sql.d.ts

@@ -1,5 +1,10 @@
-declare module 'monaco-editor/esm/vs/basic-languages/sql/sql.js' {
-    import { languages } from 'monaco-editor/esm/vs/editor/editor.api';
-    
-    export const language: languages.IMonarchLanguage;
+declare module "monaco-editor/esm/vs/basic-languages/sql/sql.js" {
+    import {languages} from "monaco-editor/esm/vs/editor/editor.api";
+
+
+    interface SqlLanguageDefinition extends languages.IMonarchLanguage {
+        keywords: string[];
+    }
+
+    export const language: SqlLanguageDefinition;
 }

components/webui/client/src/config/index.ts

@@ -28,9 +28,9 @@ const STREAM_TYPE = CLP_STORAGE_ENGINES.CLP === SETTINGS_STORAGE_ENGINE ?
     "json";
 
 export {
-    CLP_STORAGE_ENGINES,
     CLP_QUERY_ENGINES,
-    SETTINGS_STORAGE_ENGINE,
+    CLP_STORAGE_ENGINES,
     SETTINGS_QUERY_ENGINE,
+    SETTINGS_STORAGE_ENGINE,
     STREAM_TYPE,
 };

components/webui/client/src/pages/SearchPage/SearchControls/Presto/RunButton/index.tsx

@@ -7,6 +7,7 @@ import {
 import useSearchStore, {SEARCH_STATE_DEFAULT} from "../../../SearchState/index";
 import styles from "../../SearchButton/SubmitButton/index.module.css";
 
+
 /**
  * Renders a button to run the SQL query.
  *

components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx

@@ -1,9 +1,13 @@
-import { useCallback } from "react";
+import {useCallback} from "react";
+
 import SqlEditor from "../../../../../components/SqlEditor";
 import useSearchStore from "../../../SearchState/index";
 
+
 /**
  * Renders SQL query input.
+ *
+ * @return
  */
 const SqlQueryInput = () => {
     const handleChange = useCallback((value: string | undefined) => {
@@ -13,9 +17,8 @@ const SqlQueryInput = () => {
 
     return (
         <SqlEditor
-            height="150px"
-            onChange={handleChange}
-        />
+            height={"150px"}
+            onChange={handleChange}/>
     );
 };
 

components/webui/client/src/pages/SearchPage/SearchControls/index.tsx

@@ -1,15 +1,15 @@
 import {
-    CLP_STORAGE_ENGINES,
     CLP_QUERY_ENGINES,
-    SETTINGS_STORAGE_ENGINE,
+    CLP_STORAGE_ENGINES,
     SETTINGS_QUERY_ENGINE,
+    SETTINGS_STORAGE_ENGINE,
 } from "../../../config";
 import Dataset from "./Dataset";
 import styles from "./index.module.css";
-import QueryInput from "./QueryInput";
 import RunButton from "./Presto/RunButton";
-import SearchButton from "./SearchButton";
 import SqlQueryInput from "./Presto/SqlQueryInput";
+import QueryInput from "./QueryInput";
+import SearchButton from "./SearchButton";
 import TimeRangeInput from "./TimeRangeInput";
 
 
@@ -31,19 +31,21 @@ const SearchControls = () => {
     return (
         <form onSubmit={handleSubmit}>
             <div className={styles["searchControlsContainer"]}>
-                {SETTINGS_QUERY_ENGINE === CLP_QUERY_ENGINES.NATIVE ? (
-                    <>
-                        {CLP_STORAGE_ENGINES.CLP_S === SETTINGS_STORAGE_ENGINE && <Dataset/>}
-                        <QueryInput/>
-                        <TimeRangeInput/>
-                        <SearchButton/>
-                    </>
-                ) : (
-                    <>
-                        <SqlQueryInput/>
-                        <RunButton/>
-                    </>
-                )}
+                {SETTINGS_QUERY_ENGINE === CLP_QUERY_ENGINES.NATIVE ?
+                    (
+                        <>
+                            {CLP_STORAGE_ENGINES.CLP_S === SETTINGS_STORAGE_ENGINE && <Dataset/>}
+                            <QueryInput/>
+                            <TimeRangeInput/>
+                            <SearchButton/>
+                        </>
+                    ) :
+                    (
+                        <>
+                            <SqlQueryInput/>
+                            <RunButton/>
+                        </>
+                    )}
             </div>
         </form>
     );