diff --git a/frontend/pages/queries/edit/EditQueryPage.tsx b/frontend/pages/queries/edit/EditQueryPage.tsx index d05f6dc3ea..d677fdf5ac 100644 --- a/frontend/pages/queries/edit/EditQueryPage.tsx +++ b/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 = ({ { isStoredQueryLoading={false} isQuerySaving={false} isQueryUpdating={false} - saveQuery={jest.fn()} + onSubmitNewQuery={jest.fn()} onOsqueryTableSelect={jest.fn()} onUpdate={jest.fn()} onOpenSchemaSidebar={jest.fn()} diff --git a/frontend/pages/queries/edit/components/EditQueryForm/EditQueryForm.tsx b/frontend/pages/queries/edit/components/EditQueryForm/EditQueryForm.tsx index 8d6354b5e7..3ccecc8670 100644 --- a/frontend/pages/queries/edit/components/EditQueryForm/EditQueryForm.tsx +++ b/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 = ({