feat(webui): Reorganize Presto search controls onto multiple lines; Replace sql interface selector with tabs.

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

@@ -28,6 +28,7 @@ const InputLabel = ({children, width}: {children: React.ReactNode; width?: strin
                 borderTopLeftRadius: `${token.borderRadius}px`,
                 fontSize: token.fontSize,
                 minWidth: width,
+                width: width,
             }}
         >
             {children}

components/webui/client/src/pages/SearchPage/SearchControls/Presto/Freeform/FreeformControls.tsx

@@ -1,6 +1,5 @@
 import styles from "../../index.module.css";
 import QueryStatus from "../../QueryStatus";
-import SqlInterfaceSelector from "../SqlInterfaceSelector";
 import SqlSearchButton from "../SqlSearchButton";
 import SqlQueryInput from "./SqlQueryInput";
 
@@ -12,11 +11,14 @@ import SqlQueryInput from "./SqlQueryInput";
  */
 const FreeformControls = () => (
     <div className={styles["searchControlsContainer"]}>
-        <div className={styles["runRow"]}>
-            <SqlInterfaceSelector/>
-            <SqlSearchButton/>
+        <div className={styles["inputsAndRunRow"]}>
+            <div className={styles["inputGrow"]}>
+                <SqlQueryInput/>
+            </div>
+            <div className={styles["runColumn"]}>
+                <SqlSearchButton/>
+            </div>
         </div>
-        <SqlQueryInput/>
         <div className={styles["status"]}>
             <QueryStatus/>
         </div>

components/webui/client/src/pages/SearchPage/SearchControls/Presto/Guided/GuidedControls/From.tsx

@@ -14,10 +14,8 @@ const From = () => {
         <div className={guidedGrid["gridItem"]}>
             <InputLabel width={LABEL_WIDTH}>FROM</InputLabel>
             <DatasetSelect
-                className={
-                    `${guidedGrid["noLeftBorderRadiusSelect"]} ${
-                        guidedGrid["widthSelect"]}`
-                }/>
+                className={`${guidedGrid["sqlInput"]} ${guidedGrid["noLeftBorderRadiusSelect"]} ${
+                    guidedGrid["widthSelect"]}`}/>
         </div>
     );
 };

components/webui/client/src/pages/SearchPage/SearchControls/Presto/Guided/GuidedControls/OrderBy.tsx

