diff --git a/frontend/src/metabase/query_builder/actions/models.js b/frontend/src/metabase/query_builder/actions/models.js index 73ec6f11918bfa12a0df1ec342062a794b881d1d..dd7d7304ab7235a251990b8b8914f62125cb020b 100644 --- a/frontend/src/metabase/query_builder/actions/models.js +++ b/frontend/src/metabase/query_builder/actions/models.js @@ -1,4 +1,5 @@ import { createAction } from "redux-actions"; +import { push } from "react-router-redux"; import { merge } from "icepick"; import { t } from "ttag"; @@ -19,6 +20,10 @@ export const setDatasetEditorTab = datasetEditorTab => dispatch => { dispatch(runDirtyQuestionQuery()); }; +export const onCancelCreateNewModel = () => async dispatch => { + await dispatch(push("/")); +}; + export const CANCEL_DATASET_CHANGES = "metabase/qb/CANCEL_DATASET_CHANGES"; export const onCancelDatasetChanges = () => (dispatch, getState) => { const cardBeforeChanges = getOriginalCard(getState()); diff --git a/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetEditor.jsx b/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetEditor.jsx index 6cc2c8f15a17d9d5c8f0827c797f34a1f2a0af2c..72298f8ce4b329b80f1ab21300ef1ce239001839 100644 --- a/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetEditor.jsx +++ b/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetEditor.jsx @@ -8,6 +8,7 @@ import { merge } from "icepick"; import ActionButton from "metabase/components/ActionButton"; import Button from "metabase/core/components/Button"; import DebouncedFrame from "metabase/components/DebouncedFrame"; +import Confirm from "metabase/components/Confirm"; import QueryVisualization from "metabase/query_builder/components/QueryVisualization"; import ViewSidebar from "metabase/query_builder/components/view/ViewSidebar"; @@ -59,6 +60,7 @@ const propTypes = { setDatasetEditorTab: PropTypes.func.isRequired, setFieldMetadata: PropTypes.func.isRequired, onSave: PropTypes.func.isRequired, + onCancelCreateNewModel: PropTypes.func.isRequired, onCancelDatasetChanges: PropTypes.func.isRequired, handleResize: PropTypes.func.isRequired, runQuestionQuery: PropTypes.func.isRequired, @@ -176,6 +178,7 @@ function DatasetEditor(props) { setDatasetEditorTab, setFieldMetadata, onCancelDatasetChanges, + onCancelCreateNewModel, onSave, handleResize, onOpenModal, @@ -305,7 +308,11 @@ function DatasetEditor(props) { [initialEditorHeight, setDatasetEditorTab], ); - const handleCancel = useCallback(() => { + const handleCancelCreate = useCallback(() => { + onCancelCreateNewModel(); + }, [onCancelCreateNewModel]); + + const handleCancelEdit = useCallback(() => { onCancelDatasetChanges(); setQueryBuilderMode("view"); }, [setQueryBuilderMode, onCancelDatasetChanges]); @@ -423,11 +430,21 @@ function DatasetEditor(props) { /> } buttons={[ - <Button - key="cancel" - onClick={handleCancel} - small - >{t`Cancel`}</Button>, + dataset.isSaved() ? ( + <Button + key="cancel" + small + onClick={handleCancelEdit} + >{t`Cancel`}</Button> + ) : ( + <Confirm + key="cancel" + action={handleCancelCreate} + title={t`Cancel creating model`} + > + <Button small>{t`Cancel`}</Button> + </Confirm> + ), <ActionButton key="save" disabled={!canSaveChanges} diff --git a/frontend/test/metabase/scenarios/models/create.cy.spec.js b/frontend/test/metabase/scenarios/models/create.cy.spec.js index 58eb415ed21849a736869ff7de821f98deef37c6..dcac6a4467d02d6e9ceb8db68eb90dd6d3454895 100644 --- a/frontend/test/metabase/scenarios/models/create.cy.spec.js +++ b/frontend/test/metabase/scenarios/models/create.cy.spec.js @@ -10,9 +10,14 @@ describe("scenarios > models > create", () => { it("creates a native query model via the New button", () => { cy.visit("/"); - cy.findByText("New").click(); - cy.findByText("Model").click(); - cy.findByText("Use a native query").click(); + goFromHomePageToNewNativeQueryModelPage(); + + // Cancel creation with confirmation modal + cy.findByText("Cancel").click(); + cy.findByText("Yes").click(); + + // Now we will create a model + goFromHomePageToNewNativeQueryModelPage(); cy.get(".ace_editor").should("be.visible").type("select * from ORDERS"); @@ -25,3 +30,9 @@ describe("scenarios > models > create", () => { cy.findByText("Saved"); }); }); + +function goFromHomePageToNewNativeQueryModelPage() { + cy.findByText("New").click(); + cy.findByText("Model").click(); + cy.findByText("Use a native query").click(); +}