latest

Author: Marco

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

@@ -3,6 +3,7 @@ import {
     useEffect,
     useImperativeHandle,
     useRef,
+    useState,
 } from "react";
 
 import {
@@ -53,21 +54,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;
         }
+        // Default theme to match AntD input
+        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", // transparent
+            },
+        });
+        // Disabled theme uses vs as base
         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", // transparent
             },
         });
     }, [
@@ -77,39 +88,44 @@ 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",
-                            height: "100%",
-                            width: "100%",
-                        }}/>
+                    style={{
+                        backgroundColor: token.colorBgContainer,
+                        height: "100%",
+                        width: "100%",
+                    }}/>
                 }
                 options={{
                     automaticLayout: true,
                     folding: false,
-                    fontSize: 16,
                     lineNumbers: "off",
                     minimap: {enabled: false},
                     overviewRulerBorder: false,
                     placeholder: "Enter your SQL query",
-                    renderLineHighlightOnlyWhenFocus: true,
+                    renderLineHighlight: "none",
                     scrollBeyondLastLine: false,
                     wordWrap: "on",
+                    padding: {
+                    top: token.paddingXS,
+                    bottom: token.paddingXS,
+                    },
                 }}
                 theme={disabled ?
                     "disabled-theme" :
-                    "light"}
+                    "default-theme"}
                 onMount={handleEditorDidMount}
-                {...editorProps}/>
+                {...editorProps}
+            />
         </div>
     );
 };

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/SearchControls/QueryStatus/index.module.css

@@ -1,9 +1,3 @@
-.status {
-  margin-left: 2px;
-  padding-top: 4px;
-  margin-bottom: -4px;
-}
-
 .badge {
     padding-bottom: 4px;
 }

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

@@ -20,7 +20,7 @@ const QueryStatus = () => {
     } = useSearchStore();
 
     return (
-        <div className={styles["status"]}>
+        <div>
             {(searchUiState === SEARCH_UI_STATE.QUERYING ||
                 searchUiState === SEARCH_UI_STATE.DONE) && (
                 <Text type={"secondary"}>

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

@@ -11,8 +11,16 @@
 
 .buttonAndStatusRow {
     display: flex;
-    align-items: flex-start; /* Align items to the top */
-    justify-content: space-between; /* Put space between status and button */
+    align-items: flex-start;
+    justify-content: space-between;
     gap: 10px;
 }
 
+.status {
+    margin-left: 2px;
+    padding-top: 4px;
+}
+
+.statusPresto {
+    margin-left: 2px;
+}

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

@@ -40,21 +40,19 @@ const SearchControls = () => {
                             <TimeRangeInput/>
                             <SearchButton/>
                         </div>
-                        <QueryStatus/>
+                        <div className={styles["status"]}>
+                            <QueryStatus/>
+                        </div>
                     </div>
                 ) :
                 (
-
                     <div className={styles["prestoSearchControlsContainer"]}>
                         <SqlQueryInput/>
                         <div className={styles["buttonAndStatusRow"]}>
-                            <div style={{ alignSelf: "flex-start" }}>
+                            <div className={styles["statusPresto"]}>
                                 <QueryStatus/>
                             </div>
-                            <div style={{ flex: 1 }} />
-                            <div style={{ alignSelf: "flex-end" }}>
-                                <SqlSearchButton/>
-                            </div>
+                            <SqlSearchButton/>
                         </div>
                     </div>
                 )}