@@ -24,7 +24,7 @@ const OrderBy = () => {
         <div className={guidedGrid["gridItem"]}>
             <InputLabel width={LABEL_WIDTH}>ORDER BY</InputLabel>
             <SqlInput
-                className={guidedGrid["noLeftBorderRadius"] || ""}
+                className={`${guidedGrid["sqlInput"]} ${guidedGrid["noLeftBorderRadius"]}`}
                 disabled={disabled}
                 validateFn={validateSortItemList}
                 value={orderBy}

components/webui/client/src/pages/SearchPage/SearchControls/Presto/Guided/GuidedControls/Select.tsx

@@ -24,7 +24,7 @@ const Select = () => {
         <div className={guidedGrid["gridItem"]}>
             <InputLabel width={LABEL_WIDTH}>SELECT</InputLabel>
             <SqlInput
-                className={guidedGrid["noLeftBorderRadius"] || ""}
+                className={`${guidedGrid["sqlInput"]} ${guidedGrid["noLeftBorderRadius"]}`}
                 disabled={disabled}
                 validateFn={validateSelectItemList}
                 value={select}

components/webui/client/src/pages/SearchPage/SearchControls/Presto/Guided/GuidedControls/Where.tsx

@@ -24,7 +24,7 @@ const Where = () => {
         <div className={guidedGrid["gridItem"]}>
             <InputLabel width={LABEL_WIDTH}>WHERE</InputLabel>
             <SqlInput
-                className={guidedGrid["noLeftBorderRadius"] || ""}
+                className={`${guidedGrid["sqlInput"]} ${guidedGrid["noLeftBorderRadius"]}`}
                 disabled={disabled}
                 validateFn={validateBooleanExpression}
                 value={where}

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

@@ -1,13 +1,22 @@
 .gridContainer {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(100px, 1fr));
-    grid-auto-rows: 32px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
     gap: 5px;
+    min-width: 0;
 }
 
 .gridItem {
     grid-column: span 1;
     display: flex;
+    align-items: stretch;
+    min-height: 32px;
+    width: 100%;
+}
+
+.sqlInput {
+    flex: 1;
+    min-width: 0;
 }
 
 .timestampKey {
@@ -29,3 +38,50 @@
     border-top-left-radius: 0!important;
     border-bottom-left-radius: 0!important;
 }
+
+.datasetRow {
+    display: flex;
+    gap: 10px;
+    align-items: stretch;
+    flex-wrap: wrap;
+    width: 100%;
+}
+
+.datasetContainer {
+    display: flex;
+    flex: 0 0 auto;
+    min-width: 0;
+    align-items: stretch;
+    min-height: 32px;
+}
+
+.datasetSelect {
+    width: 100px;
+    min-width: 100px;
+}
+
+.datasetSelect :global(.ant-select-selector) {
+    height: 100%;
+}
+
+.timeRangeContainer {
+    display: flex;
+    flex: 1;
+    justify-content: flex-end;
+    min-width: 350px;
+}
+
+.inputsAndRunRow {
+    display: flex;
+    align-items: stretch;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+.runColumn {
+    display: flex;
+    align-items: stretch;
+    justify-content: flex-end;
+    flex-shrink: 0;
+    align-self: stretch;
+}

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

@@ -1,14 +1,15 @@
 import useTimestampKeyInit from "../../../../SearchState/Presto/useTimestampKeyInit";
 import searchStyles from "../../../index.module.css";
+import InputLabel from "../../../../../../components/InputLabel";
+import DatasetSelect from "../../../Dataset/DatasetSelect";
 import QueryStatus from "../../../QueryStatus";
 import TimeRangeInput from "../../../TimeRangeInput";
-import SqlInterfaceSelector from "../../SqlInterfaceSelector";
 import SqlSearchButton from "../../SqlSearchButton";
-import From from "./From";
 import guidedGrid from "./index.module.css";
 import OrderBy from "./OrderBy";
 import Select from "./Select";
 import Where from "./Where";
+import {LABEL_WIDTH} from "./typings";
 
 
 /**
@@ -22,20 +23,25 @@ const GuidedControls = () => {
     return (
         <div className={searchStyles["searchControlsContainer"]}>
             {contextHolder}
-            <div className={searchStyles["runRow"]}>
-                <div>
-                    <SqlInterfaceSelector/>
+            <div className={guidedGrid["datasetRow"]}>
+                <div className={guidedGrid["datasetContainer"]}>
+                    <InputLabel width={LABEL_WIDTH}>DATASET</InputLabel>
+                    <DatasetSelect
+                        className={`${guidedGrid["datasetSelect"]} ${guidedGrid["noLeftBorderRadiusSelect"]}`}/>
                 </div>
-                <div className={searchStyles["buttons"]}>
+                <div className={guidedGrid["timeRangeContainer"]}>
                     <TimeRangeInput/>
-                    <SqlSearchButton/>
                 </div>
             </div>
-            <div className={guidedGrid["gridContainer"]}>
-                <Select/>
-                <From/>
-                <Where/>
-                <OrderBy/>
+            <div className={guidedGrid["inputsAndRunRow"]}>
+                <div className={guidedGrid["gridContainer"]}>
+                    <Select/>
+                    <Where/>
+                    <OrderBy/>
+                </div>
+                <div className={guidedGrid["runColumn"]}>
+                    <SqlSearchButton/>
+                </div>
             </div>
             <div className={searchStyles["status"]}>
                 <QueryStatus/>

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

@@ -1,3 +1,14 @@
 .sqlInterfaceButton {
-    width: 190px;
+    width: 100%;
+    margin-bottom: 0px;
+}
+
+.sqlInterfaceButton :global(.ant-tabs-nav) {
+    margin-bottom: 8px;
+}
+
+.tabLabel {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
 }

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

@@ -1,14 +1,7 @@
 import {useCallback} from "react";
 
-import {
-    AppstoreOutlined,
-    EditOutlined,
-} from "@ant-design/icons";
-import {
-    ConfigProvider,
-    Segmented,
-    theme,
-} from "antd";
+import {AppstoreOutlined, EditOutlined} from "@ant-design/icons";
+import {Tabs} from "antd";
 
 import useSearchStore from "../../../SearchState";
 import usePrestoSearchState from "../../../SearchState/Presto";
@@ -25,7 +18,6 @@ import styles from "./index.module.css";
  * @return
  */
 const SqlInterfaceSelector = () => {
-    const {token} = theme.useToken();
     const sqlInterface = usePrestoSearchState((state) => state.sqlInterface);
     const searchUiState = useSearchStore((state) => state.searchUiState);
     const disabled = searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
@@ -48,36 +40,33 @@ const SqlInterfaceSelector = () => {
 
     return (
         <div className={styles["sqlInterfaceButton"]}>
-            <ConfigProvider
-                theme={{
-                    components: {
-                        Segmented: {
-                            trackBg: token.colorBorder,
-                        },
+            <Tabs
+                activeKey={sqlInterface}
+                onChange={(value) => handleChange(value as PRESTO_SQL_INTERFACE)}
+                size="small"
+                items={[
+                    {
+                        key: PRESTO_SQL_INTERFACE.GUIDED,
+                        label: (
+                            <span className={styles["tabLabel"]}>
+                                <AppstoreOutlined/>
+                                Guided
+                            </span>
+                        ),
+                        disabled,
                     },
-                }}
-            >
-                <Segmented
-                    block={true}
-                    disabled={disabled}
-                    size={"middle"}
-                    value={sqlInterface}
-                    options={[
-                        {
-                            label: "Guided",
-                            value: PRESTO_SQL_INTERFACE.GUIDED,
-                            icon: <AppstoreOutlined/>,
-                        },
-                        {
-                            label: "Manual",
-                            value: PRESTO_SQL_INTERFACE.FREEFORM,
-                            icon: <EditOutlined/>,
-                        },
-                    ]}
-                    onChange={(value) => {
-                        handleChange(value);
-                    }}/>
-            </ConfigProvider>
+                    {
+                        key: PRESTO_SQL_INTERFACE.FREEFORM,
+                        label: (
+                            <span className={styles["tabLabel"]}>
+                                <EditOutlined/>
+                                Manual
+                            </span>
+                        ),
+                        disabled,
+                    },
+                ]}
+            />
         </div>
     );
 };

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

@@ -1,3 +1,5 @@
 .cancelButton {
-    width: 100%;
+    min-width: 36px;
+    padding-inline: 8px;
+    height: 100%;
 }

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

@@ -47,12 +47,11 @@ const CancelButton = () => {
                 color={"red"}
                 htmlType={"button"}
                 icon={<CloseOutlined/>}
+                aria-label={"Cancel query"}
                 size={"middle"}
                 variant={"solid"}
                 onClick={handleClick}
-            >
-                Cancel
-            </Button>
+            />
         </Tooltip>
     );
 };

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

@@ -36,14 +36,13 @@ const FreeformRunButton = () => {
                 className={styles["runButton"] || ""}
                 color={"green"}
                 icon={<CaretRightOutlined/>}
+                aria-label={"Run query"}
                 size={"middle"}
                 variant={"solid"}
                 disabled={isQueryStringEmpty ||
                     searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING}
                 onClick={handleClick}
-            >
-                Run
-            </Button>
+            />
         </Tooltip>
     );
 };

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

@@ -91,6 +91,7 @@ const GuidedRunButton = () => {
                 color={"green"}
                 htmlType={"submit"}
                 icon={<CaretRightOutlined/>}
+                aria-label={"Run query"}
                 size={"middle"}
                 variant={"solid"}
                 disabled={!isQueryReady ||
@@ -100,9 +101,7 @@ const GuidedRunButton = () => {
                         throw err;
                     });
                 }}
-            >
-                Run
-            </Button>
+            />
         </Tooltip>
     );
 };

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

@@ -1,3 +1,5 @@
 .runButton {
-    width: 100%;
+    min-width: 36px;
+    padding-inline: 8px;
+    height: 100%;
 }

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

@@ -1,3 +1,7 @@
 .runButtonContainer {
-    width: 100px;
+    width: auto;
+    min-width: 0;
+    display: flex;
+    justify-content: flex-end;
+    height: 100%;
 }