Route to query report page after creating new query (#14682)

frontend/pages/queries/edit/EditQueryPage.tsx

@@ -209,33 +209,35 @@ const EditQueryPage = ({
     setShowOpenSchemaActionText(!isSidebarOpen);
   }, [isSidebarOpen]);
 
-  const saveQuery = debounce(async (formData: ICreateQueryRequestBody) => {
-    setIsQuerySaving(true);
-    try {
-      const { query } = await queryAPI.create(formData);
-      router.push(PATHS.EDIT_QUERY(query.id));
-      renderFlash("success", "Query created!");
-      setBackendValidators({});
-    } catch (createError: any) {
-      if (createError.data.errors[0].reason.includes("already exists")) {
-        const teamErrorText =
-          teamNameForQuery && apiTeamIdForQuery !== 0
-            ? `the ${teamNameForQuery} team`
-            : "all teams";
-        setBackendValidators({
-          name: `A query with that name already exists for ${teamErrorText}.`,
-        });
-      } else {
-        renderFlash(
-          "error",
-          "Something went wrong creating your query. Please try again."
-        );
+  const onSubmitNewQuery = debounce(
+    async (formData: ICreateQueryRequestBody) => {
+      setIsQuerySaving(true);
+      try {
+        const { query } = await queryAPI.create(formData);
+        router.push(PATHS.QUERY(query.id, query.team_id));
+        renderFlash("success", "Query created!");
         setBackendValidators({});
+      } catch (createError: any) {
+        if (createError.data.errors[0].reason.includes("already exists")) {
+          const teamErrorText =
+            teamNameForQuery && apiTeamIdForQuery !== 0
+              ? `the ${teamNameForQuery} team`
+              : "all teams";
+          setBackendValidators({
+            name: `A query with that name already exists for ${teamErrorText}.`,
+          });
+        } else {
+          renderFlash(
+            "error",
+            "Something went wrong creating your query. Please try again."
+          );
+          setBackendValidators({});
+        }
+      } finally {
+        setIsQuerySaving(false);
       }
-    } finally {
-      setIsQuerySaving(false);
     }
-  });
+  );
 
   const onUpdateQuery = async (formData: ICreateQueryRequestBody) => {
     if (!queryId) {
@@ -338,7 +340,7 @@ const EditQueryPage = ({
             </div>
             <EditQueryForm
               router={router}
-              saveQuery={saveQuery}
+              onSubmitNewQuery={onSubmitNewQuery}
               onOsqueryTableSelect={onOsqueryTableSelect}
               onUpdate={onUpdateQuery}
               storedQuery={storedQuery}

frontend/pages/queries/edit/components/EditQueryForm/EditQueryForm.tests.tsx

@@ -66,7 +66,7 @@ describe("EditQueryForm - component", () => {
         isStoredQueryLoading={false}
         isQuerySaving={false}
         isQueryUpdating={false}
-        saveQuery={jest.fn()}
+        onSubmitNewQuery={jest.fn()}
         onOsqueryTableSelect={jest.fn()}
         onUpdate={jest.fn()}
         onOpenSchemaSidebar={jest.fn()}

frontend/pages/queries/edit/components/EditQueryForm/EditQueryForm.tsx

@@ -67,7 +67,7 @@ interface IEditQueryFormProps {
   isStoredQueryLoading: boolean;
   isQuerySaving: boolean;
   isQueryUpdating: boolean;
-  saveQuery: (formData: ICreateQueryRequestBody) => void;
+  onSubmitNewQuery: (formData: ICreateQueryRequestBody) => void;
   onOsqueryTableSelect: (tableName: string) => void;
   onUpdate: (formData: ICreateQueryRequestBody) => void;
   onOpenSchemaSidebar: () => void;
@@ -117,7 +117,7 @@ const EditQueryForm = ({
   isStoredQueryLoading,
   isQuerySaving,
   isQueryUpdating,
-  saveQuery,
+  onSubmitNewQuery,
   onOsqueryTableSelect,
   onUpdate,
   onOpenSchemaSidebar,
@@ -166,6 +166,10 @@ const EditQueryForm = ({
 
   const savedQueryMode = !!queryIdForEdit;
   const [errors, setErrors] = useState<{ [key: string]: any }>({}); // string | null | undefined or boolean | undefined
+  // NOTE: SaveQueryModal is only being used to create a new query in this component.
+  // It's easy to confuse with other names like promptSaveQuery, promptSaveAsNewQuery, etc.,
+  // which are used in connection with existing (i.e. previously saved) queries rather
+  // than new queries. Consider renaming some things to distinguish the various flows.
   const [showSaveQueryModal, setShowSaveQueryModal] = useState(false);
   const [showQueryEditor, setShowQueryEditor] = useState(
     isObserverPlus || isAnyTeamObserverPlus || false
@@ -820,7 +824,7 @@ const EditQueryForm = ({
           <SaveQueryModal
             queryValue={lastEditedQueryBody}
             apiTeamIdForQuery={apiTeamIdForQuery}
-            saveQuery={saveQuery}
+            saveQuery={onSubmitNewQuery}
             toggleSaveQueryModal={toggleSaveQueryModal}
             backendValidators={backendValidators}
             isLoading={isQuerySaving}