feat(webui): Apply fixed, uniform label widths for SQL inputs in guided Presto UI. (#1639)

Author: davemarco

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

@@ -13,9 +13,10 @@ const {Text} = Typography;
  *
  * @param props
  * @param props.children The label text to display.
+ * @param props.width Optional width for the label.
  * @return
  */
-const InputLabel = ({children}: {children: React.ReactNode}) => {
+const InputLabel = ({children, width}: {children: React.ReactNode; width?: string | number}) => {
     const {token} = theme.useToken();
 
     return (
@@ -26,6 +27,7 @@ const InputLabel = ({children}: {children: React.ReactNode}) => {
                 borderBottomLeftRadius: `${token.borderRadius}px`,
                 borderTopLeftRadius: `${token.borderRadius}px`,
                 fontSize: token.fontSize,
+                minWidth: width,
             }}
         >
             {children}

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

@@ -1,6 +1,7 @@
 import InputLabel from "../../../../../components/InputLabel";
 import DatasetSelect from "../../Dataset/DatasetSelect";
 import guidedGrid from "./index.module.css";
+import {LABEL_WIDTH} from "./typings";
 
 
 /**
@@ -11,7 +12,7 @@ import guidedGrid from "./index.module.css";
 const From = () => {
     return (
         <div className={guidedGrid["gridItem"]}>
-            <InputLabel>FROM</InputLabel>
+            <InputLabel width={LABEL_WIDTH}>FROM</InputLabel>
             <DatasetSelect
                 className={
                     `${guidedGrid["noLeftBorderRadiusSelect"]} ${

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

@@ -5,6 +5,7 @@ import useSearchStore from "../../../SearchState/index";
 import usePrestoSearchState from "../../../SearchState/Presto";
 import {SEARCH_UI_STATE} from "../../../SearchState/typings";
 import guidedGrid from "./index.module.css";
+import {LABEL_WIDTH} from "./typings";
 
 
 /**
@@ -21,7 +22,7 @@ const OrderBy = () => {
 
     return (
         <div className={guidedGrid["gridItem"]}>
-            <InputLabel>ORDER BY</InputLabel>
+            <InputLabel width={LABEL_WIDTH}>ORDER BY</InputLabel>
             <SqlInput
                 className={guidedGrid["noLeftBorderRadius"] || ""}
                 disabled={disabled}

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

@@ -5,6 +5,7 @@ import useSearchStore from "../../../SearchState/index";
 import usePrestoSearchState from "../../../SearchState/Presto";
 import {SEARCH_UI_STATE} from "../../../SearchState/typings";
 import guidedGrid from "./index.module.css";
+import {LABEL_WIDTH} from "./typings";
 
 
 /**
@@ -21,7 +22,7 @@ const Select = () => {
 
     return (
         <div className={guidedGrid["gridItem"]}>
-            <InputLabel>SELECT</InputLabel>
+            <InputLabel width={LABEL_WIDTH}>SELECT</InputLabel>
             <SqlInput
                 className={guidedGrid["noLeftBorderRadius"] || ""}
                 disabled={disabled}

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

@@ -5,6 +5,7 @@ import useSearchStore from "../../../SearchState/index";
 import usePrestoSearchState from "../../../SearchState/Presto";
 import {SEARCH_UI_STATE} from "../../../SearchState/typings";
 import guidedGrid from "./index.module.css";
+import {LABEL_WIDTH} from "./typings";
 
 
 /**
@@ -21,7 +22,7 @@ const Where = () => {
 
     return (
         <div className={guidedGrid["gridItem"]}>
-            <InputLabel>WHERE</InputLabel>
+            <InputLabel width={LABEL_WIDTH}>WHERE</InputLabel>
             <SqlInput
                 className={guidedGrid["noLeftBorderRadius"] || ""}
                 disabled={disabled}

components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/typings.ts

@@ -0,0 +1,6 @@
+/**
+ * The fixed width for SQL clause labels.
+ */
+const LABEL_WIDTH = "85px";
+
+export {LABEL_WIDTH};