feat(webui): Reset states when switching between freeform and guided. (#1482)

Author: davemarco

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

@@ -2,9 +2,8 @@ import {EditOutlined} from "@ant-design/icons";
 import {Button} from "antd";
 
 import useSearchStore from "../../../../SearchState/index";
-import usePrestoSearchState from "../../../../SearchState/Presto";
-import {PRESTO_SQL_INTERFACE} from "../../../../SearchState/Presto/typings";
 import {SEARCH_UI_STATE} from "../../../../SearchState/typings";
+import {handleSwitchToFreeform} from "../../presto-guided-search-requests";
 
 
 /**
@@ -13,13 +12,12 @@ import {SEARCH_UI_STATE} from "../../../../SearchState/typings";
  * @return
  */
 const FreeformButton = () => {
-    const setSqlInterface = usePrestoSearchState((state) => state.setSqlInterface);
     const searchUiState = useSearchStore((state) => state.searchUiState);
     const disabled = searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
         searchUiState === SEARCH_UI_STATE.QUERYING;
 
     const handleClick = () => {
-        setSqlInterface(PRESTO_SQL_INTERFACE.FREEFORM);
+        handleSwitchToFreeform();
     };
 
     return (

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

@@ -2,9 +2,8 @@ import {AppstoreOutlined} from "@ant-design/icons";
 import {Button} from "antd";
 
 import useSearchStore from "../../../../SearchState/index";
-import usePrestoSearchState from "../../../../SearchState/Presto";
-import {PRESTO_SQL_INTERFACE} from "../../../../SearchState/Presto/typings";
 import {SEARCH_UI_STATE} from "../../../../SearchState/typings";
+import {handleSwitchToGuided} from "../../presto-search-requests";
 
 
 /**
@@ -13,13 +12,12 @@ import {SEARCH_UI_STATE} from "../../../../SearchState/typings";
  * @return
  */
 const GuidedButton = () => {
-    const setSqlInterface = usePrestoSearchState((state) => state.setSqlInterface);
     const searchUiState = useSearchStore((state) => state.searchUiState);
     const disabled = searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
         searchUiState === SEARCH_UI_STATE.QUERYING;
 
     const handleClick = () => {
-        setSqlInterface(PRESTO_SQL_INTERFACE.GUIDED);
+        handleSwitchToGuided();
     };
 
     return (

components/webui/client/src/pages/SearchPage/SearchControls/Presto/presto-guided-search-requests.ts

@@ -11,7 +11,8 @@ import {
     buildTimelineQuery,
 } from "../../../../sql-parser";
 import useSearchStore, {SEARCH_STATE_DEFAULT} from "../../SearchState";
-import usePrestoSearchState from "../../SearchState/Presto";
+import usePrestoSearchState, {PRESTO_SEARCH_STATE_DEFAULT} from "../../SearchState/Presto";
+import {PRESTO_SQL_INTERFACE} from "../../SearchState/Presto/typings";
 import {SEARCH_UI_STATE} from "../../SearchState/typings";
 
 
@@ -209,8 +210,53 @@ const handlePrestoGuidedQueryCancel = (searchJobId: string, aggregationJobId: st
         });
 };
 
+/**
+ * Handles switching to freeform SQL interface by clearing results and resetting states.
+ */
+const handleSwitchToFreeform = () => {
+    const {
+        searchUiState,
+        updateSearchUiState,
+        updateSearchJobId,
+        updateAggregationJobId,
+        updateNumSearchResultsTable,
+        updateNumSearchResultsTimeline,
+        updateNumSearchResultsMetadata,
+    } = useSearchStore.getState();
+    const {
+        setSqlInterface,
+        updateErrorMsg,
+        updateErrorName,
+        updateCachedGuidedSearchQueryString,
+        updateQueryDrawerOpen,
+    } = usePrestoSearchState.getState();
+
+    setSqlInterface(PRESTO_SQL_INTERFACE.FREEFORM);
+
+    // If already in default state, nothing to clear
+    if (searchUiState === SEARCH_UI_STATE.DEFAULT) {
+        return;
+    }
+
+    handlePrestoGuidedClearResults();
+
+    updateSearchJobId(SEARCH_STATE_DEFAULT.searchJobId);
+    updateAggregationJobId(SEARCH_STATE_DEFAULT.aggregationJobId);
+    updateNumSearchResultsTable(SEARCH_STATE_DEFAULT.numSearchResultsTable);
+    updateNumSearchResultsTimeline(SEARCH_STATE_DEFAULT.numSearchResultsTimeline);
+    updateNumSearchResultsMetadata(SEARCH_STATE_DEFAULT.numSearchResultsMetadata);
+
+    updateSearchUiState(SEARCH_UI_STATE.DEFAULT);
+
+    updateErrorMsg(PRESTO_SEARCH_STATE_DEFAULT.errorMsg);
+    updateErrorName(PRESTO_SEARCH_STATE_DEFAULT.errorName);
+    updateCachedGuidedSearchQueryString(PRESTO_SEARCH_STATE_DEFAULT.cachedGuidedSearchQueryString);
+    updateQueryDrawerOpen(PRESTO_SEARCH_STATE_DEFAULT.queryDrawerOpen);
+};
+
 export {
     buildPrestoGuidedQueries,
     handlePrestoGuidedQueryCancel,
     handlePrestoGuidedQuerySubmit,
+    handleSwitchToFreeform,
 };

components/webui/client/src/pages/SearchPage/SearchControls/Presto/presto-search-requests.ts

@@ -9,6 +9,8 @@ import {
     submitQuery,
 } from "../../../../api/presto-search";
 import useSearchStore, {SEARCH_STATE_DEFAULT} from "../../SearchState";
+import usePrestoSearchState from "../../SearchState/Presto";
+import {PRESTO_SQL_INTERFACE} from "../../SearchState/Presto/typings";
 import {SEARCH_UI_STATE} from "../../SearchState/typings";
 
 
@@ -107,7 +109,36 @@ const handlePrestoQueryCancel = (payload: PrestoQueryJob) => {
         });
 };
 
+/**
+ * Handles switching to guided SQL interface by clearing results and resetting states.
+ */
+const handleSwitchToGuided = () => {
+    const {
+        searchUiState,
+        updateSearchUiState,
+        updateSearchJobId,
+        updateNumSearchResultsTable,
+        updateNumSearchResultsMetadata,
+    } = useSearchStore.getState();
+    const {setSqlInterface} = usePrestoSearchState.getState();
+
+    setSqlInterface(PRESTO_SQL_INTERFACE.GUIDED);
+
+    if (searchUiState === SEARCH_UI_STATE.DEFAULT) {
+        return;
+    }
+
+    handlePrestoClearResults();
+
+    updateSearchJobId(SEARCH_STATE_DEFAULT.searchJobId);
+    updateNumSearchResultsTable(SEARCH_STATE_DEFAULT.numSearchResultsTable);
+    updateNumSearchResultsMetadata(SEARCH_STATE_DEFAULT.numSearchResultsMetadata);
+
+    updateSearchUiState(SEARCH_UI_STATE.DEFAULT);
+};
+
 export {
     handlePrestoQueryCancel,
     handlePrestoQuerySubmit,
+    handleSwitchToGuided,
 };

components/webui/client/src/pages/SearchPage/SearchState/useUpdateStateWithMetadata.ts

@@ -29,6 +29,7 @@ const useUpdateStateWithMetadata = () => {
     const {
         updateNumSearchResultsMetadata,
         updateSearchUiState,
+        searchUiState,
     } = useSearchStore();
     const {updateErrorMsg, updateErrorName, sqlInterface} = usePrestoSearchState();
     const resultsMetadata = useResultsMetadata();
@@ -38,6 +39,10 @@ const useUpdateStateWithMetadata = () => {
             return;
         }
 
+        if (searchUiState === SEARCH_UI_STATE.DEFAULT) {
+            return;
+        }
+
         if ("undefined" !== typeof resultsMetadata.numTotalResults) {
             updateNumSearchResultsMetadata(resultsMetadata.numTotalResults);
         }
@@ -84,6 +89,7 @@ const useUpdateStateWithMetadata = () => {
         updateNumSearchResultsMetadata,
         updateErrorMsg,
         updateErrorName,
+        searchUiState,
         updateSearchUiState,
         sqlInterface,
     ]);