feat(webui): Move run button under SQL query input; Modify SQL editor theming to look like AntD input. (#1248)

Author: davemarco

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

@@ -53,21 +53,31 @@ const SqlEditor = (props: SqlEditorProps) => {
         onEditorReady?.();
     }, [onEditorReady]);
 
-    // Define disabled theme for monaco editor
+    // Define default and disabled themes for monaco editor
     useEffect(() => {
         if (null === monacoEditor) {
             return;
         }
+
+        monacoEditor.editor.defineTheme("default-theme", {
+            base: "vs",
+            inherit: true,
+            rules: [],
+            colors: {
+                "editor.background": color(token.colorBgContainer).hexa(),
+                "editor.foreground": color(token.colorText).hexa(),
+                "focusBorder": "#0000",
+            },
+        });
+
         monacoEditor.editor.defineTheme("disabled-theme", {
             base: "vs",
             inherit: true,
             rules: [],
             colors: {
                 "editor.background": color(token.colorBgContainerDisabled).hexa(),
                 "editor.foreground": color(token.colorTextDisabled).hexa(),
-
-                // transparent
-                "focusBorder": "#00000000",
+                "focusBorder": "#0000",
             },
         });
     }, [
@@ -77,37 +87,42 @@ const SqlEditor = (props: SqlEditorProps) => {
 
     return (
         <div
-            style={
-                disabled ?
-                    {pointerEvents: "none"} :
-                    {}
-            }
+            style={{
+                border: `1px solid ${token.colorBorder}`,
+                borderRadius: token.borderRadius,
+                pointerEvents: disabled ?
+                    "none" :
+                    "auto",
+            }}
         >
             <Editor
                 language={"sql"}
                 loading={
                     <div
                         style={{
-                            backgroundColor: "white",
+                            backgroundColor: token.colorBgContainer,
                             height: "100%",
                             width: "100%",
                         }}/>
                 }
                 options={{
                     automaticLayout: true,
                     folding: false,
-                    fontSize: 16,
                     lineNumbers: "off",
                     minimap: {enabled: false},
                     overviewRulerBorder: false,
+                    padding: {
+                        top: token.paddingXS,
+                        bottom: token.paddingXS,
+                    },
                     placeholder: "Enter your SQL query",
-                    renderLineHighlightOnlyWhenFocus: true,
+                    renderLineHighlight: "none",
                     scrollBeyondLastLine: false,
                     wordWrap: "on",
                 }}
                 theme={disabled ?
                     "disabled-theme" :
-                    "light"}
+                    "default-theme"}
                 onMount={handleEditorDidMount}
                 {...editorProps}/>
         </div>

components/webui/client/src/components/SqlEditor/monaco-loader.ts

@@ -1,11 +1,12 @@
-/* eslint-disable import/default, @stylistic/max-len */
+/* eslint-disable import/default */
 import {loader} from "@monaco-editor/react";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
 import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+
 import "monaco-editor/esm/vs/basic-languages/sql/sql.contribution.js";
 
 
-/* eslint-enable import/default, @stylistic/max-len */
+/* eslint-enable import/default */
 
 
 self.MonacoEnvironment = {

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

@@ -34,7 +34,7 @@ const CancelButton = () => {
                 className={styles["cancelButton"] || ""}
                 color={"red"}
                 icon={<CloseOutlined/>}
-                size={"large"}
+                size={"middle"}
                 variant={"solid"}
                 onClick={handleClick}
             >

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

@@ -36,7 +36,7 @@ const RunButton = () => {
                 className={styles["runButton"] || ""}
                 color={"green"}
                 icon={<CaretRightOutlined/>}
-                size={"large"}
+                size={"middle"}
                 variant={"solid"}
                 disabled={isQueryStringEmpty ||
                     searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING}

components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/index.module.css

@@ -1,3 +1,3 @@
 .runButtonContainer {
-    width: 130px;
+    width: 100px;
 }

components/webui/client/src/pages/SearchPage/SearchQueryStatus/Results.tsx renamed to components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/Results.tsx

@@ -5,8 +5,8 @@ import {
     Typography,
 } from "antd";
 
-import useSearchStore from "../SearchState/index";
-import {SEARCH_UI_STATE} from "../SearchState/typings";
+import useSearchStore from "../../SearchState/index";
+import {SEARCH_UI_STATE} from "../../SearchState/typings";
 
 
 const {Text} = Typography;

components/webui/client/src/pages/SearchPage/SearchQueryStatus/index.tsx renamed to components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.tsx

@@ -1,8 +1,7 @@
 import {Typography} from "antd";
 
-import useSearchStore from "../SearchState/index";
-import {SEARCH_UI_STATE} from "../SearchState/typings";
-import styles from "./index.module.css";
+import useSearchStore from "../../SearchState/index";
+import {SEARCH_UI_STATE} from "../../SearchState/typings";
 import Results from "./Results";
 
 
@@ -13,14 +12,14 @@ const {Text} = Typography;
  *
  * @return
  */
-const SearchQueryStatus = () => {
+const QueryStatus = () => {
     const {
         searchJobId,
         searchUiState,
     } = useSearchStore();
 
     return (
-        <div className={styles["status"]}>
+        <div>
             {(searchUiState === SEARCH_UI_STATE.QUERYING ||
                 searchUiState === SEARCH_UI_STATE.DONE) && (
                 <Text type={"secondary"}>
@@ -39,4 +38,4 @@ const SearchQueryStatus = () => {
 };
 
 
-export default SearchQueryStatus;
+export default QueryStatus;

components/webui/client/src/pages/SearchPage/SearchControls/index.module.css

@@ -1,4 +1,21 @@
 .searchControlsContainer {
     display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.inputsAndButtonRow {
+    display: flex;
+    gap: 10px;
+}
+
+.buttonAndStatusRow {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
     gap: 10px;
 }
+
+.status {
+    margin-left: 2px;
+}

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

@@ -9,6 +9,7 @@ import styles from "./index.module.css";
 import SqlQueryInput from "./Presto/SqlQueryInput";
 import SqlSearchButton from "./Presto/SqlSearchButton";
 import QueryInput from "./QueryInput";
+import QueryStatus from "./QueryStatus";
 import SearchButton from "./SearchButton";
 import TimeRangeInput from "./TimeRangeInput";
 
@@ -23,30 +24,38 @@ const handleSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
 };
 
 /**
- * Renders controls for submitting queries.
+ * Renders controls for submitting queries and the query status.
  *
  * @return
  */
 const SearchControls = () => {
     return (
         <form onSubmit={handleSubmit}>
-            <div className={styles["searchControlsContainer"]}>
-                {SETTINGS_QUERY_ENGINE !== CLP_QUERY_ENGINES.PRESTO ?
-                    (
-                        <>
+            {SETTINGS_QUERY_ENGINE !== CLP_QUERY_ENGINES.PRESTO ?
+                (
+                    <div className={styles["searchControlsContainer"]}>
+                        <div className={styles["inputsAndButtonRow"]}>
                             {CLP_STORAGE_ENGINES.CLP_S === SETTINGS_STORAGE_ENGINE && <Dataset/>}
                             <QueryInput/>
                             <TimeRangeInput/>
                             <SearchButton/>
-                        </>
-                    ) :
-                    (
-                        <>
-                            <SqlQueryInput/>
+                        </div>
+                        <div className={styles["status"]}>
+                            <QueryStatus/>
+                        </div>
+                    </div>
+                ) :
+                (
+                    <div className={styles["searchControlsContainer"]}>
+                        <SqlQueryInput/>
+                        <div className={styles["buttonAndStatusRow"]}>
+                            <div className={styles["status"]}>
+                                <QueryStatus/>
+                            </div>
                             <SqlSearchButton/>
-                        </>
-                    )}
-            </div>
+                        </div>
+                    </div>
+                )}
         </form>
     );
 };