feat(webui): Add guided query mode button; Add a temporary env var to enable the guided query mode. (#1276)

Author: davemarco

components/webui/client/package.json

@@ -7,7 +7,8 @@
     "build": "tsc -b && vite build",
     "lint:check": "eslint",
     "lint:fix": "eslint --fix",
-    "start": "vite"
+    "start": "vite",
+    "guided": "VITE_GUIDED_DEV=true npm run start"
   },
   "author": "YScope Inc. <[email protected]>",
   "license": "Apache-2.0",

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

@@ -0,0 +1,35 @@
+import {EditOutlined} from "@ant-design/icons";
+import {Button} from "antd";
+
+import usePrestoSearchState from "../../../../SearchState/Presto";
+import {PRESTO_SQL_INTERFACE} from "../../../../SearchState/Presto/typings";
+
+
+/**
+ * Renders a button to switch to Freeform SQL interface.
+ *
+ * @return
+ */
+const FreeformButton = () => {
+    const setSqlInterface = usePrestoSearchState((state) => state.setSqlInterface);
+
+    const handleClick = () => {
+        setSqlInterface(PRESTO_SQL_INTERFACE.FREEFORM);
+    };
+
+    return (
+        <Button
+            block={true}
+            color={"default"}
+            icon={<EditOutlined/>}
+            size={"middle"}
+            variant={"filled"}
+            onClick={handleClick}
+        >
+            Freeform
+        </Button>
+    );
+};
+
+
+export default FreeformButton;

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

@@ -0,0 +1,34 @@
+import {AppstoreOutlined} from "@ant-design/icons";
+import {Button} from "antd";
+
+import usePrestoSearchState from "../../../../SearchState/Presto";
+import {PRESTO_SQL_INTERFACE} from "../../../../SearchState/Presto/typings";
+
+
+/**
+ * Renders a button to switch to Guided SQL interface.
+ *
+ * @return
+ */
+const GuidedButton = () => {
+    const setSqlInterface = usePrestoSearchState((state) => state.setSqlInterface);
+
+    const handleClick = () => {
+        setSqlInterface(PRESTO_SQL_INTERFACE.GUIDED);
+    };
+
+    return (
+        <Button
+            block={true}
+            color={"default"}
+            icon={<AppstoreOutlined/>}
+            size={"middle"}
+            variant={"filled"}
+            onClick={handleClick}
+        >
+            Guided
+        </Button>
+    );
+};
+
+export default GuidedButton;

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

@@ -0,0 +1,3 @@
+.sqlInterfaceButton {
+    width: 100px;
+}

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

@@ -0,0 +1,25 @@
+import usePrestoSearchState from "../../../SearchState/Presto";
+import {PRESTO_SQL_INTERFACE} from "../../../SearchState/Presto/typings";
+import FreeformButton from "./FreeformButton";
+import GuidedButton from "./GuidedButton";
+import styles from "./index.module.css";
+
+
+/**
+ * Renders the button to switch Presto SQL interface.
+ *
+ * @return
+ */
+const SqlInterfaceButton = () => {
+    const sqlInterface = usePrestoSearchState((state) => state.sqlInterface);
+
+    return (
+        <div className={styles["sqlInterfaceButton"]}>
+            {sqlInterface === PRESTO_SQL_INTERFACE.GUIDED ?
+                <FreeformButton/> :
+                <GuidedButton/>}
+        </div>
+    );
+};
+
+export default SqlInterfaceButton;

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

@@ -9,13 +9,19 @@
     gap: 10px;
 }
 
-.buttonAndStatusRow {
+.status {
+    margin-left: 2px;
+}
+
+.statusAndButtonsRow {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 10px;
 }
 
-.status {
-    margin-left: 2px;
+.buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
 }

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

@@ -6,6 +6,7 @@ import {
 } from "../../../config";
 import Dataset from "./Dataset";
 import styles from "./index.module.css";
+import SqlInterfaceButton from "./Presto/SqlInterfaceButton";
 import SqlQueryInput from "./Presto/SqlQueryInput";
 import SqlSearchButton from "./Presto/SqlSearchButton";
 import QueryInput from "./QueryInput";
@@ -29,6 +30,10 @@ const handleSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
  * @return
  */
 const SearchControls = () => {
+    /* eslint-disable-next-line no-warning-comments */
+    // TODO: Remove flag and related logic when the new guide UI is fully implemented.
+    const isGuidedEnabled = "true" === import.meta.env[`VITE_GUIDED_DEV`];
+
     return (
         <form onSubmit={handleSubmit}>
             {SETTINGS_QUERY_ENGINE !== CLP_QUERY_ENGINES.PRESTO ?
@@ -48,11 +53,14 @@ const SearchControls = () => {
                 (
                     <div className={styles["searchControlsContainer"]}>
                         <SqlQueryInput/>
-                        <div className={styles["buttonAndStatusRow"]}>
+                        <div className={styles["statusAndButtonsRow"]}>
                             <div className={styles["status"]}>
                                 <QueryStatus/>
                             </div>
-                            <SqlSearchButton/>
+                            <div className={styles["buttons"]}>
+                                {isGuidedEnabled && <SqlInterfaceButton/>}
+                                <SqlSearchButton/>
+                            </div>
                         </div>
                     </div>
                 )}

components/webui/client/src/pages/SearchPage/SearchState/Presto/index.tsx

@@ -0,0 +1,30 @@
+import {create} from "zustand";
+
+import {PRESTO_SQL_INTERFACE} from "./typings";
+
+
+/**
+ * Default values of the Presto search state.
+ */
+const PRESTO_SEARCH_STATE_DEFAULT = Object.freeze({
+    sqlInterface: PRESTO_SQL_INTERFACE.FREEFORM,
+});
+
+interface PrestoSearchState {
+    /**
+     * Presto SQL interface.
+     */
+    sqlInterface: PRESTO_SQL_INTERFACE;
+
+    setSqlInterface: (iface: PRESTO_SQL_INTERFACE) => void;
+}
+
+const usePrestoSearchState = create<PrestoSearchState>((set) => ({
+    ...PRESTO_SEARCH_STATE_DEFAULT,
+    setSqlInterface: (iface) => {
+        set({sqlInterface: iface});
+    },
+}));
+
+export {PRESTO_SEARCH_STATE_DEFAULT};
+export default usePrestoSearchState;

components/webui/client/src/pages/SearchPage/SearchState/Presto/typings.ts

@@ -0,0 +1,14 @@
+/**
+ * Presto SQL interface types.
+ */
+export enum PRESTO_SQL_INTERFACE {
+    /**
+     * Guided interface with limited SQL dialect.
+     */
+    GUIDED = "guided",
+
+    /**
+     * Freeform interface with SQL editor.
+     */
+    FREEFORM = "freeform",
+}