feat(webui): Replace FROM input on guided Presto UI with a dataset selector. (#1314)

Author: davemarco

components/webui/client/src/pages/SearchPage/SearchControls/Dataset/DatasetSelect.tsx

@@ -0,0 +1,70 @@
+import {useEffect} from "react";
+import {useQuery} from "@tanstack/react-query";
+import {message, Select, SelectProps} from "antd";
+import useSearchStore from "../../SearchState/index";
+import {SEARCH_UI_STATE} from "../../SearchState/typings";
+import {fetchDatasetNames} from "./sql";
+
+const DatasetSelect = (selectProps: SelectProps) => {
+    const dataset = useSearchStore((state) => state.selectDataset);
+    const updateDataset = useSearchStore((state) => state.updateSelectDataset);
+    const searchUiState = useSearchStore((state) => state.searchUiState);
+
+    const [messageApi, contextHolder] = message.useMessage();
+
+    const {data, isPending, isSuccess, error} = useQuery({
+        queryKey: ["datasets"],
+        queryFn: fetchDatasetNames,
+    });
+
+    useEffect(() => {
+        if (isSuccess) {
+            if ("undefined" !== typeof data[0] && null === dataset) {
+                updateDataset(data[0]);
+            }
+        }
+    }, [isSuccess, data, dataset, updateDataset]);
+
+    useEffect(() => {
+        if (error) {
+            messageApi.error({
+                key: "fetchError",
+                content: "Error fetching datasets.",
+            });
+        }
+    }, [error, messageApi]);
+
+    useEffect(() => {
+        if (isSuccess && 0 === data.length) {
+            messageApi.warning({
+                key: "noData",
+                content: "No data has been ingested. Please ingest data to search.",
+            });
+            updateDataset(null);
+        }
+    }, [data, isSuccess, messageApi, updateDataset]);
+
+    const handleDatasetChange = (value: string) => {
+        updateDataset(value);
+    };
+
+    return (
+        <>
+            {contextHolder}
+            <Select
+                loading={isPending}
+                options={(data || []).map((option) => ({label: option, value: option}))}
+                value={dataset}
+                size="middle"
+                disabled={
+                    searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
+                    searchUiState === SEARCH_UI_STATE.QUERYING
+                }
+                onChange={handleDatasetChange}
+                {...selectProps}
+            />
+        </>
+    );
+};
+
+export default DatasetSelect;

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

@@ -1,16 +1,6 @@
-import {useEffect} from "react";
-
-import {useQuery} from "@tanstack/react-query";
-import {
-    message,
-    Select,
-} from "antd";
-
 import InputLabel from "../../../../components/InputLabel";
-import useSearchStore from "../../SearchState/index";
-import {SEARCH_UI_STATE} from "../../SearchState/typings";
 import styles from "./index.module.css";
-import {fetchDatasetNames} from "./sql";
+import DatasetSelect from "./DatasetSelect";
 
 
 /**
@@ -19,80 +9,10 @@ import {fetchDatasetNames} from "./sql";
  * @return
  */
 const Dataset = () => {
-    const dataset = useSearchStore((state) => state.selectDataset);
-    const updateDataset = useSearchStore((state) => state.updateSelectDataset);
-    const searchUiState = useSearchStore((state) => state.searchUiState);
-
-    const [messageApi, contextHolder] = message.useMessage();
-
-    const {data, isPending, isSuccess, error} = useQuery({
-        queryKey: ["datasets"],
-        queryFn: fetchDatasetNames,
-    });
-
-    // Update the selected dataset to the first dataset in the response. The dataset is only
-    // updated if it isn't already set (i.e., on initial response).
-    useEffect(() => {
-        if (isSuccess) {
-            if ("undefined" !== typeof data[0] && null === dataset) {
-                updateDataset(data[0]);
-            }
-        }
-    }, [isSuccess,
-        data,
-        dataset,
-        updateDataset]);
-
-    // Display error message if the query fails since user querying is disabled if no datasets.
-    useEffect(() => {
-        if (error) {
-            messageApi.error({
-                key: "fetchError",
-                content: "Error fetching datasets.",
-            });
-        }
-    }, [error,
-        messageApi]);
-
-    // Display warning message if response empty since user querying is disabled if no
-    // datasets.
-    useEffect(() => {
-        if (isSuccess && 0 === data.length) {
-            messageApi.warning({
-                key: "noData",
-                content: "No data has been ingested. Please ingest data to search.",
-            });
-
-            // If all datasets were deleted, the dataset state must be reset to null to disable
-            // submit button since dataset option required to query clp-s.
-            updateDataset(null);
-        }
-    }, [data,
-        isSuccess,
-        messageApi,
-        updateDataset]);
-
-    const handleDatasetChange = (value: string) => {
-        updateDataset(value);
-    };
-
     return (
         <div className={styles["datasetContainer"]}>
-            {contextHolder}
             <InputLabel>Dataset</InputLabel>
-            <Select
-                className={styles["select"] || ""}
-                loading={isPending}
-                options={(data || []).map((option) => ({label: option, value: option}))}
-                placeholder={"None"}
-                showSearch={true}
-                size={"middle"}
-                value={dataset}
-                disabled={
-                    searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
-                    searchUiState === SEARCH_UI_STATE.QUERYING
-                }
-                onChange={handleDatasetChange}/>
+            <DatasetSelect className={styles["select"] || ""} />
         </div>
     );
 };

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

@@ -1,5 +1,5 @@
 import InputLabel from "../../../../../components/InputLabel";
-import SqlInput from "../../../../../components/SqlInput";
+import DatasetSelect from "../../Dataset/DatasetSelect";
 import guidedGrid from "./index.module.css";
 
 
@@ -11,9 +11,11 @@ import guidedGrid from "./index.module.css";
 const From = () => (
     <div className={guidedGrid["from"]}>
         <InputLabel>FROM</InputLabel>
-        <SqlInput
-            className={guidedGrid["noLeftBorderRadius"] || ""}
-            disabled={false}/>
+        <DatasetSelect
+            className={
+                `${guidedGrid["noLeftBorderRadiusSelect"]} ${
+                    guidedGrid["widthSelect"]}`
+            }/>
     </div>
 );